skillup

技術ブログ

JavaScript

JavaScriptモジュール化の歴史など

投稿日:

今の現場(2017年10月入場)ですが、比較的モダンな技術を使っておりまして、私の場合、特にJavaScriptにカルチャーショックを受けてしました。

現場に入る前はAngularJSなどは独学でやっていましたが、ファイルの管理自体などはbowerをようやく独学で覚えた程度でして、相変わらず、jQueryを使いながらいろんなJavaScriptファイルを書くことが多く、JavaScriptをモジュール化するといった概念はありまんでした。せいぜい関数スコープを使用するぐらいです。

そんな状態だったので、

  • npm
  • webpack
  • babel
  • gulp

などという単語は全くわかりませんでした。とにかく見よう見まねでnpm installしたり,npm run devなどというコマンドを打っていましたね。

それから色々と勉強しまして、全体像がおぼろげにわかるようにはなってきました(まだまだ勘違いしている場所は多いと思いますが)。

レガシーな技術にもいいところはあるので、デメリットを理解していれば使い続けるのもありだとは思いますが・・

JavaSciprtのモジュール化に関して

近年のJavaScriptですが、やはり「モジュール化」というのが一つのメリットかと思います。

それ以前ですが、下記のようにグローバルで無理やり名前空間を定義してJavaScriptを使うしかありませんでした。

プログラムを書いていれば役割ごとにいろんなファイルを分けます。それをうまく分割、結合する必要性が出てきます。

そうでないとjsの読み込みが大変(量も多く、読み込み順番にも注意しなくてはいけない)になってきてしまします。

そこでJavaScriptをモジュール化する記法として以下のような仕様が策定されました。

CommonJS

当初はサーバーサイドのJavaScriptで使われることを想定されて時に作られた仕様のようです。代表的なものとしてはnode.jsですね。

一般的には下記のような記法になります。

もともとサーバーサイドで使われていた手法のようですので、ブラウザで上記のように書いてもそのままでは実行されません。*後述するwebpackなどを使うとブラウザで使うことができます。

AMD

つい最近、知りました。

非同期で読み込みますので、実行時にライブラリを読み込みます。

この仕様を実際に搭載しているのがrequire.jsのようです。require.jsを使えばビルドなどをしなくてもそのまま読み込むことができません。

UMD

CommonJSとAMDの統合された仕様のようです。

まだ調査中です・・・・

ES2015(ES6)以降

2019年5月現在、一番使われているのがこの書き方だと思います。ES6以降はモジュール化がJavaScriptのなかに標準で搭載されるようになりました。

現在ではこのままブラウザで読み込む手法もありますが、対応していないブラウザも多いため、一般的にはwebpackなどでビルドすることが一般的でしょう。

webpackとは

上記のようにモジュール管理はどのブラウザでも動かせるというところにはきていないようです。そこでモジュール管理するライブラリとして「モジュールバンドラ」があり、具体的にはbrowserifyやwebpack,rollupなどが一般的かと思います。個人的に、2017年〜2019年ぐらいではwebpackが使われることが多いのではないかと思います。

参考リンク

JavaScriptのモジュールシステムの歴史と現状

JavaScript モジュール・クラス総括(2015年7月)

JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack)

AMD & RequireJS

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

JavaScriptのexport

JavaScriptのexportについて。 es6の大きなメリットとして、ライブラリをモジュール化して、外部から読み込むことができますが、読み込み方に少し癖があります。 気をつけるポイントとしては、 …

no image

gulpインストールとタスクの実行

今更ですが、gulpインストールと作業に関して。 less使ってたんですが、コンパイルをずっとatomのエディタで行っていたんですが、一般的にはgulpで実行する方のほうが多いでしょう。 別件でgul …

no image

vueでの配列、オブジェクトの反映に関して

vueでのハマりポイントですが、関門としては コンポーネント間の連携 オブジェクトや配列となった時に反映がされない などがあげられると思います。 コンポーネント間の連携に関してはこちらの記事でも書き、 …

no image

vueの環境構築に関して(モジュールバンドラの比較やvue-cliコマンドなど)

vueをビルドする場合、一般的にはwebpackなどのモジュールバンドラを使うかと思います。少しまとめて置こうかと思います。 Contents1 モジュールバンドラ1.1 webpack1.2 lar …

no image

JavaScriptでのオブジェクト指向 クラス作成&インスタンス生成

JavaScriptというと一般的にはjQueryを使って画面の装飾をするスクリプト言語という認識が一般的かと思います。 しかし、JavaScriptでもPHPなどのようにオブジェクト指向的な思想は実 …