@@ -975,11 +975,214 @@ fetch('/api/foo')
975975モジュールを実装するトレーニング
976976
977977
978+ #### モジュール
979+
980+ JavaScript は言語機能としてモジュールの
981+ 仕組みをもっていません。
982+
983+ 言語機能としてのモジュールシステムを利用するには
984+ [ ECMAScript 6] ( https://developer.mozilla.org/ja/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla ) を待たなければなりません。
985+
986+
987+ とはいっても、みんなモジュールを使いたかったので、
988+ さまざまなモジュールシステムとそれに付随する
989+ エコシステムが開発されてきました。
990+
991+
992+ [ エコシステムの例] ( https://github.com/wilmoore/frontend-packagers )
993+
994+
995+ あ…めっちゃ多い…😵 ;
996+
997+
998+ 今回は、利用方法がシンプルな「[ bower] ( http://bower.io ) 」を使います。
999+
1000+
1001+ #### bower
1002+
1003+ bower は、JavaScript、HTML、CSS等の、
1004+ フロントエンドリソースのエコシステムです。
1005+
1006+ ただ、モジュールローディングの仕組みを
1007+ もたないため、この部分は RequireJS などの
1008+ 外部モジュールシステムに頼ることになります。
1009+ どのモジュールシステムに対応するかという選択は、
1010+ bower によって読み込まれるパッケージ側に
1011+ 裁量（責務）があります。
1012+
1013+
1014+ これを、[ 公式ドキュメント] ( http://bower.io/#getting-started ) は端的に
1015+ 言い表しています。
1016+
1017+ > How you use packages is up to you.
1018+ >
1019+ > （どのようにしてパッケージを使うのかはあなた次第です）
1020+
1021+
1022+ bower の使い方は簡単です。
1023+
1024+ bower で管轄したいファイルのディレクトリを開き、
1025+
1026+ bower init
1027+
1028+ です。あとは説明に従って選択していくと、bower の
1029+ パッケージ設定ファイル ` bower.json ` が作成されます。
1030+
1031+
1032+ ##### 1. name
1033+
1034+ このパッケージの名前を指定します。
1035+
1036+ パッケージとして公開する場合には、既に同じ
1037+ パッケージ名が存在していないか確かめる必要が
1038+ あります。
1039+
1040+ この研修では、公開/非公開を問わないので、
1041+ お好きな名前をつけてください。
1042+
1043+
1044+ ##### 2. version
1045+
1046+ このパッケージのバージョンを指定します。
1047+
1048+ バージョンの形式は [ Semantic Versioning] ( http://semver.org/lang/ja/ ) に
1049+ 準拠しています。
1050+
1051+ この形式は、一般的に ` X.Y.Z ` と記述されます。
1052+
1053+ - ` X ` は major version（後方互換性がなくなる変更）
1054+ - ` Y ` は minor version（前方互換性がなくなる変更）
1055+ - ` Z ` は patch version（バグ修正など）
1056+
1057+ 今回は開発版なので、0.0.0 にしておきましょう
1058+ （major versionの 0 は開発版であることを示します）。
1059+
1060+
1061+ ##### 3. description
1062+
1063+ パッケージの簡単な概要を記述します。
1064+
1065+ 有名どころの説明をみてみます。
1066+
1067+ - bootstrap: The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
1068+ - angular-latest: HTML enhanced for web apps
1069+ - less.js: Leaner CSS
1070+
1071+
1072+ ##### 4. main file
1073+
1074+ このパッケージが外部のパッケージに公開したい
1075+ ファイルを指定します。文字列と配列が指定できます。
1076+ 今回は空で問題ありません。
1077+
1078+
1079+ ##### 5. what types of module does this package expose?
1080+
1081+ このパッケージが外部にエンドポイントを公開する
1082+ 方法を明示します。
1083+
1084+ - amd: [ Asynchronouse Module Definition] ( https://github.com/amdjs/amdjs-api/wiki/AMD ) ([ 参考資料] ( http://www.matzmtok.com/blog/?p=845 ) )
1085+ - es6: [ EcmaScript 6] ( http://wiki.ecmascript.org/lib/exe/fetch.php?id=harmony%3Aspecification_drafts&cache=cache&media=harmony:ecma-262_edition_6_03-17-15-releasecandidate3.pdf ) ([ 参考資料] ( https://www.xenophy.com/javascript/8447#run-time-renaissance ) )
1086+ - globals: グローバル変数経由でエンドポイント公開
1087+ - node: [ Node.js] ( https://nodejs.org/api/modules.html )
1088+ - yui: [ YUI] ( http://yuilibrary.com/yui/docs/yui/create.html ) (メンテ停止したのでもうやめましょう)
1089+
1090+ 今回は何も選択しないで問題ありません。
1091+
1092+
1093+ ##### 6. keywords
1094+
1095+ このパッケージを検索でヒットさせるための
1096+ キーワードを指定します。
1097+
1098+
1099+ ##### 7. authors
1100+
1101+ このパッケージの作者を指定します。
1102+
1103+
1104+ ##### 7. license
1105+
1106+ 好きなライセンスを選ぶとよいです。
1107+
1108+ デフォルトは [ MIT ライセンス] ( http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license ) です。
1109+
1110+
1111+ ##### 8. homepage
1112+
1113+ このパッケージの情報が見られる URL を記述します。
1114+
1115+
1116+ ##### 9. set currenttly installed components as dependencies?
1117+
1118+ 既に ` bower_components ` に含まれている
1119+ コンポーネントをパッケージ設定に
1120+ 含まれるようにするかどうかを指定します。
1121+
1122+ n で構いません。
1123+
1124+
1125+ ##### 10. add commonly ignored files to ignore list?
1126+
1127+ ` .gitignore ` などのファイルから、
1128+ パッケージに含めないファイルの指定を
1129+ 読み込むかどうか指定します。
1130+
1131+ y で読み込ませます。
1132+
1133+
1134+ ##### 11. would you like to mark this package as private which prevents it from being accidentaly published to the registry?
1135+
1136+ bower のレジストリへ登録できないようにするか
1137+ どうか指定します。
1138+
1139+ y でレジストリへの公開ができないように設定します。
1140+
1141+
1142+ ##### 12. Looks good?
1143+
1144+ この設定で問題なければ y を入力します。
1145+
1146+
1147+ ##### bower install
1148+
1149+ あとは、使いたいモジュールを追加していきます
1150+ （` --save ` はパッケージ設定に依存ファイルを
1151+ 追記する効果があります）。
1152+
1153+ bower install --save fetch
1154+
1155+ このコマンドによって、fetch パッケージが、
1156+ ` bower_components ` 以下に配置されます。
1157+
1158+ また、ここで設定に記載されたモジュールは、
1159+ ` bower install ` で取得することが
1160+ できるようになります。
1161+
1162+
1163+ 今回は、簡単のために script タグで直接
1164+ ` bower_components ` 以下の JavaScript/CSS を
1165+ 読み込みます。
1166+
1167+
1168+ パッケージは [ Search Bower packages] ( http://bower.io/search/ ) で
1169+ 検索することができます。
1170+
1171+
9781172#### 実習
9791173
980- 下のテストが green になるように、
981- ` public/stage6/tests.js ` を
982- 修正してください。
1174+ まず、bower を実行することを体験してみます。
1175+
1176+ cd public/stage6/sample
1177+ bower init
1178+ bower install Buttons
1179+
1180+
1181+ 今回の実習はテスト駆動形式ではありません。
1182+
1183+ 満足のいく Web アプリケーションが書けたら、
1184+ ` qualityOfYourAppliation ` に ` true ` を
1185+ 代入してください。
9831186
9841187[ http://localhost:8000/stage6/ ] ( http://localhost:8000/stage6/ )
9851188
0 commit comments