私が歌川です

@utgwkk が書いている

年末恒例・大sketchリポジトリ棚卸祭

はじめに

これは はてなエンジニア Advent Calendar 2022 6日目の記事です。昨日は id:momochi29 さんで「口癖を自動で検出する手法」でした。口癖って自分ではなかなか気づけないですよね。

tjmtmmnk.hatenablog.com

アプリケーションエンジニアの id:utgwkk です。今年作ったsketchリポジトリについてお話ししようと思います。年末恒例というのはたった今考えました。

sketchリポジトリとは

みなさまは、ちょっとしたコードを書いて実験したくなったことがありますか? 私はそういったとき、GitHubに sketch-yyyymmdd-abcdefg のような日付入りの名前のリポジトリを作って実験に使ったコードをpushしておくことが多いです。そのようにして作られたリポジトリのことをsketchリポジトリと呼ぶことにします。

要するに、書き捨ての実験用のコード置き場のことです。

大放出

今年中 (2022/1/1-2022/12/5) に作ったsketchリポジトリについて振り返り、思い出を語っていこうと思います。

20220313-sketch-docker-compose-python

以下の記事での調査用に作ったリポジトリです。Docker Compose v2を使うとpytestのログ出力が一切行われない、という現象の調査をこのリポジトリで行っていました。癖で docker-compose というコマンドを実行しつづけていたら気づかない不具合というのがおもしろポイントだと思います。

blog.utgw.net

20220324-sketch-css-webfont-unicode-range

以下の記事の検証のために作ったリポジトリです。この記事は前提から実験内容まで丁寧に書いてあってすごいですね。

blog.utgw.net

202204017-sketch-webpack-sourcemap

Webpack (create-react-app) のバージョンアップとそれに伴うsourcemap周りの挙動変化の調査のために作ったリポジトリです。日付部分がtypoしていることにいま気づいた……。

create-react-appのバージョンを上げたら特定のライブラリのsourcemapに関する警告が出るようになった、というのを調査していて、どうやらWebpack周りが怪しそうということでWebpackの設定を手書きしています。

20220606-sketch-graphql-type-emission

relay-compilerが生成するコードとGraphQLクエリの関係について調査するために作ったリポジトリです。話題としては以下の記事が近いと思います。振り返ってみると、1年おきに型生成に関する罠を踏み抜いている感じがしておもしろいですね。

blog.utgw.net

blog.utgw.net

20221024-sketch-node18-fetch-jest

Node.js 18では fetch 関数がデフォルトで使えるようになるけど、フロントエンドのテスト (jsdomの環境下) でも使えるのかどうか、を検証するのに使ったリポジトリです。

結論から言うと、2022/12/5時点では fetch はフロントエンドのテストでは使えないので、ひきつづきモックする必要があります。以下のissueで言及されているように、Node.jsの組み込みの fetch 関数ではない標準規格に準拠した関数をjsdom側で用意する必要がある (のでNode.js 18に上げてもjsdomの環境下で fetch 関数が使えるようにはならない)、というスタンスのようです。

github.com

20221117-sketch-react-modal

react-modalを使ったモーダル内の読み上げテキストがおかしい (意図しない要素が2回読み上げられる)、という問題の調査に使ったリポジトリです。iOSの読み上げコンテンツ機能を使ったときのみ再現するので、iOSのバグでは? という見立てをしています。

おわりに

書き捨てのコードというと、以前はGitHub Gistに上げることが多かったと思いますが、最近はリポジトリを作ってしまうほうが便利なことが多い*1と思います。また、コードを共有しておくと議論がスムーズになるとか再現してもらいやすいということで、どんどんお試しリポジトリが増えていきます。みなさまも、気になることがあったらお試しリポジトリにコードを置いてサクッと試してみてはいかがでしょうか。

明日の担当は id:yigarashi さんです。

*1:CIが動かせる、ディレクトリが作れる、などなど

できるだけ自然言語として読めるように書く

