新しいことにはウェルカム

技術 | 電子工作 | ガジェット | ゲーム のメモ書き

JavaScript

Chakra UIでゆるくサイトを作ってみる

Reactでサンプルサイトを作る時など、サイトデザインはあまり深く考えず、有りものの設定を組み合わせて、ササッと手軽に作りたいことがあります。 普段、ReactのUIコンポーネントは、Microsoft Office365で使われている、UI Fabric(現 Fluent UI)を使って…

AWS Amplify + React で必要最小限の認証サイトを作る方法メモ

認証機能付きReactサイトを手軽に作りたかったのですが、都度バックエンドを構築するのが面倒で諦めてました。 しかし、AWS Amplifyを使えば、手軽にバックエンドを構築できるのではと試してみました。 一通り欲しかった機能は試したので、再利用可能なよう…

AWS Amplify のLambda FunctionをTypeScriptで書く方法

AWS AmplifyでLambda Functionを追加すると、JavaScriptで雛形が生成されるので、それをTypeScriptにする方法メモです。 下記ドキュメントを参考にしました。 https://docs.amplify.aws/cli/function/build-options 手順 Functionを追加すると、下記のフォル…

VSCodeのTypeScriptのバージョンを変更する

create-react-app app-name --template typescriptで、TypeScriptのReactアプリを作って、VSCodeで編集しようとすると Cannot use JSX unless the '--jsx' flag is provided. ts(17004) というエラーが。 調べたところ、Reactのバージョン17から、TypeScript…

CloudFormationは、AWS CDKから使うのが正解な気がしてきた

以前、AWS CloudFormationテンプレートを手書きしようとして挫折しました…。 www.kwbtblog.com その時学んだのは、CloudFormationテンプレートは人の手で書く類のものではなく、何かしらのツールを使って生成するものだなと。 そして、そのためのツールが、A…

Facebook公式のReactの状態管理ライブラリRecoilは、Reduxの代わりになりそう

