ionicアプリ開発入門 -環境構築- ionicとcordovaをインストールしよう

ionicアプリ開発入門 -環境構築- ionicとcordovaをインストールしよう

みなさんこんにちは、ご機嫌いかがですか?

今日は素敵なionicとcordovaをインストールしようと思います。

まずはじめに、前回インストールしたnvmがちゃんと機能しているか確認しましょうね。

ちょっとこちらをご覧ください。

npmのバージョン確認方法

box@asobibako:~$ npm -v
5.6.0

npmがきちんとインストールされているようですね。
nodeが入っていれば勝手に付いてくると思います。
nodeはv8.11.4です。
私は前回入れた5.6.0を使います。

バージョンは何でも構いませんよ。みなさんが素敵だなと思うバージョンを入れましょう。

これで確認は完了です。

いよいよionicとcordovaのインストールへ

では始めましょう。

まず、ターミナルを開き
cd
します。
これで自分のhomeへ戻ってきますね

まずこのディレクトリからコマンドを打ってみましょう。

私はいつもnvmを使いますがnodeとnpmが入っていれば何だって構いませんよ。
nvmでは前もってインストールしたバージョンを入れてあります。
npm i -g ionic cordova

こんな風に、キーボードをかる~くタイピングする程度でいいんですよ。

そして、ログが勝手に流れて

インストール完了

npm WARN deprecated hoek@2.16.3: The major version is no longer supported. Please update to 4.x or newer
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN notice [SECURITY] tunnel-agent has the following vulnerability: 1 moderate. Go here for more details: https://nodesecurity.io/advisories?search=tunnel-agent&version=0.4.3 – Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 low. Go here for more details: https://nodesecurity.io/advisories?search=lodash&version=3.10.1 – Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] hoek has the following vulnerability: 1 moderate. Go here for more details: https://nodesecurity.io/advisories?search=hoek&version=2.16.3 – Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.

npm i -g ionic cordova

いいでしょう。
こんなかんじです。

WARNと出てきますね。
なんだか危険な感じがします。

意味を調べてみましょう。

npm WARN deprecated hoek@2.16.3:メジャーバージョンはもはやサポートされていません。 4.x以上に更新してください
npm WARN deprecated socks@1.1.10:2.xブランチを使用している場合は、ソケットデータフローの重大なバグや2.1.0で導入されたインポートの問題を避けるため、少なくとも2.1.6にアップグレードしてください
npm WARN通知[SECURITY] tunnel-agentには次の脆弱性があります。1 moderate。 https://nodesecurity.io/advisories?search=tunnel-agent&version=0.4.3 – あなたのnpmバージョンをアップグレードするために `npm i npm @ latest -g`を実行してから、` npm audit`を実行してください詳細情報
npm WARN通知[セキュリティ] lodashには以下の脆弱性が存在します。詳細はこちらへ:https://nodesecurity.io/advisories?search=lodash&version=310.1 – npmバージョンをアップグレードするには `npm i npm @ latest -g`を実行し、さらに詳細情報を得るには` npm audit`を実行してください。 。
npm WARN通知[セキュリティ] hoekには次の脆弱性があります。詳細はこちらへ:https://nodesecurity.io/advisories?search=hoek&version=2.16.3 – npmバージョンをアップグレードするには `npm i npm @ latest -g`を実行し、詳細情報を取得するには` npm audit`を実行します。 。

どうやらnpmのバージョンが低いと怒られているようですね。

このままでも動かす分には問題ないですが、せっかくなのでバージョンを上げてしまいましょう。

nodeのバージョンを上げよう

ターミナルから

nvm ls-remote

をして、さらに上のバージョンを探します。
せっかくなので10系を使いましょう
またWARNでは困りますからね。

今回はこちらを使います

v10.8.0

前回と同じように、nvmコマンドを使います。

nvm install 10.8.0
box@asobibako:~$ nvm install 10.8.0
Downloading and installing node v10.8.0…
Downloading https://nodejs.org/dist/v10.8.0/node-v10.8.0-linux-x64.tar.xz…
######################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v10.8.0 (npm v6.2.0)

