【React×firebase】サービス開発入門ハンズオン

・今日やることの説明(15分)
・ハンズオンを始める前の準備（20分）
・アプリケーション作成（100分）
・アプリケーションのデプロイ(15分)
・クロージング（15分）
2

ReactとFirebaseとGitLabを使って
調整さんのコピーアプリケーションを作る
(ハンズオン形式で)
4

イベントの出欠表を
簡単に作成できるWebサービス
https://chouseisan.com/
5

Facebookによって生み出されたUI用のJavaScriptライブラリ
アプリケーション内のデータの変更を検知し
関連する部分のみ効率的に更新、描画できる。
6

Googleが管理するウェブアプリやモバイルアプリの
開発プラットフォーム。
世界中で150万ものアプリから利用されている。
アプリケーション作成に必要な機能を提供するサービス。
開発者自身が0から構築・管理する手間を省き
素早くアイデアを形にすることができる。
7

RealtimeDatabase
クラウドホスト型データベースです。
データは JSON として保存され、接続されているすべてのクライアントと
リアルタイムで同期される。
Hosting
本番環境レベルのウェブコンテンツホスティングです。
1 つのコマンドですばやくウェブアプリをデプロイすることができ
静的コンテンツを配信できる。
10

GitLab 社が開発したウェブ型のGitリポジトリ
Gitリポジトリの機能に加えて、CI/CD機能も備えている
11

Firebase Hosting
Firebase Realtime Database
12
開発ＰＣ
デプロイ push
Reactアプリ配信
DBへ値格納・取得

ハンズオン手順書に沿って進めます
作る前に簡単に解説
↓
手順書を見て実際に手を動かす
★手順書内にコード例として
完成済のコードを記載しています
13

15
・GitLabで自分用のプロジェクト作成
・ハンズオンで使う用のソースコード入手
・アプリ内で利用するFirebaseへの接続設定を書く
・デプロイ先を設定する
・プロジェクトとアプリを紐付ける
・Realtime Databaseの読み書き制限を設定する
・Reactアプリの起動
ハンズオン用のアプリが
Firebaseのプロジェクトへ接続済の状態で
起動するまで。

16
GitLabで自分用のプロジェクトを作成します
手順書に書かれているリンクを押してください

17
$git clone でForkしたプロジェクトから
ソースコードを入手します

18
FirebaseのSDKで利用する
プロジェクトへ接続設定をfirebase.jsに追記する
👀『Firebaseのコンソール画面』

19
デプロイ先を指定するため
プロジェクトIDを.firebasercに記載する

$firebase use --add
20
FirebaseのプロジェクトとReactのアプリを紐付ける
What alias do you want to use for this project?
エイリアスを聞かれた場合は以下の通り入力
handson

$firebase deploy --only database
21
Realtime Databaseのデータ構造やデータへのアクセス制限を
設定する。今回は読み書きすべて許可する設定のみ

$npm install
$npm start
👀http://localhost:3000/
22
Reactのアプリケーションを起動して、動作を確認する

主催者が開催するイベントを「イベント登録画面」で作成
参加者は「イベント詳細画面」で出欠を入力する
参加者の出欠状況は「イベント詳細画面」で確認できる
24

・イベント登録画面
◦イベント名や開催予定日等を登録する画面を作成します。
・イベント詳細画面
◦ イベント参加者の出欠予定一覧や出欠入力画面を作成します。
25

27
開催するイベントについての情報を
登録する画面。
・画面作成
・ DBへ値を書き込む処理作成
・画面遷移処理作成
★・画面作成は既に作成済です

28
フォームやボタンなど
画面の要素を組み立てていく
フォームに入力された値を
React内の処理で扱えるようにする

29
「出欠表を作る」ボタンを押すと
フォームに入力された値がDBへ
登録される処理を作る
入力値を
DBへ書き込む

30
DBへ値を書き込む処理の後
次画面へ遷移する処理を作る
https://〇〇〇.web.app/event/- Lxxxxxxxxxxxxxxx
https://〇〇〇.web.app/event

