去年4月から開発を進めて今は統合テスト中メンバーは多い時で30人くらい3システムで画面は200くらいぶっちゃけ疲れました。IonicとAngularAngularとIonicに対する個人的な所感です。AngularのみでWebアプリケーションを作成する場合、色々と下準備が必要ですが、Ionicはアプリケーション作成に必要な部品が一式揃っています。モバイル向けのWebアプリケーションを素早く構築するのであれば、Ionicが向いてると思います。Angularでモバイル向けWebアプリケーションを作成するためのアプリケーション基盤Ionicを使いこなすには「AngularもIonicも学ばないといけないから大変」ということは、ありません。Angularをきちんと学んでおけば、Ionicで新たに学ぶことはあまりないと思います。次の図は、AngularのサイトにあるAngularのアーキテクチャ構造を表した図です。Injection)、モジュール機構など、様々な機能を幅広く学ぶ必要があります。今日はIonicに触れながら、Angularの機能をひとめぐりしたいと思います。IonicでAngularを学ぼう!Githubこの資料のソースコードはこちらにあります。start!では、初めてみましょう。Ionicを始めるのは簡単です。次のコマンドをコンソールで実行します。これで、Webアプリケーションの雛形が完成しました。serveコマンドを打つと、開発用サーバーが起動します。アクセスすると、次画面が表示されます。HomePageコンポーネントこちらが表示されている画面のコードです。guide.</p></ion-content>コンポーネントコンポーネントは、テンプレートを使用してコンポーネントのビューを定義します。テンプレートは、コンポーネントのレンダリング方法をAngularに伝えるHTMLの形式の1つです。出来上がった画面は、次の図のコンポーネントツリーを形成しています。Ionicでは、ページと呼ばれるコンポーネントで1つの画面を表します。雛形のアプリケーションでは、最初にHomePageが表示されます。world!」と決まっています。world!」を表示させてみましょう。'world';}修正すると、このような画面が表示されます。nameの部分が「world」に置き換えられていますね。Interpoeration(補間)構文データバインディングでnameの部分を「world」に置き換えることが出来ました。データバインディンには様々な記法があり、{{name}}のような記法はInterpolation(補間)と呼ばれるものです。1}}のような式を書くこともできます。双方向バインディングでは、Angulaで有名な双方向バインディングでnameをビューから変更できるようにしてみましょう!次のコードをテンプレートに追加します。</ion-item></ion-content>次の画面が表示されます。ビューで名前を変更すると、画面表示が即座に変わります。双方向バインディングビューの値とコンポーネントの値を双方向に同期させる仕組みを双方向バインディングと呼びます。次の図は、双方向バインディングの仕組みを表したものです。ビューからコンポーネントへは、イベントで変更通知を行います。Angularは、なんらかの非同期イベント(入力イベントやsetTimeoutなど)を契機に、変更検知と呼ばれる仕組みでコンポーネントの値をビューに反映します。JavaScriptモジュールとNgModuleIonicは画面単位でモジュールを作成します。モジュールは混乱しやすい部分ですので、少しモジュールの話をします。Angularはモジュールという単位でアプリケーションを管理します。すべてのアプリケーションには、少なくとも1つのAngularモジュール(アプリケーションを起動するためにブートストラップするルートモジュール)があります。JavaScriptモジュールとは異なる概念なので注意が必要です。JavaScriptコードが含まれる単一のファイル。@NgModuleデコレーターで装飾されたクラス。JavaScriptモジュールJavaScriptモジュールは、JavaScriptコードが含まれる単一のファイルです。exportされたクラスや関数以外は、外部に公開されません。JavaScriptモジュールを利用することで、グローバル変数名の競合を防ぐのに役立ちます。export宣言がないので、この関数は外部に公開されない他のファイルからその機能が必要になった時は次のようにインポートします。'./user';NgModuleNgModuleは@NgModuleデコレーターで装飾されたクラスです。NgModuleは、コンポーネントの定義やそのコンポーネントに必要なモジュール、外部に公開するコンポーネントの指定などをします。NgModuleには、他にもサービスの提供方法の定義などもありますが、ここでは説明を割愛します。詳細は公式ドキュメントを確認してくださいね。HomePageModuleIonicは画面単位でモジュールを作成します。load)することで、初回起動の描画速度を高めています。次の図が、HomePageのモジュール構成です。appCommonモジュールの作成Ionicでコンポーネントを作成する場合、モジュールでそれを宣言する必要があります。コンポーネントは必ず1つのモジュールのみで宣言しないといけないので、複数画面で使うコンポーネントを作るには、それを宣言するモジュールも作成する必要があります。次のコマンドでアプリケーションで共通に使用するコンポーネントなどを宣言するモジュールを作成します。共通のコンポーネントを作成する準備が整いました。Beerコンポーネントを作成しましょう!次のコマンドでコンポーネントの雛形を作成します。components/beerappCommonモジュールのdeclarationsでBeerコンポーネントを宣言します。exportsでこのコンポーネントを外部に公開することを示します。}ホーム画面でBeerコンポーネントを使うために、HomePageModuleのimportにAppCommonModuleを追加します。これにより、AppCommonModuleでexports宣言したBeerコンポーネントをホーム画面で使えるようになります。:これが変更後の構成図です。ホーム画面のテンプレートにBeerコンポーネントを追加してみましょう。<app-beer></app-beer>を追加します。<app-beer></app-beer></ion-content>Beerコンポーネントのビューが画面に表示されました!プロパティバインディングでは、Beerコンポーネントを用いて、プロパティバインディングを試してみましょう。Beerクラスを作成し、その内容をBeerコンポーネントで表示してみます。次のコマンドでBeerクラスを作成します。models/beerBeerクラスを次のように修正します。{}}作成したBeerクラスをBeerコンポーネントにプロパティとして定義します。その際、@Inputデコレータで修飾することで、このコンポーネントがプロパティバインディング出来ることを宣言します。Beer;Beerコンポーネントのテンプレートを次のように修正します。'最高だ');}Beerコンポーネントにプロパティバインディングします。[beer]='myFavoriteBeer'></app-beer></ion-content>画面にビールの説明が表示されました!次の図のようなイメージで、画面に表示されています。イベントバインディングBeerコンポーネントに「いいね!」ボタンを追加しましょう!ボタンが押された時に、(click)="onNice()"のようにテンプレートに記述することで、コンポーネントでイベントを受け取れます。}}ボタンにIonicで宣言されたボタンコンポーネントを使いましたので、AppCommonモジュールでIonicModuleをimportしましょう。}ボタンをおすと、喜びました!いいね!データバインディングAngularのバインディングは方向によって記法が異なります。双方向については、入力[...]と出力(...)の両方の記法が合わさった記法[(...)]と考えると、分かりやすいと思います。ngIf「いいね!」を何度も押すと大変なことになりました。「いいね!」を取り消したいだけなのに!よくないね!2度押しで「いいね!」を取り消すことができるようにしましょう。ビューの表示を切り替えるには、構造ディレクティブを使います。ここでは、条件により表示を変えるngIfディレクティブを用います。Beerクラスに「いいね!」されたかどうかの条件を加えます。{}}最初は、「いいね!」されていない状態として修正します。}}ngIfディレクティブで条件により表示が切り替わるように修正します。*ngIf="beer.isNice">(((ο(*゚▽゚*)ο)))</span>!!</p>ディレクティブ「いいね!」が押されてるのに、いまいち表示が地味です。ディレクティブを使ってもっと派手に表示できるようにしましょう!ディレクティブを用いることで、要素やコンポーネントの見た目や動作を変更できます。次のコマンドでディレクティブを作成します。directives/highlightAppModuleにHighlightDirectiveの宣言が追加されているので、それを削除し、AppCommonModuleで宣言してください。}自分が宣言された要素(エレメント)の参照をコンストラクタで取得し、入力条件により、背景色を変更する処理を加えます。{}}p要素に作成したディレクティブを追加して、「いいね!」されたかどうかの条件を渡してあげます。:「いいね!」すると、派手に喜ぶ感じになりました!パイプ「malt's」ってなんですかね!「MALT'S」ですよね!パイプを使って、ビール名の表示は大文字になるようにしましょう!次のコマンドでupperパイプを作成します。pipes/upperAppModuleにUpperPipeの宣言が追加されているので、それを削除し、AppCommonModuleで宣言してください。}パイプは入力値を変換する関数のような機能を提供します。transformメソッドで入力値を大文字に変更するよう処理を加えます。upperのように作成したパイプを適用します。(click)="onNice()">いいね!</ion-button>MALT'S!!。大文字の方がいいですね!サービスもっとBeerを!たくさんのBeerを提供したいです。(なにが)、Beerクラスをサービスから提供できるようにします。Beerサービス、いい言葉です。サービスはただのクラスです。サービスを用いることで、複数の画面で値を共有出来たりします。いわゆるビジネスロジックを定義する場所としても妥当だと思います。次のコマンドでBeerサービスを作成します。services/beerBeerサービスを次のように修正します。}}ホーム画面をBeerサービスからたくさんのビールを提供してもらえるよう修正します。ngOnInit()メソッドはAngularのライフサイクルイベントで、コンポーネント初期化時に呼ばれます。}}テンプレートで繰り返し制御をする場合は、ngForディレクティブを使えます。</ng-container></ion-content>たくさんのビールが表示されました!!画面の作成では、最後に画面を作成しましょう!Ionicらしい画面にしていきたいと思います。次のコマンドでビール詳細画面を作成します。pages/beer-detailビール詳細画面でBeerコンポーネントを使えるように、BeerDetailPageModuleでAppCommonModuleをimportします。{}ビール詳細画面のルータ定義を変更します。ここでは、'beer-detail/:id'でビールのIDをURLから取得できるように変更しました。}}ビール詳細ページでは、URLで渡されたIDから表示するビールを取得するようにします。</ion-item></ion-content>ホーム画面の表示を一覧形式に変更します。routerLinkでビール詳細画面への遷移URLを指定します。</ion-list></ion-content>ビール一覧画面(ホーム画面)Ionicライクな画面が出来ました!!(((ο(゚▽゚)ο)))ビール詳細画面まとめビールが飲みたくなりましたね。創業40年超のSIerです。upLoginユーザーは見つかりませんでした。