Componentization 
for Reality 
アメーバ事業本部 
フロントエンドディベロッパー 五藤 佑典
@ygoto3_ 
ygoto3.com
フロントエンドの 
コンポーネントベース開発の話
app 
├─ js 
│ ├─ main.js 
│ ├─ sideMenu.js 
│ └─ ….js 
├─ css 
│ ├─ sideMenu.css 
│ ├─ header.css 
│ └─ ….css 
├─ images 
...
最初は整理されていたのに 
Sira Anamwong / FreeDigitalPhotos.net
いつの間にか汚なくなり 
Bill Longshaw / FreeDigitalPhotos.net
あるコードに 
修正を入れたら 
marin / FreeDigitalPhotos.net
全然知らない場所が壊れた 
Witthaya Phonsawat / FreeDigitalPhotos.net
この画像、差し替えで 
お願いしまーす!!って言われ 
stockimages / FreeDigitalPhotos.net
どこにあるんやろ、これ?ってなる 
stockimages / FreeDigitalPhotos.net
最初は小さいプロジェクトだと 
思っていても 
Serge Bertasius Photography / FreeDigitalPhotos.net
思ってたより 
大きくなってしまった時の 
弊害は大きい 
David Castillo Dominici / FreeDigitalPhotos.net
やがてコードが 
人が認識できる単位ではなくなり 
整理できなくなる 
app 
├─ js 
│ ├─ main.js 
│ ├─ sideMenu.js 
│ └─ ….js 
├─ css 
│ ├─ sideMenu.css 
│ ├─...
人が認識できる単位 
= ディレクトリ
人が認識できる単位 
 コンポーネント化
