Ionicの開発環境構築してみる

モバイルアプリ作ってみたいなーと思い立ち、Ionic勉強し始めた。
私のWindows10PCで開発環境作ってみた。

#私のPC環境

• OS：Windows10
• Node：v8.9.4
• npm：5.8.0
• git：2.13.2.windows.1
• エディタ：Visual Studio Code

#手順
##Node.jsインストール
ここ参考。
Node.js入れれば自動でnpmも入ります。

##gitインストール
インストール手順はここ参考。

##エディタインストールと拡張機能追加
ここからインストールできます。この左のメニューアイコンの中から四角形のアイコンクリックして
拡張機能「Angular Language Service」を追加します。

「Angular Language Service」で検索して「Editor service for Angular templates」と説明文ついてるやつクリックしてインストールします。

##lonic CLIインストール

コマンドプロンプト

npm install ionic cordova -g

出力メッセージ

C:\Users\take\AppData\Roaming\npm\cordova -> C:\Users\take\AppData\Roaming\npm\node_modules\cordova\bin\cordova
C:\Users\take\AppData\Roaming\npm\ionic -> C:\Users\take\AppData\Roaming\npm\node_modules\ionic\bin\ionic
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\ionic\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ cordova@8.0.0
+ ionic@3.20.0
added 658 packages from 462 contributors in 65.612s

できたっぽい。バージョン確認してみてバージョンでればおけ。

コマンドプロンプト

ionic -v

出力メッセージ

3.20.0

##スマホで動かすツールのインストール
###iOSアプリの場合：Xcodeインストール
ここからインストールするのですが、macOS向けの統合開発環境なのでWindowsPCの私はインストールできないっす。仮想でmacOS立てたりすればインストールできますが私は自分のMacでやろうかなと思いここはスキップします。

HDDに5GB以上の空きが必要らしいです。20分以上時間かかるらしいです。

###Androidアプリの場合：Android Studioインストール
ここからインストール。とりあえず私こっちインストールしてみた。
この黄緑のボタン押して

同意してダウンロード

exeファイルがダウンロードされるので案内に従って実行してインストール

合計3GB以上容量使いました。私は特に何も設定変えずにポチポチ進めて起動してます。20分くらい時間かかった気がします。