解説 例えば、以下のような構造。 div の中に2つの要素があり、display: flex で横並びにしている。 ここで、右側の要素は height: 100px を指定している。 すると、左側の要素も height: 100px となってしまう。 左側の要素の height を保つ 方法。 解決策 …
Next.js の Next/Image を利用しているコンポーネントを storybook で表示しようとしたところ、 png 画像が表示されませんでした。（以下のような状態。 Devtools の Network タブで見ても、404 が返ってきていました。 なぜかsvg 画像は問題なく表示されて…
問題 Angular でのアプリケーション開発では、Service を利用してロジックを分離することがあるかと思います。 Template から Service のメソッドを呼び出すには、普通は Component を経由するかと思います。 @Injectable() export class FooService { doSom…
Jest でモック関数を作成し、呼び出し内容をテストしたい場合があると思います。 そのときに、toHaveBeenCalledWith を使えば、呼び出し時の引数もテストできます。 しかし、 toHaveBeenCalledWith の中身が複雑・膨大になるような場合は、snapshot を利用し…
GithubActions で Node.js を利用する際に、バージョン情報をベタ書きしていることはあると思う。 それを動的化する方法。 例えば、 nvm を利用していて .nvmrc ファイルが存在する場合、node-version-file: '.nvmrc' を指定すれば OK。 jobs: build: steps:…
概要 Next.js は多言語化機能を提供している。 Advanced Features: Internationalized Routing | Next.js 例えば、 <html> タグの lang 属性は自動で書き換えてくれる。 しかし、hreflang の設定は、必要とあらば自前で実装する必要があった。 hreflang とは そも</html>…
概要 HTML の <textarea /> には autofocus という属性があり、これを指定するだけでフォーカスが効きます。 textarea - HTML: HyperText Markup Language | MDN ただし、初期状態でテキストが入力されている場合、文頭にカーソルが置かれてしまいます。 そんな時は、set</textarea>…
Angular v11 から HMR（Hot Module Replacement） が利用できるようになった。 Version 11 of Angular Now Available | by Mark Techson | Angular Blog ng serve --hmr とフラッグをつけるだけなので、設定が非常に簡単。 環境ごとに区別したい場合は、npm …
概要 React アプリを開発しているときに、ルーティング遷移前に確認モーダルを出したい時がある。 「このページを離脱してもいいですか？」のような。 React Router の Prompt を利用すると、簡単に確認モーダルを実装できる。 React Router: Declarative Ro…
概要 Angular を v6 の頃から利用しており、ずっと TSLint を利用していた。 しかし、TSLint が deprecated になってしまったので、ESLint に移行した。 やったこと angular-eslint による移行 以下の記事を読む。 Angular: ESLintサポートの現状 2020 Autum…
