ionic-app-creation

Ionic アプリの作成

Ionic CLI を使用して新しい Ionic アプリを作成します。プロジェクトのスキャフォールディング、フレームワークの統合（Angular、React、Vue）、Capacitor の統合、Tailwind CSS のセットアップを行います。

前提条件

1. Node.js（最新の LTS）がインストールされていること。
2. Ionic CLI がグローバルにインストールされていること（npm install -g @ionic/cli）。未インストールの場合は、手順の一環としてインストールします。
3. iOS 開発の場合：Xcode がインストールされていること。
4. Android 開発の場合：Android Studio がインストールされていること。

エージェントの動作

• 作成前に確認します。 ionic start を実行する前に、すべての設定項目についてユーザーに確認します。利用可能な選択肢を明確に提示し、確認を待ちます。
• 一度に一つずつ決めます。 ユーザーの入力が必要な手順では、その質問だけを行い、回答を待ってから次に進みます。
• 選択肢を明確に提示します。 自由回答形式の質問ではなく（例：「使用するフレームワークは Angular、React、Vue のどれですか？」）、具体的な選択肢を提示します。
• 手順を一つずつ案内します。 一度に一つずつ手順を進めます。互いに関連のない質問を複数まとめて提示しないでください。

手順

ステップ 1：Ionic CLI の確認

Ionic CLI がインストールされているか確認します。

ionic --version

コマンドが失敗するか、見つからない場合はインストールします。

npm install -g @ionic/cli

レガシー版の ionic パッケージがインストールされている場合は、先にアンインストールします。

npm uninstall -g ionic
npm install -g @ionic/cli

ステップ 2：プロジェクト設定の確認

アプリを作成する前に、以下の質問を一度に一つずつユーザーに行います。それぞれの選択肢とデフォルト値を提示してください。

2.1：プロジェクト名

プロジェクト名をユーザーに尋ねます。この名前はディレクトリ名とプロジェクト識別子に使用されます。

• 例：my-app

2.2：フレームワーク

使用する JavaScript フレームワークをユーザーに尋ねます。

--type の値	フレームワーク
angular	Angular（NgModules）
angular-standalone	Angular（スタンドアロンコンポーネント）
react	React
vue	Vue

デフォルト：angular。

2.3：スターターテンプレート

使用するスターターテンプレートをユーザーに尋ねます。

テンプレート	説明
blank	1 ページのみの空のプロジェクト
tabs	タブベースのレイアウト
sidemenu	サイドメニューベースのレイアウト

選択したフレームワークで利用可能なすべてのテンプレートを確認するには、ユーザーは ionic start --list を実行できます。

デフォルト：blank。

2.4：Capacitor の統合

Capacitor を統合するかどうか、ユーザーに尋ねます。

• --capacitor — Capacitor の統合を含めます（ネイティブモバイルアプリでは推奨）。

デフォルト：はい（--capacitor を含めます）。

2.5：パッケージ ID

Capacitor の統合を選択した場合は、逆 DNS 形式のバンドル識別子をユーザーに尋ねます。

• --package-id=<id> — 例：com.example.myapp

これは iOS と Android の両方でアプリのバンドル ID を設定します。

2.6：追加オプション

以下の追加フラグについてユーザーに知らせ、適用するものがあるか尋ねます。

フラグ	説明
--no-deps	プロジェクト作成後の npm 依存関係のインストールをスキップします
--no-git	Git リポジトリを初期化しません
--project-id=<slug>	ディレクトリ名とパッケージ名に使用するカスタムスラッグ

デフォルト：これらのフラグは適用されません。

ステップ 3：アプリの作成

収集した設定から ionic start コマンドを組み立てて実行します。

ionic start <name> <template> --type=<framework> --capacitor --package-id=<package-id>

例：

ionic start my-app blank --type=angular-standalone --capacitor --package-id=com.example.myapp

コマンドが完了するまで待ちます。Ionic CLI が依存関係をインストールし、プロジェクトをスキャフォールディングします。

ステップ 4：プロジェクトを確認する

プロジェクトディレクトリに移動し、プロジェクトが正しく作成されたことを確認します。

cd <name>
ionic serve

ionic serve がエラーなく開発サーバーを起動すれば、プロジェクトは正常に作成されています。確認後、サーバーを停止します。

ステップ 5：Tailwind CSS をセットアップする（任意）

プロジェクトに Tailwind CSS を追加するかどうか、ユーザーに確認します。

追加する場合は、references/tailwind-css-setup.md を読み、ユーザーが選択したフレームワークに合わせて Tailwind CSS の設定を適用します。

ステップ 6：Capacitor のセットアップを続ける

ステップ 2.4 で Capacitor との統合が選択されている場合は、Capacitor を含む基本的な Ionic アプリが作成されたことをユーザーに伝えます。ionic start --capacitor コマンドによって、@capacitor/core と @capacitor/cli がすでにインストールされ、capacitor.config.ts が作成されています。capacitor-app-creation スキルに切り替え、ステップ 5（ウェブアプリをビルドする）以降に進み、ネイティブプラットフォームの追加、同期、アプリの実行、オプションの統合（ライブアップデート、CI/CD）の設定を行います。

Capacitor が選択されていない場合は、スキルは完了です。

エラー処理

• ionic: command not found：Ionic CLI がグローバルにインストールされていません。npm install -g @ionic/cli を実行します。
• グローバルインストール時の権限エラー：ユーザーは、昇格した権限を使わずにグローバルインストールできるよう npm を設定するか、sudo npm install -g @ionic/cli を使用する必要があります。
• ionic start がネットワークエラーで失敗する：インターネット接続を確認します。CLI は GitHub からスターターテンプレートをダウンロードします。
• ionic start が「directory already exists」エラーで失敗する：指定したプロジェクト名のディレクトリがすでに存在します。別の名前を選ぶか、既存のディレクトリを削除します。
• ionic serve がポートの競合で失敗する：別のプロセスがポート 8100 を使用しています。競合しているプロセスを停止するか、ionic serve --port=<other-port> を実行します。
• 依存関係のインストールに失敗する：プロジェクトディレクトリで npm install を手動で実行します。それでも失敗する場合は、Node.js のバージョンに互換性があるか確認します。
• テンプレートが見つからない：ionic start --list を実行し、選択したフレームワークで利用できるすべてのテンプレートを確認します。ユーザーがテンプレート名を間違えて入力した可能性があります。

関連スキル

• capacitor-app-creation — Ionic アプリの作成後に Capacitor のセットアップを続けます（プラットフォームの追加、ライブアップデート、CI/CD）。
• ionic-app-development — Ionic 開発全般に関するガイダンスです。
• ionic-angular — Angular 固有の Ionic のパターンです。
• ionic-react — React 固有の Ionic のパターンです。
• ionic-vue — Vue 固有の Ionic のパターンです。
• capawesome-cloud — Capawesome Cloud でライブアップデート、ネイティブビルド、アプリストアへの公開をセットアップします。