Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit c39d9ee

Browse filesBrowse files
author
Kuniwak
committed
Impl stage6
1 parent 5d12904 commit c39d9ee
Copy full SHA for c39d9ee

File tree

Expand file treeCollapse file tree

7 files changed

+242
-22
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

7 files changed

+242
-22
lines changed
Open diff view settings
Collapse file

‎README.md‎

Copy file name to clipboardExpand all lines: README.md
+206-3Lines changed: 206 additions & 3 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -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

Collapse file

‎public/bower.json‎

Copy file name to clipboardExpand all lines: public/bower.json
+1-6Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@
66
"Kuniwak <yuki.kokubun@mixi.co.jp>"
77
],
88
"description": "Training course repositry for JavaScript by mixi",
9-
"main": "index.html",
10-
"moduleType": [
11-
"globals"
12-
],
139
"keywords": [
1410
"training"
1511
],
@@ -30,7 +26,6 @@
3026
"chai-jquery": "~2.0.0",
3127
"jquery": "~2.1.3",
3228
"fetch": "~0.7.0",
33-
"github-fork-ribbon-css": "~0.1.1",
34-
"Buttons": "~2.0.0"
29+
"github-fork-ribbon-css": "~0.1.1"
3530
}
3631
}
Collapse file

‎public/stage6/index.html‎

Copy file name to clipboardExpand all lines: public/stage6/index.html
+1-4Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,12 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="icon">
88
<link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
9-
<link rel="stylesheet" href="/bower_components/Buttons/css/buttons.css" media="all">
109
<link rel="stylesheet" href="/bower_components/mocha/mocha.css" media="all">
1110
<link rel="stylesheet" href="/common/mocha-patch.css" media="all">
1211
<link rel="stylesheet" href="style.css" media="all">
1312
</head>
1413
<body>
15-
<div class="js-training-playground">
16-
<button class="button button-caution button-3d button-pill button-giant js-training-button">Push</button>
17-
</div>
14+
<a href="sample" class="js-training-sample-link">サンプルパッケージ</a>
1815
<div id="mocha"></div>
1916
<script src="/bower_components/jquery/dist/jquery.js"></script>
2017
<script src="/bower_components/mocha/mocha.js"></script>
Collapse file

‎public/stage6/sample/index.html‎

Copy file name to clipboard
+18Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>mixi JS Training</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="icon">
8+
<link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
9+
<link rel="stylesheet" href="bower_components/Buttons/css/buttons.css" media="all">
10+
<link rel="stylesheet" href="style.css" media="all">
11+
</head>
12+
<body>
13+
<div class="js-training-playground">
14+
<button class="button button-caution button-3d button-pill button-giant js-training-button">Push</button>
15+
</div>
16+
<script src="script.js"></script>
17+
</body>
18+
</html>
Collapse file

‎public/stage6/sample/script.js‎

Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// ボタンはサービスです。
2+
// 自由に使ってください。
Collapse file

‎public/stage6/sample/style.css‎

Copy file name to clipboard
+10Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.js-training-playground {
2+
box-sizing: border-box;
3+
padding: 80px 0;
4+
height: 250px;
5+
}
6+
7+
.js-training-button {
8+
display: block;
9+
margin: 0 auto;
10+
}
Collapse file

‎public/stage6/style.css‎

Copy file name to clipboard
+4-9Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
1-
.js-training-playground {
2-
box-sizing: border-box;
3-
padding: 80px 0;
4-
height: 250px;
5-
}
6-
7-
.js-training-button {
8-
display: block;
9-
margin: 0 auto;
1+
.js-training-sample-link {
2+
display: block;
3+
margin: 10px auto;
4+
text-align: center;
105
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.