ランサーズ(Lancers)エンジニアブログ > もくもく会 > 2023/4/24週 もくもく会 GraphQLサーバを作る, Open AIのStream出力, Live2D, Next.js 13 & RSCについて etc.
2023/4/24週もくもく会

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

blog_admin|2023年04月28日
もくもく会

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

今週のもくもく会

発表

  • 続・GraphQLサーバを作る(herokuと戦う)もくもく会として稼働できたのが2日だけだった

磯野

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

岩崎

  • Next.js 13 & RSCについて
  • 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>
    
  • サーバーコンポーネント、クライアントコンポーネントの比較

太田

雑談

  • Laravel Livewire使ってる?
    • 使ってない
    • 思想としてはLaravelしかわからん!って人でもフロントエンドを触りやすくするもの
  • 今からLaravel触る人が触っとくべき機能とかは?
  • async awaitちゃんと使いたい
  • Next.js 13
    • RSCが速い
    • page,error,loading,layoutよい
  • Evan Wallace強い
  • 色々落ち着いたらRustするんだ

                       

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