32
・『1-1.入力フォームを作ろう』←まずココ
・『1-2.入力フォームの内容をstateに反映しよう』
・『1-3.入力フォームの内容をstateから取得して表示しよう』

33
👀手順書『1-1入力フォームを作ろう』

画面で見たいものをReactに伝えて画面を描画する
render()関数
34
render() {
return (JSXの記法で書く);
}
【手順書『 1-1.入力フォームを作ろう』】

React用のUIライブラリ
入力フォームやボタンなど
Reactで作成済の
画面構成部品(コンポーネント)が提供され
ている
Ant Designのコンポーネントを組み合わ
せて画面を作成する
35
入力フォームのコンポーネント
ボタンのコンポーネント
【手順書『入力フォームを作ろう』】

36
・『1-1.入力フォームを作ろう』
・『1-2.入力フォームの内容をstateに反映しよう』 ←次ココと
・『1-3.入力フォームの内容をstateから取得して表示しよう』 ←ココ

37
【手順書『1-2入力フォームの内容をstateに反映しよう』】
フォームの入力値を
Reactコンポーネント内で利用できるようにする
👀手順書『1-2入力フォームの内容をstateに反映しよう』

38
Reactのコンポーネントはstateという状態管理用のプロパティを持っている
stateに値を保持させたり、stateを参照することで
フォームの入力値をReactコンポーネント内で利用できるようになる
React コンポーネント
state
入力値

39
stateに保持された値を参照して
DBに登録するための値や画面に表示するために利用する
React コンポーネント
state
保持している値

setState()によってstateの値が更新されたら
render()関数が呼ばれるため
最新のstateの値を画面に出すことができる
40
【手順書『1-3入力フォームの内容をstateから取得して表示しよう』】

41
ここでstateから表示したい値は３種
・eventName:イベント名フォームの値
・description:説明フォームの値
・candidateText:候補日程フォームの値
【手順書『1-3.入力フォームの内容をstateから取得して表示しよう』】

43
・『 1-4.入力した値をRealtime Databaseに書き込もう』
-『1-4-1.入力した値を整形しよう』
-『1-4-2.Realtime Databaseに整形した値を書き込もう』

ボタンを押すと
フォームに入力した値が
Realtime Databaseに書き込む処理
44
入力値を
DBへ書き込む

45
・stateの値を整形する
(ハンズオン『1-4-1.JSONを整形しよう』)
・DBに値を追加する
(ハンズオン『1-4-2.Realtime Databaseにデータを書き込もう』)

stateのcandidateText(候補日程)の値は
一続きの文字列になっている
文字列を日付ごとに分解して配列に格納する
candidateDates: [ "12/29", "12/30" ]
candidateText: "12/29n12/30"
47
【手順書『 1-4-1.JSONを整形しよう』】
👀手順書『1-4.入力した値をRealtime Databaseに書き込もう』

firebase.database.Referenceのインスタンスを作成
48
【手順書『 1-4-2.Realtime Databaseに整形した値を書き込もう』】
👀『 EventEntry.jsの6行目』

作成したインスタンス.ref(‘パス’).push(書き込み対象のオブジェクト)
パス(書き込み先)はeventsの中
49
firebaseDb.ref(‘パス’).push(書き込み対象のオブジェクト)

書き込み対象のオブジェクトに
整形したstateの値を指定する
DBに値が登録されると
キーの値は自動生成される
{
candidateDates:
[ “8/7(月)20:00-“, “8/8(火)20:00-“ ],
description: “送別会やります!”,
eventName: “送別会"
}
50
firebaseDb.ref(‘パス’).push(書き込み対象のオブジェクト)

51
【手順書『 1-4.入力した値をRealtime Databaseに書き込もう』】
👀Firebaseの管理コンソールでDBに値が書き込まれていることを確認する

53
・『1-5.イベントIDを取得して画面遷移しよう』

ボタンを押すと
DBへの登録結果をもとに次画面へ遷移する処理
54
https://〇〇〇.web.app/event/- Lxxxxxxhttps://〇〇〇.web.app/event

