「フロントエンドチョットデキル ミニ #01」に参加してきました

• 2024/12/19
• https://chot.connpass.com/event/339258/

感想

• webフロントエンド開発で誰もが悩むようなテーマが多くて、聞きながら自分のところにどう当てはまるか考えられた話が多かったです

チョットワカルかもしれないReact Router v7

• n13uさん / chot Inc.

React Router v7

• ReactRouterは2014年からある
  • routingライブラリ
  • v5からv6で大きく変わった
• Remix
  • ReactRouterと同じ人が作った
  • SSRフレームワーク
  • Shopifyが2022年に買収
• RemixとReactRouterの統合
  • ReactRouterv7でRemixと統合
  • ReactRouterの既存ユーザが多いのでそっちをベースにRemixを統合した
  • もともと近い状態になっていた
    • ReactRouter + Vite = Remix?

ソフトウェア開発ナニモワカラナイ

• hanetsukiさん / chot Inc.
• https://speakerdeck.com/hanetsuki/sohutoueakai-fa-nanimowakaranai

ソフトウェア開発のテスト

• テストしやすいコンポーネント
  • ロジックとUIが別れている
  • どういう条件の時に何を出してというのをまとめて書かない

例外処理について考える

• Shumpeiさん / chot Inc.
• https://speakerdeck.com/shumpei0111/li-wai-chu-li-nituitekao-eru

例外とエラー

• 例外とエラー
  • 例外はプログラム側で対処できる問題
  • エラーはシステムレベルを超えた問題
• 例外のUI
  • 次に何をすればいいか示せると良い
• エラーログ
  • 何が起きたのか追跡できる状態になってると良い
  • Errorを拡張したクラス作って不足する情報を出せるようにするといい

ナニモワカラナイNext.jsディレクトリ構成

• okenさん / chot Inc.

ディレクトリ構成

• featureベース/layerベース
  • layerはレイヤーごとに分けるやつ
    • component
    • hooks
    • api
  • featureは機能ごとに分ける
    • news
    • about
    • blog
• Container/Presentationalパターン
  • containerにロジックやAPI
  • presentationがUI
• Colocation
  • 1つのディレクトリにそのコンポーネント②関連するファイルを集約する
  • tsやtsx,css,test,storiesなど
• 構成
  • app
    • エントリーポイントのpageだけ
  • feature
    • container層
  • component
    • presentation層