はじめに

社外への技術発信活動として、Web開発の初学者向けのハンズオンイベントを開催しました。 本記事ではその際のコンテンツを公開します。

このイベントは ・JavaScriptプログラミングの経験があるが、新しい技術に触れてみたい ・Webアプリケーション型のサービス開発イメージをつかみたい という方々を対象に、「ReactとFirebaseを使って、短時間で開発からデプロイまでを体験する」をテーマに開催したものです。

Web開発、React、Firebaseのそれぞれ初学者層の多くに、ご好評をいただきました。 イベント時の説明資料を含めて公開しますので、各自で体験いただけます。

作るものの構成としては、フロントエンドをReactで開発し、Firebase Realtime Databaseと連携します。 その後、開発したアプリケーションをGitLabのCI機能を用いて、Firebase Hostingへ自動的にデプロイするところまでの内容となっております。

ハンズオン概要

ハンズオンではスケジュール調整アプリケーションを開発します。 次のガイドを参照しながら作業を進めて頂く形となります。

https://gitlab.com/tis-tiw/chousei_firebase/blob/master/README.md

主な流れとしては次の通りです。

  • 公開されたGitリポジトリをfork
  • フロントエンドのReact部分を作成
  • GitLabのCI機能を使ってFirebaseへデプロイ

ハンズオン全体の概要を示したのが次の図です。

各ガイドには、完成版のソースコードも提示されてますので、React初心者の方でもガイドに沿って進めることが出来ます。

ハンズオンコンテンツの紹介

ハンズオンは事前準備を含め、次の流れで進めていきます。

最終的にハンズオンで作成した次のアプリケーションがインターネット上に公開されます。

【イベント登録】

【出欠入力】

是非お手元のスマートフォンなどで、公開されたアプリケーションにアクセスしてみてください。 イベント登録後に表示される出欠入力のURLを共有することで、複数人で出欠入力が出来ます。 複数人で入力すると、リアルタイムに出欠の様子が反映される様子を確認できます。

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