アプリ開発の基本

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

プロジェクト構成

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

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

機能を追加する

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

作りたい機能を選択した後、Ionic CLIが機能名を尋ねてきます。機能名にはパスも入力可能で、プロジェクト構成に適した機能を簡単に配置することができます。

機能名にはportfolio/introといったようなどんな階層のネスト構造も入力可能です。例として、ionic g component "portfolio/intro/About Me" と入力することで、そのコンポーネントのスコープをページ内に限定することができます。

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

Ionic CLIを使って機能を生成すると、フレームワークに基づいてベストプラクティスとなる構成を自動的に設定してくれます。 @ionic/angularモジュールに関連する機能を生成するときは、内部的にAngular CLIが使用されます。

新しいページのためのファイルやディレクトリを生成したあと、CLIは新しいページを含んだルーティング設定も自動で更新してくれます。つまり、開発サイクルにおける手動での作業を減らしてくれるということです。

より詳細な情報がほしい場合は、コマンドラインにionic g --helpを入力するか、ionic generateのドキュメントをご覧ください。