$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

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

SansanTech
PRO

October 03, 2023
Tweet

More Decks by SansanTech

Other Decks in Technology

Transcript

  1. Sansan株式会社
    部署 名前
    続・変更に強いコンポーネント設計の
    ⽅針と規約(Webフロントエンド)
    Sansan技術本部
    Sansan技術本部
    データ戦略部 エンジニア
    ⽊⽥ 悠⼀郎

    View Slide

  2. 写真が入ります
    ⽊⽥ 悠⼀郎
    Sansan株式会社
    技術本部 データ戦略部 エンジニア
    2018年にSansan株式会社に⼊社。名刺アプリ Eight の開発を経
    て DSOC(現:データ戦略部)に異動し、データ化システムの開
    発・運⽤に携わる。
    現在はWeb公開情報を収集するクローラーの開発に従事。
    サーバーサイドを中⼼に、Webフロントエンド・インフラに興
    味・関⼼があります。

    View Slide

  3. アジェンダ
    - 😇 前置き
    - 🎯 題材となるアプリケーションについて
    - ⚛ Atomic Design に従う
    - 📝 規約
    - 🆕 記事公開後のアップデート

    View Slide

  4. 😇 前置き

    View Slide

  5. 本⽇お話すること
    - 変更に強いコンポーネント設計の⽅針と規約(Webフロントエンド) -
    Sansan Tech Blog という記事の内容をお話します。
    > 2022年1⽉に書いた Atomic Design に関する記事
    > 具体的な実装の話はあまり出てこないので、Webフロントエンド経験がなくても
    ⼤丈夫なはず
    - ただ、記事の内容が少し古くなっているかもしれないです。
    > 最近は Atomic Design の考え⽅を参考にしつつ、各々で⼯夫をしている印象
    > Web フロントエンドにおけるコンポーネント設計の考え⽅の1つと捉えていただ
    ければ幸いです

    View Slide

  6. Webフロントエンドにおける「コンポーネント」
    - IT の分野で「コンポーネント」というと様々な意味がある
    - Webフロントエンドにおける「コンポーネント」とは?
    - React の公式ドキュメントによると・・・。
    > React コンポーネントはマークアップを散りばめることができる JavaScript 関数
    です
    - ※ Defining a component | Your First Component – React の Google翻訳

    View Slide

  7. 🎯 題材となるアプリケーション
    について

    View Slide

  8. 題材となるアプリケーションについて
    - 機構改⾰・⼈事異動情報(β)
    > 実験的な機能をいち早く利⽤できる
    Sansan Labs で提供している機能の1つ
    です。WEBで公開されている、企業の機
    構改⾰や⼈事異動の情報を、Sansan上
    で会社名や業界・キーワードから検索で
    きます。
    - ※ 現在はクローズ
    - 以降、このアプリケーションを題材に、
    チームにおける設計⽅針や規約などにつ
    いて説明していく。

    View Slide

  9. ⚛ Atomic Design に従う

    View Slide

  10. ⚛ Atomic Design とは
    - Atomic Design とは
    > Atomic Design は、どんな単位で UI をコンポーネント化すればよいかを⽰して
    くれる、とてもシンプルなフレームワークです。
    - Atomic Design のメリット
    > 複雑なUIも確実に組み⽴てることができる
    > しっかりとコンポーネントごとに分けられたUIの機能は再利⽤性が⾼い
    > 多くの画⾯に対して少ないコードで実装できる
    > 再利⽤性が⾼いコンポーネントは、統⼀された使い勝⼿をユーザーに提供できる
    > 画⾯別ではなく機能別に分けられたUI設計が複数⼈の並⾏実装を実現し、開発速
    度がアップ
    ※ 五藤佑典 著『Atomic Design 〜堅牢で使いやすいUIを効率良く設計する』(2018年4⽉
    25⽇発売) P4, P66 より引⽤

    View Slide

  11. ⚛ Atomic Design に登場するコンポーネント
    Atoms(原⼦) Molecules(分⼦) Organisms(有機体) Templates Pages
    ・それ以上分割できない最⼩
    要素
    ・「具体的にどんな処理をす
    るか」までは分からない
    ・デザインの統⼀感を⽀える
    => ユーザーの使いやすさに
    つながる
    ・ユーザーの動機に対する
    機能を提供する要素
    ・⼊⼒フォームなど
    ・独⽴したコンテンツとし
    て成り⽴つ要素
    ・データを流し込む前の、
    ページ全体を表す要素
    ・Templates にデータを流
    し 込んだもの
    ※イメージなし。データを
    流し込むと Pages になり
    ます。
    依存関係の⽅向

    View Slide

  12. ⚛ Molecules と Organisms の分け⽅
    あるある: コンポーネントを Molecules と Organisms のどちらに分けるか迷う
    - Atomic Design 本(※) では以下のように書かれている
    > Molecules: 独⽴して存在できるコンポーネントではなく、ほかのコンポーネント
    の機能を助けるヘルパーとしての存在意義が強いコンポーネント
    > Organisms: 独⽴して存在できるスタンドアローンなコンポーネント
    (※) 五藤佑典 著『Atomic Design 〜堅牢で使いやすいUIを効率良く設計する』(2018年4⽉
    25⽇発売) P88より引⽤

    View Slide

  13. ⚛ Molecules と Organisms の分け⽅
    機構改⾰・⼈事異動情報(β) の例
    💡ポイント: 独⽴したコンテンツとして成り⽴つ要素か?
    検索フォーム テーブルの⾏
    コンポーネント Molecules Organisms
    分類理由
    ⼀覧表⽰があって初めてコンテンツとして成り⽴つ
    から
    コンテンツとして成り⽴っている(⼀⼈分の⼈事異動
    情報を表⽰している)から
    画像イメージ

    View Slide

  14. ⚛ コンポーネントの設計⽅法
    - デザインモックに書き込んで検討
    > もちろん、実装開始してから変更することもある
    - コンポーネント設計と実装は⾏ったり来たりして OK
    Atoms Molecules Organisms

    View Slide

  15. 📝 規約

    View Slide

  16. 📝 データの繋ぎ込みは Organisms 以上で⾏う
    - データのつなぎ込みを⾏う層を限定することで、階層毎の役割を明確にする
    - Atomic Design を厳密に実践するなら、「Pages からしかデータを繋ぎ込まな
    い」となりそうだが・・・。
    > 利便性も考慮して Organisims からも OK としている
    Atoms(原⼦) Molecules(分⼦) Organisms(有機体) Templates Pages
    ※イメージなし。データを
    流し込むと Pages になり
    ます。

    View Slide

  17. 🛠 使っているツール

    View Slide

  18. 🛠 Storybook
    - Storybook を使って、単体のコンポーネントで表⽰確認できるようにしています
    - バックエンドでいうと、ユニットテスト(単体テスト)を使って開発する感覚に
    近いかもしれません

    View Slide

  19. 🛠 Storybook
    - Storybook を使って、単体のコンポーネントで表⽰確認できるようにしています
    - バックエンドでいうと、ユニットテスト(単体テスト)を使って開発する感覚に
    近いかもしれません

    View Slide

  20. 🆕 記事公開後のアップデート

    View Slide

  21. 🆕 記事公開後のアップデート
    - 📝 Component と Container は分けない
    > 分けていた意図は、⾒た⽬に関する部分とロジックを分離すること
    > React Hooks (※)が使えるようになったため、Component と Container を分離す
    る必要はなくなった
    (※) Built-in React Hooks – React https://react.dev/reference/react

    View Slide

  22. 🆕 記事公開後のアップデート
    - 最新のコンポーネント設計事情をお届けしたかったのですが・・・。
    > 実は、この記事を公開してから2年近くフロントエンドを書いていませ
    ん・・・。
    - またフロントエンド開発に戻り、⾃分の中で⽅針が確⽴されたされた際には、
    どこかで記事を書かせていただくかもしれません
    > その時はよろしくお願いします!

    View Slide

  23. Sansan技術本部のVision
    世界のビジネスを変える、
    技術者集団であれ

    View Slide

  24. ⼤胆さと実直さ。
    チャレンジ精神を胸に、⽇々技術を磨く。
    想像と創造。
    ユーザーの視点に⽴ち、ものづくりを追求する。
    スピードとクオリティ。
    最速で最善のサービスを世に送り出す。
    ⼀⾒対⽴するような特性を併せ持ち、
    ときにそれらを使い分けながら、進み続ける。
    すべては、ビジネスに不可⽋な
    インフラをつくるために。
    常識をひっくり返すアイデアで、
    この挑戦の先頭へ。
    技術本部 Statement
    今⽇もどこかで、⼈と⼈、
    企業と企業が出会っている。
    そこにあるのは、
    ビジネスを変える無数の可能性。
    出会いの数だけ、私たちにできることがある。
    その可能性を、カタチにする。
    Sansan技術本部

    View Slide

  25. Sansan 技術本部
    データ戦略部 採⽤情報
    https://media.sansan-engineering.com/data-strategy

    View Slide

  26. View Slide