イベント概要

8/18、GVHOsakaにて【React×Firebase】サービス開発入門ハンズオンを開催し、16名の方に参加頂きました。

素早くモバイルアプリを開発できると話題のプラットフォーム・Firebaseとモダンなフロントエンド技術・Reactを組み合わせて、開発～デプロイを短時間でやってみよう！という内容のハンズオンです。

お題となったアプリケーションは「調整-Firebase」。スケジュール調整サービス調整さんを元に作成しています。

調整-FirebaseのコードはGitLabにあがっています。

事前準備の方法、ハンズオンの実施方法も上記リポジトリのガイドに記載があるので、同じように実施いただけます！

本ハンズオンのポイント

  • 2時間程度でWebアプリケーション開発とCI/CDまでひととおりのことが体験できる
  • 自分のアイデアをすぐ形にできるような、スピード感のあるサービス開発を体感できる
  • ReactやFirebaseといったモダンな技術に触れることができる

当日の流れ

当日のタイムスケジュールは以下の通りです。

時間 やること
12:40 – 13:00 受付
13:00 – 13:05 はじめの挨拶
13:05 – 13:20 導入説明
13:20 – 13:40 ハンズオンを始める前の準備
13:40 – 15:20 Reactアプリケーション作成
15:20 – 15:35 アプリケーションのデプロイ
15:35 – 15:50 クロージング

参加者に手を動かしてもらう部分に絞ると、20分で事前準備、100分でアプリケーションの実装、15分でデプロイというスケジュールとなっています。

当日は、3名の社員がTAとして参加し、参加者のサポートをしました。

導入説明

導入説明として、ハンズオンで作成するアプリケーションの概要と今回使用した技術について簡単な説明をしました。

ハンズオンで作成するアプリケーションがどういうものなのかイメージをふくらませてもらうため、完成したアプリケーションをお見せしたり、使用する技術について簡単な説明をしました。

今回使用した技術は以下の通りです。

  • React
  • Firebase
  • GitLab

Firebaseにはさまざまなサービスがありますが、今回はDBにRealtime Databaseを、デプロイにFirebase Hostingを使用しました。

ハンズオンを始める前の準備

前準備として、運営側が用意したGitLabリポジトリのforkから、Firebaseプロジェクトの設定までを行いました。

スライドを使って作業内容の説明をしながら全員同時進行で準備作業を行っていただき、環境構築等でうまくいかない方がいたら、適宜TAがサポートに入るという形で進めました。

Reactアプリケーション作成

いよいよ、Reactのアプリケーション開発です。

運営側が用意したアプリケーションの一部機能を穴埋め形式で実装してもらいます。

実装してもらうのは、日程調整用のイベントを作成する画面と、出欠入力をする画面です。

今回は、React初心者の方も参加できるようハンズオンで実施する内容をセクションに区切り、セクションごとに簡単な説明を実施した後、参加者の皆さんに手を動かしていただく形をとりました。

次のセクションの説明までにコードを書ききれなかった場合は、ガイドに記載されているコード例をコピー&ペーストした上で次のセクションにうつっていただきました。

作業中、わからないことは都度TAに質問していただきました。

DBとの接続が案外簡単ですね、との声が多かったです。

アプリケーションのデプロイ

さきほど作ったアプリケーションをデプロイします。

デプロイは、次の二種類の方法を実施頂きました。

  • Firebase Hostingを使用して手動デプロイ
  • GitLab CIを使用してFirebase Hostingで自動デプロイ

皆さん、デプロイ後にURLを開いて作成したアプリケーションを確認していました。

以上でざっくりではありますが、フロントエンドの開発、CI/CDがひととおり体験できました。

アンケート結果

今回のハンズオンのアンケート結果は以下の通りです。

Q.今回のセミナー内容はいかがでしたか？

  • 難しかった（2名）
  • 期待通り（11名）
  • 簡単だった（1名）

全体的に期待通りの難易度だったようです。

自由記述欄でも、以下の点が良かったとのコメントを頂きました。

  • 使ったことがないサービスに触れられた点
  • ハンズオン実施中に説明を挟み、丁寧に進行した点

また、他の技術についてのハンズオンの企画、Reactについてもっと深く学べる勉強会の開催を期待する声もありました。

次回イベントについて

現時点で予定しているイベントは以下の通りです。

【React×Firebase】サービス開発入門 ハンズオン(9/12)

今回レポートしたハンズオンイベントの第2回目です。

※内容はまったく同じです。

今後も、TIWとして定期的にイベントを企画していく予定です。

こちらのページで告知していくので、是非ご覧ください。

（追記）9/12のイベントを開催しました

平日にもかかわらず15名の方にご参加頂きました。

8/18の回と同じく、全体的に期待通りの難易度だったようです。

自由記述欄では次のようなコメントを頂きました。

  • 事前連絡も含め丁寧なレクチャーだった
  • ReactとFirebaseに集中できるように資料が用意されており良かった

また「Gitのコマンドも資料に書かれているとより分かりやすいのでは」といったコメントも頂きました。 今後の改善に繋げたいと思います。

8/18の回、9/12の回ともにご参加頂いたみなさま、ありがとうございました！

本コンテンツはクリエイティブコモンズ(Creative Commons) 4.0 の「表示—継承」に準拠しています。