Successfully reported this slideshow.

コンポーネント単位で考えるWeb制作

9.165 Aufrufe

Veröffentlicht am

見積りや進捗管理上「ページ」という単位で考えられることが多いWeb制作ですが、実際には「コンポーネント」単位で制作工程を考えた方が多くの面でメリットがあるのではないだろうか。
最新のHTML/CSSプリプロセッサを駆使しながら、コンポーネントという切り口での制作、進行管理、分業の可能性を模索します。
http://media-massage.net/works/docs/componentweb/

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

コンポーネント単位で考えるWeb制作

  1. 1. P R E S E N T A T I O N : 株式会社LIG フロントエンドエンジニア 堀 祐磨 (ほりでー) Web制作
  2. 2. コンポーネント単位で考えるWeb制作 自己紹介 LIG INC. Front-end Engineer ほりでー (堀 祐磨) 1988年生まれ。多摩美術大学を中退後、デザ イナーとしてグラフィックデザイン・Webデザ イン・UIデザインを経験。 2015年、株式会社LIGにフロントエンドエン ジニアとして入社。
  3. 3. Web制作
  4. 4. コンポーネント単位で考えるWeb制作 概要: 本日のテーマ Web制作において「コンポーネント」を 意識することによって 見積もりや進 管理、分業など、
 プロジェクト管理上のメリットがある ビューの構造化をすすめ、開発効率を 高める実装上のメリットもある
  5. 5. コンポーネント単位で考えるWeb制作 概要: 本日のテーマ WebComponentsとは無関係 コンポーネントとは画面要素のま とまり モジュール、ブロックと言い換えて も差し支えありません
  6. 6. コンポーネント単位で考えるWeb制作 管理上のメリット ̶̶なぜコンポーネント単位で
 考えるのか
  7. 7. コンポーネント単位で考えるWeb制作 実装担当者として
 聞かれると悩む質問
  8. 8. コンポーネント単位で考えるWeb制作 1ページどれくらいで
 実装できる?
  9. 9. ※本発表の為の便宜的な例であり、実際とは異なります
  10. 10. 簡単なコンポーネント (より少ない工数) 複雑なコンポーネント(より多い工数)
  11. 11. トップページ チャンネルページ 記事ページ 要素がほぼ同じ = 1ページ作れば全部できたも同然 それ以外…1ページづつ順番に完成していく
  12. 12. コンポーネント単位で考えるWeb制作 1ページどれくらいで実装 できる? の答え
  13. 13. コンポーネント単位で考えるWeb制作 1ページどれくらいで実装できる?
 の答え: ページ内のコンポーネントが
 いくつあるか それぞれのコンポーネントが
 どれだけ複雑か サイト全体でコンポーネントが
 どれくらい共通化されているか
  14. 14. コンポーネント単位で考えるWeb制作 1ページ⃝人日で作れたから 残りの5ページは⃝ 5で
 完成するはず だから と単純に考えるのは大きな間違い
  15. 15. コンポーネント単位で考えるWeb制作 ページを基準にすると
 変なことに
  16. 16. コンポーネント単位で考えるWeb制作 管理上のメリット̶̶なぜコンポーネント単位で考えるのか 「ページ」を最小の単位とし て進 管理を行うと… コンポーネントの数と複雑さで全然工数が違う ページごとに工数が平均化される訳ではない 次の「ページ」がいつ完成するのか実装担 当者以外に予測が立て辛い あるページは一瞬で完成するのに、
 あるページは中々完成しない
  17. 17. コンポーネント単位で考えるWeb制作 提案1
  18. 18. コンポーネント単位で考えるWeb制作 コンポーネント単位で 計画を立てる 提案1
  19. 19. チャンネル メンバー プロフィー ルサイド バー サイトヘッダー チャンネルヘッダー 記事一覧フッター 関連記事一覧 記事フッター共有 記事本文
  20. 20. コンポーネント単位で考えるWeb制作 コンポーネントは
 チケット化しやすい
  21. 21. コンポーネント単位で考えるWeb制作 ページではなくコンポーネ ントで進 管理
  22. 22. コンポーネント単位で考えるWeb制作 提案1: コンポーネント単位で計画を立てる コンポーネントはチケット化 しやすい 1コンポーネント=1チケット 粒度として妥当 コンポーネントごとの見積りなら誤差が少ない コンポーネントの依存関係を「関連チケット」で表現できる 「あとどのモジュールが完成すればこのページができるのか」 を可視化できる コミットログも書きやすい 分業しやすくレビューしやすい
  23. 23. Web制作 実装上のメリット ̶̶豊かなデザインを少ないコーディングで
  24. 24. コンポーネント単位で考えるWeb制作 D.R.Y.D.R.Y.D.R.Y.D.R.Y.D .R.Y.D.R.Y.D.R.Y.D.R.Y.D. R.Y.D.R.Y.D.R.Y.D.R.Y.D.R .Y.D.R.Y.D.R.Y.D.R.Y.D.R. Y.D.R.Y.D.R.Y.D.R.Y.D.R.Y .D.R.Y.D.R.Y.D.R.Y.D.R.Y. Don t Repeat Yourself
  25. 25. コンポーネントA コンポーネントB 要素⃝ 要素△ 要素☆ 要素 要素△ 要素☆
  26. 26. コンポーネントA コンポーネントB 要素⃝ 要素△ 要素☆ 要素 要素△ 要素☆ コンポーネントC コンポーネントCの参照コンポーネントCの参照
  27. 27. 別コンポーネントとして分離 参照 参照
  28. 28. 別コンポーネントとして分離
  29. 29. コンポーネント単位で考えるWeb制作 HTMLプリプロセッサ
  30. 30. コンポーネント単位で考えるWeb制作 サイトジェネレータや各種テンプレートエンジン タスクランナー
  31. 31. コンポーネント単位で考えるWeb制作 EJSの場合
  32. 32. コンポーネント単位で考えるWeb制作 <%- include('./_global-navigator.ejs'); %> _global-navigator.ejs 参照
  33. 33. コンポーネント単位で考えるWeb制作 全く同じ物をまとめても
 芸がない
  34. 34. コンポーネント単位で考えるWeb制作 ちょっと見た目が違うけど 大体一緒のデザイン
  35. 35. コンポーネント単位で考えるWeb制作 サイズやレイアウトが違う だけで要素は同じ
  36. 36. コンポーネント単位で考えるWeb制作
  37. 37. コンポーネント単位で考えるWeb制作 要素がちょっと追加/削除 されてる
  38. 38. コンポーネント単位で考えるWeb制作 ベース 要素削減版
  39. 39. コンポーネント単位で考えるWeb制作 色や装飾が違うだけで
 他は同じ
  40. 40. コンポーネント単位で考えるWeb制作
  41. 41. コンポーネント単位で考えるWeb制作 構造化CSS ∼modifier∼
  42. 42. コンポーネント単位で考えるWeb制作 構造化CSSにおける modifierの概念
  43. 43. .block {
 /* 基本デザイン */
 } .block̶small {
 /* 小さい版デザイン */
 width: 50%;
 
 .block__icons {
 display: none;
 }
 } .block̶news {
 /* 色違いデザイン */
 background: blue;
 } <!̶ 基本的な外観 ̶>
 <div class="block"></div>
 <!̶ 小さい版の外観 ̶>
 <div class="block block̶small"></div>
 <!̶ 色違い版の外観 ̶>
 <div class="block block̶news"></div>
 <!̶ 両方のかけあわせ ̶>
 <div class="block block̶small block̶news">
  44. 44. <!̶ 基本的な外観 ̶>
 <article class="article"> <!̶ 縦レイアウトアレンジ ̶>
 <article class="article article̶vertical"> <!̶ 縦レイアウトアレンジ ̶>
 <!̶ 紫アレンジ ̶>
 <article
 class="article article̶vertical
 article̶biz"> HTML要素は一緒で classのみ異なる ※本発表の為の便宜的な例であり、実際とは異なります
  45. 45. コンポーネント単位で考えるWeb制作 include時にどうやって modifierを変えるか
  46. 46. コンポーネント単位で考えるWeb制作 パーシャルに
 パラメータを渡す
  47. 47. コンポーネント単位で考えるWeb制作 <%- include('./_article', { modifier:'article—-small' }); %> _article.ejs <%- include('./_article'); %> <article class="article <%= modifier %>">
 <!-- 記事コンポーネント -->
 </article> パラメータを追加
  48. 48. コンポーネント単位で考えるWeb制作 これだけじゃ
 上手くいかないパターン
  49. 49. 並び順が微妙に違う
  50. 50. コンポーネント単位で考えるWeb制作 似てるけどCSSで吸収しにくい違い
  51. 51. コンポーネント単位で考えるWeb制作 提案2
  52. 52. コンポーネント単位で考えるWeb制作 modifierの概念をHTML コンポーネントにも拡張 提案2
  53. 53. コンポーネント単位で考えるWeb制作 modifierを条件にif文
  54. 54. コンポーネント単位で考えるWeb制作 <ul class="sns <%= modifier %>">
 <li>ツイート</li>
 <li>シェア</li>
 <li>いいね!</li>
 <% if (modifier === 'sns--vertical') { %>
 <li>Pocket</li>
 <li>はてブ</li>
 <li>Google+</li>
 <% } else { %>
 <li>はてブ</li>
 <li>Google+</li>
 <li>Pocket</li>
 <% } %>
 </ul>
  55. 55. コンポーネント単位で考えるWeb制作 CSSとHTMLの派生を
 同じ概念で整理できる!
  56. 56. コンポーネント単位で考えるWeb制作 提案2:modifierの概念をHTMLコンポーネントにも拡張 includeとmodifierによる 派生コンポーネントの実装 本来構造化CSSの為の概念であるmodifierによって、 スタイルの差分とHTML要素の差分を横断的に管理 重複がなく、凝集度の高いHTMLとCSS 変更や拡張に強い ifの中身が肥大化したら、更にファイルを分けて対応 CSSとHTMLを同じ概念で整理できる
  57. 57. コンポーネント単位で考えるWeb制作 HTMLとCSSは
 セットで管理した方がいい?
  58. 58. コンポーネント単位で考えるWeb制作 提案3
  59. 59. コンポーネント単位で考えるWeb制作 ディレクトリ構造を
 コンポーネント中心に 提案3
  60. 60. src sass html 普通は言語ごとに分かれていて、それぞれのルールで構造化を図るが… _base.scss _header.scss _footer.scss _article.scss index.html article.html category.html includes _header.html _footer.html
  61. 61. src components site-header _site-header.scss _site-header.html article-item _article-item.scss _article-item.html article-list _article-list.scss _article-list.html コンポーネントの中にセットで置いちゃう pages index.html article.html sass style.scss@import include
  62. 62. article-item _article-item.scss _article-item.html チケット コード コンポーネント すごく把握しやすい!
  63. 63. コンポーネント単位で考えるWeb制作 提案3:ディレクトリ構造をコンポーネント中心に コンポーネントを軸にした
 ソース管理へ 1つのコンポーネント 1つのフォルダ 1つのチケット 1つのCSSファイル 1つのHTMLファイル すごくスッキリ!
  64. 64. コンポーネント単位で考えるWeb制作 One more thing…
  65. 65. コンポーネント単位で考えるWeb制作 (静的実装だけど) データをビューから分離
  66. 66. コンポーネント単位で考えるWeb制作
  67. 67. 写真+リンク+ 肩書き+
 SNS+コメント
 全部入りコンポーネント 架空のフルバージョンから派生して実体化 modifierとテキスト ビュー データ 構造化CSS
  68. 68. _person.ejs <section class="person <%= modifier %>">
 <!-- メンバーコンポーネント —> <h1><%= data.head %></h1> <% if (modifier === 'person—-sidebar') { %>…<% } %> <% if (modifier === 'person—-channel') } %>…<% } %> <% if (modifier === 'person—-small') } %>…<% } %> </section> <%# データを用意 %>
 <% var arrayData = [
 {modifier:’person--sidebar', head:'ナッツ', job:'4代目広報担当・編集長', tw:'...' },
 {modifier:'person--channnel', head: 'ヨシキ', job: '漫画編集長', tw: '...'}, {modifier:'person--small', head: 'こやにい', job: 'メディアディレクター', tw: '...'}
 ]; %> 
 <%# forEachでループ %>
 <% arrayData.forEach(function (record) { %>
 <% include('./_person', { modifier:record.modifier, data:record } ); %>
 <% }); %>
  69. 69. コンポーネント単位で考えるWeb制作 提案2:modifierの概念をHTMLコンポーネントにも拡張 ビューとデータの分離 コンテンツの量産に最適 文言修正や文言の使い回しが楽 動的サイトのビューの設計にも応用可能
  70. 70. まとめ
  71. 71. コンポーネント単位で考えるWeb制作 今日の まとめ Web制作において「コンポーネント」を 意識することによって 見積もりや進 管理、分業など、
 プロジェクト管理上のメリットがある ビューの構造化をすすめ、開発効率を 高める実装上のメリットもある
  72. 72. コンポーネント単位で考えるWeb制作 今日の ページの見積りはコンポーネント次第 まとめ ページ内のコンポーネントが
 いくつあるか それぞれのコンポーネントが
 どれだけ複雑か サイト全体でコンポーネントが
 どれくらい共通化されているか
  73. 73. コンポーネント単位で考えるWeb制作 今日の 提案1:コンポーネント単位で
 計画を立てる まとめ
  74. 74. コンポーネント単位で考えるWeb制作 今日の 重複を解消するinclude まとめ
  75. 75. コンポーネント単位で考えるWeb制作 今日の 構造化CSSのmodifier まとめ
  76. 76. コンポーネント単位で考えるWeb制作 今日の 提案2:modifierの概念を
 HTMLコンポーネントにも拡張 まとめ
  77. 77. コンポーネント単位で考えるWeb制作 今日の 提案3:ディレクトリ構造を
 コンポーネント中心に まとめ
  78. 78. コンポーネント単位で考えるWeb制作 今日の One more thing…
 データをビューから分離 まとめ
  79. 79. コンポーネント単位で考えるWeb制作 今後の展開
  80. 80. コンポーネント単位で考えるWeb制作 今後の展開: 今後の展開 WebpackでJavaScriptも
 パーシャル化 コンポーネント単位でテスト Yeoman
  81. 81. コンポーネント単位で考えるWeb制作 コンポーネント化で、
 Life is Good な制作を!
  82. 82. Thank you! http://qiita.com/y_hokkey 株式会社LIG フロントエンドエンジニア 堀 祐磨 (ほりでー)

×