前回、 Amplify Gen2のLINEログイン時にLINEのIDトークンを取得、検証できた。 今回はIDトークンの検証結果から、LINEユーザーIDを取得し、保存するまでをメモ。 環境 前々回・前回同様、 @aws-amplify/backend v1.0.4, @aws-amplify/backend-cli (ampx) v1.…

前回、Amplify Gen2にLINEをOIDCプロバイダーとして登録し、ログインできるようにした。 続いて、LINE公式アカウントのユーザーと紐づけたいので、アクセストークンまたはIDトークンを取得できないか調べたところ、できたのでメモ。 環境 調査 実装 amplify/…

前回書いたLangChain.jsのサンプルプロジェクトの設定と実行を、別PCで試してみたらどうもうまく動かない。 なんでだろうと思って調べると、本家のPython版LangChain、およびLangChain.jsの公式ドキュメントのURLが変わっていたのでメモ。 変更前後のURL サ…

「ChatGPT使って何かやりたい」的なふわっとした要望のもと、OpenAI APIの検証をすることになった。 APIを素で叩くのはちょっと辛いなあと思っていたので調べると、LangChainを使うのがよさそうに思えたが、チーム内でPython使えるのが自分しかいない。 他の…

前回、ちらっとMapped Typesのプロパティの型を extends で切り替える方法を書いたが、他にもいろいろな指定方法があるのでメモ。 環境 実装例 直接指定 Conditional Types P を用いた型指定 プロパティ参照 関数の引数や戻り値 参考 振り返り 環境 TypeScri…

TypeScriptで、typeやinterface、classの総称型によって、プロパティの型を切り替えたり、削除したりすることができるのでメモ。 環境 方法 実装例 プロパティの型の切り替え プロパティの削除 参考 振り返り 環境 TypeScript v4.7.4 で確認。 方法 Conditio…

TypeScriptで、既存の型から一部のプロパティを、プロパティ名の部分一致で抽出・削除する方法をメモ。 環境 TypeScript v4.7.4 で確認。 プロパティ名の部分一致での抽出・削除方法 テンプレートリテラル内にUnionを用いると、すべての組み合わせの文字列リ…

React + Next.js で、多言語対応したアプリケーションを開発している。 日本語から、英語などのラテン文字で記述する言語に切り替えた場合、文字が長くなり、レイアウトが崩れることがあるため、各言語でのレイアウトを簡潔に確認したい。 アプリケーション…

Node.js のアプリケーション内で、国旗の画像を使うことになった。 画像を用意するのが面倒だったので、 npm install して使える国旗のアイコンセットがないか調べたのでメモ。 候補 flag-icons country-flag-icons flagpack Iconify パッケージ選定 その他 …

Next.js + TypeScriptのプロジェクトで、TypeScriptファイル名はローワーキャメルケースにするようコーディング規約を定めていた。 ただ、Javaのように言語側でフォーマットが決まっていないからか、個人の癖が出やすく、アッパーキャメルケース、スネークケ…

小ネタ。 TypeScriptでは、アロー関数でジェネリック関数を定義できる。 const generic = <T>(value: T) => ... 拡張子が .ts のファイル内では問題ないが、 .tsx のファイル内でこの記法を用いると、 <T> がタグの開始とみなされ、以下のコンパイルエラーが発生す</t></t>…

JestやStorybookで、テストや表示用に長い文字列や配列を用意するがある。 リテラルで書いていた同僚に、コードレビューで「こんなやり方ができるよ」と教えたら感心されたのでメモ。 文字列 文字列の繰り返し 左埋め・右埋め 配列 配列を特定の値で埋める e…

Storybookのストーリーファイルをtsxで記述しているが、TypeScriptをstrictモードにしているため、Decoratorを定義する際、引数に型を付けないとエラーになる。 // パラメーター 'Story' の型は暗黙的に 'any' になります。 const decorator = Story => ( <div style={{ maxWidth: '400px' }}> <Story /> </div>…

TypeScriptでの開発時、exportしているモジュールに対してはTSDocを書くようコーディング規約を定めたが、ヒアドキュメントを書く習慣のないメンバーが多く、書き漏れが頻発した。 都度コードレビューで指摘するのも面倒なので、ESLintで何とかならないかと…

TypeScriptのinterfaceやtypeで、関数やオブジェクトの型を定義する際、どんな書き方をすればいいかちょこちょこ迷うのでメモ。 関数 オブジェクト Union型をキーとしたオブジェクト 振り返り 関数 numberを引数に取り、stringを返す関数の場合、以下のよう…

Jestでパラメーター化テストする時の it.each のような、バッククォートで囲った中で ${value} を使う書き方について調べてみたところ、タグ付きテンプレートというらしい。 また、それを使ってJavaの String#format のような関数を作れたのでメモ。 タグ付…

Next.js と AWS Amplify を使ったプロジェクトで、TypeScriptのファイルに対してJestのテストを書いたら、 SyntaxError: Unexpected token 'export' エラーが発生。 このエラー自体はよくあるやつだが、設定を大きくいじらず解決する方法を調べるのに結構時…

JavaやKotlinを長く書いてきて、importの並び順、ソートはフォーマッターにお任せだった。 Next.jsをTypeScriptで書いているプロジェクトでも、Javaと同様、importの順序を統一したいと思い、設定したのでメモ。 環境 ESLintプラグインの導入 .eslintrc の記…

以前書いた記事の段階では、 typescript-generator で requiredAnnotations を指定すると、プリミティブ型のフィールド/GetterについてもOptional Properties(null設定可能)扱いとなっていた。 2021年3月の更新で、プリミティブ型をまとめて必須(非null)にで…

以前調査したtypescript-generator、その後もパラメーター調整しながら使用しているが、困ったのがヒアドキュメント。 Java側ではJavadocでクラスやプロパティの説明を書いているが、生成したTypeScriptのインターフェース定義ファイルにはデフォルトだと出…

TypeScript 3.7以降で使える ?? 演算子。 || 演算子より厳密に undefined や null を判定してくれるので多用していたが、こいつの名前は何だろうと思って調べてみたところ、Nullish Coalescing Operator、日本語だとNull結合演算子というらしい。 ついでに、…

フロントエンドをTypeScriptで記述することとなり、リクエストやレスポンスで受け渡すデータもTypeScriptで型定義したいという要望がでてきた。 バックエンドはSpring Bootを使ったJavaアプリケーションで、ダブルメンテになると面倒。 JavaのクラスからType…