Reactの状態管理はReduxが有名で、大衆迎合主義の自分としては、ご多分に漏れずReduxを使っています。 ただ、Reduxを使っていてしんどいなぁと感じるところがいくつかあります。 1つは、とにかくボイラープレートが多いことです。 ちょっとしたステート(変…

ReactのConcurrent Mode(並列モード)をTypeScriptで使う方法

現時点でまだ正式リリースされていない、ReactのConcurrent ModeをTypeScriptで試す方法のメモです。 型関連でエラーが出ることが多いので、その対処方法をメモ書きとして記載しました。 インストール create-react-appでTypeScriptのテンプレートを作成し、…

JavaScriptでSQLiteを使う方法メモ

JavaScriptでSQLiteを使う方法メモです。 あまり凝ったことはせず、必要最低限の機能に絞ってまとめました。 SQLiteそのものの使い方は割愛しますが、こちらが詳しいのでご参照ください。 インストール パッケージ「sqlite3」を使いました。 npm install sql…

JavaScriptからGo言語に乗り換えた感想

JavaScript(TypeScript)で書かれたプログラムを、Go言語で書き直しました。 その動機や、書き換えた結果などを書こうと思います。 また、今回Go言語が初めてだったので、Go言語とはどういったものかや、Go言語をやってみた感想なども合わせて書こうと思いま…

JavaScriptで同時実行数を指定しつつ並行実行させる方法

沢山のタスクがあって並行処理したいのですが、全てを並行実行させると重くなってしまうので、同時実行数を指定しつつ並行実行させたい時があります。 恥ずかしながらJavaScriptでそれをやる方法を知らず、代案として、処理したいタスクを同時実行数づつに分…

Dockerのpuppeteerが突然動かなくなった

普段Webのクローリングにpuppeteerを使っていて、puppeteerの実行はDockerで行っています。 クロール項目を追加することがあって、プログラムを修正してDockerでビルドして実行したところ、下記のようなエラーが出て動きませんでした。 /node_modules/puppet…

Node.jsのstream(ストリーム)の使い方メモ

データ処理を行う時、ついつい面倒くさくて、全てのデータをメモリに読み込んでから処理しがちです。 データサイズが小さい時は問題ないのですが、巨大なデータを扱う場合は、メモリを大量に消費しますし、1つのデータの読み込みや書き込みが完了するまで、…

Google Cloud Storageでファイルとディレクトリを区別する方法

Google Cloud Storageで、サブディレクトリ内のファイル一覧を取得して、それらのファイルの処理をしようとしました。 しかし、ファイルがおかしいとエラーが出るので見てみたら、取得したファイル一覧に、サブディレクトリが含まれていました。 原因 前に勘…

Google Cloud Storageのサブディレクトリ一覧をNode.jsで取得する方法

以前、Google Cloud Storageのサブディレクトリ一覧を、GCP Pyhtonライブラリを使って取得したのですが、そのNode.jsバージョンです。 Pythonバージョンはこちら www.kwbtblog.com 手順 GCP Node.js SDKのドキュメントにサンプルがあるので親切ですね。 http…

JavaScriptで、Excelで出力した、改行・カンマ付きCSVファイルを読み込む方法

CSVファイルの読み込みは、今までSheetJSを使っていました。 しかし、どうしても文字化けしてうまく読み込めないCSVファイルがあったので、他のライブラリを試してみることにしました。 npmで「csv」で検索すると一番上に出てくる、その名も「csv」というラ…

Twitter APIでデータ収集してみる

世の中の動向を知るのに使えないかと、Twitterのデータを、Twitter APIを使って取得してみました。 結論から言うと、Twitter APIの制限がキツイと噂には聞いていましたが、本当にキツ過ぎて使い物になりませんでした…。 Twitter APIでデータを取得するところ…

Microsoft Graph (Office365) API のトークンを取得して更新する方法

Web版のOffice365を操作する方法の1つに、Microsoft Graph (Office365) APIというものがあります。 例えば、Microsoft Graph (Office365) APIを使えば、Office365の外部から OutLookからメール送信 Excel Onlineのファイル編集 SharePointのファイル取得 な…

JavaScriptの日付演算ライブラリMoment.jsの使い方メモ

JavaScriptで日付演算をする際、組み込みのDate関数は扱いが難しいため、一般的に何かしらのライブラリを使います。 ライブラリは、よく見かける「Moment.js」を使っています。 何度やっても使い方を忘れるし、同じ所でハマっているので、自分用使い方メモを…

JavaScriptでExcelファイルを、SheetJS(xlsx)を使って読み込む方法メモ

JavaScript(TypeScript)でExcelファイルを読み込むのに、SheetJS(xlsx)を使っています。 使い方はちょっとクセがあって、すぐに忘れてしまうので自分用使い方メモです。 マニュアル https://www.npmjs.com/package/xlsx インストール npm install xlsx …

PHPのmcryptで暗号化されたデータをNode.jsで復号化する方法

PHPのmcryptで暗号化されたデータを、Node.jsで復号化しようとしてハマったので、その原因と解決方法メモです。 状況 PHPでAES256-CBCで暗号化した物ですよと言われて受け取ったデータを、Node.jsで復号化しようとするとエラーになりました。 データは暗号化…

Node.jsでAES暗号化・復号化してみる

Node.jsで、AES暗号化・復号化する機会があったので、そのメモです。 暗号化アルゴリズム「AES-256-CBC」で行いました。 ざっくりAES CBC暗号化について AES CBCは、任意の長さのバイナリデータを、鍵を使って暗号化し、同じ鍵を使って復号化する暗号化アル…

Puppeteerのクローリングで、Tableタグの表のデータをCSV出力する方法

クローラーとしてPuppeteerを使っています。 クロールしていて、サイトのTableタグで作られた表のデータを取得したい時があります。 Pythonなら、htmlからTableタグ以下のみを抽出し、それからPandasを使ってDataFrameを生成することにより、エレガントにで…

Passport.js の使い方メモ

Passport.jsを使う機会があったので、また必要になった時用のPassport.jsの使い方個人メモです。 Passport.jsとは Passport.jsとは、Node.js+Expressで作ったWebサイトに、ユーザーがログインできる、ユーザー認証を入れるためのライブラリ ユーザー認証の種…

WSL に nvm で Node.js 環境を構築する

Pythonの環境構築と同様、WSLのUbuntuのバージョンを新しくしたので、Node.js環境を入れ直した時のメモです。 JavaScriptアプリを作った時期によって、使っているNode.jsのバージョンがまちまちなので、都度バージョンを切り替えられるよう、Node.jsバージョ…

Node.jsを初めて学ぶにあたってハマったことや勘違いしていたことなど

Node.jsを使っているのですが、Node.jsを学ぶ前と後では、Node.jsに対する印象が結構違ったので、Node.jsの簡単な説明と、学ぶにあたって個人的にはまったところを簡単にまとめました。 Node.jsとは Node.jsとは、JavaScriptの実行環境のことです。 JavaScri…

React Hooksが正式リリースされたので公式マニュアルを読んでみた

最近Reactを触ってませんでしたが、React Hooksが正式リリースされたとのニュースがあったので、どんなものかとReact Hooksの公式マニュアルを読んでみました。 reactjs.org 要約 Reactではコンポーネントを作る方法として、関数による方法と、クラスによる…

JavaScriptのArray.reduce()をもう少しちゃんと理解する

JavaScriptのArray.reduce()はちょっとクセがあって、今まで敬遠してたのですが、理解だけはしておこうとまとめました。 Array.reduce()とは一言で言うと、配列の要素を集めて1つのアウトプットを返す関数です。 まずは基本 const arr = ["A", "B", "C"]; c…

RaspberryPiでPuppeteerを動かす方法

RaspberryPiでPuppeteerを動かそうとするとbrowser is not definedとエラーになる時の対処方法です。 原因 npmで「Puppeteer」をインストールすると、新たにChromiumもnode_modulesにインストールされ、PuppeteerはデフォルトではこのChromium使います。 し…

JavaScriptのasync/awaitをもう少しちゃんと理解する

今までJavaScriptのasync/awaitを、理解が曖昧なまま何となく使っていて、うまく行かない時はPromiseを使ったりしていました。 しかし、最近はasync/awaitが使われているのをよく目にするようになってきたため、もう少しちゃんと理解しないといけないかなぁ…

TypeScriptのススメ

JavaScriptのプログラムを書く時はTypeScriptを使っています。 元々はJavaScriptを直接書いていたのですが、使いたかったReactのコンポーネントがTypeScriptで書かかれていたため、試しにTypeScriptで書いてみたのがきっかけでした。 結局そのコンポーネント…