アプリ開発の基本
Ionic CLIでアプリを作成したあとは、機能やコンポーネントを追加していきましょう。たいていの場合、src/app/
ディレクトリ下で開発を進めていくことになります。
プロジェクト構成
src/
ディレクトリは、index.html
のようなファイルや、テスト用の設定ファイル、画像用のassetフォルダ、そしてアプリのコードを格納するapp/
ディレクトリを持っています。
src/app/
ディレクトリはアプリのルートコンポーネントとモジュールを含んでおり、同様にPageやComponent、Serviceなどのアプリの機能群を含んだディレクトリも含んでいます。
機能を追加する
Ionic CLIはionic generate
ionic generate
を実行すると選択式のプロンプトが表示され、使用可能な機能のリストを表示します。
❯ page
component
service
module
class
directive
guard
作りたい機能を選択した後、Ionic CLIが機能名を尋ねてきます。機能名にはパスも入力可能で、プロジェクト構成に適した機能を簡単に配置することができます。
機能名には
portfolio/intro
といったようなどんな階層のネスト構造も入力可能です。例として、ionic g component "portfolio/intro/About Me"
と入力することで、そのコンポーネントのスコープをページ内に限定することができます。
? Name/path of page: portfolio
もう一つの方法として、生成する機能のtype
とname
は直接コマンドに引数として渡すこともできます:
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
の