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