MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
[JavaScript_中級者への道] JavaScript開発環境について – npm について

[JavaScript_中級者への道] JavaScript開発環境について – npm について

公開日:2020年03月19日
最終更新日:2020年03月25日
オンスタ運営
マークアップ
ホーム > 全記事一覧 > 制作 > エンジニア > マークアップ > [JavaScript_中級者への道] JavaScript開発環境について – npm について
このエントリーをはてなブックマークに追加
[JavaScript_中級者への道] JavaScript開発環境について – npm について
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

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開発の奥深さ・面白さを感じて頂ければ嬉しいです!


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

コーダーはCSS設計に夢を見る
エンジニア
マークアップ
公開日: 2017年02月10日
最終更新日: 2019年05月28日
コーダーはCSS設計に夢を見る
オンスタ運営
【CSS】CSSレイアウト組まとめ(前編)
マークアップ
公開日: 2018年09月08日
最終更新日: 2019年05月28日
【CSS】CSSレイアウト組まとめ(前編)
オンスタ運営
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2019年03月30日
最終更新日: 2019年09月02日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営
一歩踏み込んだマークダウン(Markdown)の紹介とマークダウン記法を学ぶ
マークアップ
公開日: 2019年10月08日
最終更新日: 2019年10月08日
一歩踏み込んだマークダウン(Markdown)の紹介とマークダウン記法を学ぶ
  • # markdown
  • # マークダウン
  • # 効率化
オンスタ運営
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2019年09月05日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
もう一度考えてみる、HTMLのマークアップとSEO対策についての考察
マークアップ
公開日: 2016年12月15日
最終更新日: 2019年05月28日
もう一度考えてみる、HTMLのマークアップとSEO対策についての考察
オンスタ運営
WEB用に使われる画像形式の基礎と特徴
Webデザイン
マークアップ
公開日: 2019年04月19日
最終更新日: 2019年06月15日
WEB用に使われる画像形式の基礎と特徴
オンスタ運営
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
プログラミング
マークアップ
公開日: 2018年12月28日
最終更新日: 2019年05月28日
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
オンスタ運営
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
エンジニア
マークアップ
公開日: 2017年01月10日
最終更新日: 2019年06月26日
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
オンスタ運営
【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法
プログラミング
マークアップ
公開日: 2020年01月16日
最終更新日: 2020年01月16日
【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法
  • # Sass
  • # vue-cli
  • # Vue.js
  • # vuejs
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。