MENU
プログラミング

Node.jsのnpmとは何なのかわからなかったのでまとめてみた【npm初心者】

shu

こんにちは。休みは毎日更新がんばろうと思ったのですがいろいろ追われてる日々でございます（笑）今日は先日ちょっとNode.jsのnpmたる物に触れたのですが初心者にはワケが分からずいろいろネットを散策するハメになったので簡単にまとめました。まだいまいちわかってないんですけどメモ程度にまとめてみました。

さて、内容に入って行こうと思うんですがこの記事は

  • HTML
  • CSS
  • JavaScript
  • jQuery

をだいたい網羅した人が読むと次のステップに繋がる記事になるんじゃないかと思います。

Node.jsとかnpmって何？

Node.jsはサーバーサイドで使えるJavascriptみたいです。（めちゃくちゃ簡潔w）
んで、npmって何かっていうとその、ウェブ制作お助けツールみたいな感じらしいです。Node.jsで書かれてるから使う為に少しNode.jsに触れないといけないみたい。
例えばjQueryのプラグイン使う時にgithubを見るとこんな記号があってこれずっとなんだよって思ってたんですけどこれこそがnpm（笑）

$ npm install "プラグイン名"

で、結局何ができるの？

いろいろメリットがあるみたいですが、そこは省略でとりあえず今までHTMLに

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/なんかのプラグイン.min.js"></script>
<script src="//ajax.googleapis.com/なんかのプラグイン.min.js"></script>
<script src="//ajax.googleapis.com/なんかのプラグイン.min.js"></script>

みたいに書いてたら多いからもっとシンプルにしようぜって話みたいです。
あとgulp, webpack, parcelみたいなやつもよく見かけるんですがこれは同じくプラグインみたいな感じなんですけどウェブ自体に表示されるアニメーションプラグインとかではなくウェブ制作でめんどくさいことを自動でやってくれるプラグイン？アプリみたいな感じです。

Let’s do it!!!

f:id:sgwshu:20180413103146p:plain
f:id:sgwshu:20180413102015p:plain
f:id:sgwshu:20180413102104p:plain

さてそれではstep by stepでやっていきます。こんな感じに普段通りindex.htmlとmain.jsをルートフォルダに入れてください。

ちなみにMacのターミナルというアプリをしようします。開いてください。このアイコンです。

開くとこんな感じのコマンド打ち込むとこがでてくるのであとは今からいうコードを全部コピペしていってください。（おそらくMacでデフォだと白）

f:id:sgwshu:20180413114342p:plain

こんな感じでコピペしてってください。

$マークは無視で大丈夫です。
１　始めにnode.jsをあなたのパソコンに入れます。

$ node --version

で一旦nodeが入ってないか確認して入っていたらアンインストールする方法をググって戻ってきてくださいwもし入ってなかったらnot foundとでてきます。

２

$ brew install nodebrew

３

$ vi ~/.bash_profile

４

$ NODEBREW_HOME=/usr/local/var/nodebrew/current
export NODEBREW_HOME
export NODEBREW_ROOT=/usr/local/var/nodebrew
export PATH=$PATH:$NODEBREW_HOME/bin

５

$ nodebrew install-binary latest

６

$ node -v

この時点でv9.10.1のようにバージョンがnode.jsのダウンロードは成功です。

ルートフォルダにいろいろインストールする

ここから本番です。とりあえず先ほど作ったindex.htmlやmain.jsが入ったフォルダをデスクトップに置いてください。

７

$ cd Desktop

８

$ cd "作成したフォルダ名"

９

$ npm init

１０

npm install jquery --save

１１
main.jsのトップにこの１行を書き込みます

var $ = require('jquery');

１２
コマンドに戻ってこれ

npm install webpack webpack-cli --save-dev

１３
さらにこれ（コマンド）

npx webpack --mode development main.js --output bundle.js

１４
HTMLを開きこちらを追加

<head>
    <meta charset="UTF-8">
    <script src="./bundle.js"></script>
</head>

これで1つライブラリを追加する作業は終わりです。
現状このhtmlを開くとjqueryがブラウザで動くはずです。

他にもプラグイン等を追加したい場合は

npm install プラグイン名（github等で指定されてるはず） --save

main.jsに

var 変数名 = require('プラグイン名');

そして再びコマンドでこちらを

npx webpack --mode development main.js --output bundle.js

するとどちらとも動くはずです。
ってな感じでnpmを使うとhtmlが綺麗になってメインjavascirptを読むだけで何のプラグインを使っているのか一目でわかります。
そしてルートに作られるjsonデータには何をしたのかが記録されて行きプロセスがわかるようになるというワケですねw
今回はすごい長くなったけどこの辺で。最低限必須なコマンドの解説も次回やれたらいいなと思ってます。ちなみにできなかった場合はコメントください。自分もそこまでコマンド理解できてないので（笑）
ちなみに今回はこちらのサイトを参考にさせていただきました。
もっと深く知りたい場合はこちらをみて見るといいかもしれないです。しかし、こちらの記事developmentのスペルを間違ってるので最後までいけません。お気をつけください（笑）（そのせいで昨日3時間試行錯誤した……w）

ABOUT ME
sgw
sgw
フロントエンド
カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。
おすすめ記事
こんな記事も読まれています
記事URLをコピーしました