Ionic CLIを使ってみる

はじめに

先日の記事で技術選定を行ったとおり、私が開発しようとしている「ペットでつながるSNS」のUIフレームワークはIonicを使うことに決定しました。
今回はIonic開発の第一歩、Ionic CLIを使って見ようと思います。
ちなみに私自身はIonicの業務開発経験はあるのですが、私が使ったことがあるのはIonic2でして、一方最新版のIonicはIonic4です。
Ionic CLIも当時の業務では使用していなかったので、初めてということになります。

プロジェクト作成

まずはIonic CLIを私の開発PCにインストールする必要があります。
以下のコマンドを実行してインストールします。

1npm install ionic -g

これでionicコマンドが使えるようになります。

次にIonicプロジェクトを作成してみます。
プロジェクトの新規作成は以下のコマンドを実行して行います。

1ionic start [プロジェクト名] [オプション]

※使用できるオプションは以下のページなど参考にしてください
ionic start

私は以下のコマンドを実行しました。

1ionic start coopet --type=angular

coopetというのは今暫定的に決めているSNSの名前です。
実行すると以下のような選択肢が出ます。

sidemenuやtabsを選ぶと、プロジェクト作成時点でサンプル画面を盛り込んでくれるみたいですね。
今回はどうせならとsidemenuを選んでみました。
その後npmによる依存ライブラリのインストールが行われ、それが完了すると以下のような質問が表示されます。
Ionic Appflowはアプリ開発のプラットフォームみたいなんですが、今回は使わないので、「n」を入力します。 すると、サンプルページのmoduleやcomponentが作成されて… プロジェクト作成完了しました!

サーバー起動

それではサーバーを起動して、アプリケーションにアクセスしてみたいと思います。
サーバーを起動するためには以下のコマンドを実行します。

1ionic serve

起動が完了すると、自動的にブラウザのウィンドウが開かれて画面が表示されます。

おおー、結構ちゃんとしてる。
今回選択したのは「sidemenu」なのでもちろんサイドメニューもありますね。
開くとこんな感じです。

もちろんListを選ぶと他の画面へ遷移します。

ソースを読んでみる

作成されたプロジェクトのソースに軽く目を通してみましょう。

package.json

package.jsonを確認してみるとAngularは最新版の7、@ionic/angularは4ですね。
今回はプロジェクト作成時に–type=angularを指定したのでこの構成になっていますが、他にも設定できる値があり、それ次第でこの辺の構成は変わるみたいですね。

devDependenciesの方も確認すると、@angular/cliにも依存していることがわかります。
試しにng serveコマンドも実行してみましたが、問題なく起動でき、ionic serveで起動したときと同じページにアクセスできました(あえてこちらを使う意味はないでしょうが…)
その他@angular/cliではおなじみのKarma+Jasmineのテスト環境も使えるみたいですね。

app.component.html

Angularをベースにしていることもあり、ファイル構成などは@angular/cliで作成できるプロジェクトと似通っています。
/src/app/app.component.htmlも存在していて、以下のような記述がなされています。

Ionicが提供する、ion-で始まる独自タグによってアプリケーション構造が記述されています。
ここでは主にメインコンテンツのルーティング(22行目,ion-router-outlet)の記述と、サイドメニュー(11～18行目)の記述がなされていますね。

ルーティング設定は/src/app/app-routing.module.tsに記述されており、Angularの仕組みに従った記述がなされています。

list.page.spec.ts

package.jsonにはJasmineに依存している記述があったので、当然のごとくテストコードもサンプルに含まれていました。 npm testコマンドを実行することでテストを実行することももちろんできました。

おわりに

今回はIonic CLIを使って、プロジェクトの新規作成、サーバーの起動と動作確認及びソースコードを軽く確認するということをやってみました。
ざっと読んだ印象だと、Ionic2と比較してめちゃくちゃ大きく変わったということもなさそうな雰囲気なので学習コスト少なめで進めていけそうです。
ペットとつながるSNS「Coopet」の開発に関しては、このブログで記事を通してお伝えしていければと思います。

感想やご意見等ございましたら、私のTwitterまでお気軽にどうぞ。