【ITニュース解説】My League of Legends Based Developer Portfolio

このニュース記事は、人気ゲーム「League of Legends（リーグ・オブ・レジェンズ）」をテーマにした開発者ポートフォリオ（自分のスキルや実績をまとめたWeb作品集）について解説している。プログラミング初心者のシステムエンジニアを目指す人にとって、どのような技術が使われ、どんな課題を解決したのかを具体的に学ぶ良い事例になるだろう。

まず、このポートフォリオの作者は、長年プレイしてきたLeague of Legendsへの深い愛情と、自身の技術スキルを同時に表現したいという強い動機からこのプロジェクトを始めた。一般的なテンプレートを使ったポートフォリオではなく、自分らしさを最大限に表現し、他のゲームプレイヤーに共感を呼ぶようなものを作りたいと考えたのだ。

このポートフォリオは、主にWebサイトの見た目を作るためのJavaScriptライブラリである「React」をベースに開発された。ユーザーインターフェース（UI、見た目）に繊細なアニメーションを加えるために「GSAP」というライブラリを使用している。また、ゲームの世界観を再現するため、「React Three Fiber（R3F）」という技術を使って、ゲーム内の有名なマップ「召喚士の峡谷」に作者自身の3Dモデルを配置し、インタラクティブに動かせるようにした。これは、Webサイト上で複雑な3Dグラフィックを表示するための高度な技術活用例だ。

作成したWebサイトをインターネット上に公開する「デプロイ」には「Vercel」というサービスが使われている。Vercelは、開発者がサーバーを自分で管理する手間をかけずに、作ったWebサイトやプログラムを手軽に公開できる便利なプラットフォームだ。特に、サーバーの機能をイベント駆動で実行する「Vercel Functions」を活用することで、コストを抑えつつ拡張性の高いシステムを構築できたと説明されている。

このポートフォリオの主要な機能はいくつかある。一つは、League of Legendsのゲームクライアントそっくりな「UI/UX（ユーザーインターフェース/ユーザーエクスペリエンス）」の再現だ。ゲーム開始時のキュー画面やチャンピオン選択画面といったおなじみの要素を、ポートフォリオの各セクションの表示に利用している。例えば、ゲーム内の「ルーンページ」という項目が、作者のプロジェクトを紹介するカルーセル（スライド表示）になっているといった具合だ。

もう一つの重要な機能は、様々な外部サービスからの「リアルタイムデータ統合」だ。作者はVercel Functionsを使って、複数のAPI（アプリケーション・プログラミング・インターフェース：異なるソフトウェア間で情報をやり取りするための仕組み）に接続している。具体的には、GitHubから最新のコード貢献状況を、LeetCodeからプログラミング問題解決の進捗を、Riot Gamesからゲーム内の統計データを、Anki（学習アプリ）から学習習慣のデータをそれぞれ取得し、ポートフォリオに表示している。Ankiのデータについては、自身で拡張機能を開発し、学習セッション後に「Upstash Redis」という高速なデータベースに書き込むことで、リアルタイム性を実現している点が特徴的だ。

プロジェクト開発中に直面した技術的な課題とその解決策も、初心者にとって非常に参考になる。 一つ目の課題は「APIのレート制限の管理」だった。APIは通常、短時間に大量のリクエストが集中するのを防ぐために、アクセス回数に上限（レート制限）を設けている。ポートフォリオが多くのAPIからデータを取得するため、すぐにこの制限に引っかかってしまう可能性があった。 解決策として、作者は「Upstash Redis」という高速なインメモリデータベースを使って「キャッシュ層」を実装した。これは、一度取得したデータを一時的に保存しておき、同じデータが再度要求された際にAPIに問い合わせることなく、保存しておいたデータを返す仕組みだ。各APIのレート制限に合わせてデータの有効期限を設定することで、常に最新に近いデータをユーザーに提供しつつ、APIからのブロックを防ぐことに成功した。

二つ目の課題は「複雑なUIステートの管理」だ。ゲームのロビー画面のように、キュー、マッチング、チャンピオン選択、ロードといった複数のステップがあるUIでは、それぞれのステップの状態（ステート）や共通の情報をアプリケーション全体で適切に管理する必要がある。 この解決策として、作者は「Jotai」というステート管理ライブラリを採用した。Jotaiは「アトムベース」というシンプルなアプローチで、アプリケーションのどこからでも必要な情報に簡単にアクセスできるようにする。これにより、複数のコンポーネント（部品）間で「キュータイマー」や「現在選択されているプロジェクト」といった情報を、複雑な受け渡しをせずに共有できた。

今後の展望としては、まず「レスポンシブデザイン」への対応が最優先だとされている。これは、Webサイトをスマートフォンやタブレットなど、様々な画面サイズに合わせて最適に表示させるための設計だ。また、3Dキャラクターにゲームのような「アビリティ（能力）」を追加したり、ジムでの進捗や読んだ本、観たアニメのデータなど、さらに多くのリアルタイム統計情報を統合したいと考えている。

このプロジェクトを通じて、作者はAIに頼りすぎない開発や、開発速度を向上させるためのVimエディタの操作習得など、多くの学びと成長を経験した。初めてゼロから「本当にユニークな」プロジェクトを開発したことで、他のアイデアにも挑戦する自信を得たという。

この事例は、システムエンジニアを目指す初心者にとって、学んだプログラミング知識をどのように具体的なプロダクトに落とし込み、どんな技術を組み合わせて課題を解決していくのか、そして最終的に自分の個性を表現する作品を作り上げる喜びと成長の過程を示す、非常に実践的で刺激的な教材となるだろう。