ten986.net
天衣 甜茶 / ten986 の個人ブログです。フロントエンド中心の技術記事と思考整理。

type-challenges の感想(未完編)

2022-12-19
この記事は、「ten986 Advent Calendar 2022」の 19 日目の記事です。
https://qiita.com/advent-calendar/2022/ten986

type-challenges をやっている

type-challenges というTypeScript型の問題集があり、暇な時に埋めています。
だいたい hard の真ん中あたりまで埋まっています。年末までに終えてアドカレで全問題の感想を出す予定でしたが、ダウンしてたこともあり 1/10 くらいを目処に埋める方針に変わりました。
Zenn の方で1回、TypeScriptのコンパイラを見てtype-challengesのEqual<X, Y>を完全に理解する っていう記事を出したのでそちらも見てね。完全に理解している人向けの記事だけど。

easy までの感想

TypeScriptの型初級 に大体書いてあるので、理解したら解けます。
もしくは、easy の問題を使って記事を理解するとよさそう。
easy とはいうものの、「TypeScript初心者向け」ではなくて「TypeScriptの型初心者向け」という感じで、知らなかったら普通にむずい。

medium 以降の感想

ここからが本番ですね。 @antfu 氏の問題が最初の方に固まっていて、その問題は難易度順かつ手応えがある感じです。
他の人でも問題を増やせるのですが、それらの問題は難易度が雑多で、medium にクソむずい問題もあれば、hard に medium の下位互換が平気であったりします。
type-challenges をやっていると、型付けには典型テクが結構あって、それを知らないと永遠に解けずに悩み続けることになるなと感じました。
なので、解く場合はある程度考えてアイデアが出なければ、答えを見に行ったほうが良さそうです(で、たまに知ってる知識だけで解ける問題でショックを受けます)。
また、典型テクを知らないことで遠回りな解答をして、改めて他の人の解答を見るとエレガントな解法があったりします。
["length"] で数値を扱うテクとかどうやってたら知り得るんだろうね。
問題の解法や詰まった点はメモってあるので、全部解いたら「典型テク集」みたいな記事を出したいですね。
他の人がどうせ記事出してそうだけど、ぼくが書いた方が正確で網羅的な記事を書けると思うのでどうせ出す気がします(???)。

今日の個人ブログ開発

動的 OG 画像生成ができました。
@vercel/og を用いていて、基本的には 公式サイト に従えばなんとかなります。
参考になったのはこの辺りの記事ですね。昨日も載せましたが。
https://dackdive.hateblo.jp/entry/2022/10/12/090000
https://zenn.dev/hiromu617/articles/c03fef6f4d6c6e
めんどくさかったこととして、Edge Function として動作することから、容量が非常に厳しいです。
無料だと 1MB に抑える必要があるという・・・。
普通に実装すると中華フォントで表示されてしまうので、日本語フォントを導入する必要があるのですが、結構頑張ってサブセット化しないと平気で 1MB を超えてきます。
https://u-618.org/webfont-subset/ でサブセット化するための文字を拾い、 https://opentype.jp/subsetfontmk.htm で実際にサブセット化しました。
OGP 解析には https://ogp.buta3.net/ をいつも使っています。便利〜。
1MBをオーバーしてキレる様子