そこが悩みどころなんです。見た目のコンポーネントとデータの流れのコンポーネントが違うから。高津戸:僕がやっている案件だと、それが食い違ってしまうところに苦しみを覚えていて。昔のバージョンのAngularJSだとコンポーネントって言わないんですけど、いわゆるこのコントローラーやディレクティブといわれるものの中で書かれているHTMLがあるんですよ。HTML単位っていうのはボタンだとか、いろんな塊をコンポーネントっていっているんですけど、それがめっちゃ集まったものがAngularJS上でコンポーネントの単位になっていると、もうわけがわからんっていうか(笑)。Webアプリ上のUIとしてのコンポーネントと、HTMLテンプレートで定義した塊をコンポーネントとして考えると、それが食い違ってしまうところが苦しい。小山田:うん、2軸はありますね。そんな状態だと、もうCSS怖くて触れない(笑)。ECSSとかだと*、機能単位で切って、ほかに干渉しないようにしたほうがやりやすいぜ、ってことになっていて、それはなるほどねと思います。案件ではそういうやり方じゃなかったってことですね。CSSの設計思想」のシリーズで詳しく解説しています。小山田:それが僕の失敗。全員:(笑)小山田:大きなコンポーネントにしちゃってたから、あの時もっと細かくしておけばよかったなと思ってます。見た目のコンポーネントに依存してつくったら、大きすぎてデバッグがしにくかった。でっかいテーブル(表)をひとつのコンポーネントにしたんですけど、そのテーブルに流されていたデータが膨大で、1列ずつデバッグできるように設計すべきだった。高津戸:あー、見た目としては表はひとつのものだから、BEMでいうとBlockにしたんだけど、だめだったってことか。小原:要件ありきですね。つくろうとするテーブルがシンプルなデータ表示だけに使われるのであれば、テーブル全体がひとつのコンポーネントでもいい。そのあたりがコンポーネントを切る人の裁量だね。――それは途中で変更はできないものですか?小山田:変えようと思えば変えられるけど。高津戸:大手術ですね。小山田:動いているものにわざわざ手をつけるっていうことだから。原田:テストがどれだけ書けているかって話にも。高津戸:新規につくるものだったらいいんですけど、いったん公開されたものだったりすると、バグが発生する可能性がすごく高くなります。コンポーネント感が食い違ったまま運用していかなくてはならない。――なかなか難問ですね。壮フロントエンド・エンジニアWeb制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。Webサイト、WebアプリケーションのHTML、CSS、JavaScript実装に携わってきた。受託案件を中心にフロント周りの実装、設計、テクニカルディレクションを行う。スケーラビリティを考慮したHTMLテンプレート設計・実装、JavaScriptを使った込み入ったUIの設計・実装を得意分野とする。jQuery入門』(技術評論社、2014年11月14日)がある。2013ベストセッションでは、全278セッション中、ベスト20セッションに選出。晃浩フロントエンド・エンジニア2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。WebGLの扱いも得意としている。外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Meetupの主催者。プロフェッショナルガイド』(共著:毎日コミュニケーションズ、2011年5月28日)』などがある。グラフィック・Web技術書籍編集、IT系ニュースサイトの編集記者を経験。その後フリーランスのエディター/ライターとして独立。2011年4月より株式会社ピクセルグリッドへ入社。紙媒体をメインに制作しているデザイン事務所で広告デザインの基礎を学ぶ。販促物を中心に、店頭グラフィック、パッケージ、POP、グッズ立案などを担当。2007年頃からWeb媒体へのデザインにも積極的に取り組み、クロスプラットフォームアプリのデザイン、画面設計、実装に携わる。現在では紙やWebの媒体にとらわれることなく、その媒体の特長を活かしたグラフィックデザインに励んでいる。マンセル色相環とムーン&スペンサー配色理論を採用した配色アプリ『HUE360』の開発を自身で行っている。jQuery入門』(技術評論社、2014年11月14日)がある。翔大郎フロントエンド・エンジニア大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。プログラマブルなCSSの設計、実装を得意とする。PANIC」は、JavaScriptを一切使わず、HTMLとCSSのみで実装。海外サイトで紹介されるなど話題となった。特定商取引法に基づく。