55
・URLを一意にする
・DB登録時のIDを取得する方法
・React Routerとは?
(ハンズオン『1-5.イベントIDを取得して画面遷移しよう』)

イベント詳細画面へ遷移する際のURLはイベント毎に一意な値にしたい。
イベント毎に一意な値として
DBへ登録した際に自動で採番されたキー値を利用する
56
【手順書『1-5.イベントIDを取得して画面遷移しよう』】

DBに値を登録する際に利用したpush()関数の戻り値に
自動生成されたIDが含まれる
自動生成されたIDのプロパティ名称はkey
57
firebaseDb.ref(‘パス’).push(オブジェクト).key

React用ルーティングライブラリ
URLをアプリの画面状態と紐付けるために使う
ブラウザの戻るボタンが使えるようになったり
特定のURLを打ち込むことで特定のページに直接アクセスできるようになる
★ React Routerの設定(どのURLでどの画面を表示するか)は用意しています。
58

App.js
this.props.history.push(`/event/イベントID`);
<BrowserRouter>
(略)
<Route exact path='/' component={Home} />
<Route exact path='/event/'
component={EventEntry} />
<Route exact path='/event/:id'
component={Event} />
(略)
</BrowserRouter>
59

60
👀画面遷移して、URL欄のID部分が
自動で採番されたIDと一致していることを管理コンソール画面で確認

62
・参加者がイベントの出欠を登録できる
・参加者の出欠情報を一覧で見られる
★作るのはDBの値を取得し
画面に表示するまで
登録ボタンを押すとDBに値を書き込む
処理は前画面と同様の作業になるので
作成済です
【表示項目】
イベントタイトル
イベント説明
出欠情報一覧
イベント開催候補日程(初期選択値は△)

63
・DBから値を取得する処理作成
・データ表示する処理作成

65
・『2-1.ダミーデータを確認しよう』
・『2-2.Realtime Databaseからイベント情報を取得しよう』

イベント登録画面で登録されたイベントを
イベント詳細画面で表示する
66
登録したイベン
トの情報を表示

イベント登録画面で
DBに書き込まれたデータを
イベント詳細画面で表示する
67
Realtime Database
DBの値を表示書き込み

68
・ダミーデータについて
(手順書『2-1.ダミーデータを確認しよう』)
・DBの値を取得する
(手順書『2-2.Realtime Databaseからイベント情報を取得しよう』)
- DBの参照先を決める
- URLからイベントIDを取得する
-コールバック関数を追加する
-値の変更を検知する条件を指定する

69
手元のコードは初期表示時に
ダミーのデータを表示するようになっている
ダミーデータからDBの値を見るよう修正する
👀『ダミーデータ』
【手順書『2-1.ダミーデータを確認しよう』】
👀『ダミーデータ利用箇所』
ダミーデータ state
画面に表示

DBの状態をリアルタイムに
画面に反映するために
値の変更を監視する
70
【手順書『2-2.Realtime Databaseからイベント情報を取得しよう』】

DBの参照先を決める
↓
DBの値に変更があった際に呼ばれるコールバック関数を追加する
71

参照先のパスを指定する
72
firebaseDb.ref(‘パス’)

取り出したいのはイベントID(-Lxxxxxxxxxxxxxxx)以下のオブジェクト
パスは
‘events/-Lxxxxxxxxxxxxxxx’
{
candidateDates:
[ "12/29", "12/30" ],
description: “忘年会やります!”
eventName: "忘年会",
}
73

