読み込み中...
投稿日
「全部乗せ！！ 自社サービス開発入門（Reactハンズオン）」イベントレポート
もくじ
イベント概要
3/30に大阪にて「全部乗せ！！ 自社サービス開発入門（Reactハンズオン）」を開催し、13名の方に参加頂きました。 フロントエンドをReactで、Web APIをSpring Bootで作られたアプリケーションをHerokuへデプロイしてみよう！という内容のハンズオンです。
お題となるアプリケーションは、調整さんならぬ「調整ちゃん」。スケジュール調整アプリケーションです。 調整ちゃんのコードはGitLabにあがっています。 事前準備の方法、ハンズオンの実施方法はガイドに記載があるので、同じように実施頂くことができます。 APIはSpring Bootで実装済みであり、参加者には「調整ちゃん」のフロントエンド部分を実装してもらいました。
本ハンズオンのポイント
- 2時間程度でアプリケーション開発からCI/CDまでひととおりのことが体験できる
- WebAPI・フロントエンド共にアプリケーションを持ち帰ることができる
テーマ選定の理由
なぜ短時間のハンズオンにCI/CDまで含めるの？と思われた方もいると思います。 一般に、ある程度大きな規模の開発現場になると、各分野のスペシャリストが分業して作業を進めます。 そこで働くエンジニアも分野ごとに分けられたチームの中で開発の一部のみを担当することが多く、サービス開発の流れをひととおり経験することはなかなかありません。
そこで、普段の仕事ではなかなか触れられない幅広い技術に触れて、サービス開発の流れをひととおり経験してみたいという方がいるのではないかと考え、本ハンズオンを開催しました。参加者の皆さんに、手軽かつ短時間でフロントエンド・WebAPI・CI/CD等の幅広い技術に触れて、サービス開発の流れをひととおり経験して頂こうというのがテーマ選定の主旨です。
当日の流れ
当日のタイムスケジュールは以下の通りです。
| 時間 | やること |
|---|---|
| 12:40 – 13:00 | 受付 |
| 13:00 – 13:05 | はじめの挨拶 |
| 13:05 – 13:15 | ハンズオン導入説明 |
| 13:15 – 13:30 | 環境準備 |
| 13:30 – 15:00 | Reactアプリケーション作成 |
| 15:00 – 15:15 | Herokuデプロイ（手動） |
| 15:15 – 15:30 | GitLab CI/CD設定 |
| 15:30 – 15:45 | クロージング |
参加者に手を動かしてもらう部分に絞ると、1時間半でアプリケーションを実装し、残り30分でHerokuデプロイ（15分）、GitLabのCI/CD設定（15分）をしてもらうというスケジュールです。 当日は、事前にハンズオンデモを行った社員がTAとして参加し、参加者のサポートをしました。
環境準備
参加者にはそれぞれGitLabで「調整ちゃん」リポジトリをforkしてもらい、各々のリポジトリで作業を進めてもらいました。
環境構築がうまくいかない方には、適宜TAがサポートに入りました。
Reactアプリケーション作成
1時間半と時間が限られているので、画面をすべて実装してもらうのではなく、運営側で用意したガイドを参照しながら、一部機能を穴埋め形式で実装してもらいました。 皆さんお茶を飲みつつ、もくもくと作業をしている姿が見受けられました。
TAが会場を巡回して、適宜参加者のサポートを行いました。
Herokuデプロイ（手動）
15時までにアプリケーションが実装しきれなかった場合も、developブランチにできあがったコードを用意しておき、それを使用して（またはコピー&ペーストして）後続のHeroku手動デプロイ、GitLabでのCI/CD設定の作業を実施してもらいました。
ガイド通りHerokuにログイン、新規アプリケーションを作成してコマンドラインからビルドとデプロイを手動で実施します。デプロイが成功した後は、PCやスマホでアプリケーションにアクセスが可能になります。 皆さん真剣な顔で、PCやスマホからアプリケーションにアクセスして確認を行っていました。
GitLab CI/CD設定
さきほど手動で実施したビルドとデプロイが、自動で行える設定をします。 こちらもガイド通りに設定を行ってもらいました。 指定したブランチに変更が入ると自動でパイプラインが走り、ビルドとデプロイを実施してくれるよう設定を組みます。
参加者の皆さんに「できましたか？」と声をかけると、「できました！」と笑顔で返事が返ってくる場面が見受けられ、皆さん全体的に楽しんでCI/CDの設定をしている様子がうかがえました。 br/>以上でざっくりではありますが、フロントエンドの開発、CI/CDがひととおり体験できました。
アンケート結果
- Q.今回のセミナー内容はいかがでしたか？
- 6割：ちょうど良かった
- 4割：難しかった
…とあり、やや難しめだったようです。 とはいえ、自由記述の回答からはポジティブな意見を頂きました。
反省・改善点
はじめてのイベント開催だったこともあり、反省点・改善点が見えてきました。
- イベント開催時のWBS
- 飲み物、お手洗いの案内が後手後手になってしまいました。今後も定期的にイベントを開催することを考えると、イベント開催時のWBSを用意しておくべきでした。
- GitLabのパイプライン詰まり
- CI/CDのフェーズで一斉に参加者がGitLabでパイプラインを流したところ、パイプラインが詰まってしまいました。今後イベントでCI/CDを回すときはGitLabを個別に立てるか、別のCIツールを使う必要があると感じました。
次回イベントについて
イベントはこれからも定期的に開催します！以下でご案内していますのでぜひご参加ください！
https://tiw.connpass.com/
本コンテンツはクリエイティブコモンズ(Creative Commons) 4.0 の「表示—継承」に準拠しています。
