【学習記録:199日目】プログラミングxパスを通す&npmどこ??問題

勉強記録

こんにちは!アラサーOLのぱるこです。

今回はプログラミング7ヶ月目(前半)の定例ブログです。
現在、絶賛Laravel月間中ですが、スケジュールが大幅に遅れているため、「Laravel」ではなく私がwebサービス部以降つまづいた箇所を、復習がてら振り返ります。

webサービス部の次に過酷だった環境構築

私が、webサービス部の次につまづいたところは、js中級以降で必須となってくるnpmなどを使った「環境構築」です。

初めて、ターミナル(黒い画面)を触り出してから、早3ヶ月くらいでしょうか。
最初の頃は、「npmインストールしたけど、どこにインストールされたのか?」、「パスを通すってなんなの〜?(泣)」の繰り返しでした。js中級・上級・laravel部の環境構築だけでも、何十時間も費やしたと思います・・・。

そんな「ちんぷんかんぷん状態」でしたが、ここ数ヶ月いろんなブログやqiitaを拝読し、ターミナルを触りまくったおかげで、多分「ちんぷんかんぷん状態」からは脱出でき、エラーが起きても対処できるようになりました。

今回は、超基礎編の環境構築の備忘録としてまとめてみます。

【大前提】コマンドとは?

最初に、コマンドとは「命令」のことです。
例えば、Linuxコマンドの場合、「pwd」と打つと、「現在地教えて」みたいな命令を出すことができます。
本ブログにはLinuxコマンドには触れていないので、分からない方はこちらのブログが参考になると思います。

ブクマ必至!Linuxコマンド一覧表【全33種】 | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト
Linuxコマンドを知りたいけど、どうすればいいのか・・・ よく使うものだけでも一通り覚えたいな・・・ こんな風に思ってはいませんか?初めてLinuxコマンドに触れた時は、あまりの数の多さや小難しさに挫折寸前になってしまったことを鮮明に覚えています。 ですが、実際によく使うものはそこまで多くなく、使っていればすぐ慣れて...

同じように、npmコマンドもnpmというパッケージ管理ツールを使うための命令のことです。
なので、npmを使うためには、このnpmコマンドを使えるようにしなければなりません。

(1)「npmがどこにインストールされたのか分からない問題」

まず初めに、homebrewなどを使って、node.jsインストールした際に、nodeコマンドとnpmコマンドが使えるようになります。

しかし、そもそもそれらのコマンドが、パソコンのどのフォルダにインストールされているのかが分からず、あやふやな状態で勉強を進めていました。というより、そもそも、macのディレクトリの階層がわかっていませんでした。

GUIで階層を確認してみる

ターミナル初心者が、いきなりCUIでディレクトリ階層を理解するには難しすぎました。
なので、GUIとCUI両方で確認してみます。

GUIとは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
用語「GUI」の意味を何となく説明しています。
CUIとは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
用語「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_modelusのイメージ

node_modelesが図書館なのではなく、「npm」がパッケージがいっぱいある図書館で、そこから必要なパッケージだけを「npm install gulp(パッケージ名)」でインストールして、インストールしたものがnode_modelusに入っているというイメージです。

全然違うやないかい!!本当にごめんなさい。。。

だけど、「node_modules」ってgulpをインストールしただけなのに、中身を見るとめちゃくちゃ入っていますよね。だけど、このパッケージは全部、gulpに関係のあるパッケージなんです。依存関係のせいで多いぽいですが、今の段階ではそこまで気にしなくていいと思うのでスルーします。

npm パッケージの依存多すぎ : (*x).b=z->a+y/c
◆ 数個のパッケージを入れるだけで依存でいっぱい入って node_modules のファイルが多すぎる  ◆ 同じことするのにパッケージごとに別のパッケージを使ってたりする  ◆ 直接書けばいいレベルのでもパッケージ使ってることがある  ◆ 必要機能以上に高機能なパッケージが
ちなみに、

インストールしたパッケージを見るためには、「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」とエラーが出てしまいます。

<span style="background-color:#c3d825" class="tadv-background-color">ターミナル</span>
ターミナル

「npm」のどこにあるか分からんばい!!

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

Node.jsのバージョンを自動で切り替えられるnodenvが超便利 - Qiita
サーバーサイドで動作するJavaScriptNode.jsはSassのコンパイル、webpackの使用等、今やフロントエンド開発に欠かせないものです。Node.jsを使う場合、バージョンを自動で切り替えられる nodenvというツール...

パスを通すための備忘録

パスを登録する

例えば、「/Users/paruko/Desktop/test/bin」にあるコマンドのパスを通したい場合

export PATH=$PATH:/Users/paruko/Desktop/test/bin
source ~/.bash_profile

何個かあるけど、今の所は「.bash_profile」で良さそう。

.bash_profile ? .bashrc ? いろいろあるけどこいつらなにもの? - Qiita
正体 ログインシェル(PCを起動したときにデフォルトに指定されるシェル)をbashにしている場合はログイン(起動)時に以下のような順番で設定ファイルが読み込まれ、PATHを通す、エイリアスを定義する、プログラムを実行するなどの設...

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

【初心者向け】シェル・ターミナル・コンソールの違いとは?
シェル・ターミナル・コンソールなどの言葉はLinuxを使っていく上で、必ず聞く言葉だろう。ただ、「いったい何が違くて、どれがどれだ???」という疑問は中級者でも出てくるくらい似ている言葉だ。このページではシェル・ターミナル・コンソールの違いについてお伝えしよう。
シェル (shell)とは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
用語「シェル (shell)」の意味を何となく説明しています。
パスの確認
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)にパスを登録する。

悲惨だった私のパスを通すの過去。

成長したな〜とつくづく思います。

PATHを通すために環境変数の設定を理解する (Mac OS X) - Qiita
前回の投稿 PATHを通すとは? (Mac OS X) PATHを通すには特定のファイルにexport PATH=$PATH:追加したいコマンド検索パスのような記述を追加するみたいですが、記述内容が理解できず「exportって...

【おまけ】gulp4の記述の参考ツイート

【おまけ】npm installしたらWARNした時の参考ツイート

プログラミング学習報告(7ヶ月目(前半))

7ヶ月目(前半)のプログラミングの勉強の振り返りです。
ちなみに私は、平日は10時〜19時までの会社勤務なので、平日は4時間、土日祝日は6時間を勉強時間の目標としています。

勉強時間の結果と目標(15日間)

まず、7ヶ月目(前半)のプログラミングの学習時間の結果です。

勉強時間 平日:4h、土日祝:6h

直近の1週間、計画通り進まず久々病みました。
でも、元気になったので、気持ち入れ替えてプログラミング頑張ります!

12月の目標(プログラミング編)

え、もう12月ですか・・・!早いですね。

12月の目標(プログラミング編)です。

12月の目標

【前半】テスト部受講/ポートフォリオ(今までの作品まとめる)/復習

【後半】卒業試験ポチる!

2019年ラスト1ヶ月も引き続き、頑張ります!!!

☆夢があるから頑張れる☆

横浜ベイスターズ 伊藤光選手のInstagramより
初心者向けオンラインプログラミング学習
大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール
タイトルとURLをコピーしました