ランサーズ(Lancers)エンジニアブログ > もくもく会 > 2023/4/3週 もくもく会 GraphQL基礎, Laravel Weekly Update, Live2d Cubism SDK for web, Webpack基礎, TypeScript オブジェクト型の高度な型 etc.
2023/4/3週もくもく会

2023/4/3週 もくもく会 GraphQL基礎, Laravel Weekly Update, Live2d Cubism SDK for web, Webpack基礎, TypeScript オブジェクト型の高度な型 etc.

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

こんにちは、フロントエンドエンジニアの 谷(@high_g_engineer)です。
最近、自分が所属するチームと興味がある人達を集めて、業務時間内でもくもくと学習する会、
もくもく会を開催し始めました。

もくもく会を開催しようと思ったきっかけは、こちらで紹介しています。

以下は今週の取り組んだ内容になります。

今週のもくもく会

  • GraphQLを調査していた
    • https://zenn.dev/highgrenade/scraps/09bb436c15a9a5
    • 今週は主にリゾルバの扱い方に集中した1週間だった
    • Postタイプのスキーマを学習した
    • リゾルバの引数のparent, dataSourcesに触れた
      • parentを利用しないとリゾルバ内のコードが複雑化する
      • parentを利用すると構造化ができ、リゾルバ内のコードをシンプルにすることが可能
      • 外部リソースに対し、axiosを利用してアクセスしていたが、apollo-datasource-restというモジュールが存在する
      • RESTDataSourceを用いてクラス化することで、リゾルバ引数のdataSourcesとして引数から利用可能
    • PrismaとGraphQLを接続し、Query実行まで出来た
      • Prisma Studioでデータを登録
      • PrismaClientを利用してGraphQLのリゾルバの記述を変更
      • Prisma側で定義+作成したDBのデータをQuery実行で取得できた

磯野

  • Laravel Weekly Update #4
  • Live2d Cubism SDK for web使ってみる
    • Demoはうまく動いた
    • canvasの大きさ・位置を変えるのに苦戦中

太田

高橋

  • オブジェクト型の高度な型
    • TSの本
      • オブジェクトに対するkeyofのいい感じの使い方
      • 型情報を正確かつ安全に保持したままオブジェクト型任意のキーを取得する汎用的なゲッター関数を書くことができる
      // 型安全なゲッター関数
      function get<
          O extends object,
          K extends keyof O
      >(
          o: O,
          k: K
      ): O[K] {
        return o[k]
      }
      
      type ActivityLog = {
          lastEvent: Date
          events: {
              id: string
              timestamp: Date
          type: 'Read' | 'Write'
          }[]
      }
      let activityLog: ActivityLog = // ... 実際のデータたち
      // ゲッター関数を使った型安全な代入
      let lastEvent = get(activityLog, 'lastEvent') //Date
      
    • Record型

五十嵐

  • ずっとdependabotやってました
    • ブログ記事
    • design_systemに上がってきたセキュリティアラートのPR対応完了

 

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