Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,475 views

Published on

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

Published in: Technology
  • Be the first to comment

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

  1. 1. 小規模案件で 作られた 秘伝のタレ
  2. 2. 自己紹介 me = "なまえ": "むゆう" "ツイッター": "@anticyborg" "所属": "フリーランス" "職種": "フロントエンドエンジニア"
  3. 3. 主な仕事 • 小規模のWebページ制作 • 複数案件平行で走る • 0から作って納品なタイプも多い
  4. 4. よく思うこと • 制作期間が短い案件が多い • htmlもcssもjsも同じような記述が多い • JSでのUI実装は大体自作のものになる • ライブラリの解析・カスタムにかける時間で作れる
  5. 5. テンプレート化 汎用名ものはできるだけテンプレート化 • 汎用な記述 • ディレクトリ構成 • ビルドタスク
  6. 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. 7. 日付と1行概要のテキスト .recentDateList &__list margin: 10px &__item overflow: hidden &__date float: left width: 100px &__desc overflow: hidden
  8. 8. タブ .tabWrap .tab .tab__list a.tab__item(href="#ct1") タブテキスト .tab__list a.tab__item(href="#ct2") タブテキスト .tabContent .tabContent__item タブの中身 .tabContent__item タブの中身
  9. 9. タブ .tab &__list float: left &__item display: block .tabContent &__item display: block &:is-hide display: none
  10. 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. 11. BEM でのモジュール化
  12. 12. BEMで叶うこと • モジュール単位のcss • 衝突しないcss • 拡張しやすいcss
  13. 13. BEM is ステキ
  14. 14. モジュール • パーツのひとまとまりをモジュールとして考え、ファイルを 分割していく • 作ったモジュールを分かりやすく、使い回しやすいように配 置する
  15. 15. モジュールを意識した構成 app └ src/ └ jade/ └ sass/ └ module/ _recentDateList.sass _tab.sass style.sass └ coffee/ └ tab/ tab.coffee app.coffee
  16. 16. よりモジュールを意識した構成 src/ └ sass/ style.sass └ coffee/ app.coffee └ modules/ └ recentDeteList/ _recentDateList.sass └ tab/ _tab.sass tab.coffee
  17. 17. テンプレート的なhtml入れたり src/ └ sass/ style.sass └ coffee/ app.coffee └ modules/ └ recentDeteList/ _recentDateList.sass _recentDateList.jade └ tab/ _tab.jade _tab.sass tab.coffee
  18. 18. 丹念に繰り返す
  19. 19. しばらく経ったある日
  20. 20. 各所に散らばった ファイルを結合
  21. 21. sassは style.sass に記述 style.sass @import "layout/header" @import "layout/footer" @import "../modules/recentDateList/recentDateList" @import "../modules/tab/tab"
  22. 22. coffee は gulpで
  23. 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. 24. 使い回す際はフォルダ毎コピー 不要なモジュールをコメントアウト
  25. 25. コメントアウト style.sass @import "layout/header" @import "layout/footer" @import "../modules/recentDateList/recentDateList" // @import "../modules/tab/tab"
  26. 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. 27. 吐き出されるファイルには 不要なファイルは出力されない
  28. 28. ステキ
  29. 29. 何故こんな面倒なことをやるのか • Web Componentの襲来に備える • 世界が Web Component を認めなくても問題ない • モジュール単位で作れば組み合わせも可能
  30. 30. よし! module 作ろうぜ!

×