【ITニュース解説】Spin up Bun + Preact full-stack app in minutes 🚀

この解説では、Bunという新しい開発ツールとPreactという軽量なライブラリを用いて、サーバー側の処理とクライアント側の表示処理を両方行う「フルスタック」アプリケーションを構築する手順を説明する。これにより、ウェブサイトの裏側で動くデータ処理と、ユーザーが目にする画面の両方を効率的に開発する基礎を学ぶことができる。

まず、中心となるBunについて説明する。Bunは、JavaScriptやTypeScriptのコードを実行するための「ランタイム」と呼ばれるプログラムだ。これは、既存のNode.jsのような実行環境よりも高速に動作するという特徴を持つ。さらに、Bunは単なるランタイムに留まらず、アプリケーション開発に必要ないくつもの機能を統合している。具体的には、開発中にアプリケーションを一時的に動かすための「開発サーバー」、複数のコードファイルを一つにまとめてブラウザで読み込みやすくする「バンドラー」、そしてライブラリを管理する「パッケージマネージャー」といった機能が全て含まれている。これらの機能をBun一つで提供することで、開発環境の準備が非常にシンプルになり、開発効率が向上する。特にTypeScriptのコードをそのまま実行できるため、型安全な開発をスムーズに行える点が大きな魅力だ。

次に、Preactについて説明する。Preactは、ウェブブラウザ上でユーザーインターフェース（UI）を構築するためのJavaScriptライブラリである。広く使われているReactとほとんど同じ書き方で開発できる「React互換」という特徴を持ちながら、より軽量で高速に動作する点が大きな利点だ。これにより、ウェブアプリケーションの起動時間を短縮したり、リソースの消費を抑えたりすることが可能となる。今回のアプリケーションでは、Preactを使ってブラウザに表示される部分、つまりユーザーが直接操作する画面を作成する。

それでは、具体的な構築手順を見ていく。最初に、bun init コマンドを実行してプロジェクトのひな形を作成する。このコマンドを実行すると、アプリケーションの設定を記述する package.json や、TypeScriptのコンパイル設定を記述する tsconfig.json など、基本的な開発に必要なファイルが自動的に生成される。次に、bun add preact コマンドでPreactライブラリをプロジェクトに追加する。これは、Preactの機能をアプリケーションで利用できるようにするための準備だ。

PreactはJSXという、HTMLのような記述をJavaScriptコードの中に直接書ける特別な構文を使う。このため、TypeScriptにその情報を伝える必要がある。tsconfig.json ファイルの compilerOptions セクションに "jsxImportSource": "preact" という設定を追加することで、TypeScriptはJSXの記述がPreactによって処理されることを認識し、型チェックを正しく行えるようになる。これにより、「JSXが見つからない」といったエラーを防ぎ、スムーズな開発が可能となる。

次に、アプリケーションのファイルを整理する。src という新しいディレクトリを作成し、サーバーの入り口となる index.ts、ウェブページ全体の骨格となる index.html、ブラウザで動くクライアント側のプログラムの入り口となる client.tsx をその中に配置する。このようにファイルを構造化することで、アプリケーションの全体像を把握しやすくなる。

package.json ファイルには、アプリケーションを開発モードとプロダクションモードで実行するためのスクリプトを追加する。"dev": "bun --hot src/index.ts" というスクリプトは、開発中にファイルが変更されるたびに自動でアプリケーションを再起動し、変更を即座に反映する「ホットリロード」という機能を有効にする。これは、開発者がコードを変更するたびに手動でアプリケーションを再起動する手間を省き、開発サイクルを大幅に短縮するために非常に重要だ。一方、"start": "NODE_ENV=production bun src/index.ts" は、アプリケーションを本番環境で動作させるためのスクリプトであり、ホットリロードのような開発用の機能は無効にして、安定性とパフォーマンスを重視した設定で実行する。

ウェブページの骨格となる src/index.html には、標準的なHTML構造を記述する。このHTMLファイルはサーバーからウェブブラウザに送信され、ユーザーが最初に目にするページとなる。特に重要なのは、<div id="root"></div> という部分と、<script type="module" src="./client.tsx"></script> という行だ。#root と名付けられたdiv要素は、PreactがUIをレンダリングする（描画する）場所として利用され、最初は空の状態からPreactが生成したUIが表示される。また、<script>タグは、ブラウザ側で実行されるクライアントアプリケーションの client.tsx ファイルを読み込むためのもので、type="module" を指定することで、モダンなJavaScriptモジュールとして扱われることを示している。Bunは、この client.tsx ファイルを必要に応じてバンドル（複数のファイルを一つにまとめること）や変換を行い、ブラウザで実行可能な形式にする役割も担う。

サーバーの実装は src/index.ts で行う。ここでは、Bunが提供する serve 関数を使ってウェブサーバーを起動する。サーバーは routes という設定を通じて、どのようなリクエストに対してどのような応答を返すかを定義する。"/*": index は、どのパス（URL）へのリクエストに対しても、先ほど作成した index.html の内容を返すことを意味する。これにより、どのURLにアクセスしても同じHTMLページが提供され、その中でPreactが動的にコンテンツを生成する、いわゆるシングルページアプリケーションの基盤が作られる。また、/api/hello というパスへのリクエストに対しては、{"message": "Hello, world!"} というJSON形式のデータを返すように設定する。これは、サーバーからクライアントへデータをやり取りするためのAPI（Application Programming Interface）の簡単な例だ。さらに、開発モード (NODE_ENV === "development") の場合には、HMR (Hot Module Replacement) という、クライアント側のコード変更もページ全体のリロードなしに反映する機能や、ブラウザのコンソールログをターミナルに表示する機能が有効になる。これにより、開発中のデバッグや変更の確認が非常にスムーズに行える。プロダクションモードではこれらの開発用の機能は無効になり、サーバーは純粋にリクエストに応答する動作に集中する。

クライアントの実装は src/client.tsx で行う。ここではPreactの render 関数を使って、ウェブページのUIを構築する。まず、document.getElementById("root") を使って、index.html に記述した <div id="root"></div> 要素を取得する。取得できなければエラーを発生させる。次に、App という名前の関数コンポーネントを定義する。このコンポーネントは、<h1>Hello, world!</h1> という見出しを返すだけのシンプルなものだ。最後に、render(<App />, root) という行で、作成した App コンポーネントを root 要素、つまりHTMLの #root の場所に描画する。これにより、ブラウザの画面に「Hello, world!」という見出しが表示される。PreactはReactと同じコンポーネントベースの考え方でUIを構築するため、Reactの知識があればすぐに開発を始められる上、その軽量さからBunのような高速な環境に適している。

以上の設定が完了したら、bun run dev コマンドを実行してアプリケーションを開発モードで起動する。通常、http://localhost:3000 のようなURLがターミナルに表示されるので、ウェブブラウザでアクセスしてみる。ここで src/client.tsx や src/index.ts の内容を編集すると、ホットリロード機能により、ページ全体を再読み込みすることなく、変更が即座にブラウザに反映されることが確認できるだろう。これで、Preactを使ったシンプルなフルスタックのBunアプリケーションが、ホットリロード機能と基本的なAPIを備えて動作するようになる。これは、今後のサイドプロジェクトやデモ開発の基盤として活用できる。