AnalogでAngularにViteとNitroを重ねる

Angularアプリに足すメタフレームワーク層

Analog は、Angular でアプリケーションとウェブサイトを構築するためのメタフレームワークである。Next.js、Nuxt、SvelteKit、Qwik City と同じ形を取る:既存のコンポーネントフレームワークの上に、ルーティング、レンダリング、デプロイのツールを追加する層を重ねる。それらのプロジェクトが React、Vue、Svelte、Qwik を包むのに対して、Analog は Angular を包む。リポジトリは TypeScript で書かれており、デフォルトブランチは beta である。つまり、プロジェクトはまだ活発な開発中であると位置づけている。README の冒頭のバッジは npm の @analogjs/vite-plugin-angular パッケージのダウンロード数を示しており、ドキュメントは analogjs.org にある。

analogjs/analogについてREADMEが明記する範囲をこの章で確認する。導入前には、Angularアプリに足すメタフレームワーク層に対応するコマンド、ファイル、設定名、対応対象を本文と一次資料で照合し、記載のない性能や互換性を推定しない。

Vite、Vitest、Storybookの担当範囲

README はまず Vite を挙げており、これがビルドツールのエンジンとして、プロジェクトのスキャフォールディング、開発サーバー、本番ビルドを担う。フィーチャーリストには Vitest と Storybook のサポートも含まれており、テストとコンポーネント開発のワークフローが同じ Vite ベースの環境に収まることを意図している。ただし README は、それらの統合がどのように設定されるかは説明していないし、Vite がプロジェクト内で担う具体的な責任範囲も定義していない。確認するなら analogjs.org のドキュメントが該当する。README 自体は設定レベルの内容にはほとんど触れていない。

analogjs/analogについてREADMEが明記する範囲をこの章で確認する。導入前には、Vite、Vitest、Storybookの担当範囲に対応するコマンド、ファイル、設定名、対応対象を本文と一次資料で照合し、記載のない性能や互換性を推定しない。

ファイルベースルーティングとMarkdown

ファイルベースルーティングがフィーチャーとして挙げられている。つまり、ルート定義は中央の設定ファイルではなく、プロジェクト内に作成するファイルから決まる。サーバーサイドデータフェッチもリストにあり、ページはレンダリングの前にデータを読み込める。Markdown ファイルをコンテンツルートとして使うこともでき、ページを Angular コンポーネントではなく文書として書ける。これはドキュメントサイトやブログのようなコンテンツ主体のサイトにとって有用な選択肢である。README はディレクトリの規約やファイル命名規則を明記していない。それらの詳細はソースでは確認できず、ドキュメントサイトで確認する必要がある。

analogjs/analogについてREADMEが明記する範囲をこの章で確認する。導入前には、ファイルベースルーティングとMarkdownに対応するコマンド、ファイル、設定名、対応対象を本文と一次資料で照合し、記載のない性能や互換性を推定しない。

NitroのAPIルートとハイブリッド描画

Analog には統合された API およびサーバールートが含まれており、フロントエンドとバックエンドのエンドポイントを同じプロジェクトに置ける。サーバー側は Nitro が支えており、README は Nitro がサーバーとデプロイの統合を提供すると述べている。つまり、デプロイ先の選択肢も Nitro のエコシステムがカバーする。ハイブリッド SSR/SSG サポートもリストにあり、サーバーレンダリングのページと静的生成のページを同じプロジェクトで併用し、ルートごとに異なるレンダリング戦略を選べる。ただし、あるルートを SSR と SSG のどちらに割り当てるかは README には書かれていないし、Nitro がサポートする具体的なデプロイプラットフォームも列挙されていない。どちらもドキュメントで確認する必要がある。

analogjs/analogについてREADMEが明記する範囲をこの章で確認する。導入前には、NitroのAPIルートとハイブリッド描画に対応するコマンド、ファイル、設定名、対応対象を本文と一次資料で照合し、記載のない性能や互換性を推定しない。

Angular CLIとNxワークスペース

フィーチャーリストは、Analog が Angular CLI と Nx ワークスペースをサポートすると述べている。すでに Angular 標準のツールを使っているチームにとっては、このメタフレームワークがそれらのツールが提供するビルドとワークスペースの仕組みに収まるように設計されていることを意味する。Nx は README のスポンサーセクションにもロゴとともに掲載されている。ただし README は、移行手順や設定オプション、既存の Angular プロジェクトを Analog に変換する方法については説明していない。その情報はドキュメントサイトから得る必要がある。

analogjs/analogについてREADMEが明記する範囲をこの章で確認する。導入前には、Angular CLIとNxワークスペースに対応するコマンド、ファイル、設定名、対応対象を本文と一次資料で照合し、記載のない性能や互換性を推定しない。

npm create analogから始める条件

README は、新しいプロジェクトを作成する4つの方法を記録している。npm では `npm create analog@latest`、pnpm では `pnpm create analog@latest`、Bun では `bun create analog@latest`、Yarn では `yarn create analog` を実行する。その後、プロンプトに従ってプロジェクトをスキャフォールドし、開発サーバーを起動する。README は、開発サーバーのコマンド名、デフォルトポート、生成されるプロジェクト構造については触れていないし、スキャフォールディングのプロンプトがどのような質問をするかも書かれていない。これらの詳細はドキュメントサイトで確認する必要がある。

analogjs/analogについてREADMEが明記する範囲をこの章で確認する。導入前には、npm create analogから始める条件に対応するコマンド、ファイル、設定名、対応対象を本文と一次資料で照合し、記載のない性能や互換性を推定しない。

betaブランチとMITライセンス

リポジトリは MIT ライセンスである。ライセンスは、ソフトウェアの複製を使用、コピー、変更、結合、公開、配布、サブライセンス、販売する権利を許可する。ただし、著作権表示と許可表示を実質的な部分に含めることが条件となる。ライセンスはソフトウェアを現状のまま提供し、いかなる種類の保証もなく、著作者や著作権保有者は責任を負わない。README は Zerops をパートナー、Nx、House of Angular、Snyder Tech、CodeRabbit をスポンサーとして挙げている。プロジェクト名は rrdelaney による初期のプロジェクト Analog に由来する。README は貢献ガイドへのリンクと、GitHub スター、Discord、Twitter、スポンサーシップページというサポートチャネルも示している。貢献者セクションは all-contributors のテーブル形式で、コード、ドキュメント、翻訳、インフラストラクチャ作業に貢献した多数の開発者が列挙されている。リポジトリのメタデータによると、スターは3000以上、フォークは300以上、未解決の issue は十数件である。

analogjs/analogについてREADMEが明記する範囲をこの章で確認する。導入前には、betaブランチとMITライセンスに対応するコマンド、ファイル、設定名、対応対象を本文と一次資料で照合し、記載のない性能や互換性を推定しない。

編集部の結論

Analog は MIT ライセンスで公開され、beta ブランチで活発に開発が続いている。Vite でビルドを、Nitro でサーバーとデプロイの統合を担当し、ファイルベースルーティング、Markdown コンテンツルート、ハイブリッド SSR/SSG を備える。README は完全なドキュメントを analogjs.org に案内し、貢献ガイドもリンクしている。 採用候補にする場合は、analogjs/analog固有のREADMEにある対象環境、入力形式、設定ファイル、実行手順を固定し、記載された出力または画面上の結果を確認してから範囲を決める。資料にない性能、互換性、サポートは前提にしない。

公式情報源

1. Official documentation
2. Official README
3. Project repository
4. Release notes