StackBlitzを使ったトレーニング資料を作っている話

はじめに

こんにちは、クラウドログ事業推進部でエンジニアをしている越阪部です。
普段は、工数管理SaaSアプリ「CrowdLog」のフロントエンド開発推進に従事していて、開発基盤部分の検討と整備や、メンバーのスキルアップ施策などに取り組んでいます。
今回はその取り組みの中で、ハンズオン形式のトレーニング資料を用いてメンバーのスキルアップを図っているお話を紹介させていただきたいと思います。

目次

背景と課題

直近のクラウドログの開発では、メンバーの技術スタック移行に取り組んでいます。
これは、それまでのレガシーな技術スタック(Perl) での開発から、一新されたモダンなスタック (Golang x React) での開発に移行していけるように、各メンバーに技術を学んで身につけてもらうことを指します。
そこで、大きく分けてフロントエンド (React) とバックエンド (Go) の2種類に分けてオンボーディング資料が用意されていましたが、フロントエンド側には課題がありました。

それは「資料が、読み物が中心となっていて、実務を具体的にイメージできるトレーニング資料がなかったこと」です。

もともとオンボーディング資料を用意した当初は、基本的な知識を読み物で身につけてもらい、その後タスクをこなしながら実務的な部分を学んでもらえれば良いかと思っていましたが、オンボーディングを実施したメンバーから、前述した課題のようなフィードバックが多かったため、改善することにしました。

スキルアップクイズを始めました

前述の課題に対応するため、「スキルアップクイズ」というものをはじめました。

これは以下のような特徴を持つ、ハンズオン形式のトレーニング資料を提供する取り組みです:

• 特定のお題に沿ったクイズが提供される
  • この取り組みでは、「クイズ」という特定のトピックに沿ったトレーニング資料を提供します。
  • トピック例としては以下のようなものがあります:
    • カスタムhookの作り方
    • 各種ユニットテスト作成
    • CrowdLogでのアーキテクチャに沿ったコードの共通化
