👻

カンファレンスレポート: シンプルで持続可能なフロントエンド開発のための技術選定

2024/05/31に公開

本日はクラスメソッドさんの勉強会に参加してきました。そこで学んだ内容を少し復習したいと思います。

ある部署が採用している技術選定に関する知見をまとめた発表がありました。
そこではシンプルに爆速で0→1のアプリケーションサービスを立ち上げるということを中心にできる限り時間のかからない構成で技術選定が行われていました。
どういった要素があったのかを以下で記載していきます。

Tailwind CSS の利用

まず、CSSに関する議論がありました。セッションでは、Tailwindを使用する理由として、以下のポイントが挙げられました：

純粋なCSS: Tailwindは純粋なCSSであるため、カスタマイズやメンテナンスが容易です。
長期メンテナンス: Tailwindはクラスベースのアプローチを採用しており、プロジェクトが長期にわたる場合でもメンテナンスがしやすいです。
CSS設計の知識不要: Tailwindを使うことで、詳細なCSS設計の知識がなくても高度なスタイルを適用できます。開発者はクラスを適用するだけでデザインを整えることができます。
レビュー時のメリット: Tailwindを使えば、レビューの際にHTMLの修正だけで済むため、コードレビューが効率化されます。
AIとの相性: Tailwindはクラスベースのスタイリングのため、AIツールと連携して効率的にデザインを生成・修正することが可能です。

SWRの優位性

次に、データフェッチングライブラリの選定について話がありました。特に、SWRのシンプルさと機能性について強調されていました：

キャッシュ管理のシンプルさ: SWRはキャッシュ管理がシンプルで直感的です。公式ドキュメントによれば、SWRは"stale-while-revalidate"戦略を採用しており、古いデータを表示しつつバックグラウンドで最新データを取得することで、ユーザー体験を向上させます。
自動データフェッチ: フォーカス時や再接続時に自動でデータをフェッチします。これにより、ユーザーは常に最新の情報を取得することができます。
エラー処理の柔軟性: エラー発生時にリトライを行わない設定が可能であり、これにより不必要なAPI呼び出しを防ぎます。公式ドキュメントでは、errorRetryCountを設定することでリトライの回数を制御できます。
シンプルなAPI: SWRは非常にシンプルなAPIを提供しており、以下のような簡単なコードでデータを取得できます：

  import useSWR from 'swr'  
  const fetcher = url => fetch(url).then(res => res.json())  
  
  function Profile() {  
    const { data, error } = useSWR('/api/user', fetcher)    
    if (error) return <div>Failed to load</div>  
    if (!data) return <div>Loading...</div>  
    return <div>Hello {data.name}</div>  
  }

MUIを使わない

デザインフレームワークに関しては、MUI（Material-UI）を使用しない理由も紹介されました：
• 独自性の欠如: MUIを使用すると、デザインが画一的になりやすく、独自性が失われる可能性があります。
• アップデート時のコスト: フレームワークのアップデートに伴うコストが高くなることがあり、特に独自のデザイン要素を追加する場合には難しいことが多いです。

状態管理ライブラリの不要性

SWRは、データの取得とキャッシュ管理をシンプルに行うことができるため、場合によっては専用の状態管理ライブラリを使用する必要がないこともあります。以下のようなポイントが挙げられました：

SWRで十分: グローバルステート管理が必要ない場合、SWRの機能で十分にデータの取得と管理ができます。SWRはキャッシュと再検証の仕組みを持ち、アプリケーションの多くのニーズをカバーします。
フェッチ関数のカスタマイズ: SWRのフェッチ関数にnullを指定することで、最悪グローバルステートとして利用するという方針をとることで回避することも可能。

まとめ

今回の勉強会では、シンプルかつメンテナンスしやすいフロントエンド開発のアプローチが紹介されました。特にTailwindやSWRの活用が強調されており、0→1のプロジェクトにおいても有効な手法であることが分かりました。これらのツールや方法を活用することで、より効率的かつ持続可能な開発が可能となるでしょう。

Tailwind CSS の利用

SWRの優位性

MUIを使わない

状態管理ライブラリの不要性

まとめ

Discussion