第5回 HTML5minutes！ 〜triton-js〜 で話したLTです

1. 小規模案件で
作られた
秘伝のタレ

2. 自己紹介
me =
"なまえ": "むゆう"
"ツイッター": "@anticyborg"
"所属": "フリーランス"
"職種": "フロントエンドエンジニア"

3. 主な仕事
• 小規模のWebページ制作
• 複数案件平行で走る
• 0から作って納品なタイプも多い

4. よく思うこと
• 制作期間が短い案件が多い
• htmlもcssもjsも同じような記述が多い
• JSでのUI実装は大体自作のものになる
• ライブラリの解析・カスタムにかける時間で作れる

5. テンプレート化
汎用名ものはできるだけテンプレート化
• 汎用な記述
• ディレクトリ構成
• ビルドタスク

6. 日付と1行概要のテキスト
.recentDateList
ul.recentDateList__list
li.recentDateList__item
.recentDateList__.date 2014/01/01
.recentDateList__.desc 新着情報テキスト
li.recentDateList__item
.recentDateList__.date 2014/01/01
.recentDateList__.desc 新着情報テキスト

7. 日付と1行概要のテキスト
.recentDateList
&__list
margin: 10px
&__item
overflow: hidden
&__date
float: left
width: 100px
&__desc
overflow: hidden

8. タブ
.tabWrap
.tab
.tab__list
a.tab__item(href="#ct1") タブテキスト
.tab__list
a.tab__item(href="#ct2") タブテキスト
.tabContent
.tabContent__item タブの中身
.tabContent__item タブの中身

9. タブ
.tab
&__list
float: left
&__item
display: block
.tabContent
&__item
display: block
&:is-hide
display: none

10. タブ
app.Tab = (ele, tab, content) ->
self = @
@ele = $(ele)
@hide = ->
@ele.find(content).addClass "is-hide"
@show = (that) ->
id = $(that).attr 'href'
@ele.find(id).removeClass "is-hide"
@ele.on "click", tab, ->
self.hide()
self.show @
this

11. BEM でのモジュール化

12. BEMで叶うこと
• モジュール単位のcss
• 衝突しないcss
• 拡張しやすいcss

13. BEM is ステキ

14. モジュール
• パーツのひとまとまりをモジュールとして考え、ファイルを
分割していく
• 作ったモジュールを分かりやすく、使い回しやすいように配
置する

15. モジュールを意識した構成
app
└ src/
└ jade/
└ sass/
└ module/
_recentDateList.sass
_tab.sass
style.sass
└ coffee/
└ tab/
tab.coffee
app.coffee

16. よりモジュールを意識した構成
src/
└ sass/
style.sass
└ coffee/
app.coffee
└ modules/
└ recentDeteList/
_recentDateList.sass
└ tab/
_tab.sass
tab.coffee

17. テンプレート的なhtml入れたり
src/
└ sass/
style.sass
└ coffee/
app.coffee
└ modules/
└ recentDeteList/
_recentDateList.sass
_recentDateList.jade
└ tab/
_tab.jade
_tab.sass
tab.coffee

18. 丹念に繰り返す

19. しばらく経ったある日

20. 各所に散らばった
ファイルを結合

21. sassは style.sass に記述
style.sass
@import "layout/header"
@import "layout/footer"
@import "../modules/recentDateList/recentDateList"
@import "../modules/tab/tab"

22. coffee は gulpで

23. gulpfile.coffee
gulp.task('concat', function() {
gulp.src([
'modules/tab/tab.js'
'modules/aaa/aaa.js'
'modules/bbb/bbb.js'
'modules/bbb/bbbView.js'
])
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'))
});

24. 使い回す際はフォルダ毎コピー
不要なモジュールをコメントアウト

25. コメントアウト
style.sass
@import "layout/header"
@import "layout/footer"
@import "../modules/recentDateList/recentDateList"
// @import "../modules/tab/tab"

26. コメントアウト
gulpfile.coffee
gulp.task('concat', function() {
gulp.src([
'modules/tab/tab.js'
'modules/aaa/aaa.js'
# 'modules/bbb/bbb.js'
# 'modules/bbb/bbbView.js'
])
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'))
});

27. 吐き出されるファイルには
不要なファイルは出力されない

28. ステキ

29. 何故こんな面倒なことをやるのか
• Web Componentの襲来に備える
• 世界が Web Component を認めなくても問題ない
• モジュール単位で作れば組み合わせも可能

30. よし！
module
作ろうぜ！