ionicアプリ開発入門 -環境構築- ionicとcordovaをインストールしよう
みなさんこんにちは、ご機嫌いかがですか？
今日は素敵なionicとcordovaをインストールしようと思います。
まずはじめに、前回インストールしたnvmがちゃんと機能しているか確認しましょうね。
ちょっとこちらをご覧ください。
npmのバージョン確認方法
5.6.0
npmがきちんとインストールされているようですね。
nodeが入っていれば勝手に付いてくると思います。
nodeはv8.11.4です。
私は前回入れた5.6.0を使います。
バージョンは何でも構いませんよ。みなさんが素敵だなと思うバージョンを入れましょう。
これで確認は完了です。
いよいよionicとcordovaのインストールへ
では始めましょう。
まず、ターミナルを開き
cd
します。
これで自分のhomeへ戻ってきますね
まずこのディレクトリからコマンドを打ってみましょう。
nvmでは前もってインストールしたバージョンを入れてあります。
こんな風に、キーボードをかる～くタイピングする程度でいいんですよ。
そして、ログが勝手に流れて
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.
いいでしょう。
こんなかんじです。
WARNと出てきますね。
なんだか危険な感じがします。
意味を調べてみましょう。
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のバージョンを上げよう
ターミナルから
をして、さらに上のバージョンを探します。
せっかくなので10系を使いましょう
またWARNでは困りますからね。
今回はこちらを使います
前回と同じように、nvmコマンドを使います。
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)
画面上に綺麗なログが出てきて
インストール完了です。
一応、nvmコマンドでバージョンを切り替えてみましょう。
これで使っているnodeが切り替わるはずです。
ではチェックしてみましょう。
おっと、せっかくなのでここでデフォルトのnodeのバージョンも変えてみましょうか
デフォルトを変えるには
nvmコマンドで
nvm alias default v該当のバージョン
私の場合は
ですね
再びnvm lsで確認してみましょう。
しっかり変更されていますね。
しても、
npm -vしても、バージョンが上がっています。
では改めてionicとcordovaをインストールしてみましょう。
コマンドはさっきと同じ様に
またエラーが出てますね。
npmのバージョンが古い。
でも、nodeを確認したところ
https://nodejs.org/ja/download/releases/
6.2.0が最新で良い気がします。
今回はこのままにしておきましょう。
ログを見ると、
+ cordova@8.0.0
added 676 packages from 498 contributors in 14.047s
こんな風に結果が出てきます。
これでionicとcordovaのインストールは完了です。
気に入っていただけましたか？
みなさんも是非やってみてください。
そして感想を聞かせてくださいね。
解説
では、ここからはちゃんと解説していきたいと思います。
この説明だけで終わりそうですね。
iはインストール
-gはグローバル
ionicとcordovaはパッケージ名ですね。
という事ですね。
ちなみに、
npm install -gと書いても動きます
日本語訳すると結構わかりやすいですね。
さて、ここで気になるべというのが-gのことかと思います
グローバルってなによ？
となると思います。
npmのグローバルとローカルの違い
npm iって、-gつけなくてもインストールできるんですよ
-gをつけない場合インストールをローカルインストールと言います。
npm i ionic
どちらでも可能ですが、ionicを使ってバリバリするぜと言う場合には-g付けておいた方が良いです。
いくつか違いを見ていきましょう。
npm i ionicでインストールすると
ionicはnode_modulesというディレクトリにインストールされます。
このままでも多分動作に問題は無いのですが、ionicのコマンドはnode_modulesを使用するディレクトリ内でしか動きません。
やろうと思えばどこからでも使うことはできる、はずです。やったこと無いので確証はありませんが。
逆に -gをつけてインストールするとグローバルですので
どこでも使えます。
理由はパスが通るから
プロジェクトを作成する際にionicコマンドというのを使用するので今回は-gをつけておきましょう。
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のプロジェクトを作成してみたいと思います。
それでは、ごきげんよう。さよなら。