初心者にTypeScriptを教え始めた感想

OJT 技術的な何か

※ここでの初心者とはこのようなイメージです

  • 一人で仕事をするには心許ない
  • 基礎構文（if forなど）はできる
  • Objectや配列の処理は心許ない
  • 静的型付け言語は経験がない

モブプログラミング形式の勉強会、参加者が自力でテストを書けるようになったため、TypeScript編に移った。まだ始めたばかりだが、今の所感を残しておく。

先にやった方が良いこと

テストが書けない場合、先にテストを書けるように訓練した方が良い。これは間違いない。理由は次の通り。

  • エラー発生時の対応方法を教育しておかないと固まってしまう
  • 補助輪があることによる安心感が伝わりづらい
  • IN / OUTを意識する習慣がないと自力で型をつけられない

エラー発生時の対応方法を教育しておかないと固まってしまう

TypeScriptになった瞬間、型エラー・TSエラー・処理のエラー.....とにかくエラーの連続である。何か書くとすぐエディタは真っ赤になる。エラーが出たとき「まずはしっかりと読んで何が起きているか理解する」訓練をしておかないと文字通り「フリーズ」してしまう。特にRubyやJavaScriptで仕事をしていた（し始めた）人にありがち。

この前Twitterで↓の記事が話題になっていた（？）が、真面目にこうなってしまう。

jp.quora.com

エラーが出ると焦ってしまい、何も考えられなくなる。すると思考停止して止まってしまう。それは理解できる。よって、まずは「自分で書いた内容がわかっている」「先にテストを失敗させ、その後通す」を繰り返してエラーに慣れておくことが必要。実際、型エラーになっても「エラーの内容と何行目に書いてあるかを確認してね」と手助けすればある程度は進められるようになった。

とにかくテストからやった方が良い。

補助輪があることによる安心感が伝わりづらい

TypeScriptの良い点は「型があることによる安心感」「意図を型で表現しやすい」ことかなと個人的には思う。しかし、型付けのめんどくささと対立してしまう関係でもある。テストの良さ・テストがあることによってデグレードを防ぎつつやれるね！嬉しいね！を体感していると、次のような説明で納得してもらいやすい。

// 3の倍数ならFizzと返す（Fizzbuzz問題から抜粋）

const fizz = (n) => {
  return n % 3 === 0 ? 'Fizz' : n;
};

// テストケース
it('3の倍数のときはFizzと返す', () => {
  expect(fizz(9)).toBe('Fizz')
})

it('3の倍数でないときは数字をそのまま返す', () => {
  expect(fizz('2')).toBe(2) // 文字列なのでテストは動作しない。この凡ミス、テスト実行前にわかったら便利じゃない？
})

テストがあると嬉しいけど、引数や結果のIN/OUTが正しいかは「実行するまで」わからない。ある程度は「実行前」にわかるので、そういうものを使うともっと安心だよね、という論調である。

テストが書けないとこういう説得はできない。めんどくさいが来る前に便利さをわかってもらった方が良い。

IN / OUTを意識する習慣がないと自力で型をつけられない

これは表記の通り。テストケースはIN/OUTを整理して記述する作業で、型を作る作業と似ている。IN/OUTを調べて型をつけるはずなので。よって、テストケースで訓練しておいた方がスムーズに進む。とにかくテストを（以下略）

最初に取り掛かったこと

FizzBuzzを用いてテストを書く練習をしていたため「FizzBuzzのコード・テストコード」をTypeScriptにしてもらった。strict:trueにしておくと型がない場面でエラーが出てくる。まずはFizzBuzzのテストケースを見ながら引数に型をつけるところから始める。知らないことは不安に感じて手が止まってしまうため、まずは知っている範囲から入っていくことを気をつけると良い。

工夫していること

とにかく型をつける・エラーをよく読む、を重視して進めている。さてどうなるか…。

  • 参考書を指定して買ってもらうとよい
    • プログラミングTypeScriptを買ってもらった。
    • 本を読む習慣がないため、まずはきっかけを作る。文字が大きめで親しみやすく、オライリーというカッコよさをアピールして買ってもらう。
    • 2章はほぼ環境構築なので、その点も良い。個人で学習しやすくなる。
  • ESLintはコミット前にhookで実行する
    • 見る習慣がないと無視されてしまう。強制的に見させる
  • ESLintのTypeScriptルールはデフォルトで運用する
    • 練習なので関数の戻り値も型をつけてもらう。練習なので！というのがポイント