Html5でアプリを作ろう!Ionicでモバイルアプリを作る【環境構築編1】

2020-10-31

macでIonic開発環境構築の流れを簡潔な解説とコマンドのみのシンプル構造でメモ(自分用)

参照書籍:「Ionicでつくるモバイルアプリ制作入門」の2018年版(青本)

縁の下の働き者(homebrow、node、npm)のインストール

homebrowインストール
※Xcodeのコマンドラインツールのダウンロードが始まる

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

nodebrewのインストール

$ brew install nodebrew

インストール状況確認

$ brew list
$ nodebrew -v

nodebrewセットアップ

$ nodebrew setup

実行パスを通す
nodebrew setupを打った時のコマンドを入力

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile

node.jpのインストール

$ nodebrew install-binary stable

nodeのバージョン確認

$ nodebrew list

使用するための設定と、その確認

$ nodebrew use stable

node.jsのバージョン確認

$ node -v

npmのバージョン確認

$ npm -v

ライブラリの更新

npmの更新

$ npm update -g npm

Homebrewの更新

$ brew update

Nodebrewの更新

$ brew upgrade nodebrew

Node.jsの更新

$ nodebrew ls-remote

縁の下の働き者たちのインストールが終わりました。
これで次にIonicのインストールができます。

Ionicのインストール

次はIonicのインストールなのですが、Ionic6からcordovaではなく、Ionic CLiのインストールを勧めてきます。cordovaと99%の互換性のあるライブラリーとのことです。

これまでのcordovaではxcodeなどのコンパイラーがCUIで動作していた気がしますが、このIonic CLiはxcodeやAndroid StudioのコンパイラーのGUI側に吐き出すようになっている気がします。
今回は前回の構築から時間が空いての再構築しているため、Cordovaの動作についてはあやふやです(汗)が、GUIで設定しながらコンパイルできるようになって楽になった気がします。

ここでIonic CLiを使用するか、cordovaを使用するかの選択があります。cordovaを入れていても、その後Ionic CLiをインストールするときは、cordovaのアンインストールを行います。

現在私はIonic CLiの開発環境を使用しています。99%の互換性とのことなので、とりあえず使っています。

Ionic CLiインストールの場合

Ionic CLI インストール

$ npm i -g @ionic/cli

Ionic CLI アップデートコマンド

$ npm i -g @ionic/cli to update

cordovaをインストールする場合

cordovaを使用する場合のコマンド(私は使っていません)

$ npm install -g cordova ionic

cordovaのアンインストールコマンド(Ionic CLiインストール前に実行)

npm uninstall -g ionic

お疲れさまでした。
Ionicのインストール作業は以上です。
次はコンパイル環境の構築です。アプリ作成を目指す私は必須です。