フロントエンドメンバーのTS型力向上を狙ったtype-challenges活用術

どうも、こんにちは。HRBrain でフロントエンドエンジニアをやってます。ちゃんかつです。
この前初めて代々木公園に行ったのですが、めちゃくちゃ広いですね。自然がいっぱいで気持ちが良かったです。

さて、HRBrain では今年の 6 月から、毎週月曜日に「type-challenges」を用いて社員の TypeScript (以下 TS) の型表現の向上を図っています。

この記事では、HRBrain ではなぜ type-challenges を解く時間を設けているのか、また、type-challenges への取り組み方を紹介します。

なぜ type-challenges を利用するのか

いろいろ理由があるのですが、「解答がなるべく簡単にできる」が一番大きな理由です。
Typescript Playgroundで解答することが出来て環境構築の手間は不要、そして、type-challenges が用意したマッチャーに通す型を作るだけでいいという容易さが決め手でした。

他にも

  • 問題の量が豊富
  • いろいろな人の解答を見ることができる

というのは魅力的なものでした。

type-challenges に関する詳しい使い方等はこちらの記事が参考になります

なぜ type-challenges を解く時間を設けているのか

繰り返しになりますが、HRBrain では毎週月曜日に TS の型問題集である type-challenges を解く「もくもく会」みたいなものをやってます。
「もくもく会みたいな」というのは、「実際に自分で手を動かして問題を解いてもらう」ということだと思ってもらって構いません。
「自分で解いてどうしても分からない」からの「答えを見て理解し、自分の知識に還元する」といった経験は手っ取り早くスキルを自分のものにできます。
受験勉強思い出しちゃいます。
次に、なぜ TS での型表現の向上を図っているのかの理由です。HRBrain のフロントエンドアプリケーションではまず TS を触ることになります。TS の型の表現力は柔軟であるが故にいろいろな方法で型の表現ができます。
そのため、表現方法を知っている知らないでは型構文の読解力に雲泥の差が出ます。こういうスキルは「既存アプリケーションの型の読解時」はもちろんのこと、以下の場面でも役に立ちます。

  • 依存ライブラリの型の読解時
  • 汎用的な処理に汎用的な型表現を搭載する時
  • 依存ライブラリに型が付いていない時に自作する時
  • 好きな OSS に型定義ファイルを提案する時

型表現の方法を知っていて損はありません。

type-challenges への取り組み方

時間を計って解く

だらだらしていてもしょうがないので、「10 分」を制限時間として、問題を解いていきます。
すぐに解けたとしても、「こここうしたほうがより堅牢な型になるな」とか、違う解答方法を考えていると案外すぐに時間が経ちます。

振り返る

時間が経ったらみんなでどこまでできたのか、どこで詰まったのかを共有してみます。
全然違う視点で解答しようとしていたり、ほぼ同じ解答を書きかけてたり、いろいろと面白い時間です。

他者の答えを見て、解き方を知る

type-challenges では issues で色んな人の解答を見ることができます。
そもそもどうやったら解答できるのか、自分の解答以外どんな解答方法があるのかを見ることができます。

解いた問題はメモで残しておく

type-challenges は Typescript Playground で解くことができるので、自分の解答の URL を発行することができます。これを各自 GitHub Gist やメモアプリで保存してもらうようにしてます。「こういうレベルの型なら理解している」という自分の TS スキルを示すことができるからです。
自分の解答を見返して懐かしむことも、絶望することもできます。使い方はそれぞれの自由です。
「なんだか受験勉強みたいだな」とまた感じました。

メンバーの声

実際に取り組んでいるメンバーからは

  • infer を使う考えに毎回至らない
  • 型の再帰が難しい
  • 型の再帰を安易にやるとすぐに上限迎えてしまうので、そこを避けるやり方もっと知りたい
  • 型に強くなった
  • Conditional types や Union といった用語が頭の中で結びつくようになった
  • コード読む時に型が追えるようになった
  • Generics に抵抗がなくなった
  • 型でなにかを表現するときの選択肢が増えた

といった声が上がっており、毎回唸りながら問題に取り組んでいます。

社員が選ぶおすすめ問題

現在 easy レベルから始めて、medium の後半に差し掛かったぐらいなのですが、これまで解いてきた問題を振り返ってもらって、おすすめの問題を紹介してもらいました。

Permutation

Remove Index Signature

  • index signature にアクセスする方法ってあるのかって感動した。解答はできなかった。

Append to object

  • T & みたいに単純にできると思ったらできなかったのでハマった

Pick

  • Easy の一番最初から全然解けなかった
  • type-challenges の洗礼を受けた

最後に

HRBrain では、自分のスキルを高められる機会を逃さないようなストイックな方、周りも巻き込みつつ自分も成長できる機会を作ることが好きな方を募集してます。
ぜひ HRBrain にご応募ください。