【ITニュース解説】Build Your Own Linktree-Lite with Node.js, Express, and Mustache (API + Frontend Page)

今回のニュース記事では、システムエンジニアを目指す初心者に向けて、Node.js、Express、そしてMustacheという技術スタックを用いて、人気サービスLinktreeの簡易版（Linktree-Lite）を構築する実践的な手順が紹介されている。このプロジェクトは、バックエンドAPIとフロントエンドページの連携の基本を学ぶのに理想的な題材だ。

Linktree-Liteは、ユーザーが複数のウェブサイトやソーシャルメディアのリンクを一つのプロフィールページに集約して表示できるサービスである。この開発を通して、ウェブアプリケーションのバックエンド（サーバー側）がどのようにデータを管理し、フロントエンド（ユーザーがブラウザで見る側）がそのデータをどのように受け取って表示するのかという一連の流れを体験できる。具体的には、APIのルーティング、Expressフレームワークの基本的な使い方、そして動的なHTMLページの生成方法といった、バックエンド開発における核となるスキルを習得できるのだ。

プロジェクトを開始するには、まず開発環境を準備する。Node.jsプロジェクトを初期化し、ウェブアプリケーション開発で広く利用されるExpressフレームワークと、HTMLテンプレートを動的に生成するためのMustacheというテンプレートエンジンをインストールする。また、プロフィール画像などの静的ファイルを配置するpublic/avatarsディレクトリや、HTMLテンプレートファイルを格納するviewsディレクトリなど、適切なファイル構造を事前に構築しておく。

次に、ウェブサーバーの核となる部分を作成する。server.jsというJavaScriptファイルを用意し、Expressをインポートしてサーバーインスタンスを生成する。このサーバーは、特定のポート番号（例として5000番）で外部からのネットワークリクエストを常に監視し、それに対して適切な応答を返す役割を担う。サーバーが正常に起動したことを示すメッセージをコンソールに出力する設定も行われる。

このLinktree-Liteでは、データ管理のために複雑なリレーショナルデータベースを用いる代わりに、JavaScriptのシンプルなオブジェクトを「簡易データベース」として活用する。このデータベースオブジェクトには、usersというプロパティがあり、その中に各ユーザーのプロフィール情報がキーと値のペアで格納される。個々のユーザープロフィールは、自己紹介文（bio）、表示するリンクのリスト（links）、ソーシャルメディアのアカウント情報（socials）、そしてプロフィールページの訪問数やリンクのクリック数といった統計情報（stats）で構成される。このアプローチにより、実際のデータベースの概念を理解しつつ、より手軽にデータ操作のロジックに集中できる利点がある。

いよいよ、ユーザーのプロフィールページを表示する機能を実装する。/@[ユーザー名]のような形式のURLにアクセスがあった際に、そのユーザーの情報を表示するための「HTTP GETエンドポイント」を定義する。このエンドポイントでは、URLからユーザー名を抽出し、それを基に簡易データベースから該当するユーザーのデータを検索する。もし指定されたユーザーが見つからない場合は、一般的なウェブエラーである「HTTP 404 Not Found」をブラウザに返す。ユーザーデータが正常に見つかった場合は、そのデータをプロフィールページに表示しやすい形式に整形する。例えば、ソーシャルメディアのハンドル名から対応するプラットフォームの完全なURLを生成したり、ユーザーのアバター画像へのパスを設定したりする。

この整形されたデータをウェブブラウザ上で視覚的に表示するために、Mustacheテンプレートエンジンを活用する。Expressサーバーに対して、Mustacheをテンプレートレンダリングエンジンとして登録し、テンプレートファイルがviewsディレクトリに格納されていることを設定する。また、プロフィール画像のような静的なアセットはpublicディレクトリから直接提供されるように設定する。profile.mustacheという名前のテンプレートファイルには、HTMLの基本構造と、{{username}}や{{bio}}のように、整形されたユーザーデータが差し込まれる場所をMustacheの独自の記法で記述しておく。サーバーは、このテンプレートファイルと整形済みのユーザーデータを組み合わせて、ユーザーごとに異なる内容を持つ動的なHTMLページを生成し、それをクライアントのブラウザへ送信する。これにより、一つのテンプレートで多数のユーザープロフィールページを効率的に表示できる仕組みが実現される。

さらに、このLinktree-Liteには、プロフィールページのアクセス数（訪問数）と、ページ内に配置されたリンクのクリック数を計測する機能が組み込まれている。プロフィールページへのリクエストが発生するたびに、アクセス元のIPアドレスをデータベースのstats.ips配列に記録することで、訪問数をカウントする。これにより、総訪問数やユニークな訪問者数を把握できるようになる。

リンクのクリック数計測については、一般的なウェブページとは異なる「リダイレクト」という仕組みを用いる。通常、ウェブページ上のリンクは直接目的のURLへユーザーを誘導するが、この方法ではクリックした事実をサーバー側で把握できない。そこで、Linktree-Liteでは、ユーザーがプロフィールページ上のリンクをクリックした際に、直接目的のウェブサイトへ遷移させるのではなく、まず/redirect/[ユーザー名]/link/[インデックス]や/redirect/[ユーザー名]/social/[プラットフォーム]といった特別なサーバー側のエンドポイントを経由させる。このリダイレクト用エンドポイントでは、どのリンクがクリックされたかをデータベースに記録し、その後に本来の目的のURLへとユーザーを自動的に転送する。この一連の処理により、ユーザーは違和感なく目的のページに到達しつつ、サーバー側で正確なクリック数を計測できる。プロフィールページに表示するリンクのURLを、このリダイレクト用のカスタムURLに書き換えることで、この機能が実現される。

最終的に、これらの訪問数やクリック数といった統計情報を外部から確認するためのAPIエンドポイントも提供される。/stats/[ユーザー名]というURLにアクセスすることで、指定されたユーザーの訪問数や各リンクのクリック数に関する詳細なデータをJSON形式で取得できる。訪問数については、単なる合計数だけでなく、重複しないユニークなIPアドレスからの訪問数も計算して提供される。これにより、プロフィールページのパフォーマンスに関する簡易的な分析が可能になる。

このように、Node.js、Express、Mustacheといった現代的なウェブ技術を組み合わせることで、Linktreeの簡易版が完成する。このプロジェクトを通じて、ExpressフレームワークにおけるURLと処理の関連付け（ルーティング）、テンプレートを使った動的なHTML生成、取得したデータの整形処理、そしてサーバーサイドでのアクセス状況（訪問数やクリック数）のシンプルな追跡といった、バックエンド開発の根幹をなす要素を実践的に学ぶことができる。これらの経験は、将来的にさらに複雑なウェブシステムを構築する際の強固な基盤となるだろう。