Skip to content

DNET_JavaScriptLibraryDevelopment

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

JavaScriptライブラリの作り方

概要

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

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

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

詳細

モジュール化API

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

CommonJS（モジュール化API）

CommonJS（JavaScriptの該当節を参照）上でのモジュール化仕様

ES2015 Module（モジュール化API）

ES2015（JavaScriptの該当節を参照）の仕様が策定されたことにより、
標準でモジュール化が可能となった。

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 については npmパッケージの開発と公開の該当節を参照。

module構文(import)

  • 概要

    • ES2015（JavaScriptの該当節を参照）から利用できる書き方。
    • 対応ブラウザがまだ少ない。
    • 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 については npmパッケージの開発と公開の該当節を参照。

※ AMD（参照方法）

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

モジュール・ローダー（バンドラー）

RequireJS

AMD派からRequireJSが生まれる。

  • ブラウザでモジュールを使いたい場合に使用する。

    • scriptタグで使う方法
    • コンパイルで使う方法

    がある。

  • トレンド

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

Browserify

CommonJS 派からも RequireJS に対抗して Browserify が生まれる
（JavaScriptの該当節を参照）。

webpack

  • RequireJSとBrowserifyのイイとこ取りをした後発のモジュールシステムが webpack （JavaScriptの該当節を参照）。

  • 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

  • 参考

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

    • 通常のクラス
      （定義・利用ともに元 Wiki では未記載）

  • 参考

※ AMD（モジュール実装方法）

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

npmパッケージ

開発と公開

npmパッケージの開発と公開

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

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

参考

Qiita

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

移行メモ

  • 概要の「最近、のJavaScriptモジュール以下のような文字列が入っていたりして」は 助詞が崩れていたため「最近のJavaScriptモジュールには、以下のような文字列が〜」とした。
  • 参考の記事名の先頭にあった「# 」（PukiWiki 側の入力ミスと思われる）を除去した。 なお「CommonJS と ES6の import/export で迷うなら」と 「javascript - Home does not contain an export named Home - Stack Overflow」に 同一の URL が記載されている（元 Wiki のとおり。後者はリンク先が異なる可能性がある）。
  • 「通常のクラス」（ES2015 Module）の定義・利用は「...。」のみだったため、 未記載である旨を明示した。
  • 同名の見出し（「CommonJS」「ES2015 Module」「※ AMD」）が複数あり GitHub Wiki でアンカが衝突するため、括弧で文脈を補って一意にした。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替え、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。

Tags: 移行, JavaScript, モジュール, CommonJS, AMD, ES2015, RequireJS, Browserify, webpack, npm

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

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally