簡単な Web 画面を作れるようになるワークショップをチーム内で開催した話

※ このブログはヌーラバーブログリレー2021 11日目の記事です。

Nulab Apps チームでフロントエンドエンジニアをしている本橋です。先日チーム内で「Nulab Apps の簡単な画面を作れるようになるワークショップ」を開催しましたのでそれについて書いてみたいと思います。

ワークショップ開催の動機

Nulab Apps は 2018年のリニューアル でフロントエンドの技術スタックを刷新しました。それまでは Thymeleaf, Knockout.js, Haxe を使った古き良きサーバーサイドでの HTML 生成 + ちょっとした JavaScript で構成されていましたが、React, Redux, TypeScript を使った SPA に移行しています。

このリニューアルの開発体制としてバックエンド API を作るメンバー2~3人 + フロントエンド開発をするメンバー2~3人という形だったこと、さらにその後メンバーの入れ替わりもあり、新しい技術スタックでフロントエンドの開発ができるメンバーが少なくなっていました。このように各々が得意とする技術分野が分断されたまま時間が経ってしまい、バックエンド開発が得意なメンバーから

「画面を作りたいけどフロントエンドの開発者にお願いしないといけない。」
「ちょっとした UI の修正なら自分もできるようになりたい。」

といった言葉をもらうことがありました。そこでチームのフロントエンド力を底上げして新しい技術スタックへの取っ付きにくさを解消するため、「Nulab Apps の簡単な画面を作れるようになるワークショップ」を開催することにしました。

どういうことをやったか

Nulab Apps のフロントエンド開発をするにあたって必要な知識や実際にどのような開発の流れになるのかを知ってほしかったため、ハンズオン形式で手を動かしてもらう形にしました。ハンズオンでは実際の Nulab Apps のソースコードに手を加えて1つの画面を作ることをゴールとしました。

Nulab Apps チームでは週に2回ラーニングセッションという、知らないけど気になっていることを勉強する会 (参加は任意) があり、その枠を借りてワークショップを開催しました。1回30分、計22回もやらせていただいたので通算11時間も割いたことになります。

どういう内容か

参加者ほぼ全員がリモートワークをしているため、事前に用意した資料と講師 (自分) のエディタ、IDE の画面を Google Meet の画面共有機能を使って共有する形で行いました。資料は参加者が自由に見れるようにし、記載したコード例をエディタや IDE にコピペして詳細を解説、わかりにくいところは都度質問してもらうというスタイルです。

ワークショップの資料は Nulab Apps のコード詳細を含むため公開できませんが、簡略化したアウトラインと説明を以下に記します。

• 座学
  • SPA とは何か、どういった特徴や利点があるかの説明。
  • TypeScript の構文、React を使った基本的な UI コンポーネントの作り方、データの持ち方・渡し方など。
• フロントエンドディレクトリ構成と Atomic Design
  • Nulab Apps フロントエンド開発のディレクトリ構成を説明。
    • ディレクトリ構成を見ながら Atomic Design についての説明。
• フロントエンド開発 (準備と基本コマンド)
  • Nulab Apps フロントエンド開発に必要なリポジトリの説明。
  • 開発時に使うコマンドの説明。
• フロントエンド開発 (ハンズオン)
  • Nulab Apps フロントエンドのコードをどのように変更していくのかをコード例を交えて説明。コード例はそのままコピペして動くように。
  • 以下のように章立てして開発の流れをイメージできるように意識する。
    • Atomic Design に沿ったコンポーネントの作り方
    • 多言語化、ルーティング、その他
    • バックエンド API の仕様の決め方 (Swagger UI)
    • バックエンド API への HTTP リクエスト送信
    • 状態の持ち方 (Redux, React Hooks)
    • ユニットテスト

振り返って

大変ありがたいことに参加者からはわかりやすかった、フロントエンドの手の入れ方がわかったなどのポジティブなフィードバックを頂きました。ある意味ブラックボックス化してしまっていたフロントエンド開発への取っ掛かりが作れたかなと思います。

ワークショップ後の振り返り資料から

一方、資料のページ数が多く見通しが悪くなってしまったことや発案から開催まで時間がかかってしまったことが反省点です。また、ワークショップは Google Meet で行っていたため参加者の進捗が自分からわかりにくく進行しづらいといった気付きもありました。

最後に

モダンな技術を採用していても書ける人が限られていたら開発スピードは出にくいという当たり前の事に気付かされました。その状況を改善するため既存メンバー向けに開催したワークショップでしたが、オンボーディングとして良さそうという声を頂いたこともあり、その方面で何が出来るか画策しています。

また、もしフロントエンド力の足並みを揃えたり、オンボーディングに悩んでいる方がいれば上記のアウトラインを参考にして頂けたらとても幸いです。

※ 明日のヌーラバーブログリレーは kwbtsts さんの記事です。