……というのが今年の個人的なキーフレーズだったのかもしれない、とふと思った。そういうキーフレーズに対してどういう取り組みをしてきたのか、ここで振り返ってみる。やってみたらあまりオチがない感じだった。

自然に読み下せるように書く

setNewValue 関数に val 変数を渡す」と「setNewValue(val) する」だと前者のほうが好ましいと思う。文脈から読み方を想像してもらうよりは、明示的に書いてあって自然に読み下せるようになっているほうがありがたい。あるいは、インラインコードに思いを込めすぎないようにする、とも言い表せるのかもしれない。

文章のつながりを意識する

文の羅列があって、それではこれを読んでください、という態度だとなかなか伝わらないと思う。使っているツールにもよるけど、見出しや箇条書きをうまく使うようにするとか、接続詞をちゃんと使うとか、そのあたりを気をつけるとよさそう。

あとは、前提・結論・感想・意見などがごちゃごちゃになっているよりは、はっきり分かれているほうがいい。このあたりは「理科系の作文技術」を読んでもらうのがよさそう。連日同じ本の話をしている気がする。

言語化を厭わない

例えば、ちょっといまいちな実装があったとして、「この実装はいまいちですね」というレビューコメントを付けても、レビュワーにとってはどうしたらいいのか分からないと思う。何がどういまいちなのかを噛み砕いて言葉にした上でコメントを付けるようにする。「一貫性がなくなっている」「責務が大きすぎる」など、「いまいち」という言葉で済ませないように心がけている。

(細かい) 綴りには気をつける

細かいけど、英単語やコードネームなどの綴りが間違っていると、一見してそっちに気を取られてしまう。すくなくとも自分が書くときはできるだけ綴りを間違えないように書いていきたい。

ChatGPTでAIとおしゃべりブームが来ている。来ているというか、ひと通り見たので次のAIブームが来たらまた野次馬に来ます、という感じ。いまのところ娯楽としてはおもしろいと思う。

知っている単語と単語をつなげて、構文的にはつながっているけどまったく正しくない文が出てくるのを見ると、まだまだ改善の余地があると思う。知らないことをさも知っているかのように答えてください、分からないはナシです、と言われたら自分もこのように振る舞わざるを得ないのだろうか。知らないことは知らないから知らないとしか言えないと思う。

生身の人間がこのような受け答えをしているほうが厄介だなと思ったけど、自分の学部時代のレポートも似たようなものだったのではないか。一生懸命調べてまとめた結果がそうである、という違いはあるかもしれない。つまり、文章を書いて相手に伝える機会が多いといい、ということが言いたいのであった。

ここで一冊

blog.utgw.net

吉祥寺.pm 31でLTした #kichijojipm

kichijojipm.connpass.com

今回も一句用意してから臨みました。

speakerdeck.com

機能追加やバグ修正以外にも、Pull Requestにはマージされる以外の使い道がある、という話をしました。普段の活動を5分に凝縮してダイジェストする、という意識で発表していましたが、想像したよりもいい反応をもらえたように思います。Pull Requestのページはいろいろなところにコメント欄があるので活用していけるといいと思っています。


今回の吉祥寺.pmではいい話をいろいろ聞くことができてよかったです。技術的に興味深い話や、勇気づけられる話など、いろいろな軸で今年書いたコードの話が聞けました。

Relayのfetch policyは取得したデータをキャッシュするかどうかに影響を与えない

Relay 14.1.0 で確認した。Fetch Policies | Relay を読んでもRelayが取得したデータをキャッシュストレージに格納するかどうかについては言及されておらず、実験して確認した。

fetch policyはあくまでGraphQLクエリを発行するときにキャッシュを使うかどうか (ネットワークリクエストを飛ばすかどうか) を制御するものであって、キャッシュストレージの振る舞いを制御するものではないらしい。

実験に使ったコードがなくてメモ書きみたいになっているけど、GitHub - relayjs/relay-examples: A collection of sample Relay applicationsのサンプルコード (issue-tracker) で fetchPolicy の値を動的に変えたら動作確認できると思う。関係ないけどいつの間にか data-driven-dependencies っていうサンプルコードが増えていた。