ECMAScript Modules が動く場所での最小構成フロントエンド

ECMAScript Modules が直接動く環境でしか使われないアプリケーション(自分用便利ツールとか)のフロントエンドなら、モジュールバンドラーは要らないじゃんという構成。

なんとびっくり書いたコードがそのままブラウザで動いてすごい。

作ったもの

２つのテキストの差分を見せてくれるやつ。

• https://sosuke-diff-editor.netlify.app/
• https://github.com/sosukesuzuki/diff-editor

使った技術

• preact
  • サイズが小さい & UI が宣言的に書ける & 状態管理がいい感じ
• htm
  • コンポーネントを JSX 風に書きたい
• goober
  • styled-components 風小さいライブラリ
• Skypack CDN
  • npm パッケージを ESM としてひっぱってこれる
• import maps
  • CDN の URL を毎回書くのはめんどうくさい
• workerize
  • Web Worker を簡単に使えるやつ

使わなかった技術

• TypeScript
  • 正直ほしいけど、ビルドのステップを完全に消したかった
• webpack
  • ESM はブラウザで動くのでバンドルしなくても動く
  • コードベースがでかくなるとモジュールの取得回数が増えてパフォーマンス的にきつくなってきてほしくなるかも

Linter と Formatter

ここはいつもどおり ESLint と Prettier。

eslint-plugin-import の extensions ルールは入れたほうが良い。ESM ではファイルの拡張子が必須なので、それを Linter で検知できる。

import foo from "./foo"; // 🙅 だめ

import foo from "./foo.js"; // 🙆 よい

ディレクトリ構成

みんな好きなようにやればいいけど自分はこうした。デプロイは Netlify で /src をそのまま指定した。package.json とか node_modules とかは linter と formatter を入れるためにあります。

- package.json
- package-lock.json
- node_modules
- src
  - index.html
  - index.js
  - components
    - ...
  - hooks
    - ...

感想

開発体験は微妙に悪い。

• HMR とかない
• 型もない
• npm install もない

小さいソフトウェアなので最初の HTTP GET の回数は 20 回程度。普通に使う上でパフォーマンスが気になることはなかった。