JavaScript

.execCommand(insertText...) .execCommand(insertHTML...) の代替実装を考える

JavaScript でカーソルがある位置に文字列を挿入したいときは execCommand を使用すると簡単に実現することができました。 developer.mozilla.org しかし、execCommand はブラウザ間での不具合も多く、現在は非推奨のAPIになっています。 今回は非推奨になっ…

画像の読み込みに失敗したときに代替画像を表示する [JavaScript/React]

まずは JavaScript で実装してみます。 <img id="image" src="https://" /> <script> const imgEl = document.getElementById("image"); imgEl.onerror = () => { imgEl.onerror = null; imgEl.src = "https://placekitten.com/200/200"; }; </script> 画像の読み込みに失敗したときに onerror が実行されます。…

cross-envで指定した環境変数がコード上でundefinedになるのをなんとかする

開発用と本番用で表示する View を切り替えたいときに環境変数を使うことがあります。 以下は yarn + webpack + React で環境構築して、環境変数をコードから参照して表示するViewを切り替えている例です。 import React from "react"; function App() { ret…

Jestでwindowオブジェクトをモックする方法

この記事では以下の Window.js と CheckHostName.js を使用します。 export const getHostName = () => { return window.location.hostname; }; import * as Window from "./Window"; export const isTwitter = () => { return window.location.hostname ===…

VSCodeで特定のディレクトリ以下の未使用import文をすべて削除する [Javascript/TypeScript]

ファイルの保存時に organize imports をしていれば未使用の import文 が commit されることはほぼないと言っても過言ではありません。 例: VSCode でファイル保存時に未使用の import文 を削除 & 自動ソートする設定。 settings.json に以下を記述する。 "e…