Vanilla Webの重要性：ライブラリに依存しない開発の価値

近年のフロントエンド開発では、多くの開発者がReact、Angular、Vueなどのライブラリやフレームワークを当然のように使用しています。
しかし、「Vanilla Web」という考え方が再び注目を集めています。

本記事では、Maximiliano Firtmanによる「Vanilla Web: You Don’t Need that Library」（GOTO 2024）の講演内容を参考に、ライブラリに依存しないWeb開発の価値と実践方法について解説します。

Vanilla Webとは

「Vanilla」という用語は、アイスクリームの基本フレーバーである「バニラ」から来ています。
余計な風味を加えていない基本の状態を指します。

Web開発においては、追加のライブラリやフレームワークを使わずに開発することです。
つまり、標準のHTML、CSS、JavaScriptのみを使用するアプローチです。

現代のWeb開発の現状

現代のWeb開発者は、新しいプロジェクトを始める際に特定のパターンに従います。
多くの場合、ターミナルを開き、create-react-appやVue CLIなどのコマンドを実行します。

その結果、プロジェクトフォルダには数千もの依存関係ファイルが含まれることになります。
開発者自身がその全てを理解していることは稀です。

このような状況は、以下の問題を引き起こす可能性があります：

1. パフォーマンスの低下
2. セキュリティリスクの増加
3. コードの複雑化
4. メンテナンス性の低下

なぜVanilla Webが重要なのか

Vanilla Webには複数の利点があります。
それぞれを見ていきましょう。

学習曲線の真実

多くの開発者は、Vanilla JavaScriptの学習曲線は高いと考えています。
しかし、実際には逆かもしれません。

過去10年の間に開発を始めた人々は、直接ライブラリから入ることが多いです。
そのため、基礎となるWeb技術について深く理解する機会がなかった場合があります。

このため、ライブラリの背後にある技術が「アセンブラのような低レベル」に感じられることがあります。
しかし、実際にはそうではありません。

性能と最適化

Vanilla Webは、不必要なコードを排除できます。
その結果、ページの読み込み時間を短縮できます。

Lighthouseなどのパフォーマンス測定ツールでも、適切に設計されたVanilla Webサイトは高いスコアを獲得することが多いです。

コントロールと理解

ライブラリやフレームワークに依存せずに開発すると、コードの動作原理をより深く理解できます。
これは問題解決能力の向上につながります。

長期的には、より良い開発者になる助けとなります。

現代のVanilla Web開発ツール

現代のブラウザは、かつてはライブラリが提供していた多くの機能を標準でサポートしています。

モダンCSS

現代のCSSは非常にパワフルです。
以下のような機能を標準でサポートしています：

• CSS変数（カスタムプロパティ）
• ネストされたCSS
• コンテナクエリ
• フレックスボックスとグリッドレイアウト
  これらの機能により、プリプロセッサやCSSフレームワークが不要になるケースも増えています。

Webコンポーネント

Webコンポーネントは、再利用可能なカスタム要素を作成するための標準技術です。
主に以下の3つの技術で構成されています：

• カスタム要素（Custom Elements）
• シャドウDOM（Shadow DOM）
• HTMLテンプレート（HTML Templates）
  これらを活用することで、コンポーネントベースの開発が可能になります。
  つまり、React等のライブラリと同様のモジュール化された開発ができます。

リアクティブデータバインディング

データの変更に応じてUIを自動更新する「リアクティブデータバインディング」も実装できます。
JavaScriptのProxyやSignalsなどのパターンを活用すれば、データとUIを連携させることができます。

Vanilla JavaScriptでも、複雑なUIの状態管理は可能なのです。

Vanilla Webの実践例

実際のプロジェクトでVanilla Webを実践する方法を見ていきましょう。

シンプルなSPA（Single Page Application）

SPAをVanilla JavaScriptで実装するには、History APIを活用します。
ページの遷移は以下のような処理で実現できます：

1. リンクのクリックイベントをキャプチャする
2. 現在のコンテンツを非表示または削除する
3. 新しいコンテンツを表示する
4. History APIを使用してURLを更新する
   これにより、ブラウザの戻るボタンが正しく機能します。
   ユーザーエクスペリエンスを損なうことなくSPAを実装できるのです。

セマンティックHTMLの活用

モダンなHTML5では、多くのセマンティック要素が提供されています：

• <nav> – ナビゲーション用
• <header> – ヘッダー部分用
• <main> – メインコンテンツ用
• <section> – セクション用
• <article> – 記事用
• <footer> – フッター用

これらを適切に使用すると、アクセシビリティの向上やSEOの改善が期待できます。

まとめ

Vanilla Webは、すべての開発プロジェクトに適しているわけではありません。
複雑な大規模アプリケーションでは、ライブラリやフレームワークの使用が効率的な選択となる場合もあります。

重要なのは、「工具箱に一つだけの道具を持つ」のではありません。
状況に応じて適切なツールを選択できる知識と能力を持つことが大切です。

ライブラリやフレームワークから学べる良いアイデアや設計パターンを理解しましょう。
そして、それをVanilla Webにも適用できるようになることが理想的です。

最終的には、自分自身の開発の快適さではなく、ユーザー体験を最優先に考えることが大切です。
時には、自分にとって少し不便でも、ユーザーにとって最適な技術選択をする勇気を持ちましょう。

Vanilla Webの学習は、フロントエンド開発者としての基礎力を高める投資です。
より賢明な技術選択ができるようになるでしょう。