Ionic2入門[導入~ブラウザでアプリ起動まで]

目次

ionicとは

ionic(ここではionic2を扱います)はTypeScriptで書くUIフレームワークです。
TypeScriptはJavaScriptに静的型付けを可能にし、大規模アプリケーションの開発をサポートします。
似たようなものとして、React Nativeが挙げられますが、Ionicはデザインが出来なくてもハイクオリティーなアプリがスピーディーに作れるという所で優れていると思います。

Linuxコマンドを使えるようにする

シェル(Linuxコマンドが使えるプログラム)を起動するコマンドラインインターフェースです。
Macでは標準でインストールされているターミナル、WindowsだとBash on Ubuntu on Windowsというものでbashが使えそうですね。
筆者はMacのターミナルを使います。

Nodeの環境を用意する

nvm + Node.js + npmのインストール - Qiita
この記事などを参考にしながら、nodeとnpmが使えるようにします。
nvmとnpmとnodeの関係が少しややこしいと思ったのでざっくりまとめると
nvm
npm,nodeのバージョンを管理するモジュール
npm
nodeのパッケージを管理するモジュール

図を作ってみたかったので作りました。(ちょっと違う気がするけどスルーしてください、、作ってみたかっただけ！)

$ node -v
v6.10.3
$ npm -v
3.10.10

上記のようにバージョンが出たらOK

ionicとcordovaをインストールする

$ npm install -g ionic cordova

アプリの雛形を作成する

$ ionic start myApp blank --v2

ここではblankというプレーンなテンプレートを使います。他には左にサイドメニューが付いているsidemenuと、画面下にナビゲーションバーが付いているtabsがあります。 --v2は、バージョン2を指していて、typescriptで書かれたアプリが生成されます。

$ cd myApp
$ ionic serve

を実行すると、ブラウザが自動起動し のように表示されたら今回は完了です！ 次回はまず生成されたファイルの構造を簡単に解説し、ページにInputコンポーネントとButtonコンポーネントを配置して、ボタンを押したら次のページに遷移するコードを書きます。