足場

Ionic CLIでアプリを作成したら、次のステップは機能とコンポーネントの構築を開始することです。アプリの大部分は src/app/ ディレクトリで開発されます。

プロジェクト構造

src/
├── app/
├── assets/
├── environments/
├── theme/
├── global.scss
├── index.html
├── main.ts
├── polyfills.ts
├── test.ts
└── zone-flags.ts

src/ ディレクトリには、index.html ファイル、テスト用の設定ファイル、画像用のアセットフォルダー、およびアプリのコード用のメインの app/ ディレクトリなどの項目があります。

src/
└── app/
    ├── app-routing.module.ts
    ├── app.component.html
    ├── app.component.spec.ts
    ├── app.component.ts
    └── app.module.ts

src/app/ ディレクトリには、ルートアプリのコンポーネントとモジュール、およびページ、コンポーネント、サービスなどのアプリの機能を含む追加のディレクトリが含まれています。

新しい機能の生成

注意

このコマンドはIonic Angularでのみサポートされています。

Ionic CLIは、ionic generate コマンドを使用して新しいアプリ機能を生成できます。コマンドラインで ionic generate を実行すると、生成可能な機能のリストが表示される選択プロンプトが表示されます。

$ ionic generate
? What would you like to generate?
❯ page
  component
  service
  module
  class
  directive
  guard

選択後、Ionic CLIは名前を要求します。名前はパスにすることができ、整理されたプロジェクト構造内で機能を簡単に生成できます。

注意

portfolio/intro のように、任意のレベルのネストが許可されています。たとえば、ionic g component "portfolio/intro/About Me" を使用して、コンポーネントをページに簡単にスコープできます。

$ ionic generate
? What would you like to generate? page
? Name/path of page: portfolio █

または、生成された機能の type と name をコマンドラインに入力することもできます。

$ ionic g page "User Detail"
> ng generate page "User Detail"
CREATE src/app/user-detail/user-detail.module.ts (564 bytes)
CREATE src/app/user-detail/user-detail.page.scss (0 bytes)
CREATE src/app/user-detail/user-detail.page.html (138 bytes)
CREATE src/app/user-detail/user-detail.page.spec.ts (720 bytes)
CREATE src/app/user-detail/user-detail.page.ts (280 bytes)
UPDATE src/app/app-routing.module.ts (475 bytes)
[OK] Generated page!

Ionic CLIは、基盤となるフレームワークツールを使用して、ベストプラクティスに沿うようにしています。@ionic/angular の場合、内部ではAngular CLIが使用されます。

新しいページのファイルとディレクトリを作成した後、CLIは新しいページを含めるようにルーター構成も更新します。これにより、開発ライフサイクルを進めるために必要な手動作業量が削減されます。

詳細については、コマンドラインから ionic g --help を実行するか、ionic generate のドキュメントを参照してください。