ランサーズ(Lancers)エンジニアブログ > もくもく会 > 2023/6/5週 もくもく会 GraphQL + Prisma, Stable Diffusion web UI, リーダブルコード etc.
2023/6/5週 もくもく会 GraphQL + Prisma Stable Diffusion web UI リーダブルコード etc.

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

blog_admin|2023年06月09日
もくもく会

ランサーズでは自己学習の場として毎朝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でいけるみたい
      const [addBookData] = useMutation(addBook);
      
      const handleClick = () => {
        addBookData({
          variables: {
            input: {
              title,
              author,
              categoryId,
              isRead,
            },
          },
        });
      };
      
    • scheme.prismaの型情報、GraphQL側の型情報、サーバ・フロント側の実装で利用する型情報が散らばる課題
    • もくもく会でのGraphQLの学習は終了

    砂田

    • 絵文字爆撃アプリ
    • ボットの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章
      • 指示語の使用は避ける
      • 処理の内容ではなく、コードの意図(コードで実現しているか)を書く

    雑談

     

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