私が歌川です

@utgwkk が書いている

ドキドキ文芸部プラス! をちょっとやった。いつまでネタバレを回避しないといけないのかが難しくて曖昧なことを言うけど、追加要素のサイドストーリーを読むのが一番いいと思う。ローカライズはちょっと雑かもしれない。

あとは名越先生の実況動画 (プラス! ではない) を見たらいいと思う。

www.youtube.com

GraphQL Code GeneratorでTypeScript向けのenumの型だけを生成してみる

tl;dr

  • プラグインを作る (改造する) と実現できることは分かった
  • 既存のプラグインのオプションを調整するだけで実現できるかは不明

背景

GraphQLスキーマファイルを生成するためにGraphQL Code Generatorを使っており、GraphQLクエリに関するコード生成はrelay-compilerを使っている。また、プログラミング言語としてTypeScriptを使って開発している。

動機

relay-compilerが生成するTypeScriptファイルにenumの型定義が含まれている。enumを使うqueryやfragmentのファイルに型定義があるけど、個別のファイルとして欲しい。

GraphQLクエリを書いた箇所ごとにenumの型定義があるので借用する、という形ではなくenumの型定義が置いてあって自由に使えるとよさそう、というイメージ。コンポーネントに紐づかないユーティリティー関数を書きたくなる場合もあって、そういうときにどこからenumの型定義を借用するのか、という問題が出てしまう。

既存の手法

GraphQL Code GeneratorのTypeScriptプラグインでもenumの型は生成できるけど、inputの型なども含まれてしまう。欲しいのはenumの型定義なので、うまく出力を絞りたい。

TypeScriptプラグインを改造する手法

GraphQL Code GeneratorのTypeScriptプラグインの出力を絞ればよいのではないか、という方針でちょっと書いてみた。enum.tsを見ると、enumの型定義だけしかないことが分かると思う。

github.com

おわりに

GraphQL Code GeneratorのTypeScriptプラグインを改造すると表題にあることは達成できると分かった。もうちょっと手軽にできる方法があればよいけど、誰か知ってたら教えてください。

blog.utgw.net

このとき買ったFitbit Charge 4をずっと使っていて、ついにバンドが折れた。

Amazonで適当なバンドを探していたけど、この、ネイビいブルーという色名に (色にも) 惹かれたのでただちに買って、今日届いた。つけ心地は普通。

Fitbitを使いはじめてもう5年目ということが分かる。なんだかんだでバンドを買い替えつつたまに新しいモデルを買うぐらいで暮らしている。

blog.utgw.net

YouTube Data APIをラップしたGraphQL APIを作る

はじめに

表題のものを途中まで作った。指定したチャンネルにアップロードされた動画ぐらいは取れるというステータス。

developers.google.com

基本的にはAPIドキュメントを読みながらGraphQLスキーマを作ってリゾルバを実装していけばよい。けど、このAPIでは欲しいデータが取得できないということに気づいて中断したので、途中だけど載せておきます。↓こういうクエリで一気にデータを取得できる。

query ChannelUploadsQuery($id: ID!) {
  channel(id: $id) {
    title
    uploads: relatedPlaylist(key: UPLOADS) {
      items(first: 100) {
        pageInfo {
          hasNextPage
          endCursor
        }
        edges {
          node {
            position
            video {
              id
              title
              publishedAt
              duration
            }
          }
        }
      }
    }
  }
}

動機

REST APIで各リソースの子リソースを辿ろうとすると、リソースが変わるごとにAPIリクエストを都度発行する必要があり、手元でちょっと試すのには不便。GraphQL APIにしておいたらフィールドを指定するだけで所望のAPIを叩いていってくれるので便利なんじゃないかと思ってやってみた。

実装

github.com

graphql-jsとTypeScriptを使ってすごく素朴にリゾルバを実装していった。静的型の恩恵を受けるなら違う道具を使ったほうがいいと思う。graphql-jsだと型注釈にコツが要る。

みどころ

51件以上一気に取得する

YouTube Data APIでは maxResults パラメータでデータの取得件数を指定できるが、最大値は50になっている。つまり、51件以上のデータを一気に取得したい場合はリクエストを分割する必要がある。ので、50件ずつデータを取得して、指定された件数になるまで順に詰めていく処理を実装している。ページングする必要があるのでリクエストは直列になってしまう。

