Open10

フロントエンド勉強会-23/11/22

よさよさ

https://aws.amazon.com/jp/blogs/news/6-new-aws-amplify-launches-to-make-frontend-development-easier/

  • AmplifyがNextJS14に対応
  • server actionもできる

※この新機能を使用するには、アプリの最初のデプロイである場合、カスタムビルドイメージの値として amplify:al2023 を設定します。逆に、アプリがすでにデプロイされている場合は、ドロップダウンから Amazon Linux: 2023 イメージを選択します。

もっくんもっくん

プライベートでTDD入門して感じたこと

https://qiita.com/kim_t0814/items/3f57880b3293b1e24387

メリット

  • 要件をよく理解できるため、「どんな価値を提供するか」を見失いづらい

デメリット

  • 実装フェーズで、急遽実装方法に変更があると、テストコードも一緒に変更しないといけないため、工数が増える

所感

  • 上記デメリットで書いたことが起きると、「実装→テスト」の順で書くことが多く、結局実装を満たすようにテストを書くようになってしまう。
  • そうなると、結果論ではあるが、最初から実装した方がよかったのでは?と思ってしまった
  • 数日間しか経験していないので、熟練度が上がればもっと良さが出てきそう
Kenzo WadaKenzo Wada

個人的な所感ですが、TDDはテストケースを元に実装進めると言う性質上、安全性をすごく担保する引き換えに実装速度が落ちるなぁとは感じています。
どこまでやるかですが、導入時はそこら辺も見極めたいなあと思いました。

Kenzo WadaKenzo Wada

cliからstorybookを生成してくれる、storybook genieと言うものが最近出ていました。
openaiのAPIを使っているようなのでロバスト性が気になる部分ではありつつ、もしも精度が良ければかなり楽になるなあと。

https://github.com/eduardconstantin/storybook-genie

KK

クライアント側で直接revalidatePathを使ったrevalidateを実行しようとすると
Error: Invariant: static generation store missing in revalidateTag _N_T_/ja/setting/users
というエラーが表示される

エラーで検索したところ、同じ状況の人の質問を発見。
それに対する回答によると、どうやらrevalidatePathを使ってのサーバー側でのデータ取り直しをするためには、それらの処理を含む関数をサーバー側のコンポーネントでuse serverを使って定義し、Propsとしてクライアント側に渡して使う必要があるらしい

// こんな感じでサーバー側で定義してから、クライアントにPropsで渡す

  async function handleRevalidate(path: string) {
    'use server';

    revalidatePath(path);
  }

実際のやり取り↓
https://www.reddit.com/r/nextjs/comments/13ilupe/nextjs_134_error_invariant_static_generation/

そのやり取りで紹介されていたドキュメント↓
https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations#props

Wata-NaokiWata-Naoki

突然PostGraphileからクエリが消えた

特定のID(xxx_unit_id)をUNIQUEにすることで、postgraphile内のlistのクエリ(xxx_unit_id_list)が消えてしまうことがあった。

現状、解決策は以下。
別のクエリ(あれば)or クエリを組み合わせてフロント側で対処するか、バックエンド側でUNIQUE制約を外すか。

今後どう対処したか追記して参考になるようにしたい。

msickpalermsickpaler

app routerのキャッシュ

キャッシュ設定の上書きを防ぐ方法

絶対にキャッシュを持ちたくないならroute segment configで`export const dynamic = 'force-dynamic'が必要
https://speakerdeck.com/mugi_uno/next-dot-js-app-router-deno-mpa-hurontoendoshua-xin?slide=29

サーバー側でのキャッシュキー

data cache(サーバー側でのキャッシュ)ではヘッダー情報もキャッシュキーになる。
つまり、session-tokenもキーに含まれるのでユーザー間でのキャッシュの混同は起こらない
ただ、現状ドキュメントに書かれてないので信用できない状態。公式に書かれたら是非使いたい。
https://speakerdeck.com/mugi_uno/next-dot-js-app-router-deno-mpa-hurontoendoshua-xin?slide=31

advanced

actionを使うことでjsなしでonSubmitやonClickを呼べる。つまり、これを設定するだけでプログレッシブ・エンハンスメントな実装ができる。(js使えない環境でも動くし、jsがあればリッチに動く)
https://speakerdeck.com/mugi_uno/next-dot-js-app-router-deno-mpa-hurontoendoshua-xin?slide=63

そのうちstorybookもRSCに対応するっぽい
https://speakerdeck.com/mugi_uno/next-dot-js-app-router-deno-mpa-hurontoendoshua-xin?slide=41

参考
https://speakerdeck.com/mugi_uno/next-dot-js-app-router-deno-mpa-hurontoendoshua-xin