JavaScript

npm installで使える国旗アイコンセット

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

ESLintでスクリプトファイル名のフォーマットを指定する

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

JavaScriptで文字列を繰り返したり、配列を特定の値で埋める

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

exportしているモジュールのJSDocやTSDocを必須にする

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

JavaScriptのタグ付きテンプレートで、JavaのString#formatのような関数を作る

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

TestCafeでPage Object Patternを試してみる

前回、TestCafeでもPage Modelという名前でPage Object Patternが使えそうなことを調べた。 ちょっと試してみようと思ったのでメモ。 環境 TestCafe v1.14.0。 インストールにはNode.js v14.16.1、およびYarn v1.22.5を使用。 Page Object Patternとは ペー…

JavaScriptでE2Eテストを記述できる、TestCafeを試してみる

E2Eテストについてちょこちょこ調べていて、ブラウザ操作の自動化でSelenium以外に何かないかなと思っていたら、TestCafeが割と良さそうだったのでメモ。 環境 TestCafeとは インストール テスト実行 JavaScriptからの実行 テスト実装 fixtureとtest TestCon…

JavaScriptで毎回メソッド名を忘れる、insertAdjacentHTMLとinsertAdjacentElementについて

JavaScriptで、「文字列をElementにHTMLとして追加できて、 innerHTML じゃなくて、第1引数で追加位置を指定できるメソッド、名前なんだっけ?」と毎回なるのでメモ。 insertAdjacentHTML insertAdjacentElement 備考 insertAdjacentHTML developer.mozilla.o…

Markdownでテスト仕様書を書けるGaugeを試してみる

E2EテストやATDDについて調べていたら、 Markdown でテスト仕様書を書ける Gauge を知り、ちょっと試してみたのでメモ。 環境 Gauge とは インストール 使い方 プロジェクトの作成 Specification の実行 テスト結果の確認 Specification の記述 見出しとシナ…

TypeScriptの、はてなふたつの演算子や、はてなドットの演算子は、JavaScriptの新しい構文だった

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

Vuexでよく見る波括弧を使った引数の代入は、分割代入というJavaScriptの新しい構文だった

Vuex の action の第1引数で、 method({ commit }) といった、波括弧を使ったちょっと気持ち悪い記述を見かける。 実際に渡される context から context.commit を抽出しているんだろうと思って何となく使っていたが、正確にはどういう機能なのかと思って調…

UserScriptのURLからのインストールと自動更新させる方法

社内向けにちょこちょこUserScriptを書いているが、作成時や更新のたびに、メール添付したりSlackなどのチャットツールでソース流したりと、配布するのが面倒だった。 今回、更新頻度が高くなりそうなスクリプトを書くついでに、UserScript配布サイトのよう…

Element.classListをInternet Explorerで使うときの注意

IEだとうまく動かないJavaScriptがあり、調べたところ Element.classList が原因だった。 まだまだIE11は切れない環境なので、備忘としてメモ。 環境 IEでは動かないメソッド add, removeの引数に配列を渡せない toggleの第2引数を渡せない replaceが未実装 …