アプリ開発の基本

Contents

Ionic CLIでアプリを作成したあとは、機能やコンポーネントを追加していきましょう。たいていの場合、src/app/ディレクトリ下で開発を進めていくことになります。

プロジェクト構成

src/
app/
assets/
environments/
theme/
global.scss
index.html
karma.conf.js
main.ts
polyfills.ts
test.ts
tsconfig.app.json
tsconfig.spec.json

src/ディレクトリは、index.htmlのようなファイルや、テスト用の設定ファイル、画像用のassetフォルダ、そしてアプリのコードを格納するapp/ディレクトリを持っています。

src/
app/
app-routing.module.ts
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

src/app/ディレクトリはアプリのルートコンポーネントとモジュールを含んでおり、同様にPageやComponent、Serviceなどのアプリの機能群を含んだディレクトリも含んでいます。

機能を追加する

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

もう一つの方法として、生成する機能のtypenameは直接コマンドに引数として渡すこともできます:

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ドキュメントをご覧ください。

翻訳するUpdated 2019-03-05
StartingMigration