2023/4/24週 もくもく会 GraphQLサーバを作る, Open AIのStream出力, Live2D, Next.js 13 & RSCについて etc.

ランサーズでは自己学習の場として毎朝1時間程のもくもく会を開催しています。
もくもく会を開催しようと思ったきっかけは、こちらで紹介しています。
以下は今週の取り組みになります。

今週のもくもく会

発表

谷

• 続・GraphQLサーバを作る（herokuと戦う）もくもく会として稼働できたのが2日だけだった
  • https://zenn.dev/highgrenade/scraps/169d3aa591892f
  • herokuでのデプロイ周りに躓いていた
  • 一応 herokuのデプロイは通った
  • 次はアプリ自体のエラー

磯野

• 今週やったこと
  • OPEN AIのStream出力を試してみる
    • オプションで「stream ⇒ true」を指定すると、レスポンスが分割生成される
    • 最初はフロントから直接OpenAIのAPIを叩こうとした
      • すごくうまくいったが、APIキーが取れず断念
      • 結局バックエンド側でAPIを呼び出して、フロントにSSE（Server Sent Event）で受け取るように設定
      • fetchEventSourceが便利だった！
  • Live2Dのレスポンシブ対応
    • 最初はLive2d側で無理やりcanvasの位置を左寄せにしていた
    • そのせいで、スマホサイズにするとキャラクターが表示されるcanvasが変なところに飛ばされてしまう
    • そこで、常にキャラクターは真ん中に来るようにして、position:fixedを使って移動させるようにした
  • Laravel Weekly Update 更新
    • Laravel Framework / Middlewareの引数の可読性向上
    • Laravel Framework / ステータスコードのアサーション用メソッドを３つ追加
    • https://zenn.dev/link/comments/35611424c73e1a
• 来週やること
  • Live2d関連の記事を書く
    • リップシンク
    • Demoからキャラクターを既存アプリケーションに召喚する方法

岩崎

• Next.js 13 & RSCについて
  • https://zenn.dev/imokeeeenpi/scraps/76cbb5b56335b3
• Supabaseと繋げててデータ取得ができた
• 環境変数

  NEXT_PUBLIC_SUPABASE_ANON_KEY=
  apikey=
  

  NEXT_PUBLICをつけないシークレットな環境変数をサーバーコンポーネントでは使用できる

• asyncFunction
  • サーバーコンポーネントではコンポーネントレベルでasyncFunctionが使用できる
  • クライアントコンポーネントではuseEffectやTanStackQueryなどのサードパーティのライブラリを使う必要があった
  • これのおかげでフェッチの記述がシンプルにかけるようになった
• キャッシュオプション
  • デフォルトはgetStaticPropsの挙動
  • オプションでgetServerSidePropsやISRに変更できる
• ファイル
  • Next13はページごとにpage,error,loading,layoutを作って自動で以下のようなjsxを作成してくれる

  <Layout> {/* layout.tsx */}
    <ErrorBoundary fallback={<Error />}> {/* error.tsx */}
      <Suspense fallback={<Loading />}> {/* loading.tsx */}
        <Page /> {/* page.tsx */}
      </Suspense>
    </ErrorBoundary>
  <Layout>
  

• サーバーコンポーネント、クライアントコンポーネントの比較

太田

• 今週1日しか作業できなかったけど
  • Androidアプリ開発
    • setOnClickListener を使うことでViewがクリックされたときに動作させることができる
    • https://zenn.dev/koji9412/scraps/aefd7836d788c4

雑談

• Laravel Livewire使ってる？
  • 使ってない
  • 思想としてはLaravelしかわからん！って人でもフロントエンドを触りやすくするもの
• 今からLaravel触る人が触っとくべき機能とかは？
  • 特にないけど、Laravel10から触るべし！古いものは触らなくて良い！
  • Laravel最新系は最高すぎる
  • Laravel LTSは触らなくて良いよ
  • https://laravelshift.com/
  • dependabotっぽい
  • https://laravelshift.com/convert-laravel-mix-to-vite
• async awaitちゃんと使いたい
• Next.js 13
  • RSCが速い
  • page,error,loading,layoutよい
• Evan Wallace強い
  • https://madebyevan.com/
• 色々落ち着いたらRustするんだ

今週の報告は以上です。
週毎に取り組みを掲載していきますので、ご期待下さいませ。