• 実際にコードを書きながら取り組む
  • StackBlitz (https://stackblitz.com/) にクイズの実装部分を用意することで、開発者は実際に手を動かしながら知識の習得をすることができます。
  • これによって、実務に近い実装経験をトレーニングの段階で積めることが期待できます。
• だれでも空き時間に取り組むことができる
  • この資料はNotionとStackBlitzで構成されており、手軽にいつでも着手できるようになっています。
  • 開発環境がStackBlitzで用意されているため、個々人が環境の用意で時間を取られることもありません。

開発者はざっくりと以下のような流れでこのクイズに取り組みます：

クイズ実施の流れ

まず「導入」がNotion上に用意されてあり、ここでクイズの「目的」や「出題内容」について理解します。
次の「クイズ解答」では、出題内容に沿って、StackBlitz上でクイズに取り組みます。
最後に、Notion上の解説とStackBlitz上の模範回答コードを元に「答え合わせ」を行います

この一連の流れを空き時間に行えるように、15 - 30分程度で終わるような分量でクイズは作成されています。

クイズ例

実際に実施されているクイズを抜粋してご紹介します。

ご紹介するのは「カスタムhook向けのユニットテストを作成する」というトピックのクイズになります。

導入部

まずはNotion上のクイズ導入部になります。

(クラウドログではオフショア開発を取り入れており、メンバー全体がこの資料を利用できるように、英語で書かれています)

クイズの導入部 (Notion)

内容としては、まず「概要 (General)」 があり、このクイズがざっくりとなんのためのクイズかが記載されています。
次に「このクイズから得られること (What you will learn)」があり、このクイズを通して得られる知識について記載されています。今回ではReactのカスタムhookに対してユニットテストを書くのに必要な基本的なことが学べますと記載されています。
最後に「出題内容 (Quiz)」があります。ここでは出題されるクイズの内容とStackBlitz上でどういった実装をしてほしいかが記載されています。また、開発者が迷いすぎてしまわないように、「解答のヒント (Hint)」の項目も用意しています。このクイズでは、テストコマンドの走らせ方や、使用するテストライブラリのドキュメントリンクが添付されています。

クイズ解答

次はStackBlitz上でのクイズ解答部分になります。

クイズの解答部 (StackBlitz)

StackBlitzではモダンなエディターの基本的な機能をブラウザ上で利用できるようになっており、ファイル / フォルダの作成やシンタックスハイライト、静的解析やソースコードのフォーマット、そして各種コードの実行環境などを利用することができます。

また、今回のクイズのための使い方として、解答に最低限必要なファイルはあらかじめ用意するようにして、開発者がすぐに解答に取り掛かれるようにしています。
用意されるファイルとは、今回のユニットテストの例でいくと、「テスト対象となるカスタムhookの実装」「テストファイルの雛形」「テストコードのサンプル」などになります。

開発者はこのStackBlitz上でコードを書き、書いたものを実行して動作を確かめながらクイズを解いていくことになります。今回の例ではユニットテストを作成することが目的となりますが、StackBlitzは実行可能なターミナルも提供しており、そちらからテストのためのコマンドを実行できるようになっています。

答え合わせ

最後に答え合わせ部分の紹介です。

クイズの答え合わせ (Notion)

答え合わせの際は、まずNotion上の解説を読みます。

今回はカスタムhookのユニットテスト作成の基本を知ることが目的だったため、使用しているライブラリについてや、理解してほしかった基本的なポイント(state更新やuseEffectの動作をsimulateする方法)について説明しています。

クイズの模範回答 (StackBlitz)

また、StackBlitzに用意されている、模範回答の実装も答え合わせに利用します。
こちらがあることで、開発者は自分のコードとの差分を比較しつつ、具体的な実装を学ぶことができます。

以上が「カスタムhook向けのユニットテストを作成する」というお題のクイズの全容となります。
他のクイズも大枠はこれと同じ要素で構成されています。

取り組んでみて

この取り組みを半年ほど運用してみていて、クイズは10問ほど作成してきました。
ここまで運用してみての所感を振り返ってみます。

いいところ

より実務をイメージしやすい学習ができる

前述もしていますが、以前のトレーニング資料に比べて、手を動かしつつ学べるようになっている分、より実務をイメージしやすい学習できるようになっているかと思います。
また、手を動かすことが一部となっていることで、よりとっつきやすい学習資料にもなっているかと思います。
実際にクイズに取り組んだメンバーからも、このクイズがあることで以前より効果的に学習できているというフィードバックをもらっています。

学習資料として取り回しがよい

一度作ってしまえば、さまざまな場面で活用することができるよさがあります。

例えば以下のような使い方ができます:

• 自分が不安だと感じるトピックを選んで学習する
• コードレビューのコミュニケーションの際に、資料として使う
• タスクの空き時間を活用するために利用する

いろいろなお題でクイズが作成できる

StackBlitzは、開発環境を用意する際に、各種「テンプレート」から土台を作ることができます。
そのテンプレートのおかげで各種お題に沿ったクイズを作成することができます。

例えば:

• Reactのテンプレート
  • 素のReactでの開発環境を提供します。
  • Reactの実装が絡んでくるクイズではこのテンプレートを利用しています。
• Next.jsのテンプレート
  • Next.jsをベースにした開発環境を提供します。 (使ったことはないです)
• Node.jsのテンプレート
  • Node.jsでJavaScriptを実行するための環境を提供します。
  • トピックがテストコードの場合はこちらのテンプレートを利用しています。

運用する上で難しいところ

作成に時間がかかる

ここはどうしてもネックになってしまいます。

クイズ作成の際は以下のような流れを踏みます:

• 1- トピックの検討
  • どういう目的のクイズにするか考えます
• 2- トピックに沿ったクイズ内容を考える
  • どういった出題内容で、クイズの目的を達成してもらうかを考えます
• 3- 各種資料の作成
  • 前項までに決めた内容で、Notionの解説や、StackBlitz上のソースコードを用意したりします

この中で、特に頭と時間を使うのが2番目のクイズ内容を考える部分です。
出題内容が理解しやすくなるように、そして取り組んだことでちゃんと知識を得られるように、ということを気にしながらクイズ内容を検討します。
また、ソースコードにしても、すぐに理解しやすいように実プロダクトに似せたプログラムにしたりといった工夫をしたりします。

こういったことをやっていると、1問作成するのにそこそこの時間がかかってしまいます。

まとめ

クラウドログで取り組んでいる「スキルアップクイズ」の仕組みについて紹介させていただきました。
この取り組みについてはこれからも継続的に取り組んでいき、内容の拡充や運用の仕組みの改善などを考えていきたいと思います。
ここまで読んでいただきありがとうございました。