ReactRouterの機能によってURLの一部分を取得できる
74
this.props.match.params.id
firebaseDb.ref(`events/${this.props.match.params.id}’)
<BrowserRouter>
(略)
<Route exact path='/event/:id' component={Event} />
(略)
</BrowserRouter>

参照しているDBの値を検知するイベントを指定します
on()メソッド
ここで指定するのはvalue
参照先の値の変更をすべて検知して
コールバック関数が呼ばれます
75
firebaseDb.ref(`パス`).on(‘イベント’, コールバック関数)

DBの値に変化があると呼び出される
コールバック関数を登録します
登録するコールバック関数
76
firebaseDb.ref(`パス`).on(‘イベント名’, コールバック関数)
snapshot => { const json = snapshot.val(); }

77
【手順書『 2-2.Realtime Databaseからイベント情報を取得しよう』】
👀ブラウザの開発者ツールから、コンソールログを確認
DBの値がコンソールに出ていることを確認

79
・『2-3.取得したデータをstateに格納しよう』
・『2-4.イベント名と説明文を表示させよう』
・『2-5.候補日程を表示用に編集しよう』
・『2-6.出欠表を表示させよう』

ダミーデータ表示しているイベント詳細画面を
DBから取得したデータを表示するよう修正する
80
Realtime Database
DBの値を
取得
state
画面に表示
画面に合わせて
編集

81
・stateの構造を確認
(『2-3.取得したデータをstateに格納しよう』）
・DBから取得した値をstateに入れ、画面に表示する
(『2-4.イベント名と説明文を表示させよう』）
・entries関数とmap関数で候補日程を編集する
(『2-5.候補日程を表示用に編集しよう』)

82
・『2-3.取得したデータをstateに格納しよう（確認のみ）』 ←まずここ

・イベント名:eventDetail.eventName
・説明文:eventDetail.description
・出欠表(テーブルの列):eventDetail.columns
・出欠表(データ):eventDetail.dataSource
・候補日程:participant.candidates
this.state = {
participant: {
name: '',
candidates: []
},
eventDetail: {
eventId: this.props.match.params.id,
eventName: '',
description: '',
dataSource: [],
columns: []
}
}
83
【手順書『2-3.取得したデータをstateに格納しよう（確認のみ）』】

84
・『2-3.取得したデータをstateに格納しよう（確認のみ）』
・『2-4.イベント名と説明文を表示させよう』←次ここ

85
【手順書『2-4.イベント名と説明文を表示させよう』】
イベント名
説明文

this.state = {
participant: {
name: '',
candidates: []
},
eventDetail: {
eventName: '',
description: '',
dataSource: [],
columns: []
}
}
86
【手順書『2-3.取得したデータをstateに格納しよう（確認のみ）』】

eventDetail.eventName
eventDetail.description
87

DBから取得した値を
setState()を利用してeventDetailに格納
stateの値を
TitleタグとParagraphタグ部分に表示させる
88
👀『イベント名と説明文stateに格納する』

89
👀DBに書き込まれている値と
画面に表示されている値が一致していることを確認

90
・『2-5.候補日程を表示用に編集しよう』←次ここ

91
【手順書『2-5.候補日程を表示用に編集しよう』】

this.state = {
participant: {
name: '',
candidates: []
},
eventDetail: {
eventName: '',
description: '',
dataSource: [],
columns: []
}
}
92

候補日程:participant.candidates
participant.candidates:[
{
id: 0,
dateTime: "8/7(月) 20:00～",
answer: '△'
},
{
id: 1,
dateTime: "8/8(火) 20:00～",
answer: '△'
}
]
candidateDates:[ "8/7(月) 20:00～", "8/8(火) 20:00～"]
93

Object.entries()
配列の添字と値のペアを作る
[ "8/7(月) 20:00～", "8/8(火) 20:00～”]
[
[ 0, " 8/7(月) 20:00～ " ],
[ 1, " 8/8(火) 20:00～ “ ]
]
94

Object.entries(candidateDates)
.map(candidateDate => ({
id:candidateDate[0],
dateTime:candidateDate[1],
answer:'△'
}))
[
[ 0," 8/7(月) 20:00～ " ],
[ 1, " 8/8(火) 20:00～ “]
]
95

候補日程:participant.candidates
participant.candidates:[
{
id: 0,
dateTime: "8/7(月) 20:00～",
answer: '△'
},
{
id: 1,
dateTime: "8/8(火) 20:00～",
answer: '△'
}
]
candidateDates:[ "8/7(月) 20:00～", "8/8(火) 20:00～"]
96

97
【手順書『 2-5.候補日程を表示用に編集しよう』】
👀登録画面で入力した日程が一覧に表示されていて
◯△✕が行ごとに表示されていることを確認

98
・『2-6.出欠表を表示させよう』←次ここ

99
【手順書『2-6.出欠表を表示させよう』】
AntDesignのテーブルを使うた
めに値を編集する箇所です
本日のハンズオンの趣旨からは
それるので、ここはコピー＆ペ
ーストで済ませてください。
👀『 2-6.出欠表を表示させよう』

100
【手順書『 2-6.出欠表を表示させよう』】
👀候補日程欄で名前と出欠予定(〇△✕)を入力
出欠表に入力した値が表示されることを確認

・イベント登録画面から改めてイベントを登録
・Firebaseの管理コンソールで
登録されたイベントのデータを確認
・画面遷移した際のURLに自動生成されたIDが
入っていることを確認
・イベント詳細画面で参加者を追加、〇×△の予定を入力
・Firebaseの管理コンソールで
登録されたイベントのデータを確認
101

Firebase CLIのコマンドを打って
アプリをデプロイする。
↓
GitLabにコードをgit pushすると
GitLabが自動的にデプロイするよう設定する
103

104
・Firebase Hostingを利用してデプロイする
(手順書『3-1.アプリケーションのビルドとデプロイ』)
・Firebase認証トークンの取得
(手順書『4-1.Firebaseトークンを取得する』)
(手順書『4-2.FirebaseトークンをGitLab CI/CDに登録する』)
・GitLab CI/CDの設定ファイル
(手順書『4-3. .gitlab-ci.ymlを作成する』)

Firebase Hosting
コマンド１つで静的コンテンツを配信できるようになる。
デフォルトで以下２つのドメインにデプロイされる。
<プロジェクトID>.firebaseapp.com
<プロジェクトID>.web.app
👀『3-1.アプリケーションのビルドとデプロイ』
105
【手順書『3-1.アプリケーションのビルドとデプロイ』】

106
【手順書『3-1.アプリケーションのビルドとデプロイ』】

Firebase CLIのコマンドを利用するには
firebase loginコマンドでブラウザからGoogleアカウント
へのログインを済ませないといけない。
GitLabでコマンド自動実行させるために
認証済であることを示すトークンを発行する。
107
$firebase login:ci
【手順書『 4-1.Firebaseトークンを取得する』】
👀『 4-2.FirebaseトークンをGitLab CI/CDに登録する』

GitLab CI/CDでは1つの作業(ジョブ)を定義する
deploy-prodジョブ
・masterブランチにpushされた場合に自動実行する
・ビルド後、Firebase CLIでFirebase Hostingへデプロイ
108
【手順書『 4-3. .gitlab-ci.ymlを作成する』】
👀『4-3. .gitlab-ci.ymlを作成する』

image
- CIのジョブを実行する環境の土台を指定している。
今回利用するのはFirebase CLIが使えるLinux環境。
only
- ジョブを実行するブランチ名を指定する
script
- 実行するコマンド
109

110
firebase use <プロジェクトID> --token $FIREBASE_TOKEN
$FIREBASE_TOKEN
手順4-2にてGitLabのコンソール画面で設定した
環境変数(取得したトークン)を参照している
<プロジェクトID>の部分は
自分のFirebaseプロジェクトIDに置き換えて書く
管理コンソール→プロジェクトの設定で確認

111
【手順書『4-3. .gitlab-ci.ymlを作成する』】
【手順書『4-4.pushする』】

Firebase Hosting
112
開発ＰＣ
デプロイ push
Reactアプリ配信
DBへ値格納・取得

【React×firebase】サービス開発入門ハンズオン

Recommended

Recommended

More Related Content

Similar to 【React×firebase】サービス開発入門ハンズオン

Similar to 【React×firebase】サービス開発入門ハンズオン (20)

【React×firebase】サービス開発入門ハンズオン

Editor's Notes