Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScript+Firebaseで作るサーバーレスアプリケーション/Create ser...
Search
Kota Nonaka
October 24, 2018
Programming
1
1.2k
TypeScript+Firebaseで作るサーバーレスアプリケーション/Create serverless app with TypeScript + Firebase
ゆるはち .it Vol.3 「 JavaScriptについてゆるく話す」で使用した資料です。
Kota Nonaka
October 24, 2018
Tweet
Share
More Decks by Kota Nonaka
See All by Kota Nonaka
このあとからできる アクセシビリティ向上 / Accessibility improvements that can be made after this
uutarou10
0
380
React Nativeと半年間戦ってわかったコト / What I learned after fighting React Native for half a year
uutarou10
1
240
GatsbyでPWAやってみた / Tried PWA using Gatsby
uutarou10
1
420
CSS ド入門ハンズオン/CSS beginner's hands-on
uutarou10
2
82
初心者による初心者のためのKubernetesハンズオン
uutarou10
4
3.2k
Other Decks in Programming
See All in Programming
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
5.2k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
690
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.5k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
120
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Making Projects Easy
brettharned
116
6.3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Raft: Consensus for Rubyists
vanstee
140
7k
We Have a Design System, Now What?
morganepeng
53
7.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Transcript
TypeScript + Firebaseで作る サーバーレス アプリケーション 2018年10月24日(水) ゆるはち.it Vol.3 Kota Nonaka
(@uutarou10)
今日やること • Firebaseの機能紹介 • TypeScript + Firebase Webアプリケーションコード解説 !2
Firebaseについて !3
Firebase • モバイルアプリ用のバックエンドを 提供するプラットフォーム(mBaaS) • 現在はGoogleが提供している • iOS/Android/UnityなどのSDKが提供 実は、Web用のJavaScript SDKも!
!4
Firebaseが提供するサービス 現在はBeta版含め18個のサービスが提供されている (Web SDKで利用できるサービスは9個) !5 • Cloud Firestore • Cloud
Functions • Authentication • Hosting • Cloud Storage • Realtime Database • Predictions • Cloud Messaging • Dynamic Links
Firestore / Realtime Database • どちらもNoSQLデータベース • リアルタイム更新やオフライン状態での更新などにも対応 • Realtime
Databaseの進化版がFirestore • 今回のサンプルアプリではFirestoreを使用 !6
Authentication • ユーザー認証のあれこれをやってくれるサービス • 様々な認証方法 • メールアドレス/パスワード認証 • Google/GitHub/Twitter/Facebookなどを用いたSNS認証 •
SMS認証機能 • Firebaseの各サービスへの権限管理にも使われる !7
Hosting • 静的なWebサイトをホスティングできる • GoogleのCDNが使われる • Let’s Encryptを用いた無料SSL • もちろん独自ドメインも使用可能
• デプロイはCLIツールからワンコマンドで可能 !8
料金 • https://firebase.google.com/pricing/ • 趣味で使う程度の規模ならば無料で使用可能 !9
実際のコードを見てみる !10
サンプルアプリを作った • 2チャンネルクローン? 「8ちゃんねる」 • 八王子の8、ゆるはちの8です… • Reactを用いたSPA && 言語はTypeScript
• わかりづらかったらごめんなさい • Firebase Authentication と Firestore を使用 • https://eight-channel.firebaseapp.com • https://github.com/uutarou10/eight-channel !11
ざっくりこんな要件 • スレッド作成/新規投稿はGoogle ログインが必要 • 閲覧は全ユーザーが可能 • (表示されていないけど) 投稿ユーザーを記録する !12
ディレクトリ構成 • firebase.json / firestore.indexes.json / firestore.rules Firebase関係の設定ファイルたち FirebaseのCLIツールで生成される •
src アプリケーション本体のソースコード !13
初期化処理 !14
初期化 • コンソール画面から取得したAPI Keyなどを専用のメソッドに渡す。 !15
初期化 export const app = firebase.initializeApp({ apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_DB_URL, messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID, projectId: process.env.REACT_APP_PROJECT_ID, storageBucket: process.env.REACT_APP_STORAGE_BUCKET, }); !16 src/util/firebase.ts 環境変数に先ほどの値が入っている
Firestore !17
データ構造 !18 threadsというcollection
データ構造 !19 それぞれのスレッドがdocumentとして 格納されている
データ構造 !20 それぞれのthreadsのドキュメント下に postsという別のcollection
データ構造 !21 投稿の内容がkey-valueの形で 入っている
コードから扱う - Read export default { getList: async () =>
{ const querySnapshot = await db.collection('threads').orderBy('createdAt', 'desc').get(); const result: Thread[] = []; querySnapshot.forEach(thread => { result.push(createThreadByDocumentSnapshot(thread)); }); return result; }, !22 src/repository/thread.ts
コードから扱う - Read const createThreadByDocumentSnapshot = (snapShot:firebase.firestore.DocumentSnapshot): Thread => {
const data = snapShot.data() as firebase.firestore.DocumentData; return { id: snapShot.id, title: data.title, uid: data.uid, createdAt: data.createdAt.toDate() }; }; !23 src/repository/thread.ts dataメソッドを呼び出すと 値を取得できる
コードから扱う - Write create: async (title: string, uid: string) =>
{ const docRef = await db.collection('threads').add({ title, uid, createdAt: firebase.firestore.FieldValue.serverTimestamp() }); return createThreadByDocumentSnapshot(await docRef.get()); } !24 src/repository/thread.ts
ところで • 「クライアントから直接DBが触れるのはわかった。」 • 「何でも誰でも書き放題、読み放題じゃない?」 • 「想定していないデータを突っ込む事ができてしまうのでは?」 !25
セキュリティールール • JavaScript風のDSLで操作を実行できる条件を指定する • これを活用して… • 必須カラムを指定 • 権限を設定 •
発行できるクエリに制限をかける !26
セキュリティールール service cloud.firestore { match /databases/{database}/documents { match /threads/{thread}{ allow
read; allow create: if request.auth.uid == request.resource.data.uid && request.resource.data.keys().hasAll(['title', 'createdAt', 'uid']); match /posts/{post} { allow read; allow create: if request.auth.uid == request.resource.data.uid && request.resource.data.keys().hasAll(['name', 'body', 'uid', 'createdAt']); } } } } !27 firestore.rules
セキュリティールール service cloud.firestore { match /databases/{database}/documents { match /threads/{thread}{ allow
read; allow create: if request.auth.uid == request.resource.data.uid && request.resource.data.keys().hasAll(['title', 'createdAt', 'uid']); match /posts/{post} { allow read; allow create: if request.auth.uid == request.resource.data.uid && request.resource.data.keys().hasAll(['name', 'body', 'uid', 'createdAt']); } } } } !28 firestore.rules title, createdAt, uidを持っている事 requestしてきたユーザーのuidがリクエストの uidと一致する事
Authentication !29
Authentication • 事前にConsoleから使いたい認証方法をオンに設定しておく • Google認証やパスワード認証の場合はほとんどオンにするだけ • Google以外のSNS認証の場合はアクセストークンなどを 別途取得する必要あり !30
!31
認証を行う export const signInWithGoogle = () => { const provider
= new firebase.auth.GoogleAuthProvider(); auth.signInWithRedirect(provider); }; !32 src/util/firebase.ts
認証を行う • プロバイダーとしてGoogleを指定して、 signInWithRedirectを呼ぶだけ。 • これだけでRedirectした上で認証して元のページに戻ってくる !33
ハンドラー auth.onAuthStateChanged(user => { store.dispatch(authStateChanged(user)); }); !34 src/App.tsx
ハンドラー • 認証状態が変化(ログイン/ログアウト)するとonAuthStateChangedで 設定したハンドラーにユーザーが渡されて呼ばれる • 今回はRedux(状態管理のライブラリ)にユーザーを投げて保持しておく • Google認証の場合はGoogleのAPIを使うためのtokenを取得できる • Googleのサービスと連携したアプリケーションの開発も可
!35
まとめ • FirebaseはWebアプリでも超使える! • 素早く何かを作りたい/プロトタイプ作りという用途には最適 • Authのハンドラーなどやや癖がある部分もあるので、Firebaseに依存しないよ うにするには”うまいことする力”が必要だと思った • もしくはFirebaseべったりなコードなるのを覚悟する
• セキュリティールールには気をつけないといけない • フロントエンドの勉強をするのに最適だと個人的には感じました。 !36
JavaScript要素が少なくてゴメンナサイ おしまい !37