こんにちは！アラサーOLのぱるこです。
今回はプログラミング7ヶ月目（前半）の定例ブログです。
現在、絶賛Laravel月間中ですが、スケジュールが大幅に遅れているため、「Laravel」ではなく私がwebサービス部以降つまづいた箇所を、復習がてら振り返ります。
webサービス部の次に過酷だった環境構築
私が、webサービス部の次につまづいたところは、js中級以降で必須となってくるnpmなどを使った「環境構築」です。
初めて、ターミナル（黒い画面）を触り出してから、早3ヶ月くらいでしょうか。
最初の頃は、「npmインストールしたけど、どこにインストールされたのか？」、「パスを通すってなんなの〜？（泣）」の繰り返しでした。js中級・上級・laravel部の環境構築だけでも、何十時間も費やしたと思います・・・。
そんな「ちんぷんかんぷん状態」でしたが、ここ数ヶ月いろんなブログやqiitaを拝読し、ターミナルを触りまくったおかげで、多分「ちんぷんかんぷん状態」からは脱出でき、エラーが起きても対処できるようになりました。
今回は、超基礎編の環境構築の備忘録としてまとめてみます。
【大前提】コマンドとは？
最初に、コマンドとは「命令」のことです。
例えば、Linuxコマンドの場合、「pwd」と打つと、「現在地教えて」みたいな命令を出すことができます。
本ブログにはLinuxコマンドには触れていないので、分からない方はこちらのブログが参考になると思います。
同じように、npmコマンドもnpmというパッケージ管理ツールを使うための命令のことです。
なので、npmを使うためには、このnpmコマンドを使えるようにしなければなりません。
（１）「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 npmnode_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（２）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_profilePATH変数に入れたいパスだけを代入するイメージ。そのあと、シェル（bash_profile）にパスを登録する。
悲惨だった私のパスを通すの過去。
成長したな〜とつくづく思います。
【おまけ】gulp4の記述の参考ツイート
【おまけ】npm installしたらWARNした時の参考ツイート
プログラミング学習報告（7ヶ月目(前半)）
7ヶ月目（前半）のプログラミングの勉強の振り返りです。
ちなみに私は、平日は10時〜19時までの会社勤務なので、平日は4時間、土日祝日は6時間を勉強時間の目標としています。
勉強時間の結果と目標(15日間)
まず、7ヶ月目（前半）のプログラミングの学習時間の結果です。
勉強時間 平日：4h、土日祝：6h
直近の1週間、計画通り進まず久々病みました。
でも、元気になったので、気持ち入れ替えてプログラミング頑張ります！
12月の目標（プログラミング編）
え、もう12月ですか・・・！早いですね。
12月の目標（プログラミング編）です。
【前半】テスト部受講/ポートフォリオ（今までの作品まとめる）/復習
【後半】卒業試験ポチる！
2019年ラスト１ヶ月も引き続き、頑張ります！！！
☆夢があるから頑張れる☆
横浜ベイスターズ 伊藤光選手のInstagramより
