> console.log(new Array(120).fill('foo')) // 120個の要素 'foo' を持つ配列を表示 [ 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'fo…

プロジェクトの Node.js v18 にアップグレードした。 すると、storybook のビルドが通らなくなってしまった。 $ npm run storybook ｢wdm｣: wait until bundle finished: node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen); ^ Erro…

問題 Next.js でビルドする時に、エラーが発生した。 $ npm run build > project-name@1.0.0 build > next build info - Loaded env from /Users/me/project-name/.env.local info - Linting and checking validity of types SyntaxError: Unexpected token …

React でのアプリケーション開発にて、Recharts はメジャーなグラフライブラリの1つです。 そんな Recharts では、 style という props からスタイル指定が可能です。以下は、Y軸へのスタイル指定の例。 <YAxis // ...ここにその他の props たち style={{ fontSize: '12px', fontWeight: 300, fontFamily: 'oswald' }} /> CSS Custom Properties を利用したバージョンが以下</yaxis>…

問題 tsparticles を使うと、サイト内に動的な演出ができて便利です。 github.com しかし直近リリースされた v2.4.0 に対応したところ、tsparticles の canvas が前面に出てきてしまいました…。 github.com 原因 原因は、canvas の inline style を消すのが…

tsParticles を利用すると、ウェブページ内に動的な演出を追加できます。 github.com 今回、 tsParticles の links というプリセットを設定しました。 github.com ところが、ドキュメントを見ても線の色を変える方法が分からない…。 ソースコードを見ていた…

概要 Next.js v13 がリリースされました。 nextjs.org 主な変更点の1つが @next/font の追加。@next/font には以下のような特徴があります。 Automatically optimizes your fonts, including custom fonts（カスタムフォントを含めたフォントの最適化） Remo…

React Portal を使うと、コンポーネント構造の制約を受けずに、アプリケーション内の任意の箇所に DOM を挿入することができます。 モーダルの実装などで役に立つかと思います。 ja.reactjs.org そんな React Portal ですが、Next.js の SSR/SSG を利用した…

解説 例えば、以下のような構造。 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:…