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

自己紹介me = "なまえ": "むゆう"

"ツイッター": "@anticyborg"

"所属": "フリーランス"

"職種": "フロントエンドエンジニア"

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

よく思うこと• 制作期間が短い案件が多い• htmlもcssもjsも同じような記述が多い• JSでのUI実装は大体自作のものになる

• ライブラリの解析・カスタムにかける時間で作れる

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

日付と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 新着情報テキスト

日付と1行概要のテキスト.recentDateList &__list margin: 10px

&__item overflow: hidden

&__date float: left width: 100px

&__desc overflow: hidden

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

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

タブ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

BEM でのモジュール化

BEMで叶うこと• モジュール単位のcss

• 衝突しないcss

• 拡張しやすいcss

BEM is ステキ

モジュール• パーツのひとまとまりをモジュールとして考え、ファイルを分割していく

• 作ったモジュールを分かりやすく、使い回しやすいように配置する

モジュールを意識した構成

app └ src/ └ jade/ └ sass/ └ module/ _recentDateList.sass _tab.sass style.sass └ coffee/ └ tab/ tab.coffee app.coffee

よりモジュールを意識した構成

src/ └ sass/ style.sass └ coffee/ app.coffee └ modules/ └ recentDeteList/ _recentDateList.sass └ tab/ _tab.sass tab.coffee

テンプレート的なhtml入れたり

src/ └ sass/ style.sass └ coffee/ app.coffee └ modules/ └ recentDeteList/ _recentDateList.sass _recentDateList.jade └ tab/ _tab.jade _tab.sass tab.coffee

丹念に繰り返す

しばらく経ったある日

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

sassは style.sass に記述style.sass@import "layout/header"@import "layout/footer"

@import "../modules/recentDateList/recentDateList"@import "../modules/tab/tab"

coffee は gulpで

gulpfile.coffeegulp.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/'))});

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

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

@import "../modules/recentDateList/recentDateList"// @import "../modules/tab/tab"

コメントアウトgulpfile.coffeegulp.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/'))});

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

ステキ

何故こんな面倒なことをやるのか• Web Componentの襲来に備える• 世界が Web Component を認めなくても問題ない

• モジュール単位で作れば組み合わせも可能

よし！module作ろうぜ！