nodeのバージョンを上げる

画面上に綺麗なログが出てきて
インストール完了です。

一応、nvmコマンドでバージョンを切り替えてみましょう。

nvm use ver 10.8.0

これで使っているnodeが切り替わるはずです。

ではチェックしてみましょう。

nvm ls

nvm ls

おっと、せっかくなのでここでデフォルトのnodeのバージョンも変えてみましょうか
デフォルトを変えるには
nvmコマンドで
nvm alias default v該当のバージョン

私の場合は

nvm alias default v10.8.0

ですね

再びnvm lsで確認してみましょう。
nvm ls再び
しっかり変更されていますね。

node -v

しても、
npm -vしても、バージョンが上がっています。

では改めてionicとcordovaをインストールしてみましょう。
コマンドはさっきと同じ様に

npm i -g ionic cordova

ionic cordova再びインストール
またエラーが出てますね。
npmのバージョンが古い。
でも、nodeを確認したところ
https://nodejs.org/ja/download/releases/

6.2.0が最新で良い気がします。
今回はこのままにしておきましょう。

ログを見ると、

+ ionic@4.1.1
+ cordova@8.0.0
added 676 packages from 498 contributors in 14.047s


こんな風に結果が出てきます。

これでionicとcordovaのインストールは完了です。

ね、簡単でしょう?

気に入っていただけましたか?
みなさんも是非やってみてください。
そして感想を聞かせてくださいね。

解説

では、ここからはちゃんと解説していきたいと思います。

npm i -g ionic cordova

この説明だけで終わりそうですね。

npmのコマンド
iはインストール
-gはグローバル
ionicとcordovaはパッケージ名ですね。
npmコマンドで、インストール、グローバルでよろしく。 パッケージはionicとcordovaですよ~

という事ですね。
ちなみに、
npm install -gと書いても動きます
日本語訳すると結構わかりやすいですね。

さて、ここで気になるべというのが-gのことかと思います
グローバルってなによ?
となると思います。

npmのグローバルとローカルの違い

npm iって、-gつけなくてもインストールできるんですよ
-gをつけない場合インストールをローカルインストールと言います。

npm i -g ionic
npm i ionic

どちらでも可能ですが、ionicを使ってバリバリするぜと言う場合には-g付けておいた方が良いです。
いくつか違いを見ていきましょう。

npm i ionicでインストールすると
ionicはnode_modulesというディレクトリにインストールされます。
このままでも多分動作に問題は無いのですが、ionicのコマンドはnode_modulesを使用するディレクトリ内でしか動きません。
やろうと思えばどこからでも使うことはできる、はずです。やったこと無いので確証はありませんが。

逆に -gをつけてインストールするとグローバルですので
どこでも使えます。
理由はパスが通るから
プロジェクトを作成する際にionicコマンドというのを使用するので今回は-gをつけておきましょう。

グローバルは、windowsでいうと
c:\Program Files\の中にインストールするのを思い浮かべるとわかりやすいかも。

ローカルは、デスクトップにフォルダを作って、その中にzipファイルを解凍して使うフリーツールのイメージです。
私の中では、ですが。。

ここらへん私の中でもまだあいまいな部分がありちゃんと切り分けできておりません。
npmのページを作成してそちらに詳しく書いた方が良いかと考えておりますん。

ionic cordovaのバージョン指定インストール方法

ちなみに、-g ionic~
の部分ですが、ionicのバージョンを指定してインストールすることも可能です。
npm i -g ionic@4.0.0-alpha.f2bf06e0
とかね
cordovaも同じように@~~
をイジってバージョンを指定してのインストールが行えます。

ionicのバージョンに関しては
こちらから確認できました。
ionicのバージョンリスト

こっちはcordovaのバージョンね
cordovaのバージョンリスト

今回はとりあえずグローバルにionicとcordovaを入れてやったぜ、とお考えいただければOKです。
解説者求む
次回は簡単にionicのプロジェクトを作成してみたいと思います。

それでは、ごきげんよう。さよなら。