【ITニュース解説】Cómo construí mi portafolio en 4 frameworks (React 19, Vue 3.5, Angular 19 y Compose HTML) usando Clean Architecture

あるベテランのフルスタック開発者が、彼の技術スキルを実証するため、非常に興味深い挑戦をした。彼は、世の中にある代表的なWebフレームワークであるReact 19、Vue 3.5、Angular 19、そしてKotlin Multiplatform技術の一つであるCompose HTMLという、合計4つの異なる技術スタックを用いて、全く同じ機能と見た目を持つポートフォリオウェブサイトを構築した。さらに、このサイトはユーザーがページを再読み込みすることなく、リアルタイムで好きなフレームワークに切り替えられるように設計されている。この試みは、単に複数の技術名を履歴書に並べるだけでなく、実際にコードを通してその技術への深い理解と応用能力を示す、まさにエンジニアリングの課題であった。

もしこの4つのアプリケーションをそれぞれ独立したプロジェクトとして開発すると、新しい職歴やスキル、プロジェクト情報を追加するたびに、4つの異なるコードベースを個別に更新する必要が生じる。これは、メンテナンスの手間が実質的に4倍になるという非効率的な状況を招く。この問題を解決するため、彼は「クリーンアーキテクチャ（Clean Architecture）」という設計思想と、「モノレポ（Monorepo）」というプロジェクト管理手法を採用した。

クリーンアーキテクチャの核心は、アプリケーションのビジネスロジックやデータ管理の責任を、特定のフレームワークやUIから完全に分離することにある。開発者は、各フレームワークは単にユーザーインターフェースを表示するための「手段」であり、アプリケーションの核となる部分に依存すべきではないと考えた。

この設計思想を実現するため、プロジェクトは複数の関連プロジェクトやライブラリを一つのリポジトリで管理する「モノレポ」として構成された。このモノレポは、大きくpackages、apps、shellという3つの主要なディレクトリで構成されている。

packages/coreディレクトリには、アプリケーションの最も重要な部分である「ドメイン」が格納されている。ここには、職歴やプロジェクト、プロフィール、スキルといったデータの「エンティティ（実体）」が定義され、これらのデータに関する操作の「ユースケース（ビジネスロジック）」が純粋なTypeScriptで書かれている。また、データ取得のための「ポート（インターフェース）」もこの層で定義される。このcoreパッケージのコードは、ブラウザや特定のフレームワークに一切依存しないため、どのフロントエンドアプリケーションでも共通して再利用できる。

次に、packages/content-json-adapterは「データアダプター」としての役割を果たす。このパッケージは、coreで定義されたContentRepositoryというデータ取得の「ポート」を具体的に実装しており、実際のデータソースである構造化されたJSONファイルから情報を読み込む。また、英語とスペイン語の動的な翻訳機能もこのアダプターで処理される。データ取得ロジックがcoreから分離されているため、将来的にデータソースがデータベースやAPIに変わっても、coreのロジックに影響を与えることなく、このアダプターだけを変更すればよいという高い柔軟性がある。

最も注目すべき点は、このcoreパッケージで定義されたビジネスロジックが、各フロントエンドフレームワークでどのように利用されているかという部分である。React 19では「カスタムフック」、Vue 3.5では「Composition APIとComposables」、Angular 19では最新の「ネイティブシグナル」、そしてKotlin Compose HTMLでは「宣言的なUIとViewModel」といった、それぞれのフレームワークが持つ最新のリアクティブな仕組みを活用して、coreのユースケース（例えば、職歴のタイムラインを取得する関数など）を呼び出している。各フレームワークの役割は、coreから受け取ったデータを画面に美しく表示することに徹しており、データ処理の複雑さは全てcoreに集約されている。そのため、フレームワークごとに同じロジックを再実装する必要がなく、例えば新しい職歴を追加する場合、たった一つのJSONファイルを更新するだけで、4つの全てのアプリケーションに即座に反映される。

視覚的な一貫性を保つため、彼は「デザインシステム」を構築した。これは、各フレームワークが独立したUIライブラリやCSSフレームワークを使うことによるクラス名の衝突や、不要なデータ肥大化を防ぐためである。代わりに、共有の「デザイン・トークン」（色、余白、フォントなどのCSS変数）とモダンなVanilla CSSを使用している。これにより、全てのフロントエンドで同じセマンティックなクラス名が使われ、ダークモードやライトモードといったテーマも共通のCSS変数で制御されるため、見た目の完璧な統一が実現されている。

これら4つのアプリケーションを一つのページで動的に切り替える仕組みは、「シェルホスト（Shell Host）」と呼ばれる軽量なTypeScriptアプリケーションが担っている。シェルホストは、現在選択されているアプリケーションを動的なコンテナ内にマウントし、デスクトップではサイドバー、モバイルではフローティングアクションボタンとして機能する。さらに、言語設定、テーマ、スクロール位置といったユーザーの状態をアプリケーション間で同期させることで、フレームワークの切り替えがユーザーにはほとんど意識させないほどシームレスで瞬時に行われる。

ビルドとデプロイのプロセスも工夫されている。Vite、Angular CLI、Kotlin/Gradleなど、多種多様なビルドツールを持つ4つのフレームワークを効率的にコンパイルするため、彼はDockerを利用してNode.js 22やOpenJDK 17といった一貫性のある開発環境を再現した。そして、各アプリケーションを個別にコンパイルした後、それらを一つのdistディレクトリ内に統合するスクリプトを実行し、最終的にNginxコンテナがこれらのファイルをGzip圧縮やキャッシュ制御を適用してウェブサーバーとして提供する仕組みを構築した。

このプロジェクトから得られた教訓は多岐にわたる。第一に、クリーンアーキテクチャはバックエンド開発だけでなく、フロントエンド開発においても非常に有効であることが実証された。ドメインロジックをビュー（UI）から分離することで、コードの一貫性を保ち、メンテナンス性を劇的に向上させることができた。第二に、Angular 19のネイティブシグナルは、従来のRxJSの複雑さを解消し、VueやReactのような開発の俊敏性を実現しつつも、TypeScriptの堅牢さを維持していることが高く評価された。第三に、Kotlin MultiplatformおよびCompose HTMLは、Androidアプリ開発と同じシンタックスでWebインターフェースを記述できるため、開発者のスキルを多方面で再利用できるという、統合された未来の可能性を示唆している。この挑戦は、開発者が単に多くの技術を知っているだけでなく、それらの技術をどのように組み合わせて複雑な問題を解決できるかを示す優れた手本となる。