https://github.com/utgwkk/youtube-data-graphql-api/blob/267fe041642d824e35d5c0e294e0fdab7dcedcd6/src/schema/playlist.ts#L44-L89

dataloader

PlaylistItemを複数件取得したあと、PlaylistItemに紐づくVideoを取得するには別のAPIを叩く必要がある。1リクエストずつ送っているとレイテンシが増大するしAPIのレートリミットにも引っかかりやすいと思うので、できるだけリクエストをまとめたい。dataloaderを使うとサクッとできる。

これも51件以上データを取得するときはリクエストを分割する必要があることに注意する。こっちはidの配列を渡せばよいので並列にリクエストを送れる。

https://github.com/utgwkk/youtube-data-graphql-api/blob/267fe041642d824e35d5c0e294e0fdab7dcedcd6/src/dataloader.ts#L6-L23

全然関係ないけど、chunk関数を手作りする機会が多い気がする。

おわりに

みなさまも好きなREST APIをGraphQL APIとしてラップしてみてはいかがでしょうか。

旅行には保湿成分が足りていない

ちょっと旅行して、ホテルで朝起きると、肌が乾燥していることに気づく。自宅だとこうはならない。常に湿度に気をつかえる、保湿ができる環境でないとすぐこうなってしまう。無印良品で小さなスキンケアグッズを揃えてみたけど、家にあるものが一番馴染んでいる気がする。


ということで、あんまり脈絡がないけど加湿・保湿グッズを書いて締めます。

加湿器

加湿機能付きの空気清浄機を使っている。プラズマクラスターの効果が出ているかどうかは分からない。

化粧水

乳液

化粧水と乳液 (クリーム) には順序があることを最近知った。

フェイスパック

フェイスパックがけっこう効いているのではないか。

デバッグしぐさ

魚の釣り方*1について考えることが増えたのでちょっとメモです。

まず深呼吸する

1人で問題に向き合っていると、冷静になれなかったり、思い込みでぜんぜん見当違いのところに入り込んでしまったりしがちなので、初手で慌てないのがよいと思う。

とはいえ、いきなり落ち着けと言われても難しい気もするので、誰か他の人に見てもらうのが手っ取り早そう。クマさんデバッグみたいなイメージ。

何がおかしいのかを把握する・してもらう

Gitを使っているなら git statusgit diff などのコマンドを駆使してどういう差分が出ているのか、意図しない差分が残っていないかを見るとよさそう。とりあえず git restore とかで元に戻してみるなどもできる。

エラーログが出ているならそれをよく読んだり、共有して他の人にも見てもらったりできるとよい。スクリーンショットとして共有するよりは文字としてコピペできるとよさそう。どこからどこまでをコピペするとちょうどよいのかは明らかではないけど、こういう感じでコマンドを入力したところから次のプロンプトまでコピペしたら、ひとまず最小単位にはなっているはず。自分の環境では % になっているけど $ とかかもしれない。

[utgwkk@kaede] 00:23:41 ~
% ls -l
total 16
drwxr-xr-x 3 utgwkk utgwkk 4096 Dec  4  2020 ghq/
drwxr-xr-x 5 utgwkk utgwkk 4096 Dec  6  2020 go/
drwxr-xr-x 5 utgwkk utgwkk 4096 Apr  2 19:32 local/
drwxr-xr-x 5 utgwkk utgwkk 4096 Dec  5  2020 perl5/
[utgwkk@kaede] 00:23:41 ~
%

APIキーとかがログに入っていると気まずいかもしれないけど、まあ身内に見てもらうならなんとでもなるはず……。もうちょっと広く見てもらうときは隠しましょう。

目が多いと便利

慣れていないと、何がおかしいのかを把握するためにどこを見たらいいのかが明らかではないと思う。もうちょっとわかる人に見てもらいながら作業できるとよいと思う。モブプログラミングとかそういうイメージ。

臆せず聞く

これどういうことでしょうか、何が起こっているのか分かりません、といったことはどんどん口に出す (チャットに書く) のがよい。詰まっているということが分かったら、教える側もどうしたらよいかを考えることができる。

リモート時代だとモニタを覗きに行ってあれこれ言うみたいなのが難しい気がするので、定期的に、分からない・うまくいってない人は書き込んでください、と促すぐらいがよいのかもしれない。

*1:魚釣りの方法ではない