「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>JavaScript#q5640f51]]
*目次 [#b6d39c1c]
#contents
*概要 [#ic115736]
最近、のJavaScriptモジュール以下のような文字列が入っていたりしてフリーズしますね。
var myModule = require('...');
何気に、[[React]]も書いてますが、JavaScriptやってる自覚がなかったりします（ES6ですし）。
*詳細 [#c7741f59]
**モジュール化API [#yf624c6f]
最近は[[AMD(Asynchronous Module Definition)>#j32e53e1]]ではなく
-[[CommonJS>#c020c18e]]あるいは[[ES2015 Module>#w77258df]]で定義し、
-[[webpack>#jba2efa6]]でビルドするほうが主流
***[[CommonJS>JavaScript#xe3a8701]] [#c020c18e]
[[CommonJS>JavaScript#xe3a8701]]上でのモジュール化仕様
***[[ES2015>JavaScript#d8043fec]] Module [#w77258df]
[[ES2015>JavaScript#d8043fec]]の仕様が策定されたことにより、~
標準でモジュール化が可能となった。
***AMD(Asynchronous Module Definition) [#j32e53e1]
-非同期処理を利用したブラウザ・ファーストな手法
-ブラウザ環境でモジュールの恩恵が受けられる。
-[[RequireJS>#x786cb32]]で遅延ロード or コンパイル
-サーバサイドの仕組みとAMDは合わない。
**参照方法 [#dd04a112]
***scriptタグ [#rfef2727]
ブラウザからモジュール化されていないJSを使用する。
<script src="XXXX.js"></script>
***require構文 [#g26a2d1c]
-概要~
JSをモジュール化する仕組み。
--require()は[[CommonJS>#c020c18e]]の仕様
--Node.jsで外部ライブラリを参照する方法
--[[npm>JavaScript#y99214ea]]でインストールしたものはrequire()で読み込める。
-メリット
--再利用し易くなる。
--単体テストがし易くなる。
--特に、Reactとは相性がイイ。
-デメリット
--学習コストがかかる。
--ブラウザで気軽に試せない（[[scriptタグ>#rfef2727]]ではない）。
-利用~
以下のように利用する。
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パッケージの開発と公開#lb1c5d0d]]
***module構文(import) [#y4ef07bb]
-概要
--[[ES2015>JavaScript#d8043fec]]から利用できる書き方。
--対応ブラウザがまだ少ない。
--Babelを通じて require構文 に変換後、~
[[webpack>#jba2efa6]]などを通じて依存関係を解決する。
-利用~
以下のように利用する。
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パッケージの開発と公開#lb1c5d0d]]
***※ AMD [#qe43712f]
define(['myModule', 'myOtherModule'], function(myModule, myOtherModule) {
console.log(myModule.hello());
});
**モジュール・ローダー（バンドラー） [#i0690a95]
***RequireJS [#x786cb32]
[[AMD>#j32e53e1]]派から[[RequireJS>#x786cb32]]が生まれる。
-ブラウザでモジュールを使いたい場合に使用する。
--scriptタグで使う方法
--コンパイルで使う方法
>がある。
-トレンド
--非同期で読み込み可能なのが優位点だった。
--主流ではなくなってきており採用する機会は少ない。
***[[Browserify>JavaScript#u16e1dce]] [#pa8af3e0]
[[CommonJS>#c020c18e]]派からも[[RequireJS>#x786cb32]]に対抗して[[Browserify>JavaScript#u16e1dce]]が生まれる。
***[[webpack>JavaScript#z8a6be11]] [#jba2efa6]
-[[RequireJS>#x786cb32]]と[[Browserify>#pa8af3e0]]のイイとこ取りをした後発のモジュールシステムが[[webpack>JavaScript#z8a6be11]]。
-html から src で js を呼び出す js 側で[[CommonJS>JavaScript#xe3a8701]]を使用したいケースで使用する。
--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
-具体的な事例は[[コチラ>#defb8b30]]。
**モジュール実装方法 [#n340ee01]
[[CommonJS>#c020c18e]]あるいは[[ES2015 Module>#w77258df]]で定義。
***[[CommonJS>#c020c18e]] [#f68fcb6a]
-概要
--関数をモジュール化する場合は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>#w77258df]] [#vac967de]
-概要
--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 [#reda5b5a]
define([], function() {
return {
hello: function() {
console.log('hello');
},
goodbye: function() {
console.log('goodbye');
}
};
});
**npmパッケージ [#h7ce4d67]
***[[開発と公開>npmパッケージの開発と公開]] [#defb8b30]
***[[プライベート・リポジトリ>npmプライベート・リポジトリ]] [#p7df4017]
*参考 [#w7ee3ec3]
-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 [#u4a6ba9b]
-require()とは何か？何が便利なのか~
https://qiita.com/uryyyyyyy/items/b10b012703b5396ded5a
-AMD & RequireJS~
https://qiita.com/nanocloudx/items/70f1316debf05b93ac82
-RequireJS使い方メモ~
https://qiita.com/opengl-8080/items/196213867b859daea719
***[意訳]初学者のためのJavaScriptモジュール講座 [#ra169b06]
--Part1~
https://qiita.com/chuck0523/items/1868a4c04ab4d8cdfb23
--Part2~
https://qiita.com/chuck0523/items/c88abe4fac828b7b5f4e
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
