コンパイラかく語りき

import { Fun } from 'programming'

flutter アプリで表示するウェブビューを React.js/Next.js で作る(ウェブビュー判定、イベントハンドラ呼び出し)

概要 ネイティブアプリを開発する際に一部のページをウェブで表示する、という要件はあると思います。(いわゆるウェブビュー) その際に、ウェブビューを React.js と Next.js で作成する方法です。 ※ちなみに筆者はネイティブアプリ開発の経験はありません…

【VSCode】最近使用した項目を開く(File: Open Recent)選択時に、新しいウィンドウで開くようにする settings.json 設定

VSCode には 最近使用した項目を開く(File: Open Recent) というコマンドがあります。 選択した項目を、VSCode で開くことができます。 筆者は Github のレポジトリごとに VSCode のウィンドウを開くようにしています。(例: UI 開発のコードベースと API …

Node.js REPL で ... more items と省略された内容を全て出力表示する

> 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 のビルドが通らない問題への対応(error:0308010C:digital envelope routines::unsupported)

プロジェクトの 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 のビルド時に SyntaxError: Unexpected token < in JSON が出てしまう問題への対処法(package-lock.json が原因の場合)

問題 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 …

【Recharts】スタイル指定に CSS Custom Properties を利用する方法

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

【tsparticles】canvas 要素への z-index 指定方法や、前面に出過ぎる問題への対処法

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

【tsParticles】preset links の線の色を変更する

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

Next.js v13 で導入された @next/font を使って、ウェブフォント読み込みを最適化する

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

【React/Next.js】SSG/SSR 環境で React Portal を利用する方法

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