JavaScriptライブラリの作り方

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

• 戻る

目次 †

概要 †

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

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

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

詳細 †

モジュール化API †

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

• CommonJSあるいはES2015 Moduleで定義し、
• webpackでビルドするほうが主流

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 †

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

• html から src で js を呼び出す js 側でCommonJSを使用したいケースで使用する。

• webpackのインストール

  npm init
  npm install webpack --save-dev

• ルートフォルダにwebpack.config.jsを作成する

  // output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
  const path = require('path');
  module.exports = {
    // モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
    mode: 'development',
    // エントリーポイントの設定
    entry: './www/scripts/index.js',
    // 出力の設定
    output: {
      // 出力するファイル名
      filename: 'bundle.js',
      // 出力先のパス（絶対パスを指定する必要がある）
      path: path.join(__dirname, 'www/scripts')
    }
  };

• entry値は、Cordovaの場合

  './www/scripts/index.js'

• ビルド出力は

  'www/scripts/bundle.js'

• webpackでビルドする

  call 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

• 定義
  ・例１

  // コンストラクタ
  var Movie = function(title) {
    this.title = title;
  }
  
  Movie.prototype.sayTitle = function() {
    say(this.title);
  }
  
  say = function(word) {
    console.log(word);
  }
  
  module.exports = Movie;

  ・例２
  

  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

• 参考
  • Node.jsのexportsとmodule.exportsの違いについてのメモ
    https://qiita.com/toshihirock/items/e98363a4c99950be5abc
    • Node.js : exports と module.exports の違い（解説編） - ぼちぼち日記
      https://jovi0608.hatenablog.com/entry/20111226/1324879536

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

• 通常のクラス

• 定義
  ...。

• 利用
  ...。

• 参考
  • # CommonJS と ES6の import/export で迷うなら
    https://qiita.com/rooooomania/items/4c999d93ae745e9d8657
  • javascript - Home does not contain an export named Home - Stack Overflow
    https://qiita.com/rooooomania/items/4c999d93ae745e9d8657

※ AMD †

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

npmパッケージ †

開発と公開 †

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

参考 †

• JavaScriptの文脈でたまに出てくるAMDとは何か？ - なっく日報
  https://yukidarake.hateblo.jp/entry/2015/08/21/194520

• JavaScriptとECMAScript、
  CommonJS/AMD/Browserify/RequireJS/Webpack、
  TypeScript?に関する覚え書き | IDEA*IDEA
  https://www.ideaxidea.com/archives/2015/02/javascript_history.html

Qiita †

• require()とは何か？何が便利なのか
  https://qiita.com/uryyyyyyy/items/b10b012703b5396ded5a

• AMD & RequireJS
  https://qiita.com/nanocloudx/items/70f1316debf05b93ac82

• RequireJS使い方メモ
  https://qiita.com/opengl-8080/items/196213867b859daea719

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

• Part1
  https://qiita.com/chuck0523/items/1868a4c04ab4d8cdfb23
• Part2
  https://qiita.com/chuck0523/items/c88abe4fac828b7b5f4e