初めに

社内でReactのチュートリアルハンズオン(オンライン)を実施した際の教材をご紹介します。
Reactってそもそも何？とか環境構築などについてはあえて省いています。単発のハンズオンで時間も限られていたため「Reactを利用する案件に配属された際にとりあえず右と左くらいは分かるようになっていよう」を目標に据えていたためです。

成果物

ハンズオンについて

ハンズオンについての感想も簡単に書いておきます。

実施形態

ハンズオンはCodeSandBoxで(state管理など)題目ごとにディレクトリを分けて配置した教材を作成し、それぞれ簡単な説明を付けた後、課題を伝え手を動かしてコードを書いてもらいます。その後解説やフィードバックを行いました。

CodeSandBoxって？

Webアプリのフロントエンドの環境・コードエディタをブラウザ上で提供してくれます。React・VueなどのフレームワークやJS/TSなど様々なテンプレートがあり、簡単な技術的検証や成果物の共有に利用できます。作ったサンドボックスはURLで共有できるので楽ちんです。

こんな感じでブラウザ上で開発に必要な機能が一通り提供されています。
左下から簡単にライブラリを追加でき、検証環境を作るのも楽ちんです。

感想

感想としては主に以下のようなことを思いました。

CodeSandBoxは強力だがハンズオン的には課題あり
ES2015(ES6)についての解説が必要だった…

1.CodeSandBoxは強力だがハンズオン的には課題あり

CodeSandBoxはハンズオン実施時に事前の環境構築等不要でURLを参照するだけでいいので、かなりハンズオンなどに使いやすいと思いました。
(GithubにもRepositoryとして教材を残せますし)

ただし、各人がどのようなコードを書いているか見えにくいのが課題のように感じました。学校のように黒板に答えを書かせるようなことが難しいということです。各課題ごとに数名を指名してどのようにコードを書いたかを尋ねましたが、この際に参加者全員が見えるところでコードを書いてもらうようにできるととより理解が深まるのかなと思いました。LiveShareの活用など色々試行錯誤してみたいです。

2.ES2015(ES6)についての解説が必要だった…

チュートリアルということで内容自体はかなり簡単にすることを心掛けたのですが、質問が出るまでES2015(ES6)が所与の知識になっていることに全く気付きませんでした。アロー関数、スプレッド構文、分割代入などやりたい放題ですね。チュートリアルという視点からいうとこの辺りは前提知識とせず古い書き方をしてもよかったかもしれません。

終わりに

ハンズオン自体は面白い経験だったので今後も発信を続けていきたいなと思いました。