今の現場(2017年10月入場)ですが、比較的モダンな技術を使っておりまして、私の場合、特にJavaScriptにカルチャーショックを受けてしました。
現場に入る前はAngularJSなどは独学でやっていましたが、ファイルの管理自体などはbowerをようやく独学で覚えた程度でして、相変わらず、jQueryを使いながらいろんなJavaScriptファイルを書くことが多く、JavaScriptをモジュール化するといった概念はありまんでした。せいぜい関数スコープを使用するぐらいです。
そんな状態だったので、
- npm
- webpack
- babel
- gulp
などという単語は全くわかりませんでした。とにかく見よう見まねでnpm installしたり,npm run devなどというコマンドを打っていましたね。
それから色々と勉強しまして、全体像がおぼろげにわかるようにはなってきました(まだまだ勘違いしている場所は多いと思いますが)。
レガシーな技術にもいいところはあるので、デメリットを理解していれば使い続けるのもありだとは思いますが・・
JavaSciprtのモジュール化に関して
近年のJavaScriptですが、やはり「モジュール化」というのが一つのメリットかと思います。
それ以前ですが、下記のようにグローバルで無理やり名前空間を定義してJavaScriptを使うしかありませんでした。
|
1 2 3 4 5 |
var mySample = mySample || {}; mySample.hoge = function(){ //ここにプロパティとメソッドを定義 }; |
プログラムを書いていれば役割ごとにいろんなファイルを分けます。それをうまく分割、結合する必要性が出てきます。
そうでないとjsの読み込みが大変(量も多く、読み込み順番にも注意しなくてはいけない)になってきてしまします。
そこでJavaScriptをモジュール化する記法として以下のような仕様が策定されました。
CommonJS
当初はサーバーサイドのJavaScriptで使われることを想定されて時に作られた仕様のようです。代表的なものとしてはnode.jsですね。
一般的には下記のような記法になります。
|
1 2 3 4 5 6 |
//読み込まれる側 module.export={ } //読み込む側 var sample = require('hogehoge') |
もともとサーバーサイドで使われていた手法のようですので、ブラウザで上記のように書いてもそのままでは実行されません。*後述するwebpackなどを使うとブラウザで使うことができます。
AMD
つい最近、知りました。
非同期で読み込みますので、実行時にライブラリを読み込みます。
|
1 2 3 4 5 6 7 8 9 10 |
//読み込まれる側 define(fuction(){ return { } }) //読み込む側 define(['hoge'],function(hoge){ }) |
この仕様を実際に搭載しているのがrequire.jsのようです。require.jsを使えばビルドなどをしなくてもそのまま読み込むことができません。
UMD
CommonJSとAMDの統合された仕様のようです。
まだ調査中です・・・・
ES2015(ES6)以降
2019年5月現在、一番使われているのがこの書き方だと思います。ES6以降はモジュール化がJavaScriptのなかに標準で搭載されるようになりました。
|
1 2 3 4 5 6 7 |
//読み込まれる側 export class Sample{ } //読み込む側 import {Sample} from './Sample.js' |
現在ではこのままブラウザで読み込む手法もありますが、対応していないブラウザも多いため、一般的にはwebpackなどでビルドすることが一般的でしょう。
webpackとは
上記のようにモジュール管理はどのブラウザでも動かせるというところにはきていないようです。そこでモジュール管理するライブラリとして「モジュールバンドラ」があり、具体的にはbrowserifyやwebpack,rollupなどが一般的かと思います。個人的に、2017年〜2019年ぐらいではwebpackが使われることが多いのではないかと思います。
参考リンク
JavaScript モジュール・クラス総括（2015年7月）
