🍺

フロントエンド見せ合う会のための記事

2022/10/27に公開

以下のイベントの発表用
https://connpass.com/event/263726/

使ってるスライド
https://www.canva.com/design/DAFQNwNAli4/Of1kyxH21474bjco7N3fmQ/view

今日触れる課題

  • フロントエンドで型安全に作ってもAPIの向こう側はよくわからん
  • バックエンドで型定義しっかりしてもフロントエンドに共有するハードル高い

バックエンド・フロントエンドのチーム内で疑心暗鬼の冷戦状態に🔥

今日話す提案

  • tRPCいいよ

こないだT3 Stackというやつを知りまして、そのStackの中心となってるのがこいつでしたわ
T3 Stackの話はまた別で✌

デモ

https://github.com/ksyunnnn/hands-on-t3-app/tree/main/sample

※上記のコードをフォークして以下のenvだけ準備すれば手元でも動かせます✌たぶん

.env
# Note that not all variables here might be in use for your selected configuration
# When adding additional env variables, the schema in /env/schema.mjs should be updated accordingly

# Prisma
DATABASE_URL=file:./db.sqlite

# Next Auth
NEXTAUTH_SECRET=hoge
NEXTAUTH_URL=http://localhost:3000

# Next Auth Discord Provider
DISCORD_CLIENT_ID={your id}
DISCORD_CLIENT_SECRET={your secret}

今日触れたかった課題

  • 複数プロジェクトで一貫したUIを提供したいのにプロジェクトごとにUIがバラバラ
  • デザインガイドラインは作ったが実装ベースで一致していないので見た目は同じだが振る舞いやアクセシビリティに差分がある

今日話したかった提案

  • コンポーネントライブラリ作って社内向けにパッケージ化しようぜ

以下の観点を含む

  • Storybook
  • e2eテスト
  • Theming(e.g.ChakraUI)
  • npmパッケージのプライベート配信

👉 結果なにも手を出せていないので近しい経験あるかた話聞かせてください

Discussion