JavaScript
Node.jsで、ファイル名から拡張子を取るときに、 fileName.split('.').slice(-1)[0] という書き方を同僚がしていた。 Node.jsのバージョンを18にしていたので、コードレビューで、「配列の末尾を取りたいなら .at(-1) でいいよ」と指摘したら、 at を知らな…
前回書いたLangChain.jsのサンプルプロジェクトの設定と実行を、別PCで試してみたらどうもうまく動かない。 なんでだろうと思って調べると、本家のPython版LangChain、およびLangChain.jsの公式ドキュメントのURLが変わっていたのでメモ。 変更前後のURL サ…
「ChatGPT使って何かやりたい」的なふわっとした要望のもと、OpenAI APIの検証をすることになった。 APIを素で叩くのはちょっと辛いなあと思っていたので調べると、LangChainを使うのがよさそうに思えたが、チーム内でPython使えるのが自分しかいない。 他の…
以前、Tailwind CSSを使ったコンポーネントの設定を複数のプロジェクトで使いまわす方法を調べた。 GitリポジトリとしてGitLab.comを使っており、GitLabのパッケージレジストリにnpmパッケージを公開することで、公開範囲を絞ることができるため、その方法を…
Node.js のアプリケーション内で、国旗の画像を使うことになった。 画像を用意するのが面倒だったので、 npm install して使える国旗のアイコンセットがないか調べたのでメモ。 候補 flag-icons country-flag-icons flagpack Iconify パッケージ選定 その他 …
Next.js + TypeScriptのプロジェクトで、TypeScriptファイル名はローワーキャメルケースにするようコーディング規約を定めていた。 ただ、Javaのように言語側でフォーマットが決まっていないからか、個人の癖が出やすく、アッパーキャメルケース、スネークケ…
JestやStorybookで、テストや表示用に長い文字列や配列を用意するがある。 リテラルで書いていた同僚に、コードレビューで「こんなやり方ができるよ」と教えたら感心されたのでメモ。 文字列 文字列の繰り返し 左埋め・右埋め 配列 配列を特定の値で埋める e…
TypeScriptでの開発時、exportしているモジュールに対してはTSDocを書くようコーディング規約を定めたが、ヒアドキュメントを書く習慣のないメンバーが多く、書き漏れが頻発した。 都度コードレビューで指摘するのも面倒なので、ESLintで何とかならないかと…
Jestでパラメーター化テストする時の it.each のような、バッククォートで囲った中で ${value} を使う書き方について調べてみたところ、タグ付きテンプレートというらしい。 また、それを使ってJavaの String#format のような関数を作れたのでメモ。 タグ付…
前回、TestCafeでもPage Modelという名前でPage Object Patternが使えそうなことを調べた。 ちょっと試してみようと思ったのでメモ。 環境 TestCafe v1.14.0。 インストールにはNode.js v14.16.1、およびYarn v1.22.5を使用。 Page Object Patternとは ペー…
E2Eテストについてちょこちょこ調べていて、ブラウザ操作の自動化でSelenium以外に何かないかなと思っていたら、TestCafeが割と良さそうだったのでメモ。 環境 TestCafeとは インストール テスト実行 JavaScriptからの実行 テスト実装 fixtureとtest TestCon…
JavaScriptで、「文字列をElementにHTMLとして追加できて、 innerHTML じゃなくて、第1引数で追加位置を指定できるメソッド、名前なんだっけ?」と毎回なるのでメモ。 insertAdjacentHTML insertAdjacentElement 備考 insertAdjacentHTML developer.mozilla.o…
E2EテストやATDDについて調べていたら、 Markdown でテスト仕様書を書ける Gauge を知り、ちょっと試してみたのでメモ。 環境 Gauge とは インストール 使い方 プロジェクトの作成 Specification の実行 テスト結果の確認 Specification の記述 見出しとシナ…
TypeScript 3.7以降で使える ?? 演算子。 || 演算子より厳密に undefined や null を判定してくれるので多用していたが、こいつの名前は何だろうと思って調べてみたところ、Nullish Coalescing Operator、日本語だとNull結合演算子というらしい。 ついでに、…
Vuex の action の第1引数で、 method({ commit }) といった、波括弧を使ったちょっと気持ち悪い記述を見かける。 実際に渡される context から context.commit を抽出しているんだろうと思って何となく使っていたが、正確にはどういう機能なのかと思って調…
社内向けにちょこちょこUserScriptを書いているが、作成時や更新のたびに、メール添付したりSlackなどのチャットツールでソース流したりと、配布するのが面倒だった。 今回、更新頻度が高くなりそうなスクリプトを書くついでに、UserScript配布サイトのよう…
IEだとうまく動かないJavaScriptがあり、調べたところ Element.classList が原因だった。 まだまだIE11は切れない環境なので、備忘としてメモ。 環境 IEでは動かないメソッド add, removeの引数に配列を渡せない toggleの第2引数を渡せない replaceが未実装 …