こんにちは!アラサーOLのぱるこです。
今回はプログラミング7ヶ月目(前半)の定例ブログです。
現在、絶賛Laravel月間中ですが、スケジュールが大幅に遅れているため、「Laravel」ではなく私がwebサービス部以降つまづいた箇所を、復習がてら振り返ります。
webサービス部の次に過酷だった環境構築
私が、webサービス部の次につまづいたところは、js中級以降で必須となってくるnpmなどを使った「環境構築」です。
初めて、ターミナル(黒い画面)を触り出してから、早3ヶ月くらいでしょうか。
最初の頃は、「npmインストールしたけど、どこにインストールされたのか?」、「パスを通すってなんなの〜?(泣)」の繰り返しでした。js中級・上級・laravel部の環境構築だけでも、何十時間も費やしたと思います・・・。
そんな「ちんぷんかんぷん状態」でしたが、ここ数ヶ月いろんなブログやqiitaを拝読し、ターミナルを触りまくったおかげで、多分「ちんぷんかんぷん状態」からは脱出でき、エラーが起きても対処できるようになりました。
今回は、超基礎編の環境構築の備忘録としてまとめてみます。
【大前提】コマンドとは?
最初に、コマンドとは「命令」のことです。
例えば、Linuxコマンドの場合、「pwd」と打つと、「現在地教えて」みたいな命令を出すことができます。
本ブログにはLinuxコマンドには触れていないので、分からない方はこちらのブログが参考になると思います。

同じように、npmコマンドもnpmというパッケージ管理ツールを使うための命令のことです。
なので、npmを使うためには、このnpmコマンドを使えるようにしなければなりません。
(1)「npmがどこにインストールされたのか分からない問題」
まず初めに、homebrewなどを使って、node.jsインストールした際に、nodeコマンドとnpmコマンドが使えるようになります。
しかし、そもそもそれらのコマンドが、パソコンのどのフォルダにインストールされているのかが分からず、あやふやな状態で勉強を進めていました。というより、そもそも、macのディレクトリの階層がわかっていませんでした。
GUIで階層を確認してみる
ターミナル初心者が、いきなりCUIでディレクトリ階層を理解するには難しすぎました。
なので、GUIとCUI両方で確認してみます。
まずターミナルを開き、現在地確認
$ pwd
//出力結果
/Users/parukomac

GUIでいうと、ターミナルを立ち上げた最初の時点では、ホームディレクトリと呼ばれる緑の場所「Parukomac」にいます。
どこにnpmコマンドがあるか確認
「npmコマンドどこーーー?」と聞くには、whichを使います。
$ which npm
//出力結果
/usr/local/bin/npm
「/usr/local/bin/npm」と出てきましたが、「usr」ってどこにあるのか??
GUIで確認しましょう!!しかし、GUIのデフォルト設定では、この「usr」は見れないので、【 shift + command + . 】で隠しファイルを表示します。

npmコマンドとnodeコマンドも見つかりました!

ターミナルで確認しても無事、「/usr/local/bin」のなかに、npmコマンドとnodeコマンドがありました。
$ cd /usr/local/bin
$ ls
//出力結果
node npm
node_modulesができる場所
ちなみに、global(PC全体)にnpmコマンドを使ってパッケージをインストールした場合、「bin」ディレクトリではなく、(デフォルトでは)同じ階層の「lib」の中に「node_modules」というディレクトリが作られ、そこにインストールしたパッケージが保存されます。
binはあくまで、命令するためのコマンドが入っているだけです。

グローバルのインストール先が変わっている場合があるので、インストール先を確認したい場合は「npm root -g」で調べることができます。私も色々いじくったせいで、変わっていました・・・(笑)
$ npm root -g
//出力結果
/usr/local/lib/node_modules
謝罪!
ちなみに、この場をお借りして謝罪したいことが・・・
JOKOJOKOさんから「node_modules」が何かよく分からないという質問がありましたが、私間違っておりました。大変失礼しました。
node_modelesが図書館なのではなく、
「npm」がパッケージがいっぱいある図書館の間違いです!!!
node_modelesが図書館なのではなく、「npm」がパッケージがいっぱいある図書館で、そこから必要なパッケージだけを「npm install gulp(パッケージ名)」でインストールして、インストールしたものがnode_modelusに入っているというイメージです。
全然違うやないかい!!本当にごめんなさい。。。
だけど、「node_modules」ってgulpをインストールしただけなのに、中身を見るとめちゃくちゃ入っていますよね。だけど、このパッケージは全部、gulpに関係のあるパッケージなんです。依存関係のせいで多いぽいですが、今の段階ではそこまで気にしなくていいと思うのでスルーします。

