[初心者向け] たった3つの手順ではじめるIonic2 (Angular2)

Ionic2のプロジェクトのはじめ方をまとめておきます。本家のInstalling Ionicを見れば載っているままなのですが、英語が苦手な人向けに妙訳しながら書いていきます。
ちなみに、以下の作業には、node.js(とnpm)がインストールされている必要があります。インストールされているかどうかはターミナル(コマンドライン)を立ち上げて

$npm -v

と叩いたらわかりますが、もしインストールしていない人は、こちらから先にnode.jsをインストールしておいて下さい。
 

1.CLIのインストール

Ionic2は、コマンドラインでプロジェクトをつくったり、起動したりします。ですので、まずはIonic2のコマンドラインツール(CLI)をインストールする必要があります。npmは、フォルダ内に保存することと、グローバルに保存(どのフォルダからでもアクセスできる)することができますが、CLIはグローバルに保存します。

npm install -g ionic@beta

しばらく時間かかりますが、放置しておいたら気づいたらインストールが完了します。macの方でエラーがでたら、先頭にsudoをつけて、管理者権限で実行してください。
なお、beta.4以前にCLIをインストールしたという方は、

npm update ionic@beta -g

で、CLI自体のアップデートが必要となります。

2.Ionic2プロジェクトの作成

CLIのインストールが完了したら、次にプロジェクトを作ります。

ionic start cutePuppyPics --v2 --ts

とコマンドラインに入力下さい。カレントディレクトリに、cutePuppyPicsというフォルダが自動でできて、その中にIonic2のファイル群ができあがります。
ちなみに、 –v2 は、Ionic2プロジェクトにするという意味で、これをつけなければ、Ionic1(Angular1)のプロジェクトができてしまいます。

また、–tsは、typescriptでプロジェクトをはじめるという意味で、Angular2のドキュメントを使おうと思うとこれをつけておいた方が無難です(詳しくは「Ionic2(Angular2 UIフレームワーク)をはじめるにあたっての注意点まとめ」をご覧ください)。なお、つけなかったら、ES6でプロジェクトが開始されます。
 

3.Ionic2プロジェクトの起動

プロジェクトの作成が完了したら、Ionic2プロジェクトを起動しましょう。
まず、プロジェクトフォルダに移動するために、

cd cutePuppyPics

と打ち込んで、そのあと

ionic serve

と入力しましょう。いろいろな処理が行われて、その後、ブラウザが自動的に起動して、localhostでプロジェクトが起動します。
ちなみに、いろいろな処理、は、「/app」内にあるプロジェクトソースコードを、ES5(JavaScript)やCSSに変換したりして、/www/buildにコピーする作業です。何となくフォルダの中身を精査したらわかるかと思います。
 
それでは、また。

お問い合わせ