新人教育の課題につよつよエンジニアのUtilityプロジェクトを

はじめに

こんにちは。@shimmer-youth です。

VueやNuxt, Viteの開発チームのコアメンバーでVitest, Slidev, VueUseの製作者であるつよつよエンジニアのAnthony Fu氏のUtilityリポジトリ。

これって実はすごく新人教育のTypeScriptの課題にもってこいなんじゃないかって話になりました。

背景

「即戦力になるエンジニアが欲しい！」という要望も言うだけならタダですが、実際に即戦力になるエンジニアなんてそこらへんに生えている訳もなく。ソフトウェア開発の未経験の人を採用して、社内で教育して育てていこうという方針になることもままあります。

ドミノソフトも創立から数年経ちましたが、採用するメンバーの経歴や能力も多種多様で、毎年新人教育には試行錯誤を繰り返しています。

TypeScriptの本を読んでもらったら、次は自分で考えて実装するという経験を積もう。でも、実際のプロジェクトに入ってもらっても丁度いい作業がない。課題が無いなら作ればいいじゃない、と思ってもそんな時間は忙しくてとれない。どうしたものか。

と、考えているところにAnthony Fu氏のUtilityリポジトリがいい課題になるのではという話題が上がりました。

Utilityリポジトリの内容

実際にリポジトリの内容を見てみましょう。

export function toArray<T>(array?: Nullable<Arrayable<T>>): Array<T> {
  array = array ?? []
  return Array.isArray(array) ? array : [array]
}

utils/src/array.ts at 325c0f13b34ab9605dc9c55f6166e3a229cb0f4c · antfu/utils · GitHub

numberを渡したらnumber[]に変換、もともと配列ならそのまま返す関数。引数が配列の関数に1個だけ渡したいときとかよく使いそう。

export function ensureSuffix(suffix: string, str: string) {
  if (!str.endsWith(suffix))
    return str + suffix
  return str
}

utils/src/string.ts at 325c0f13b34ab9605dc9c55f6166e3a229cb0f4c · antfu/utils · GitHub

接尾辞がついてるかついてないかわからない文字列に接尾辞がついているように保証する関数。フォルダのパスとかでよく使いそう。

なかなかお仕事でよく使いがちなユーティリティ関数がそろっています。これならそのままお仕事に活かせそう。この関数の実装部分を削除して、実装してもらうというだけで十分な課題になりそうです。

「じゃあ、この関数名と引数からどういう関数かイメージして、その内容をコードにしてみようか」

「……？ わかりません。どんなコードを書けっていうんですか？」

しまった。これでは「僕が考えていることを当ててねゲーム」です。

かといってそれぞれの関数に細かい仕様を書こうものなら、結局時間がかかる。

どこかにいい感じにこれらの関数の仕様を記述しているものは無いんでしょうか……

テストコード

it('ensureSuffix', () => {
  expect(ensureSuffix('world', 'hello ')).toEqual('hello world')
  expect(ensureSuffix('123', 'abc123')).toEqual('abc123')
})

utils/src/string.test.ts at 325c0f13b34ab9605dc9c55f6166e3a229cb0f4c · antfu/utils · GitHub

あったわ。さすがつよつよエンジニアだわ。

これなら満たすべき動作の仕様も明示されているし、正しく動作しているか判定にもなるし、テストコードを書いてから実装を進めるのがテスト駆動開発っぽくていい感じです。

課題の内容

(1) 関数名と引数からどんな関数なのかを説明してもらう

既存のコードを読んでどんな実装なのかをイメージする練習。適切な関数名をつけることで読みやすいコードになることを意識してもらいます。

(2) テストケースをもとにテストが通るコードを実装してもらう

もし実装の仕方がわからなくても「とりあえずこのテストケース1つだけ通るように仮実装してみようか」といった感じで小さい歩幅で作業を進めさせることができそうです。

(3) 出来上がったらつよつよエンジニアの実装と比較する

自分で考えてそのあとにつよつよエンジニアのコードを見て比較する。こんな書き方あったのかあたりの感覚を体験してもらいたいです。

おわりに

とりあえず、まだこの施策は「やってみようかな」って思った段階なので、具体的に開発環境をどうやって用意するのかとかも全然考えられていないです。 実際にやってみて、開発環境の構築とか実際に教わった立場からの感想が聞いてから、次どうしようか考えてみたいと思います。

つよつよエンジニアの書いたコードを見られるなんていい時代だなあ。