ビルドして github pages に上げたものの css などのロードに失敗していた。
devtools の console を見ると 404 だが branch には上がっている。原因は github pages の URL がドメインとプロジェクト名(${domain}/${project_name})なのに、ドメインの下に直接 css ファイルなどを読みにいっていたこと。next.config.jsにassetPrefixを指定して修正。
css の読み込みがめちゃくちゃ遅い。devtools の network を見ると 1 秒以上かかっている上に 2MB を超えていた。
なんとなく Tailwind CSS を全部入りで取っているようなサイズだったので、purge の設定を追加した。早くなった。
宣言的 UI の今どきなライブラリで、値の状態管理をうまくやって再描画をしてくれる。
hooks の登場によってロジックを UI から切り離しやすくなった。
Vue や svelte がライバル。どちらかというと HTML に近いテンプレート構文より JS に近い JSX が好き。
React をベースにしたフロントエンドアプリケーションのフレームワーク。
ルーティングやバンドルシステム、ビルドツールを内包したすごいやつ。
Nuxt.js がライバル。composition api が使える Vue3 に対応した Nuxt.js が出たらそっちも触りたい。
JavaScript に型の恩恵を授けてくれる AltJS。型と補完と linter の介護のもとで開発をしている。 新しく始める JS のプロジェクトなら使わない理由はないと思う。弱い人間なので。
コンポーネントに tailwind で定義済みの class を指定することでスタイルが当てられる。
tailwind での class 名を覚える必要はあるが、極力 css を書かずに開発がしたいと思ったので入れた。カスタムの class も定義できる。
クラス名を考えなくていい・ビルド時に最適化をする思想で Lightwind CSS というものもある。
class 名ではなく css を直接書くので一般的なやり方に近く移行は楽そう。
markdown 内で jsx を書けるようにしたもの。markdown のタグをコンポーネントに変換もできてスタイルをいじるのが楽。
フォーマッター。single quote・改行のルールなどコードの見た目に関するところの修正をしてくれる。
構文チェッカー(linter)。ECMAScript 的におかしいものやプロジェクトのルールで避けたいものを機械的にチェックしてくれる。
ページの公開(プレビュー)に使っている。多分そのうち変える。
PR を出したときや push した時に lint とビルドテストをしている。
master に変更が起きた時に github pages の方にビルドして上げ直すようにしている。便利。