Ionicでのアプリ開発の始め方

# `Ionic`とは?

[Ionic](https://ionicframework.com/)とは、Google社の[Angular](https://angular.io/)というアプリケーションフレームワークをベースに、HTML5アプリの開発に特化して作られたJavaScriptフレームワークです。

> Build amazing apps in one codebase, for any platform, with the web.
（公式サイトより）

とあるように、Web/iOS/Android アプリが全て同時に開発できる、いわゆるハイブリッド開発ができる優れものです。[^1] また、近年Webをアプリとして便利にする`PWA(Progressive Web Apps)`という仕組み[^2]も誕生しましたが、IonicはこのPWAにも標準でサポートしています。

# `Ionic`の始め方

とりあえず手元で始める場合は、以下の手順で始められます。

1.`Node.js`をインストール


2.`Ionic`, `Cordova`を　インストール

```bash
$ npm i -g ionic cordova

$ ionic -v
# 3.19.0
```

3.`Ionic`プロジェクトの雛形をCLIで作成

```bash
$ ionic start hoge --type=ionic-angular
```
  - いくつか対話的に選択肢が出てきますが迷ったら以下を選択してください
    - 質問1: `? Starter template`
        - `tabs`
    - 質問2: `? Install the free Ionic Appflow SDK and connect your app? (Y/n)`
        - `n`

4.プロジェクトディレクトリに移動

```bash
$ cd hoge
```

5.アプリを起動

```bash
$ ionic serve
```

この時点で少し待つと自動でアプリが起動し、ブラウザに`http://localhost:8100`というURLでページが表示されると思います。以下スクリーンショット（シミュレータ起動バージョン）。

![localhost_8100_(iPhone 7) (1).png](https://qiita-image-store.s3.amazonaws.com/0/48034/9cf78ab2-cd61-493d-3520-a2d1e464bb5b.png)


ちなみに、執筆現時点での環境は以下となっています。

```bash
$ ionic info                                                                                                                    (git)-[master]

cli packages: (/Users/k_kuwahara/.nodebrew/node/v8.9.1/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node  : v8.9.1
    npm   : 5.5.1
    OS    : macOS Sierra
    Xcode : Xcode 9.2 Build version 9C40b

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro
```

# 開発する上で必要な知識

- `HTML5`
- `JavaScript`
- `TypeScript`
- `SCSS`
- `Angular`

この中で一番学習コストが高いものは、やはり`Angular`だと思いますが、簡単なアプリケーション開発であれば、`Angular`の知識はなくても開発することはできます。[^3]

# 実機での確認

例えばiPhoneの実機で確認する場合、以下のコマンドを実行し、XCode用のプロジェクトを作成します。

```bash
$ ionic cordova build ios (or android)
```

`platforms/ios/`ディレクトリに、`hoge.xcodeproj`というファイルが生成されているかと思いますので、これを`XCode`で開いていただき、お手元のiPhoneをMacに接続し、そのiPhoneにビルドしてください。

このように、実機での確認は少々手間がかかっていましたが、つい先日実機での確認がもの凄く簡単になるアプリがIonic Teamからリリースされました！その名も「[Ionic DevApp](https://ionicframework.com/docs/pro/devapp/)」です！

詳細はこちらの記事「[Announcing Ionic DevApp](http://blog.ionicframework.com/announcing-ionic-devapp/)」。

使い方は、

1. アプリをインストール、起動
2. 同じwifiに端末とPCを繋ぐ
3. PC上で`$ ionic serve`を実行

すると、先ほどインストールしたIonic DevApp上で表示され、タップすると実機でアプリが動作します。これは素晴らしい。もちろん、`watch`モードで起動していますので、ソースコードを編集すれば、自動で実機にも変更が反映されます！感動するので、皆さんぜひ試してみてください。

# 書籍
日本語のIonicの書籍はかなり数が少ないですが、2018年1月16日に初版が, 2019年11月25日に第二版の

<img width=400 alt="Ionic モバイルアプリ制作入門" src="https://pbs.twimg.com/media/EKJhhvUU4AIAuzf?format=jpg&name=large">
[https://www.amazon.co.jp/dp/4863542925/](https://www.amazon.co.jp/dp/4863542925/)

という本が出版されました🎉！私も校正（テクニカルレビュー）に携わりましたが、とても素晴らしい入門書に仕上がっておりますので、皆さんぜひ購入してみてください！

# 参考ハンズオン資料
@s_kozake さんが書かれたハンズオン資料ですが、こちらも物凄く勉強になりますので、一度手を動かしてみてください！

[Ionicハンズオン資料](https://qiita.com/s_kozake/items/d590896e5303b75c0c6c)


# コミュニティ
`Ionic Japan`というコミュニティが存在し、[Slackチーム](https://ionic2.slack.com)もありますので、何か質問があれば気軽にこちらに参加し、質問を投げてみてください。また、こちらのコミュニティでは勉強会やmeetupなども開催されていますので、ご都合あえばご参加ください。募集は[connpass](https://ionic-jp.connpass.com/)から行なっています。

[^1]: 裏では`Cordova`というフレームワークが動いています。
[^2]: Googleが提唱したもので、Webでネイティブアプリと同じようなUXを提供するための仕組みです。
[^3]: ページを増やさないとか`Service Class`とかを作成せず、全てボイラープレートの中で完結するならば可能です。

<!-- User Heat Tag -->
<script type="text/javascript">
(function(add, cla){window['UserHeatTag']=cla;window[cla]=window[cla]||function(){(window[cla].q=window[cla].q||[]).push(arguments)},window[cla].l=1*new Date();var ul=document.createElement('script');var tag = document.getElementsByTagName('script')[0];ul.async=1;ul.src=add;tag.parentNode.insertBefore(ul,tag);})('//uh.nakanohito.jp/uhj2/uh.js', '_uhtracker');_uhtracker({id:'uhgYUByGHk'});
</script>
<!-- End User Heat Tag -->