フロントエンド開発における設計のお話

フロントエンド開発における設計の大切さとコンポーネント設計の具体例の一部を紹介します！

Transcript

1. フロントエンド開発における設計のお話
2. 自己紹介 職種 Software Engineer / Engineer Maganer 経歴 SIer (5年) → SaaS提供会社 (3年) + 業務委託 趣味 バンド活動 (ベース) / ロードバイク X @engine_duck Daiki Endo ( Duck )
3. 今回お話すること • フロントエンド開発における設計はとても大切！！ • 「コンポーネント設計」に焦点当てて、具体例も少し紹介！
4. ここ数年で、React / Vue が普及して、 フロントエンドのコード量が増えて、 フロントエンド領域を担当するエンジニアが増えた！ React / Vue は、宣言的に直感的に書けるが故に、 フロントエンド/コンポーネント設計に慣れていないと、 保守性の低いコードが量産されてしまう... テーマの背景
5. RailsやLaravelなどのView機能では、 バックエンドでModelからデータを取得して、erbや bladeテンプレートに流し込んでHTMLをレンダリング してクライアントに返す。 クライアントで動きが欲しい場合は、 jQueryや部分的にVue等を用いる。 フロントエンドでの関心事は、 少しの見た目の動的な変更と部分的なAjax通信。 Model Client Server HTML + JS erb / blade HTML + JS バックエンドフレームワークのView機能を用いた 従来型のフロントエンドの関心事
6. フロントエンドが責務を担う関心毎が増えた • ページルーティング • Model (外部データ) の状態 (キャッシュ等) • 見た目をどう表示するのかの状態 • DOMの値 (refオブジェクト) • 認証 / 認可 管理 etc. SSRやRSC (React Server Component) でも、 SeverでフェッチするかClientでフェッチするかの違いで、 フロントエンド (React) が管理することには変わらない。 Client Server Web API JS ( React / Vue ) React / Vue 等のモダンフロントエンドの関心事
7. フロントエンド開発での関心毎が増えているので、コードが複雑になりやすい。 Next / Nuxt を使えば、React / Vue が提供する複雑な機能を便利に使えるが、 これだけではコードの保守性と可読性がすごく高まる訳ではない。 バックエンド開発では、 MVCモデルやSOLID原則、クリーンアーキテクチャを用いたクラス設計など、 責務/依存を意識してコードを書いていく流れがあるが、 フロントエンド開発では、ライブラリやFWは何を使うかはよく議論されているが、 設計についてはあまり言及されていない (？) 知られていない ( ? ) ※ Atomic Designはかなり有名。 『フロントエンドのデザインパターン』https://zenn.dev/morinokami/books/learning-patterns-1　⇦ オススメです！ React / Vue ( 宣言的UIライブラリ ) が普及したのも日本ではここ数年なので、 有識者がまだ多くないことも背景にある (？) フロントエンド開発の設計手法は意外と知られていない？
8. UI表示のみに関心を持つViewコンポーネント 受け取ったデータをどう表示するかに 関心を持つコンポーネント Model コンポーネント Model (外部データ)に関心を持つンポーネント Fetcher Hooks (SWR等) をサブスクライブするコンポーネント データロードするサーバーコンポーネント Viewコンポーネントをハンドリングする Controllerコンポーネント 外部データをどのViewコンポーネントに 任せるのかに関心を持つコンポーネント Controller コンポーネント View コンポーネント View コンポーネント MVC指向で考えるコンポーネント設計
9. Atomic Design で考えるコンポーネント設計 ( https://uxdaystokyo.com/articles/glossary/atomic-design/ より引用 ) なんとなくは理解できるが、 いざコンポーネント設計に落とし込むと どう使ってよいのか分からなくなる... ( ? )
10. Organisms ( Container ) / Template ・特定のプロダクトに依存しない 　( = 他アプリケーションでも使用可能 ) ・外部モジュール化できる ・UI表示のためのLocal Stateは持つことはある Molecules Atom Atom Atom Organisms ( Presentational ) Molecules Atom Atom Molecules Atom Atom Organisms ( Presentational ) Molecules Atom Atom Molecules Atom Atom Atomic Designを基に考えるコンポーネント設計 ・業務ロジックは持たない ・プロダクト毎に設計 採用ライブラリやプロダクトによって 考え方は変わります！ ・ドメインに関心を持つ ・業務ロジックを持つ ・外部データへのアクセスがある
11. 保守性と可読性を高める工夫やお話したいことは、他にもたくさんあります！ • ディレクトリ設計 / スタイリング設計 / テスト設計 • Global State を扱うhooksをサブスクライブするコンポーネントの区分 • 循環参照が起きないような工夫 • コンポーネントにおけるProps定義の大切さ ◦ コンポーネント名とProps名でどのようなコンポーネントか分かるように ◦ Propsは関心事として捉える ◦ PropsはなるべくHTMLに沿うようにする ◦ Slot ( ReactElement)で渡すことを意識する その他の開発時の設計およびポイント その他の開発時の設計およびポイント