2023/6/5週もくもく会 GraphQL + Prisma, Stable Diffusion web UI, リーダブルコード etc.

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

今週のもくもく会

谷

GraphQL+PrismaでMutationを整える
- https://zenn.dev/highgrenade/scraps/169d3aa591892f
- resolverにcreate, update, deleteを追加
  - Prismaがjsオブジェクトを書く感じでDB操作をできる為、GraphQLと相性が良い
```
// select + where句的なやつ
const book = await prisma.book.findUnique({
  where: {
    id,
  },
})

// update（create, deleteの場合は、メソッドを変えるだけ）
await prisma.book.update({
  where: {
    id,
  },
  data: {
    ...input,
  },
})
```
- 一旦、CRUDを実装したGraphQLサーバをherokuに公開する任務は完了

GraphQLサーバとReactを接続する

useQueryにGraphQLのクエリを投げたら簡単に取れた

import { gql, useQuery } from '@apollo/client'

const Component = () => {
  const booksData = gql`
    query allBooks {
      books(isRead: true) {
        id
        title
        author
      }
    }
  `

  const { data, error, loading } = useQuery(booksData);

  if (error) return <div>データを取得することができませんでした</div>;
  if (loading) return <div>Loading...</div>;

  const { books } = data;
    return (books.map((item) => <div key={item.id}>{item.title}</div>))
}

クエリ追加は、useMutationでいけるみたい

https://www.azukipan.com/posts/graphql-client-create/

const [addBookData] = useMutation(addBook);

const handleClick = () => {
  addBookData({
    variables: {
      input: {
        title,
        author,
        categoryId,
        isRead,
      },
    },
  });
};

scheme.prismaの型情報、GraphQL側の型情報、サーバ・フロント側の実装で利用する型情報が散らばる課題
- なんか解決できそう
- https://chaika.hatenablog.com/entry/2022/06/02/083000
- GraphQL Code Generator
もくもく会でのGraphQLの学習は終了

砂田

絵文字爆撃アプリ
- クライアント画面追加
  - p5.js（https://p5js.org/）
  - WebSocketのサンプルを利用
    - https://github.com/jbakse/p5.party
    - WebSocketサーバを外部に立ててる
      - サーバは、RubyのSinatra
  - ニコニコのコメントやインスタライブのリアクションなどのイメージ
- MediaPipeで手で絵文字消す機能
  - https://developers.google.com/mediapipe
  - http://cedro3.com/ai/mediapipe/
- 自分の画面に絵文字を被せるのはOBSでやっていた
  - https://obsproject.com/ja/
  - OBSのクロマキー処理を通して
ボットのAPI
- （先週）人力ランサーズくん生成ボット開始
  - 生成のオプションが難しい
```
prompt
solo, simple_background, standing, monochrome, full_body, armor, no_humans, sparkle, helmet, black_background, outline, blue_theme, white_outline, best quality, masterpiece

negative_prompt
low quality, worst quality, out of focus, ugly, error, jpeg artifacts, lowers, blurry, bokeh
```
    - promptとnegative_promptに発想力自由に英単語を投げれば良い
    - ローカル環境で動かしてる
- Railwayにnodejsのバックエンドデプロイ
  - 誰でも使えるように自動化しようとしている
  - エラーコードで、fetchAPI部分が指摘されている
  - 生成した画像をデプロイに保存するようにしている
    - S3とかに上げるように出来ると良いと自身で思ってる
- SD-Web-UIとの通信に手こずり中

湯山

3章
- 誤解されない名前
  - 限界値はlimtではなく、max・minを使う
  - 範囲指定はfirst・lastを使う
  - ブーリアン型の命名ではisやhasなどを使う
4章
- インデントが整って適切に改行された美しいコードを目指す
  - リンター使おう
5章
- コメントすべきでないこと
  - コードから推測が容易なもの
  - コメントのためのコメント
- コメントすべきこと
  - TODOコメント
    - TODO: とか FIXME: とか
  - 長い処理の要約
    - ブロックで何をしているか書く
6章
- 指示語の使用は避ける
- 処理の内容ではなく、コードの意図(コードで実現しているか)を書く

雑談

デイリーコーディングのススメ
- https://twitter.com/hashtag/minacoding
ランサーズメディアアート部やるか
おすすめ書籍
- ジェネラティブアート
- Processing クリエイティブ・コーディング入門

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

2023/6/5週 もくもく会 GraphQL + Prisma, Stable Diffusion web UI, リーダブルコード etc.

今週のもくもく会

関連記事

2023/6/5週もくもく会 GraphQL + Prisma, Stable Diffusion web UI, リーダブルコード etc.