【レポート】スペースマーケットでReactハンズオン勉強会を開催しました

こんにちは、スペースマーケットエンジニアの三重野です。

先日、社内のデザイナー&フロントエンドエンジニア向けに Reactハンズオン勉強会 を行いましたので、今回はその勉強会の内容とスペースマーケットの社内勉強会文化について書きたいと思います。

スペースマーケットの社内勉強会について

スペースマーケットでは定期・不定期に様々な社内勉強会が開かれています。講師・参加者ともにスペースマーケットの社員です。

スペースマーケットのビジョンは "チャレンジを生み出し、世の中を面白くする" です。社員は常に自身のスキルを伸ばしたいと考えていますし、そのニーズに応えることができる人がいれば、じゃあ教えますよ！という声が上がり勉強会が開催されます。

以前在籍していた会社だと、業務でもないのに自ら勉強会を主催し、そしてその勉強会に部署関わらず社員が参加するという光景を見たことがなかったので、これはスペースマーケットという会社の文化によるものだと思っています。

具体的にはどんな勉強会？

ほんの一例ですが具体的には下記のようなものが開催されています。

• デザイナー主催 CSS3レイアウトセミナー Flexbox編
• エンジニア主催 SQL勉強会
• データアナリスト主催 Googleデータスタジオ勉強会
• 採用担当主催 採用勉強会

過去記事はこちら👇

規模も3~4名で行うものから20名ほど参加するものまでさまざまです。

たいていは主催する人がSlackやWorkplaceで「こんな勉強会やったら参加する人いますか〜」のような問いかけから始まり、参加者が集まりそうであれば日時を決め、会議室を予約して開催するという流れです。

勉強会に参加し、ためになった！と思った社員は自分も誰かのために何かやりたいと考えているのでチャンスがあれば自ら、やりますよ！と主催側にまわるという好循環になっています。

今回はReact ハンズオン勉強会を開催しました

今回は私が講師となり、Reactハンズオン勉強会 を開催することにしました。対象は、Reactの最初の初歩的なところを勉強(またはおさらい)したいというデザイナーとフロントエンドエンジニアです。

勉強会の目的

以前よりマークアップスキルの豊富な社内のデザイナー内でReactやstyled-componentsなどJS技術トレンドをキャッチアップしたいという会話がされていました。

自分自身も最近Reactのスキルを身につけたばかりだったので、この経験をチームのために生かしたいと思い勉強会を主催しました。

勉強会の目標

React初心者の方がReactとES6の基本的な構文を理解し、スペースマーケットのフロントエンドWebで使われているReactコンポーネントを修正できる、もしくはコードを読んで理解することができる、といったところを目標としました。

スペースマーケットでは Atomic Design というデザインシステムが取り入れられており、Visual DesignもReactコンポーネントもatomsやmoleculesの粒度で分離されています。また、この粒度のコンポーネントは基本的にStateless Functional Componentsで作るというルールとなっているため、コンポーネントのコード量も100行くらいに収まっておりかなり見通しが良く、最初の一歩さえ踏み出してしまえばコードリーディングはできるようになると思います。

ちなみにスペースマーケットのReactコンポーネントに関する過去記事はこちら👇

勉強会の内容

せっかくなのでハンズオン形式で各自手を動かしながら進めました。

create-react-app で雛形を作成し、まずは HelloWorld コンポーネントを作成しよう。という定番のところからはじめ

• classを使った書き方とfunctionを使った書き方の違い
• functionalな場合のアロー関数の書き方
• props渡しによる引数の取り方
• Destructuring assignment の書き方
• style定義の方法
• React.Fragmentの使い方
• stateの使い方

といったカリキュラムで進めていきました。

お手本を写経するだけでなく「やってみよう」という課題を要所ごと出題し、参加者にはその課題にモブプロで取り組んでもらうということも行いました。冒頭の画像はその時の様子です。そんなこんなで2時間の勉強会でカリキュラムを最後までやり遂げました。

結果

参加したメンバー全員、自身でシンプルなReactのコンポーエントが作れるようになりました。2時間にしては十分な成果だと思います。その後Reactのマークアップに便利なVisual Studio Codeのプラグインを共有しあったりとメンバー内での会話も活発でした。

参加したメンバーからは

• なんとなくぼんやりしていたところがわかった
• 自分でもできるような気がしてきた
• 楽しかった。次回あればぜひ参加したい

といった嬉しい声をいただきました。

次は参加メンバーが次の勉強会を主催し、スペースマーケットの社内勉強会がさらに活発になっていくと嬉しいかぎりです。

さいごに

こんな社内文化のスペースマーケットはチャレンジが大好きな人を常に募集しています。興味を持っていただけましたら是非気軽に話を聞きに来てみてください！社内勉強会の風景が見れるかもしれません！