インストールしたパッケージを見るためには、「npm list」とコマンド打てばみれます。
gulpだけインストールしたのに、「多っ!!!!」
実際に使うファイルは少ないと思いますが、それにしても多すぎますね。容量・・・・
$ npm list
//出力結果
test@1.0.0 /Users/paruko/Desktop/test
└─┬ gulp@4.0.2
├─┬ glob-watcher@5.0.3
│ ├─┬ anymatch@2.0.0
│ │ ├─┬ micromatch@3.1.10
~~~~~~~
(膨大な数のファイルのため省略)
~~~~~~~
├── now-and-later@2.0.1 deduped
├── remove-bom-buffer@3.0.0 deduped
└── vinyl@2.2.0 deduped
(2)npmインストールしたのに、「command not found」が出る問題!!!!
次の問題は、みんな通る道ではないでしょうか・・・。
この問題を調べると、「パスを通す」という言葉が必ず出てきます。
今となるとQiitaを読むと、「へ〜」となりますが、当時は、パスヲトオス?コマンド実行パス???というわけワカメな状態でした。
npmがどこにあるかターミナル(シェル)が分からないから起こる!!
そもそもなんで、npmをちゃんとインストールしたのに、「command not found」が出るかというと、ターミナル(シェル)がnpmコマンドがどこにあるか分からないからなんです。
先ほど、グローバルにインストールしたnpmコマンドは「/usr/local/bin/npm 」にありましたが、そのコマンドを使うためには、本来、『/usr/local/bin/npm』とフルパスで打つべきですが、「npm」と打つだけで、「/usr/local/bin/npm 」のことねとターミナル(シェル)が理解しています。
なぜ、ターミナルがすでに理解しているかというと、すでにデフォルトで「パスを通しているから」です。
パスを通すとは????

「パスを通す」とは、簡単にいうとショートカットキーを作ることです。
今まで、何気に「npm install -g gulp」のようにnpmコマンドを使っていましたが、すでにデフォルトのショートカットキーが登録されているので使えていたのです。
なので、別のディレクトリにインストールしたnpmコマンドを使いたい場合、ショートカットキーを作る(パスの登録)をしていないと、「command not found」とエラーが出てしまいます。

「npm」のどこにあるか分からんばい!!
ちなみに私は、Node.jsのバージョンを自動で切り替えられるndenvを使おうとした時に、このパスを通すという壁にぶつかりました。

パスを通すための備忘録
パスを登録する
例えば、「/Users/paruko/Desktop/test/bin」にあるコマンドのパスを通したい場合
export PATH=$PATH:/Users/paruko/Desktop/test/bin
source ~/.bash_profile
何個かあるけど、今の所は「.bash_profile」で良さそう。

ちなみに、ターミナル=シェルではないです。

パスの確認
echo $PATH;
//出力結果
/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/sbin
整理すると
/usr/local/bin:
/usr/bin:
/bin:
/usr/sbin:
/sbin:
/usr/local/sbin
デフォルトですでにこれらのパスは登録されており、パスは「:」で区切られています。また、上から優先順位が高くなるので、複数のディレクトリにコマンドをインストールしている場合は、この優先順位が重要になります。
訳も分からずパスを通しまくった。整理したい
export PATH = /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/sbin
source ~/.bash_profile
PATH変数に入れたいパスだけを代入するイメージ。そのあと、シェル(bash_profile)にパスを登録する。
悲惨だった私のパスを通すの過去。
成長したな〜とつくづく思います。

【おまけ】gulp4の記述の参考ツイート
【おまけ】npm installしたらWARNした時の参考ツイート
プログラミング学習報告(7ヶ月目(前半))
7ヶ月目(前半)のプログラミングの勉強の振り返りです。
ちなみに私は、平日は10時〜19時までの会社勤務なので、平日は4時間、土日祝日は6時間を勉強時間の目標としています。
勉強時間の結果と目標(15日間)
まず、7ヶ月目(前半)のプログラミングの学習時間の結果です。
勉強時間 平日:4h、土日祝:6h

直近の1週間、計画通り進まず久々病みました。
でも、元気になったので、気持ち入れ替えてプログラミング頑張ります!
12月の目標(プログラミング編)
え、もう12月ですか・・・!早いですね。
12月の目標(プログラミング編)です。
【前半】テスト部受講/ポートフォリオ(今までの作品まとめる)/復習
【後半】卒業試験ポチる!
2019年ラスト1ヶ月も引き続き、頑張ります!!!
☆夢があるから頑張れる☆
横浜ベイスターズ 伊藤光選手のInstagramより
