Announcing Ionic Framework 2 Beta | The Official Ionic Blogionic2が無事ベータリリースになったようなので、チュートリアルを体験してみました。が、英語なのとionic1やAngularが分かっていないと戸惑う部分が多いように思われました。そこでチュートリアルの流れを日本語で解説し、本家で触れられていない点についていくつか補足します。なおハイブリットアプリをWindowsで作る人はそういないと思いますのでMacが前提です。

読み方

チュートリアルそのものとは関係が無いのですが、ionicは「イオニック」ではなく、「アイオニック」です。ゴルフをやっていたときのグリップの影響か、今でもついイオニックと呼んでしまいますが。

Node.jsのインストール

公式通りに進めてください。ただし必ず4系を使うこと。ES6の事もあるのでそのうちNode5に対応するのだとは思いますが、今のところnumber of issesが発生するようです。

ionic 2のインストール

nodeをインストーラーを使ってインストールした場合には、npmコマンドが一緒にインストールされています。npmコマンドはnode.jsのパッケージ管理に使うコマンドです。ionicはnpmを使用してインストールします。Macだと-gオプション（グローバルインストール：どのユーザーでも使えるようにする）を使うにはsudoが必要です。コマンド実行時に管理者権限のあるユーザーで実行してパスワードを入力してください。

$ sudo npm install -g ionic@beta

これによりionicコマンドがインストールされます。ionicを引数なしで実行するとコマンドのマニュアルが表示されます。私が使っているのはbeta17のようです。

kawauchiyasuo-no-MacBook-Pro:project2 yasuo$ ionic  _             _      (_)           (_)       _  ___  _ __  _  ___  | |/ _ \| '_ \| |/ __| | | (_) | | | | | (__  |_|\___/|_| |_|_|\___|  CLI v2.0.0-beta.17Usage: ionic task args=======================Available tasks: (use --help or -h for more info)   start  ..........  Starts a new Ionic project in the specified PATH   serve  ..........  Start a local development server for app dev/testing   platform  .......  Add platform target for building an Ionic app   run  ............  Run an Ionic project on a connected device   emulate  ........  Emulate an Ionic project on a simulator or emulator   build  ..........  Build (prepare + compile) an Ionic project for a given platform.   plugin  .........  Add a Cordova plugin   resources  ......  Automatically create icon and splash screen resources (beta)"