.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

最近、のJavaScriptモジュール以下のような文字列が入っていたりしてフリーズしますね。

var myModule = require('...');

何気に、Reactも書いてますが、JavaScriptやってる自覚がなかったりします(ES6ですし)。

詳細

モジュール化API

最近はAMD(Asynchronous Module Definition)ではなく

CommonJS

CommonJS上でのモジュール化仕様

ES2015 Module

ES2015の仕様が策定されたことにより、
標準でモジュール化が可能となった。

AMD(Asynchronous Module Definition)

  • 非同期処理を利用したブラウザ・ファーストな手法
  • ブラウザ環境でモジュールの恩恵が受けられる。
  • RequireJSで遅延ロード or コンパイル
  • サーバサイドの仕組みとAMDは合わない。

参照方法

scriptタグ

ブラウザからモジュール化されていないJSを使用する。

<script src="XXXX.js"></script>

require構文

  • 概要
    JSをモジュール化する仕組み。
  • require()はCommonJSの仕様
  • Node.jsで外部ライブラリを参照する方法
  • npmでインストールしたものはrequire()で読み込める。
  • メリット
    • 再利用し易くなる。
    • 単体テストがし易くなる。
    • 特に、Reactとは相性がイイ。
  • デメリット
    • 学習コストがかかる。
    • ブラウザで気軽に試せない(scriptタグではない)。
  • 利用
    以下のように利用する。
    var util = require('ossc-test-library1');
    
    ...
    
    util.sayAdd(1, 2); // 3
    util.saySubtract(2, 1); //1
    util.say // error. util.say is not a function

ossc-test-library1

module構文(import)

  • 概要
    • ES2015から利用できる書き方。
    • 対応ブラウザがまだ少ない。
    • Babelを通じて require構文 に変換後、
      webpackなどを通じて依存関係を解決する。
  • 利用
    以下のように利用する。
    import util from 'ossc-test-library1';
    
    ...
    
    util.sayAdd(1, 2); // 3
    util.saySubtract(2, 1); //1
    util.say // error. util.say is not a function

ossc-test-library1

※ AMD

define(['myModule', 'myOtherModule'], function(myModule, myOtherModule) {
  console.log(myModule.hello());
});

モジュール・ローダー(バンドラー)

RequireJS

AMD派からRequireJSが生まれる。

  • ブラウザでモジュールを使いたい場合に使用する。
    • scriptタグで使う方法
    • コンパイルで使う方法

がある。

  • トレンド
    • 非同期で読み込み可能なのが優位点だった。
    • 主流ではなくなってきており採用する機会は少ない。

Browserify

CommonJS派からもRequireJSに対抗してBrowserifyが生まれる。

webpack

RequireJSBrowserifyのイイとこ取りをした後発のモジュールシステムがwebpack

モジュール実装方法

CommonJSあるいはES2015 Moduleで定義。

CommonJS

  • 概要
    • 関数をモジュール化する場合はexportsを使う。
    • クラスをモジュール化する場合はmodule.exportsを使う。
    • exports と module.exports の間の関係が魔法の
      ように見えるなら、module.exports だけを使う。
  • 静的なクラス
  • 定義
    util.js
    exports.sayAdd = function(a, b) {
      say(a + b);
    }
    
    exports.saySubtract = function(a, b) {
      say(a - b);
    }
    
    say = function(word) {
      console.log(word);
    }
  • 利用
    var util = require('./util');
    
    util.sayAdd(1, 2); // 3
    util.saySubtract(2, 1); //1
    util.say // error. util.say is not a function
  • 通常のクラス
    movie.js
  • 定義
    ・例1
    // コンストラクタ
    var Movie = function(title) {
      this.title = title;
    }
    
    Movie.prototype.sayTitle = function() {
      say(this.title);
    }
    
    say = function(word) {
      console.log(word);
    }
    
    module.exports = Movie;
    ・例2
    module.exports = function(title) {
      this.title = title;
    
      this.sayTitle = function() {
        say(this.title);
      }
    }
    
    function say(word) {
      console.log(word);
    }
  • 利用
    var Movie = require('./movie');
    
    var movieA = new Movie('Star Wars');
    movieA.sayTitle(); //Star Wars
    
    var movieB = new Movie('Mad Max');
    movieB.sayTitle(); // Mad Max
    movieB.say(); // error. movieB.say is not a function

ES2015 Module

  • 概要
  • named exports は、幾つかの値をエクスポートするときに便利で、
    インポートする側は、参照する際に同じ名前を使うことができる。
  • default export は、1モジュールにつき一つの初期エクスポートで、
    関数やクラス、オブジェクトなど何でも設定できるが、
    requireするときにdefaultが必要になるので、ライブラリ作成には敬遠したい。

従って、ここでは、named exports の例のみ紹介。


  • 静的なクラス
  • 定義
    my-module.js
    export function cube(x) {
      return x * x * x;
    }
    const foo = Math.PI + Math.SQRT2;
    export { foo };
  • 利用
    import { cube, foo } from 'my-module';
    console.log(cube(3)); // 27
    console.log(foo);    // 4.555806215962888
  • 通常のクラス
  • 定義
    ...。
  • 利用
    ...。

※ AMD

define([], function() {
  return {
    hello: function() {
      console.log('hello');
    },
    goodbye: function() {
      console.log('goodbye');
    }
  };
});

npmパッケージ

開発と公開

プライベート・リポジトリ

参考

Qiita

[意訳]初学者のためのJavaScriptモジュール講座


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-02-03 (月) 12:39:43 (19d)