概念的なこと
コンポーネントとして大事なこと 
• 再利用が可能 
• 交換が可能
さらにプロダクト開発においては 
• 機能のカプセル化が可能 
• コンポーネントの組み合わせで新たなコンポーネント作成が可能 
• コンポーネント間のコミュニケーションが可能
コンポーネント化の対象 
• UI = コンポーネント 
• サービスとしてのロジック = モジュール
Web Component ?
platform.js ?
しかし 
• ブラウザによって挙動が異なる 
• Shadow DOM の CSS はカプセル化できない 
• パフォーマンス的な懸念 
• 外部依存コンポーネントの重複ロードによるリクエスト増加
UI の完璧なコンポーネント化は 
(まだ)難しい
現実的な 
コンポーネントベース開発
リソース管理だけでもいい 
• コンポーネントに必要なリソースを1つの場所で管理できればいい 
• コンポーネント単位でユニットテストも管理できればいい 
• 別のプロジェクトを始めるときに再利用しやすければいい
ディレクトリ構造の強制 
リソースのロード 
スタイルの適用 
ビューの生成 
JS
これを比較的簡単に行うために 
ツールを活用する
ディレクトリ構造の強制
基本となる JavaScript と共に 
Style / Template / 画像などのリソースも 
一緒に管理 
components 
├─ menu 
│ ├─ menu.js 
│ ├─ menuSpec.js 
│ ├─ styl...
コンポーネントのパターンが複数ある。 
パターン分サブジェネレータを作る 
Test Spec も一緒にジェネレートする
button というパターンの 
コンポーネント用に 
1サブジェネレータ作成しておく 
$ yo my-proj:button upload-button 
components 
└─ upload-button 
├─ upload-bu...
リソースのロード
AMD も CommonJS もサポートする 
最強ローダー=
規模が大きくなるのでコードを分割したい。 
分離したい箇所だけ Chunk で分割する
Chunk を使用することによって 
エントリーポイントから辿って 
まとめる必要のないファイルを 
簡単に分割できる 
require.ensure([‘modal’], function (require) { 
var modal = r...
スタイルの適用
insert-css restyle.js
substack が作った CSS の文字列を <head> に 
挿入するライブラリ= 
insert-css
コンポーネントが呼び出されたときに CSS を適用させたい。 
CSS Preprocessor に Stylus を使いたい。 
WebPack の style 系 loader と一緒使う 
insert-css 挿入した <style> ...
WebPack で Stylus をロードし、 
insertCss() に渡すだけで 
コンポーネントのスタイルを 
適用できる 
var style = require(‘!raw!stylus!./button.styl’); 
inse...
ddpavumba / FreeDigitalPhotos.net
ビューの生成
コンポーネント単位でユニットテストしたい。 
テスト環境の充実 
カスタムエレメントでビューを扱いたい。 
Element Directive を活用
ディレクトリ構造の強制 
リソースのロード 
スタイルの適用 
ビューの生成 
JS
JS
Reference 
• Componentizing the Web 
http://code.tutsplus.com/tutorials/componentizing-the-web--cms-20602 
• The State of ...
ありがとうございました
Componentization for Reality
Componentization for Reality
Componentization for Reality
Componentization for Reality
Componentization for Reality
Componentization for Reality
Upcoming SlideShare
Loading in …5
×

Componentization for Reality

3,164 views

Published on

フロントエンドのコンポーネントベース開発についての話

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,164
On SlideShare
0
From Embeds
0
Number of Embeds
456
Actions
Shares
0
Downloads
4
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Componentization for Reality

  1. 1. Componentization for Reality アメーバ事業本部 フロントエンドディベロッパー 五藤 佑典
  2. 2. @ygoto3_ ygoto3.com
  3. 3. フロントエンドの コンポーネントベース開発の話
  4. 4. app ├─ js │ ├─ main.js │ ├─ sideMenu.js │ └─ ….js ├─ css │ ├─ sideMenu.css │ ├─ header.css │ └─ ….css ├─ images │ ├─ banner.png │ └─ ….png . .
  5. 5. 最初は整理されていたのに Sira Anamwong / FreeDigitalPhotos.net
  6. 6. いつの間にか汚なくなり Bill Longshaw / FreeDigitalPhotos.net
  7. 7. あるコードに 修正を入れたら marin / FreeDigitalPhotos.net
  8. 8. 全然知らない場所が壊れた Witthaya Phonsawat / FreeDigitalPhotos.net
  9. 9. この画像、差し替えで お願いしまーす!!って言われ stockimages / FreeDigitalPhotos.net
  10. 10. どこにあるんやろ、これ?ってなる stockimages / FreeDigitalPhotos.net
  11. 11. 最初は小さいプロジェクトだと 思っていても Serge Bertasius Photography / FreeDigitalPhotos.net
  12. 12. 思ってたより 大きくなってしまった時の 弊害は大きい David Castillo Dominici / FreeDigitalPhotos.net
  13. 13. やがてコードが 人が認識できる単位ではなくなり 整理できなくなる app ├─ js │ ├─ main.js │ ├─ sideMenu.js │ └─ ….js ├─ css │ ├─ sideMenu.css │ ├─ header.css │ └─ ….css ├─ templates │ ├─ header.html │ ├─ sideMenu.html │ └─ ….html ├─ images │ ├─ banner.png │ └─ ….png . .
  14. 14. 人が認識できる単位 = ディレクトリ
  15. 15. 人が認識できる単位  コンポーネント化
  16. 16. 概念的なこと
  17. 17. コンポーネントとして大事なこと • 再利用が可能 • 交換が可能
  18. 18. さらにプロダクト開発においては • 機能のカプセル化が可能 • コンポーネントの組み合わせで新たなコンポーネント作成が可能 • コンポーネント間のコミュニケーションが可能
  19. 19. コンポーネント化の対象 • UI = コンポーネント • サービスとしてのロジック = モジュール
  20. 20. Web Component ?
  21. 21. platform.js ?
  22. 22. しかし • ブラウザによって挙動が異なる • Shadow DOM の CSS はカプセル化できない • パフォーマンス的な懸念 • 外部依存コンポーネントの重複ロードによるリクエスト増加
  23. 23. UI の完璧なコンポーネント化は (まだ)難しい
  24. 24. 現実的な コンポーネントベース開発
  25. 25. リソース管理だけでもいい • コンポーネントに必要なリソースを1つの場所で管理できればいい • コンポーネント単位でユニットテストも管理できればいい • 別のプロジェクトを始めるときに再利用しやすければいい
  26. 26. ディレクトリ構造の強制 リソースのロード スタイルの適用 ビューの生成 JS
  27. 27. これを比較的簡単に行うために ツールを活用する
  28. 28. ディレクトリ構造の強制
  29. 29. 基本となる JavaScript と共に Style / Template / 画像などのリソースも 一緒に管理 components ├─ menu │ ├─ menu.js │ ├─ menuSpec.js │ ├─ style.css │ └─ template.html ├─ user-list │ ├─ user-list.js │ ├─ user-listSpec.js │ ├─ style.css │ ├─ template.html │ └─ icon.png ├─ sns-button │ ├─ banner.png . . . .
  30. 30. コンポーネントのパターンが複数ある。 パターン分サブジェネレータを作る Test Spec も一緒にジェネレートする
  31. 31. button というパターンの コンポーネント用に 1サブジェネレータ作成しておく $ yo my-proj:button upload-button components └─ upload-button ├─ upload-button.js ├─ upload-buttonSpec.js ├─ style.css └─ template.html
  32. 32. リソースのロード
  33. 33. AMD も CommonJS もサポートする 最強ローダー=
  34. 34. 規模が大きくなるのでコードを分割したい。 分離したい箇所だけ Chunk で分割する
  35. 35. Chunk を使用することによって エントリーポイントから辿って まとめる必要のないファイルを 簡単に分割できる require.ensure([‘modal’], function (require) { var modal = require(‘modal’); modal.create(); });
  36. 36. スタイルの適用
  37. 37. insert-css restyle.js
  38. 38. substack が作った CSS の文字列を <head> に 挿入するライブラリ= insert-css
  39. 39. コンポーネントが呼び出されたときに CSS を適用させたい。 CSS Preprocessor に Stylus を使いたい。 WebPack の style 系 loader と一緒使う insert-css 挿入した <style> を取り除く機能がないので、ラップする
  40. 40. WebPack で Stylus をロードし、 insertCss() に渡すだけで コンポーネントのスタイルを 適用できる var style = require(‘!raw!stylus!./button.styl’); insertCss(style);
  41. 41. ddpavumba / FreeDigitalPhotos.net
  42. 42. ビューの生成
  43. 43. コンポーネント単位でユニットテストしたい。 テスト環境の充実 カスタムエレメントでビューを扱いたい。 Element Directive を活用
  44. 44. ディレクトリ構造の強制 リソースのロード スタイルの適用 ビューの生成 JS
  45. 45. JS
  46. 46. Reference • Componentizing the Web http://code.tutsplus.com/tutorials/componentizing-the-web--cms-20602 • The State of the Componentised Web http://www.futureinsights.com/home/the-state-of-the-componentised-web.html • The Problem With Using HTML Imports For Dependency Management http://tjvantoll.com/2014/08/12/the-problem-with-using-html-imports-for-dependency-management/ • Why Web Components Aren’t Ready for Production… Yet http://developer.telerik.com/featured/web-components-arent-ready-production-yet/ • Why Web Components Are Ready For Production http://developer.telerik.com/featured/web-components-ready-production/
  47. 47. ありがとうございました

×