「ゆめみ×LayerX×サイボウズ3社合同フロントエンドカンファレンス北海道2024後夜祭＠東京」に参加してきました

• 2024/9/6
• https://yumemi.connpass.com/event/326311/

shadcn/uiから考えるコンポーネント設計

• infixerさん
• https://speakerdeck.com/ryokatsuse/uitekao-erukonhonentoshe-ji

shadcn/ui

• インストール不要でコピペで使うUIコンポーネント集
• v0ではかれるコードで使われてる
• 大規模より小規模向き
• RadixUIベース
• cvaでスタイル指定をする
  • Variant指定
• formはReactHookFormを使ってる

contenteditableと向き合う

• kichionさん
• https://speakerdeck.com/kikuchikakeru/contenteditabletoxiang-kihe-u

contenteditable

• 請求書発行のプロダクト
  • どんな金額になるか等さまざまなパターンがある
  • リッチエディタが必要
• contenteditable
  • input要素などではない要素で入力可能にする
  • キー操作を自前で再実装が必要
  • 日本語入力の挙動
• ADR
  • 技術選択の背景の記録
  • 他の妥当そうな選択肢を並べる
• やってみて
  • キー操作の再現がとにかく大変

状態管理ライブラリZustandの導入から運用まで

• daikiさん
• https://speakerdeck.com/k1tikurisu/zhuang-tai-guan-li-raiburarizustandnodao-ru-karayun-yong-made

Zustandの導入

• 入力フォームの内容を大きいオブジェクトで管理してる
  • 再レンダリングの最適化をしたい
  • 状態管理ライブラリを選定
• 状態管理ライブラリ
  • トップダウン
    • Zustand, Redux
  • ボトムアップ
    • Jotai, Recoil
  • Zustandを採用
    • まとめて扱えるのが要件にあってた
    • 依存のサイズが小さい
• 使ってみて
  • ネストしたオブジェクトの管理が大変
    • ... がたくさん
    • Zustandにimmerのmiddlewareが入ってる
  • Providerがいらないので入れやすい
  • 型定義を書いていくのが大変

Open UIによるWeb UI標準化へのアプローチ

• sakuさん
• https://sakupi01.github.io/slides/ja/2024_frontendo2024_aftertalk/

Open UI

• 汎用的なUIパターンやコントロールの検討や提案をしている
• 標準化団体と協力してhtml/cssなどに仕様追加
• 最近だとPopoverAPIなど

Rechartsで楽にゴリゴリにカスタマイズする！

• 10teraさん
• https://speakerdeck.com/yuto1123/rechartsdele-nigorigorini-kasutamaizusuru

Rechartsのカスタマイズ

• チャートをカスタマイズしたい
• Rechartsはカスタマイズの口は用意してるがsvgしか入れられない
  • foreignObjectを使うとsvgにhmtlを入れられる
  • createPortalでいい感じの位置にレンダリングさせちゃう

TypeScriptとGraphQLを活用した変化に強いプロダクト作り

• おおいしさん
• https://speakerdeck.com/bicstone/graphql-2024-approach

GraphQL採用のメリット

• スキーマ駆動の開発
  • FE/BEでスキーマを前提に開発ができる
  • BEはモックで
• 1リクエストで必要な情報をとれる
  • 変更があってもクエリ変えるだけ
• スキーマ変更を型で検知できる

Next.jsでクエリパラメータを楽に扱おう nuqsを紹介！

• 🐸いまいまい🐌さん
• https://speakerdeck.com/imaimai17468/next-dot-jsdekueriparametawole-nixi-ou-nuqswoshao-jie

nuqs

• URLの文字列を単純な連結で組み立てるのは危険
• stateの同期など大変
• nuqsでクエリ管理ができる
  • hooksでクエリと同期させられる
  • 型安全にURL文字列にできる

Cloudflare PagesとCloudflare Accessで安全にWebサイトを共有する

• tottoさん

Webサイトの限定共有

• 特定の人だけにページを公開したい場面
  • IP制限する？
  • Basic認証入れる？
• Cloudflare PagesとCloudflare Access
  • Pagesにホスティング
  • Accessで認証機能
    • IP制限
    • メール認証
    • などなど
  • 50名までは無料
• 注意点
  • .pages.dev はデフォルトで認証対象外なので注意
  • GitHub連携するとアクセス制限する前にいきなりデプロイしてしまわないように