こちらの記事でご紹介しているとおり、ニジボックスでは今年の2月、フロントエンドエンジニアやバックエンドエンジニアを中心にReact開発合宿を行いました。（三浦のまぐろが本当においしかったです。）

実はその合宿に先んじて行われていたのが、社内React勉強会！

今回この勉強会のメンターを引き受けてくださったのは、なななんと、
株式会社ICS代表を務める池田泰延さんです！
ICSが運営するICS MEDIAの記事を目にしたことがあるエンジニアは少なくないのではないでしょうか？

今回はニジボックスのフロントエンドチームメンバーがReact開発に熱中した社内勉強会の様子をご紹介します。

【メンターご紹介】

池田 泰延さん
株式会社ICS代表。筑波大学 非常勤講師。ICS MEDIA編集長。個人サイトClockMaker Labsも運営。ビジュアルプログラミングとUIデザインを得意分野としてらっしゃいます。
今年の1月には池田さんが執筆した『JavaScriptのレシピ集』（技術評論社）が発売されています。

技術を新しく学ぶ時、ネットで調べたり、本を読んだり、オンライン学習サイトを使ってみたり・・・と様々な方法がありますが、1人のメンターの方に一貫して見てもらえるというのは滅多にない貴重な機会です！

勉強会各回のテーマ

勉強会は2019年の1月から3月までの3ヶ月間、全7回行われました。
各勉強会のテーマは下記のような感じです。

• 第1回：ReactでToDoアプリをつくってみよう
• 第2回：component間のpropsの受け渡しについて
• 第3回：Reactをより深く知るためのES2015+講座
• 第4回：react-reduxについて知る Part 1
• 第5回：制作の現場でよく使われるJavaScript処理について
• 第6回：animationとrouterについて
• 第7回：react-reduxについて知る Part 2〜非同期処理にも触れてみる

各回の終了後に参加メンバーにアンケートをとり、次回のテーマを決める際の参考としていました。

勉強会の様子

勉強会は基本的に毎回自分たちで手を動かすハンズオン形式で行われました。

勉強会のテーマに沿ったサンプルコードを池田さんにご用意していただき（React初心者でも非常に取り組みやすい内容でした！）、勉強会中は解説を聞きながら自分たちでコードを編集していきます。

遠隔での参加メンバーもおり、Slackのテレビ電話中継もしました！

▲編集したコードを解説してくださる池田さん。解説を聞きながらコーディングができるので、理解が一層深まります

▲余談ですが、勉強会中に使用するテキストエディタはVScodeで統一し、極力操作にバラつきが出ないようにしました。池田さんが教えてくれるVScode雑学をきっかけにメインのエディタを乗り換えたフロントエンドメンバーも多いはず…。

▲疑問に思うことや、わからないことがあったら質問。池田さんが何でも答えてくださるので、とっても質問しやすい雰囲気でした。私も最初は「こんなこと聞いて絶句されないだろうか・・・！？」とドキドキハラハラしていたのですが、3回目くらいからはグイグイ質問しちゃいました。フロントエンド経験が浅いメンバーは隣に座っている先輩が適宜サポートしてくれたのも心強いですね。

勉強会の内容

記念すべき勉強会第1回はReactプロジェクトを実際に新規作成する「create-react-app」からスタート！
ファイル構成、ビルドの仕方などを学んだあとはReactアプリケーションの概要を理解するために簡単なToDoアプリケーションをつくっていきました。

第2回では、第1回で作ったToDoアプリケーションにcomponent、propsの仕組みを組み込んでみました。
メンバー皆、徐々にReact独自の開発方法に少しずつ慣れていきます。「あれ？思うように動かない・・・」というときは周りに相談して、なんとかひとつずつ壁を乗り越えていきました。

第4回、第6回、第7回と難易度は少しずつあがっていきます。
Reduxの仕組みを理解したあとでreact-reduxを使ってview連携をしてみたり、Reactでルーティングを設定してみたり、redux-sagaで非同期処理と闘ってみたり…。限られた時間の中でもReactの限りない可能性を体感することができました。

▲勉強会では基本的に全ての回で一貫してToDoアプリケーションを作成したため、各回のテーマによる実装方法の違いがわかりやすかったです！

第3回・第5回は番外編。
「勉強会各回のテーマ」にあるように、制作現場で使われるJavaScriptについてやES2015についてなど、池田さんの知見を分けていただきました。こちらは早速現在の業務でも生かせそうな内容でありがたかったです！

勉強会を終えて

全７回の勉強会はすべて任意参加だったのですが、毎回フロントエンドチームメンバーのほとんどが（テレビ電話中継参加も含め）出席していたという大盛況の勉強会でした。

未開拓の領域に手を出すときにはどうしても不明点・疑問点がフツフツと湧いてくるものですが、同じ志をもって学ぶ仲間や強力なメンターと一緒なら怖いものはありません！

勉強会前に「Reactで何ができるものなのかイマイチわからない」と言っていたメンバーも、自分の手を動かしてReactに触れたことにより、Reactが何者であるかという実感を掴んでいったようです。
勉強会中に自分の成果物が常に目で見えていたことが、モチベーションの継続にも繋がったのかなと思います。

また、勉強会期間中にReact開発合宿を行ったこともあり、社内のReact意識がグッと高まった四半期になったのではないでしょうか。
実際私もReact Nativeにも挑戦してみたいなー、などと思っております！
これを機に、一層Reactにハマっていく人が増加しそうな予感です。

＜レポート＞　ニジボックス　フロントエンドエンジニア moenner