続・変更に強いコンポーネント設計の方針と規約（Webフロントエンド）

■イベント
コンポーネント設計のすゝめ 〜ベストプラクティスを学ぶLunch LT〜
https://findy.connpass.com/event/296449/

■登壇概要
タイトル：続・変更に強いコンポーネント設計の方針と規約（Webフロントエンド）
登壇者：技術本部 データ戦略部 木田 悠一郎

■データ戦略部 エンジニア 採用情報
https://media.sansan-engineering.com/data-strategy

Transcript

1. Sansan株式会社 部署 名前 続・変更に強いコンポーネント設計の ⽅針と規約（Webフロントエンド） Sansan技術本部 Sansan技術本部 データ戦略部 エンジニア ⽊⽥ 悠⼀郎
2. 写真が入ります ⽊⽥ 悠⼀郎 Sansan株式会社 技術本部 データ戦略部 エンジニア 2018年にSansan株式会社に⼊社。名刺アプリ Eight の開発を経 て DSOC（現:データ戦略部）に異動し、データ化システムの開 発・運⽤に携わる。 現在はWeb公開情報を収集するクローラーの開発に従事。 サーバーサイドを中⼼に、Webフロントエンド・インフラに興 味・関⼼があります。
3. アジェンダ - 😇 前置き - 🎯 題材となるアプリケーションについて - ⚛ Atomic Design に従う - 📝 規約 - 🆕 記事公開後のアップデート
4. 😇 前置き
5. 本⽇お話すること - 変更に強いコンポーネント設計の⽅針と規約（Webフロントエンド） - Sansan Tech Blog という記事の内容をお話します。 > 2022年1⽉に書いた Atomic Design に関する記事 > 具体的な実装の話はあまり出てこないので、Webフロントエンド経験がなくても ⼤丈夫なはず - ただ、記事の内容が少し古くなっているかもしれないです。 > 最近は Atomic Design の考え⽅を参考にしつつ、各々で⼯夫をしている印象 > Web フロントエンドにおけるコンポーネント設計の考え⽅の1つと捉えていただ ければ幸いです
6. Webフロントエンドにおける「コンポーネント」 - IT の分野で「コンポーネント」というと様々な意味がある - Webフロントエンドにおける「コンポーネント」とは？ - React の公式ドキュメントによると・・・。 > React コンポーネントはマークアップを散りばめることができる JavaScript 関数 です - ※ Defining a component | Your First Component – React の Google翻訳
7. 🎯 題材となるアプリケーション について
8. 題材となるアプリケーションについて - 機構改⾰・⼈事異動情報(β) > 実験的な機能をいち早く利⽤できる Sansan Labs で提供している機能の1つ です。WEBで公開されている、企業の機 構改⾰や⼈事異動の情報を、Sansan上 で会社名や業界・キーワードから検索で きます。 - ※ 現在はクローズ - 以降、このアプリケーションを題材に、 チームにおける設計⽅針や規約などにつ いて説明していく。
9. ⚛ Atomic Design に従う
10. ⚛ Atomic Design とは - Atomic Design とは > Atomic Design は、どんな単位で UI をコンポーネント化すればよいかを⽰して くれる、とてもシンプルなフレームワークです。 - Atomic Design のメリット > 複雑なUIも確実に組み⽴てることができる > しっかりとコンポーネントごとに分けられたUIの機能は再利⽤性が⾼い > 多くの画⾯に対して少ないコードで実装できる > 再利⽤性が⾼いコンポーネントは、統⼀された使い勝⼿をユーザーに提供できる > 画⾯別ではなく機能別に分けられたUI設計が複数⼈の並⾏実装を実現し、開発速 度がアップ ※ 五藤佑典 著『Atomic Design 〜堅牢で使いやすいUIを効率良く設計する』（2018年4⽉ 25⽇発売） P4, P66 より引⽤
11. ⚛ Atomic Design に登場するコンポーネント Atoms（原⼦） Molecules（分⼦） Organisms（有機体） Templates Pages ・それ以上分割できない最⼩ 要素 ・「具体的にどんな処理をす るか」までは分からない ・デザインの統⼀感を⽀える => ユーザーの使いやすさに つながる ・ユーザーの動機に対する 機能を提供する要素 ・⼊⼒フォームなど ・独⽴したコンテンツとし て成り⽴つ要素 ・データを流し込む前の、 ページ全体を表す要素 ・Templates にデータを流 し 込んだもの ※イメージなし。データを 流し込むと Pages になり ます。 依存関係の⽅向
12. ⚛ Molecules と Organisms の分け⽅ あるある: コンポーネントを Molecules と Organisms のどちらに分けるか迷う - Atomic Design 本(※) では以下のように書かれている > Molecules: 独⽴して存在できるコンポーネントではなく、ほかのコンポーネント の機能を助けるヘルパーとしての存在意義が強いコンポーネント > Organisms: 独⽴して存在できるスタンドアローンなコンポーネント (※) 五藤佑典 著『Atomic Design 〜堅牢で使いやすいUIを効率良く設計する』（2018年4⽉ 25⽇発売） P88より引⽤
13. ⚛ Molecules と Organisms の分け⽅ 機構改⾰・⼈事異動情報(β) の例 💡ポイント: 独⽴したコンテンツとして成り⽴つ要素か？ 検索フォーム テーブルの⾏ コンポーネント Molecules Organisms 分類理由 ⼀覧表⽰があって初めてコンテンツとして成り⽴つ から コンテンツとして成り⽴っている（⼀⼈分の⼈事異動 情報を表⽰している）から 画像イメージ
14. ⚛ コンポーネントの設計⽅法 - デザインモックに書き込んで検討 > もちろん、実装開始してから変更することもある - コンポーネント設計と実装は⾏ったり来たりして OK Atoms Molecules Organisms
15. 📝 規約
16. 📝 データの繋ぎ込みは Organisms 以上で⾏う - データのつなぎ込みを⾏う層を限定することで、階層毎の役割を明確にする - Atomic Design を厳密に実践するなら、「Pages からしかデータを繋ぎ込まな い」となりそうだが・・・。 > 利便性も考慮して Organisims からも OK としている Atoms（原⼦） Molecules（分⼦） Organisms（有機体） Templates Pages ※イメージなし。データを 流し込むと Pages になり ます。
17. 🛠 使っているツール
18. 🛠 Storybook - Storybook を使って、単体のコンポーネントで表⽰確認できるようにしています - バックエンドでいうと、ユニットテスト（単体テスト）を使って開発する感覚に 近いかもしれません
19. 🛠 Storybook - Storybook を使って、単体のコンポーネントで表⽰確認できるようにしています - バックエンドでいうと、ユニットテスト（単体テスト）を使って開発する感覚に 近いかもしれません
20. 🆕 記事公開後のアップデート
21. 🆕 記事公開後のアップデート - 📝 Component と Container は分けない > 分けていた意図は、⾒た⽬に関する部分とロジックを分離すること > React Hooks (※)が使えるようになったため、Component と Container を分離す る必要はなくなった (※) Built-in React Hooks – React https://react.dev/reference/react
22. 🆕 記事公開後のアップデート - 最新のコンポーネント設計事情をお届けしたかったのですが・・・。 > 実は、この記事を公開してから2年近くフロントエンドを書いていませ ん・・・。 - またフロントエンド開発に戻り、⾃分の中で⽅針が確⽴されたされた際には、 どこかで記事を書かせていただくかもしれません > その時はよろしくお願いします！
23. Sansan技術本部のVision 世界のビジネスを変える、 技術者集団であれ
24. ⼤胆さと実直さ。 チャレンジ精神を胸に、⽇々技術を磨く。 想像と創造。 ユーザーの視点に⽴ち、ものづくりを追求する。 スピードとクオリティ。 最速で最善のサービスを世に送り出す。 ⼀⾒対⽴するような特性を併せ持ち、 ときにそれらを使い分けながら、進み続ける。 すべては、ビジネスに不可⽋な インフラをつくるために。 常識をひっくり返すアイデアで、 この挑戦の先頭へ。 技術本部 Statement 今⽇もどこかで、⼈と⼈、 企業と企業が出会っている。 そこにあるのは、 ビジネスを変える無数の可能性。 出会いの数だけ、私たちにできることがある。 その可能性を、カタチにする。 Sansan技術本部
25. Sansan 技術本部 データ戦略部 採⽤情報 https://media.sansan-engineering.com/data-strategy