![[JavaScript_中級者への道] JavaScript開発環境について – npm について](https://online-study.jp/wp-content/themes/online-study-html/dist/assets/images/img-page-header-format.jpg)
![[JavaScript_中級者への道] JavaScript開発環境について – npm について](https://online-study.jp/wp-content/uploads/2020/03/npm.png)
JavaScript開発環境について - npm について
Node.js を利用した開発環境について、今の業務フローでは特に意識することなく開発を行うことができるようになっています。
しかし、｢フロントエンド｣というWeb業界の特徴として、多くの場合｢開発環境｣も含んだスキルセットです。
中々勉強する機会のない開発環境について、すこし掘り下げてみましょう。
開発環境の歴史
フロントエンドの開発環境の歴史は、遡ると非常に古いものです。
現状の開発ツールとして利用している Sass も、実は2006年から開発されています。
( 元々は Ruby で開発されていました。)
JavaScript は元々ブラウザ上でのみ動くプログラム言語で、ブラウザなしで実行することはバックエンドで動作する Node.js が開発されるまで長らく不可能だったのです。
それまで、開発環境としては Codekit といったGUIで Sass や Less をコンパイルするアプリケーションを利用していました。
Node.jsの登場
2008年にGoogleChromeが公開されました。
そのChromeに搭載されていたV8エンジンというJavaScriptの実行エンジンが群を抜いて高性能で、業界を度巻。JavaScript = 遅いという常識を覆します。
Node.js が開発されたのは2009年です。当然、Node.jsもこのV8エンジン上で動作します。
そこから CommonJSというサーバーサイドで動作するJavaScriptの標準仕様が策定され、紆余曲折を得て今に至っています。
今利用している npm (node package manager) も初登場は2011年。
それまでは、フロントエンドの開発環境としてNode.jsを利用するといった動きも特に見られず。みんな普通にエディアで開発を行っていました。
Bowerの登場
2012年に、Twitterが開発した Bower というフロントエンドのパッケージ管理ツールが登場しました。
これが一時的に流行ります。
使い方は 今の npm と同じような形です。
bower install jquery
上記のコマンドで プロジェクトファイル内に bower_components というディレクトリが生成され、その中にjqueryがインストールされます。
Gruntの登場
そして、タスクランナーのさきがけである Grunt というツールが登場します。
Gruntfile という設定ファイルに記述することで、SassやLessのコンパイル、Jsのconcat、uglify などを自動で行ってくれる今と近しいツールです。
フロントエンドの開発は、この Grunt で 開発環境を整え、Bowerでフロントエンドで利用するパッケージの管理をするという手法が流行っていました。
GruntもBowerも死ぬ
2013 ~ 2016年の間は非常に開発環境の変遷がひどい時期でした。
｢すごい！！｣とニュースになるようなツールが出ては、数ヶ月すると忘れ去られ….
フロントエンドエンジニアは、そのような出ては死んでいくツールをひたすら追っていくという無意味な作業に追われていた時期です。
そんな中、Gruntに成り代わり実行速度も速いGulpというツールが登場し、Browserify という npm で管理するツールをフロントエンド用に書き出すライブラリも出てきてGruntとBowerは死にました。
1年ぐらいはGulpも生き残っていましたが、その後 ｢npm に run script という仕組みがあるんだからそれ使おうよ｣論や、｢これからはES6っしょ！｣という次世代のJavaScript仕様をブラウザ互換で書き出せるBabelが登場。そしてフロントエンドもAngluarやReactといったモダンなWebアプリケーション用のフレームワークが台頭する中、｢もっとモダンにアプリケーション開発しようぜ｣とWebpackというビルドツールが開発されます。
何をいっているかわかりませんが、とにかくかなりフロントエンドの開発環境は激動の時期を迎え、2018年 以降は、｢npm run script + webpack + other｣という開発環境の構成が定着しています(私にはそう思えます。)
また、弊社では利用していませんが AltJS と呼ばれる｢JavaScriptはイケてないからもっと便利にかける仕様で開発しようぜ｣勢もいます。(TypeScript とか FlowTypeとか。Babelもその一員ではあるかも)
｢TypeScriptでコーディング => JavaScriptにコンパイルして利用｣という、一目見るとなぜそんなことを？ということがフロントエンドの業界では普通のことだったりします。
歴史まとめ
フロントエンドの環境はここ7年あまりで激動の時代を迎えていた。
現在は、｢npm run script + webpack + other｣という開発環境が定着している。
1. npm について
さて、本題です。今日は Node.jsのパッケージ管理ツールである npm について紹介します。
npmとは？
Node Package Managerの略で、Node.jsのモジュールを管理するツールです。
package.json
npmはフロントエンドで使用するパッケージのバージョン管理を行うのに用いられます。
npmでは、npmでインストールしたパッケージのバージョン情報をpackage.jsonに格納します。
このpackage.jsonからパッケージを一括でインストールすることが出来るため、package.jsonを一元管理することによりフロントエンドで使用するパッケージのバージョン管理を一元化することが出来ます。
インストールの種類
npmではパッケージをインストールする方法が、グローバルインストールとローカルインストールの2種類存在します。
グローバルインストールでは npmのルート配下にあるnode_modulesにパッケージがインストールされます。(大抵は ~/node_modules)
Node.jsインストール時にNode.jsの実行モジュールのインストール先にパスが通されているため、グローバルインストールされたパッケージを全てのプロジェクトで使用することが出来ます。
ローカルインストールではプロジェクトのルート配下にあるnode_modulesにパッケージがインストールされます。 ローカルインストールされたパッケージは対象のプロジェクトのみで使用することが出来ます。
導入
Node.jsをインストールすると同時にnpmもインストールされます。
使用方法
バージョン確認
下記コマンドで、npmのバージョンを確認出来ます。
npm --version
初期化
プロジェクトのルートディレクトリで下記コマンドを実行します。
npm init
これにより、プロジェクトのルートディレクトリ配下にpackage.jsonが作成されます。
パッケージの復元
プロジェクトのルートディレクトリにパッケージ情報が記載されたpackage.jsonを置き、下記コマンドを実行します。
npm install
これにより、package.jsonに記載されたパッケージが一括でインストールされます。
パッケージのインストール
グローバルインストールする場合は `-g` もしくは `--global` オプションをつけ実行します。
npm install –g typings
ローカルインストールする場合はプロジェクトのルート配下で下記コマンドを実行します。
npm install jquery
--saveオプションを付与するとpackage.jsonのdependenciesに依存関係が追記されます。
dependenciesには公開する際に必要なパッケージを記録します。
npm install --save jquery
--save-devオプションを付与するとpackage.jsonのdevDependenciesに依存関係が追記されます。
devDependenciesには開発時に必要なパッケージを記録します（テストツールやタスクランナー等）。
npm install --save-dev jquery
バージョンを指定してインストールする場合はパッケージ名の後にバージョン名を指定します。
npm install jquery@1.1.0
パッケージのバージョン確認
リリースされたパッケージのバージョン一覧を下記コマンドで取得出来ます。
npm info jquery versions
ローカルインストール済みのパッケージのバージョン一覧は下記コマンドで確認することが出来ます。
npm list --depth=0
グローバルインストール済みのパッケージのバージョン一覧は下記コマンドで確認することが出来ます。
npm list --depth=0 -g
パッケージの更新
下記コマンドで未更新のパッケージを確認出来ます。
npm outdated
下記コマンドでpackage.jsonに記載されているパッケージのバージョンに更新されます。
npm update
ただし、最新のバージョンを使用するには、package.jsonに記載されているパッケージのバージョンを更新する必要があります。
これを手動で一つ一つ最新か確認するのは大変です。
そこで、npm-check-updates を使用します。
npm-check-updatesをグローバルインストールします。
npm install -g npm-check-updates
下記コマンドでpackage.jsonのパッケージのバージョンを一括で最新にすることが出来るようになります。
npm-check-updates -u
この後にnpm updateを実行することで、一括で最新にすることが出来ます。
パッケージのアンインストール
下記コマンドで、グローバルインストールしたパッケージをアンインストールすることが出来ます。
npm uninstall -g jquery
ローカルインストールしたパッケージをアンインストールする場合は下記コマンドを実行します。
npm uninstall jquery
package.jsonのdependenciesから依存関係を削除する場合は--saveオプションを付与します。
npm uninstall --save jquery
package.jsonのdevDependenciesから依存関係を削除する場合は--save-devオプションを付与します。
npm uninstall --save-dev jquery
2. npm run script について
npmには run scriptという仕様が存在し、package.jsonに定義したコマンドをnpmを通じて実行することが可能です。
{
"name": "gg-template",
"version": "1.0.0",
"description": "My scrumtrulescent Nuxt.js project",
"author": "1shiharaT",
"private": true,
// ここから npm run scriptの設定
"scripts": {
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint",
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
scripts というプロパティに、キーがコマンド名、値が実行するコマンドという形式で記述します。
これにより、通常の業務の中でも効率化を行えることもあります。
例 : `npm run git` とコマンドを打つと、git add 、git commit 、git push -u origin master を実行する
"scripts": {
"git": "git add --all && git commit -m 'fixed' && git push -u origin master"
},
例えば、実行したい処理を別の.jsファイルに書いておき、実行することも可能です。
例: `npm run imagemin` を実行すると、macにインストールされているimageOptimアプリでdist内の画像を最適化する
package.json
"scripts": {
"imagemin": "node ./imagemin.js"
},
package.json と同じ階層に imagemin.js というファイルを作成します。
imagemin.js
const execSync = require('child_process').execSync;
execSync("open -a ImageOptim ./dist/assets/images/*.*")
これで `npm run imagemin` と実行すると、ImageOptim アプリが開き、dist/assets/images 内の画像ファイルを最適化してくれます。
まとめ
JavaScript開発の歴史、npmの各コマンドなどを簡単にご紹介しました。
JavaScript開発の奥深さ・面白さを感じて頂ければ嬉しいです！
Udemyを実際に体験した方の感想記事もぜひご覧ください♪
- 【体験談】主婦が「自宅で働きたい」を叶えるために、広告バナー制作を学んでみた
- 【体験談】全くの初心者がUdemyでモーショングラフィックスを学んでみた
- 【体験談】Udemy「みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習」を実際にやってみた感想
- 【体験談】無料！？Udemyで学ぶはじめてのAI（ディープラーニング、機械学習）
- 【体験談】UdemyでWeb開発を学びました【コスパ最強】
