2023/5/22週 もくもく会 OOUIデザイン, GraphQLサーバを作り込む, Laravel10 + Sail + Vite + React, LangChain etc.

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

今週のもくもく会

谷

• 先週のもくもく共有会の内容をエンジニアブログに書く
• OOUIデザインの書籍を読む
  • 先週読書会がはじまったが、土日で読めてなかった為
• GraphQLサーバを作り込む
  • https://zenn.dev/highgrenade/scraps/169d3aa591892f
  • とりあえずPostgreSQL（heroku DB） + Prisma + GraphQLサーバのシンプルな疎通ができた！
  • ApolloServerに渡す引数オブジェクトのcontextプロパティにPrismaClientのインスタンスを渡せばGraphQLとDBを接続できた
  • scheme.prisma通りにtypeDefs（GraphQL側で利用する型定義）を整理
  • resolversの記述をprismaのメソッドに書き換えていく
    • 他のGet部分をPrismaに置き換えてる
    • Mutation系の処理はまだ置き換えられてない
• headerプロジェクトのビルドjsファイルのバグ調査
  •  グローバルスタイルを書き換えるスタイル記述が混ざっていた
  • headerが利用されているページで、なぜかインラインstyleタグが展開されている
  • ページ専用のcssが定義されていないaタグなどはインラインstyleタグの中のスタイルが優先して適用される
  • headerのビルド周り、cssリセット周りを確認
  • 原因特定ok
  • デザインシステムの各コンポーネントでグローバルスタイルが定義されていた為
  • import 'globals.scss' の様な記述は要注意

太田

• Laravel10 + Sail + Vite + React (TypeScript) + TailWind CSS + Breeze + Node.js 18 + MySQL 8 + PHP 8.2 やってる
  • Vite4.3がリリースされたのでNode.jsはバージョン18↑推奨。2023年9月にはNode.js 20がLTSになる
  • Laravel Sail でよしなにSSL環境ほしい場合にはこれが良いらしい
    • https://github.com/ryoluo/sail-ssl
    • SailじゃなくてDocker触れることできるならなしでOK
  • 今後のLaravelは TailWind CSS を使っていく方向性になっていきそうなのでセットで覚える必要がある
    • BreezeにもTailWind CSS は使われている
  • Laravelの環境構築はSailで行い、React(ts) + TailWind CSS + Breeze の環境構築はViteでやるとスムーズにいけそう
  • よくわかってないのがNode.jsは結局コンテナ内でやるべきなのかどうか
    • コンテナでやるしかなさそう

磯野

• 今週したこと
  • PHPで理解するオブジェクト指向の活用本を読み始めた
    • クリーンアーキテクチャちょっとわかった
    • 実際の仕様に組み込むとなると難しそう。
• 来週以降
  • 読書の続き
  • Laravelのアップデート進めていく
  • Larastanのエラーと格闘中
    • Anonymous function should return App\Models\SearchKeywordBuilder<Illuminate\Database\Eloquent\Model> but returns App\Models\SearchKeywordBuilder<App\Models\User>.

砂田

• 今週したこと
  • StableDiffusionWebUIを動かすNodejsバックエンド作成
  • SaaSにデプロイ
  • Slack Botの調査
    • Bot形式がいいのかコマンドがいいのか
• 来週すること
  • デプロイ完了させる
  • Botと繋げる

岡田

• LangChainを触ってみる
  • 「ざっくりつかむ！LangChainのメンタルモデル」
  • 全体像はModels, Prompts, Chains, Agents, Memory, Indexesの６つ
  • Quickstart Guide → 動作確認
  • ChatGPTとLangChainで恋愛シミュレーションゲーム用AIを実装してみた – Qiita（Generative Agents in LangChain）
    • → コード読む

湯山

• 今週したこと
  • リーダブルコード読んだ
    • コードは他の人が最短時間で理解できるように書かなければならない
    • コードは短く書いたほうがよいが「理解するまでの時間が短くなる」ほうが優先度は高い
    • tmpやretvalのような汎用的な名前は避ける
      • イテレーターをclub_i、member_i、user_iと命名することで「このイテレーターはどの変数のものなのか」が理解しやすくなる

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