Clientの初期化

はじめに

Catalystでは、Web Client Hostingでホストできる3種類のネイティブクライアントアプリケーションを開発できます：

• Angularアプリケーション
• Reactアプリケーション
• Basic Clientアプリケーション

CatalystはAngularおよびReactクライアントアプリ用のすぐに使えるテンプレートを提供しています。これらのアプリを初期化すると、Catalystはセットアップ手順全体を処理し、必要な依存関係のインストールを求めます。AngularおよびReactアプリケーションは、ボイラープレート構造でプロジェクトディレクトリに作成されます。

Basic Clientアプリは、独自の標準構造で作成されるCatalystクライアントのシンプルなバージョンです。3種類のクライアントアプリすべてでインストール手順が異なります。

プロジェクトのクライアントディレクトリを初期化すると、CatalystはFunctionsの初期化後にセットアッププロセスを開始します。

オプションからプロジェクトに初期化するクライアントタイプを1つ選択し、Enterを押します。

Angularアプリケーション

Angularは、効率的で洗練されたシングルページアプリを作成するためのフロントエンドアプリケーション設計フレームワークおよび開発プラットフォームです。Angularはコンポーネントベースのアーキテクチャに従い、アプリは個々の再利用可能な機能的・論理的エンティティに分離されます。コンポーネント、テンプレート、ディレクティブ、依存性注入などのAngularの構成要素はモジュールに統合され、Angularアプリケーションを形成します。詳しくはAngular公式ドキュメントをご覧ください。

Angularクライアントアプリケーションの開発には、ローカルマシンにAngular CLIをインストールすることを推奨します。このCLIは必要な依存関係のインストールと設定を自動的に処理し、クライアントアプリケーションの開発とテストを容易にします。Catalystはクライアントの初期化プロセス中にインストールを自動的に開始します。

Catalystは、Angularアプリ用のプラグインzcatalyst-cli-plugin-angularも提供しており、Angularアプリの初期化時にインストールされます。このプラグインは最新のAngular LTSバージョンと互換性があり、Angularアプリの開発とテストに関わるいくつかの操作を内部的に処理します。これによりアプリケーション構築タスクが簡素化・高速化され、セットアップとメンテナンスではなくアプリの機能に集中できます。

クライアントの初期化時にオプションからAngular Web Appを選択すると、CatalystはAngularアプリケーションの標準セットアップ手順を開始します。アプリは最新のLTSバージョンで作成されます。

1. CLIはプロジェクトのクライアントコンポーネントの名前を入力するよう求めます。クライアント名を入力してEnterを押します。
   

2. Angular CLIがシステムにまだインストールされていない場合、CatalystはそのLTSバージョンの一時的なインストールを自動的に開始します。また、Angularアプリを生成するために必要なCatalyst固有のスキーマティクスパッケージもインストールされます。
   
   プロンプトが表示されたら「Y」を入力して必要なパッケージのインストールを確認し、Enterを押します。
   

必要なパッケージがローカルシステムに既に存在する場合、セットアップは次のステップにスキップします。

3. Angularルーティングを有効にして、作成するさまざまなビュー間のナビゲーションを処理できます。プロンプトが表示されたら「Y」を入力し、Enterを押します。
   

4. 以下に示すサポートされているスタイルシート形式のいずれかでAngularコンポーネントをスタイリングできます。アプリのスタイルシート形式を選択し、Enterを押します。
   

ルーティングとスタイルシートのプロンプトは、Angularアプリケーションのデフォルトセットアップ手順に含まれます。

その後、CatalystはAngularアプリケーションファイル、設定ファイル、および依存関係のボイラープレート構造でのインストールを開始します。アプリの開発に必要なノードモジュールもNPMを通じてインストールされます。

以下に示すように、Angularクライアントのディレクトリは、標準アプリケーションファイル、環境ファイル、プラグインファイル、スタイルシート、index.html、およびTypeScriptクラスでセットアップされます。必要なノードモジュール、JSON設定ファイル、およびCatalyst固有のclient-package.jsonを含む依存関係もディレクトリに存在します。

これらのパッケージがインストールされると、catalyst.json設定ファイルは、前述のプラグインファイルへのパスを含むクライアントパッケージの詳細で更新されます。Catalyst設定ファイルとクライアントディレクトリの詳細については、プロジェクトディレクトリ構造のヘルプページをご覧ください。

