HTMLを手書きしていた開発者のためのモダンフロントエンド入門書

2008年、あなたはindex.htmlというファイルを保存し、それをFTPクライアントにドラッグし、小さなプログレスバーが右に這っていくのを見ていました。それが終わると、あなたのウェブサイトが存在しました。それはInternet ExplorerとFirefox、そしてChromeという新しいブラウザで動作しました。あなたは「ビルド」を実行しませんでした。あなたは1,400個のパッケージをインストールしませんでした。あなたはマークアップを書き、スタイルを書き、ブラウザはあなたが指示した通りに正確に動作しました。あなたはこれが得意でした。 それから、iPhoneの発売から現在までのどこかの時点で、あなたがまばたきをしている間に、あなたが実際の製品を出荷するのに忙しい間に、分野全体が基礎から再構築されました。今や、初心者のチュートリアルは、あなたが聞いたことのない16種類のツールから始まり、その半分は日本語の「速い」という言葉にちなんで名付けられ、最初のコマンドは、たった一つのコンタクトフォームをレンダリングするために、アポロ誘導コンピューターが実行したコードよりも多くのコードをダウンロードします。 ここに良いニュースがあります。そして、それがこの全体像の要旨です。そのどれもが恣意的なものではありません。あなたがこれから出会うすべてのツールは、実際の傷の上にできた瘢痕組織です。誰かが本当の問題にぶつかり、修正を構築し、その修正が次の問題を生み出し、それが独自の修正を得て、20年間の合理的なステップの合計が、今日あなたが見上げている壮大で、疲弊する狂気の聖堂なのです。だから、リストを暗記するのではなく、順番に掘り下げていき、それぞれのツールがそれを正当化する痛みが現れるときにのみ登場するようにします。私たちは、謙虚な単一の<button>という一つの標本をずっと追いかけ、業界がそれに何をするかを見守ります。そして、私たちが岩盤にたどり着いたとき、あなたは笑うでしょう。なぜなら、2026年のフロンティアは、あなたがFTPでアップロードしたファイルと恐ろしいほど似ているからです。すべてのツールは、実際の傷の上にできた瘢痕組織です。傷を追いかければ、地図は自ずと描かれます。すべてを解き放つ一つのアイデア。 レイヤーI — 4M 2006 – 2010 かゆみ 「ページ全体をリロードせずに、ページの一部を変更したいだけです。」最初の傷は小さく、合理的でした。ページの一部（メニューを開いたり、フォームを検証したり、セクションを読み込んだり）を、ページ全体のリロードによる白い点滅なしに変更したいと思いました。ブラウザは、XMLHttpRequestという厄介なものと、ブラウザごとに動作が異なる多数の気難しいDOMメソッドを使ってこれを行うことができました。そこで、この時代はjQueryを求め、それは本当に素晴らしいものでした。`$("#cart").load(...)`とすると、ブラウザ間の違いが溶け去りました。AJAX（リロードなしでデータをフェッチすること）が主流になりました。数年間は、これで十分でした。しかし、アプリケーションは野心的になり、より深い傷が開きました。データがJavaScript変数と画面上に存在するとき、あなたは同期マシンでした。価格を変更しますか？カートの合計、ヘッダーのバッジ、チェックアウトボタン、そして小さな概要ボックスを手動で更新することを忘れずに。一つでも見落とすと、UIはユーザーに嘘をつきます。この手作業による、成長するアプリ全体にわたるDOM操作は、このレイヤー以降のすべてが償おうとしている原罪なのです。 jQuery·レガシー Backbone.js·レガシー 成果物 — jQueryは今でもウェブの大きなシェアを占めていますが、誰も新しいプロジェクトをそれで作ろうとはしません。 レイヤーII — 9M 2010 – 2015 フレームワークの登場 「画面をデータに手動で同期させるのをやめてください。」同期の傷に対する解決策は、真に大きなアイデアでした。それは、宣言的UIです。ページを更新する手順（「バッジを見つけて、そのテキストを設定する」）を書くのではなく、特定のデータに対してページがどのように見えるべきかを記述し、フレームワークが手順を導き出します。あなたはDOMを触るのをやめました。あなたがデータを変更すると、画面がそれに追従しました。これが、あなたがよく目にする「リアクティブ」という言葉の意味です。 構築の単位はコンポーネントになりました。これは、自己完結型のUIの塊（そのマークアップ、その動作、その状態の一部）で、レゴのように構成します。Facebookから2013年に登場したReactは、コンポーネントとJSX（JavaScript内に書かれたHTMLのような構文で、いまだに人々を落ち着かせませんが）を組み合わせ、巧妙なトリックであるバーチャルDOMでこの時代を席巻しました。バーチャルDOMは、ページの軽量なコピーをメモリに保持し、変更ごとに差分を計算し、実際に異なるDOMノードのみを触るというものです。 そして、千の花が咲き乱れました。Vueはそれを親しみやすくしました。Angular（成熟した書き直し版で、2010年の「AngularJS」は死んでいます）は、エンタープライズ構造とTypeScriptをもたらしました。Svelteは、なぜブラウザにフレームワークを送り込む必要があるのかと問い、それ自体をコンパイルして消し去りました。SolidはJSXを維持しましたが、バーチャルDOMを捨てて外科的な更新を行いました。彼らが今すべて収束しているのは、シグナルです。これは、自分に依存するものを知っていて、それだけを更新し、それ以外は何もしない値です。 標本01 — ボタンがコンポーネントになる · 2013 layers: 6 // これはもうマークアップではありません。JavaScriptです。 // マークアップのように見せかけています。 function Buy() { return ( <button onClick={addToCart}> Buy </button> ) } Buy ボタンは、状態、props、親ツリーを持つようになりました。ブラウザ内のフレームワークランタイムなしでは存在できません。これを見るためには、すぐにビルドステップが必要になります — 掘り下げ続けてください。 ソース: ~140バイト 出荷されるもの: Reactランタイム ~45 KB ビルドステップ: 1（そして増加中） React Vue.js Angular Svelte SolidSolid Preact Qwik Lit コンポーネントフレームワーク — Reactが主流ですが、残りのものも活発です。 恐竜の脱出口 誰もがこの道を進んだわけではありません。頑固で増え続けるグループ、htmx、Alpine.js、RailsのHotwireは、原罪はサーバーを離れたこと自体にあると主張し、HTML-over-the-wireを取り戻しました。もしこのレイヤーがあなたに故郷を思い出させるなら、そのグループはあなたのために作られたものであり、私たちは岩盤でそこに戻ります。 レイヤーIII — 15M 2012 – 2018 ビルドステップ 「なぜもうファイルを開けないの？」このレイヤーが最も恨まれるので、それがなぜ存在するのかを正直に話しましょう。JavaScriptがページ全体を構築するようになると、2つの事実が衝突しました。第一に、ほとんどの期間、言語にはファイルを分割する方法（importなど）がなかったので、コミュニティは競合するモジュールシステム（NodeのCommonJSのrequire、そして公式のES Modulesのimport）を発明し、今日まで完全には一致していません。第二に、古いブラウザが理解できないモダンな構文やJSXを書きたいと思いました。そこで、変換レイヤーが登場しました。Babelは、明日のJavaScript（およびJSX）を昨日のものにトランスパイルするので、どんなブラウザでも実行できます。バンドラー（webpackが王様でした）は、何百もの小さなファイルをいくつかにつなぎ合わせます。なぜなら、古いHTTPでは、何百ものリクエストは遅かったからです。その過程で、それはミニファイ（空白を取り除く）、ツリーシェイク（使わないコードを削除する）、結果をチャンクに分割し、ソースマップを出力して元のコードをデバッグできるようにします。これらのジョブのバンドルが、まとめて「ビルド」です。そして、そのコストは？node_modules: あなたの依存関係、そしてその依存関係、そしてその依存関係が格納されているフォルダです。空のスタータープロジェクトでも、常に25万個のファイルが生成されます。それは宇宙で最も重いオブジェクトであり、今あなたのプロジェクトフォルダに置かれています。あなたの22バイトのボタンは、あなたが書かず、読むこともできない設定ファイルによって組み立てられた2メガバイトのバンドルで届けられます。 レイヤーIII · ビルド、要約 Node.js npm Webpackwebpack Babel rollup.jsRollup gulpGulp·レガシー GruntGrunt·レガシー BowerBower·終了 ビルドの仕組み — 取り消し線が引かれたものは、古い求人情報でも見かける化石です。 レイヤーIV — 21M 2018 – 2024 ツール開発競争 「わかった、ビルドはある。とにかく90秒かかるのをやめてくれ。」ビルドは機能しましたが、遅く、webpackの設定は、呪われた巻物のように開発者の間で受け継がれる秘術になっていました。次の傷は純粋に苦痛に関するものでした。ツール自体があまりにも使いにくかったのです。その解決策は、JavaScriptではなく、高速なコンパイル言語（GoとRust）でツールを書き直すことでした。esbuild (Go) はバンドルを10～100倍高速にし、皆を驚かせました。SWC (Rust) は、主要なフレームワーク内でBabelに取って代わりました。そしてViteは、それらを統合して、現在ほとんどの人がデフォルトで利用するツールにしました。開発では瞬時の起動（ブラウザのネイティブモジュールとesbuildに依存）、本番向けの適切な最適化されたビルド、そしてHMR（ホットモジュールリプレースメント）により、ファイルを保存すると、元の場所を失うことなく変更がすぐに反映されます。2026年現在、Viteの本番バンドラー自体もRust製のRolldownに置き換えられ、スタック全体が統合されつつあります。