Catalyst CLIからAngularアプリのテストとデプロイについては、リソースの配信とリソースのデプロイのヘルプページをご覧ください。

Reactアプリケーション

Reactは、インタラクティブなアプリケーションとユーザーインターフェースを構築できるフロントエンドJavaScriptライブラリです。コンポーネントベースのアーキテクチャにより、ビルド時にアプリケーションの状態を効率的に管理およびレンダリングします。Reactはシングルページクライアントアプリケーションの開発における容易さと柔軟性を提供し、コンポーネントの再利用性を提供します。詳しくはReact公式ドキュメントをご覧ください。

Catalystは、Reactアプリ用のプラグインzcatalyst-cli-plugin-reactを提供しており、Reactアプリの初期化時にインストールされます。このプラグインには、Reactアプリの開発とテストに関わるいくつかの操作を内部的に処理する特定のノードモジュールとライブラリファイルが含まれています。これにより、より高速で効率的なアプリケーション構築プロセスが可能になります。

Reactアプリを初期化すると、Catalystはデフォルトでyarnパッケージマネージャーを通じてアプリの作成と設定を自動的に行います。ローカルマシンにyarnがインストールされていない場合、ReactアプリはNPMを使用してセットアップされます。Catalystは、パッケージのリンクと解決、依存関係のインストールなど、すべての設定タスクをパッケージマネージャーを通じて自動的に処理します。

クライアントの初期化時にオプションからReact Web Appを選択すると、CatalystはReactアプリケーションの標準セットアップ手順を開始します。

1. 標準のJavaScriptテンプレートまたはTypeScriptテンプレートでReactアプリを作成できます。TypeScriptはJavaScriptの型付きスーパーセットで、コンパイル時にプレーンなJavaScriptにトランスパイルされます。Catalystは、セットアップ手順をより簡単で迅速にするために、初期化時にこれらのオプションを提供します。
   
   オプションからJavaScriptまたはTypeScriptを選択します。
   

2. CLIはプロジェクトのクライアントコンポーネントの名前を入力するよう求めます。クライアント名を入力してEnterを押します。

これにより、Catalyst固有のCRAテンプレートを通じて、react、react-dom、react-scriptsなどの必要なReactパッケージのインストールが開始されます。このベーステンプレートはcreate-react-appコマンドを実行します。

その後、パッケージマネージャーはReactアプリのgitリポジトリを初期化し、テンプレートの依存関係をインストールします。

初期化が完了すると、プロジェクトディレクトリにボイラープレート構造でReactアプリケーションファイルが作成されます。

以下に示すように、Reactアプリのディレクトリ構造には、アプリケーションソースファイル、パブリックファイル、設定ファイル、ノードモジュール、およびCatalyst固有のclient-package.jsonを含むその他の依存関係が含まれます。

これらのパッケージがインストールされると、catalyst.json設定ファイルは、前述のプラグインファイルへのパスを含むクライアントパッケージの詳細で更新されます。Catalyst設定ファイルとクライアントディレクトリの詳細については、プロジェクトディレクトリ構造のヘルプページをご覧ください。

Reactアプリを配信またはデプロイすると、このディレクトリにReact.jsの標準に従ったコンパイル済みファイルを含むbuildフォルダが作成されます。

Basic Clientアプリケーション

Basic Clientアプリケーションは、外部フレームワークやライブラリなしで作成されるCatalystクライアントのシンプルなバージョンです。クライアントの初期化時にBasic Web Appオプションを選択して、シンプルで機能的なWebクライアントアプリケーションを作成できます。

CLIはプロジェクトのクライアントコンポーネントの名前を入力するよう求めます。クライアント名を入力してEnterを押します。

クライアントディレクトリがプロジェクトのディレクトリに作成され、 catalyst.json ファイルがその情報で更新されます。

Basic Clientのディレクトリは、メインのindex.htmlファイル、main.css、main.js、およびclient-package.json設定でセットアップされます。クライアントディレクトリ構造の詳細については、プロジェクトディレクトリ構造のヘルプページをご覧ください。

localhostを通じてクライアントを配信してテストし、その後クラウドにデプロイするか、コンソールから直接ホストできます。