Outlecture
Home
About
Technology
Design
Video
Contact
Official
English
Outlecture
Home
About
Technology
Design
Video
Contact
Twitter Official
  • Home
  • Technology

Firebase のおすすめの教材8選! 【 2024年11月 最新版】

更新日:2024年11月4日

こちらは、独学で Firebase を学ぼうとしている初学者の方に最適な学習講座を紹介するページです。

目次

1. 本ページの説明

1. 本ページの説明

Firebase を独学で学ぶ上でおすすめの講座を動画プラットフォームから合計8選紹介します。

Firebaseとは

Firebaseは、Googleが提供するモバイルおよびWebアプリケーション開発プラットフォームであり、アプリケーションのバックエンドを構築するためのツールとサービスを提供しています。Firebaseには、リアルタイムデータベース、認証、ストレージ、クラウドファンクション、アナリティクス、通知などのモジュールが含まれており、簡単に使用できるインターフェイスと豊富なドキュメントがあるため、初心者から上級者まで使用することができます。

本サイト「Outlecture(アウトレクチャー)」は講座の評価、情報の鮮度、購入者や視聴者数、直近の数値上昇率などを全てバランスよく採点し、ユーザーにとって最適な講座のみ抜粋できるよう独自のアルゴリズムで評価を行っています。

また、各動画プラットフォームもそれぞれ特徴があり、「こういう状況の方にはこちらの方が良い」というユースケースも合わせて説明していきます。

Firebaseをこれから学ぼうとしているみなさまのご参考にしていただければ幸いです。

※ 英語での視聴に問題なければ、 英語版の講座 をおすすめします。

2. Udemy おすすめ講座5選

Outlectureで厳選したおすすめのUdemy講座5選はこちらです。

コース名 平均評価 総購入者数 先月の購入者数
(2024年10月)
コースレベル コース時間 作成日 更新日 料金

【AIチャットアプリ開発】Next.js & Firebase & ChatGPT APIを使ったWebアプリ開発講座

thumbnail
4.4 1,078 - 中級 2 時間 45 分 2023年9月5日 2024年1月28日 ¥27,800

React Native, Firebase, Expo でアプリ開発をゼロから始めよう!

thumbnail
4.43 11,310 100 初級 27 時間 28 分 2017年10月10日 2024年8月15日 ¥27,800

【2024年版】Flutter+Firebase+AWS アプリ開発実践講座

thumbnail
3.6 349 23 初級〜上級 20 時間 33 分 2024年1月2日 2024年3月7日 ¥27,800

Firebase + React Hooks(TypeScript)によるWebアプリ開発

thumbnail
4.4 3,734 10 初級 4 時間 21 分 2020年10月18日 2024年10月8日 ¥21,800

【実践編】Flutter+Firebase アプリ開発マスター講座

thumbnail
3.2 1,693 3 初級〜上級 38 時間 46 分 2022年7月20日 2024年10月29日 ¥27,800

Udemy(ユーデミー)は、アメリカ・シリコンバレー発祥のユニコーン企業で、世界最大級のオンライン学習プラットフォームを運営しています。

Udemyの特徴は、

  • 15.5万以上(※海外講座含む)の豊富な講座を提供している
  • 講師陣の多くが世界最先端の現場で活躍されている
  • 1講座あたり数千~数万円で、キャンペーン時は70~90%OFFとなる良心的な値段
  • 講座は1度購入すれば視聴期限なく受講でき、30日返金保証もついている
  • 講座は0.5~2倍の変速機能を備え、自分のペースで学習することができ、専用アプリを使えばスマホからでもオフライン環境で受講可能
  • 講師に直接掲示板から質問ができるため、疑問を解決し自学自習をサポートしてくれる

等があげられます。

Outlectureの管理メンバーは、ソフトウェアエンジニアやクリエイター、webデザイナーが現役で活躍しています。私たちは初めて触るプログラミング言語やプロダクトの多くはUdemyの受講からキャッチアップをはじめています。
私たちの体験談として、Udemyの講座の質は非常に高いと感じています。講師陣が世界最先端で活躍している方々ばかりで、最先端の知識や現場でのノウハウを丁寧にわかりやすく教えてくれます。試験で使う知識ではなく、実際の現場・案件で使う知識と技術を習得することができます。

Udemyの講座は、実際の現場で活用したい方や自己学習を始めたい方に特におすすめです。一度購入すれば、視聴期限がなく、30日間の返金保証もあるため、安心して学びを始めることができます。

こんな方におすすめ

  • 実案件でFirebaseを使用する
  • 現役の(世界)トップ戦線で活躍している方のノウハウを学びたい
  • サブスクリプションの加入に抵抗のある
  • ITの基礎的な知識がある

各講座の詳細は以下に記載します。


【AIチャットアプリ開発】Next.js & Firebase & ChatGPT APIを使ったWebアプリ開発講座

話題のOpenAIのAPIを使ったAIチャットアプリケーションをNext.js13とFirebase最新バージョンを使って開発する講座です。ChatGPTクローンを構築する中でモダンな技術を実践的に網羅できるお得な講座となっています。

thumbnail
平均評価
4.4
総購入者数
1,078
先月の購入者数
(2024年10月)
-
コースレベル
中級
コース時間
2 時間 45 分
作成日
2023年9月5日
更新日
2024年1月28日
料金
¥27,800

本講座では、フルスタック技術を駆使して、Next.js 13、Firebase、TypeScript、Tailwind CSSを利用し、ChatGPTを組み込んだAIチャットアプリケーションの開発を通じて、現代のWebアプリケーション開発の技術を総合的に学びます。


■ 本コースの対象者

・Next.jsやReactの基礎を学び、更に実践的なスキルを身に付けたい方

・ChatGPTを利用して、AIを活用した対話型サービスを開発してみたい方

・FirebaseとTypeScriptを使用し、セキュアで効率的なバックエンドを構築したい方

・Tailwind CSSでレスポンシブかつ美しいUIをデザインしたい方

・最新のフルスタック技術を学び、モダンなアプリケーション開発の流れを掴みたい方

・Webアプリケーション開発に興味があり、現場で求められるスキルを習得したい方


■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本知識や、ReactやNext.jsの基礎知識が必要です(コンポーネント、JSX記法等)

・JavaScriptにある程度慣れている方が、スムーズに学習できます。

・基本的なプログラミング知識がある方が望ましいです。


本コースを完了することで、受講者は現代のWebアプリケーション開発において求められる多くの技術と知識を身に着けることができ、実際の開発現場で即戦力として活躍できるスキルを獲得できます。

  1. はじめに
  2. 本講座で学べること
  3. 本講座の完成品デモの紹介
  4. 完成品のソースコード
  5. Next.js13/Firebase/OpenAIのAPIでAIチャットアプリケーションを作ってみよう(ユーザー認証とログイン編)
  6. Next.js13を使ってプロジェクトの雛形を作ってみよう
  7. Firebaseのセットアップと初期化をしてみよう
  8. 新規登録ページを作ってみよう
  9. Firebase Authenticationを利用してユーザー登録の準備をしてみよう
  10. react-hook-formを導入してバリデーションチェックを簡単にしてみよう
  11. 正規表現を導入してメールアドレスとパスワードのバリデーションチェックをしてみよう
  12. 実際にFirebaseでユーザー新規登録の実装をしてみよう
  13. ログインページを作ってみよう
  14. Next.js13/Firebase/OpenAIのAPIでAIチャットアプリケーションを作ってみよう(チャットページ実装編)
  15. AIアシスタントチャットページを作ってみよう
  16. サイドバーのレイアウトをTailwindCSSで整えよう
  17. チャットのレイアウトをTailwindCSSで整えよう
  18. react-iconsで送信・ログアウトアイコンを挿入してみよう
  19. Cloud Firestoreに部屋とメッセージのデータを保存してみよう
  20. 各部屋データをクライアント側から呼び出して表示してみよう
  21. onSnapshotで取得したデータをサイドバーに表示してみよう
  22. 複合クエリを利用する際にFirestoreでindexを登録してみよう
  23. Context APIを使ってユーザーやルーム選択の状態をグローバルに管理してみよう
  24. AppContextに型を当てて、ユーザーのログイン状態を監視してグローバルに管理してみよう
  25. グローバルコンテクストを呼び出してユーザーIDの切り替えを確認しよう
  26. input欄に入力したメッセージをFirestoreに保存してみよう
  27. FireStoreに保存したメッセージをUIに出力してみよう
  28. ルームを選択したらそのルーム情報を取得できるロジックを作ろう
  29. チャットのUIを修正しよう
  30. Open AIのAPIの準備をしてみよう
  31. OpenAIから返信を受け取る実装をはじめてみよう
  32. AIからのレスポンシブ待機時間のためのローディングを実装してみよう
  33. メッセージルームの追加とログアウトを実装しよう
  34. ユーザー情報がない場合はログインページにリダイレクトさせよう
  35. メッセージを送信した時に自動的に下スクロールされるように修正しよう
  36. ルームを選択したらチャット欄のルーム名も変更させてみよう
  37. Next.js13/Firebase/OpenAIのAPIでAIチャットアプリケーションを作ってみよう(デプロイ・ホスティング編)
  38. 作ったチャットアプリをビルドとoutディレクトリにexportしてみよう
  39. Firebase Hostingでアプリをデプロイしてみよう
  40. ボーナスレクチャー
  41. 最後まで受講いただいた方へ
  42. ボーナスレクチャー
React Native, Firebase, Expo でアプリ開発をゼロから始めよう!

React NativeとExpoを使ったモバイルアプリ開発のオールインワン講座。UIデザイン・開発・リリースまで、アプリ開発の全行程を一気に身につけましょう!<React Hooks 対応 / Git も学べる>

thumbnail
平均評価
4.43
総購入者数
11,310
先月の購入者数
(2024年10月)
100
コースレベル
初級
コース時間
27 時間 28 分
作成日
2017年10月10日
更新日
2024年8月15日
料金
¥27,800

React Native は、Web技術の組み合わで、iOS / Android ネイティブアプリを同時に開発することができます。初学者にも分かりやすい開発手法にも関わらず、本格的なアプリをつくることができます。

この講座は、アプリ開発を以下の工程に分割して進行します。

  • 1. Plan(計画)

  • 2. Design(デザイン)

  • 3. Markup(構造化)

  • 4. Styling(装飾)

  • 5. Programming(機能)

  • 6. Release(ストアに並べる)


最初は、HTML / CSS / Javascript を中心に学習し、最終的にはすべてを Javascript で書いていきます。
初めてアプリ開発に挑戦する人向けに進めて行きますので、まったく知識がなくても大丈夫です。

Figma を使ったUIデザインの基本も盛り込みました。
まさにアプリ開発のオールインワン講座となっています。

この講座では Expo を使用します。
Expo を採用することで、開発環境の構築とリリース作業が大幅に簡略化されました。
開発環境の構築とリリース作業は、初学者がつまづきやすいステップの代表例ですので、特に丁寧に解説しています。

また、開発現場には欠かせない Git や Github も取り入れ、実際の開発プロセスに近付けていますので、
これから開発の仕事に関わりたいと思っている方にも最適です。
  

主な機能

シンプルながら、基本的な機能を網羅したメモアプリを作成します。
メモはクラウド上に保存され、端末を変更してもアプリ利用を継続することができます。

  • 会員登録(メールアドレスとパスワードで登録)

  • ログイン・ログアウト

  • リアルタイムデータベース(作成、編集、削除、一覧、詳細)

  • ナビゲーション(画面から画面への移動)

  

主に使用する技術

  • React, React Native

  • React Hooks, Function Component

  • React Navigation

  • Expo

  • Javascript

  • ESLint

  • Firebase Authentication

  • Cloud Firestore

  • Figma (UI Design)

  

必要になる可能性がある費用

  • USD $99/year(App Store にアプリを公開するために Apple に毎年支払う)

  • USD $25(Play Store にアプリを公開するために Google に1度だけ支払う)

  • リリースは最終セクションにまとめていますので、公開しない方は、特に費用はかかりません。

ーーーーーーー


この講座は、2021年と2023年に再収録のリニューアルを実施しています。
そのため、コース後半にはリニューアル前の動画が残っています。リニューアル公開時に受講されていた方が困らないための措置ですが、コース紹介ページには収録時間が合計して表示されていること予めご了承下さい。


  1. イントロダクション
  2. アプリ開発の6の工程
  3. このコースを修了したら作れるアプリ
  4. プランニング
  5. コンセプトとワイヤーフレーム
  6. UIデザイン
  7. Figmaをインストール
  8. Figmaの基本
  9. ヘッダーのUIデザイン
  10. メモ一覧のUIデザイン
  11. コンポーネントでデザイン作業を効率化する
  12. プロトタイプを作成する
  13. ボタンのUIデザイン
  14. UIデザインのまとめ
  15. マークアップの練習
  16. VSCode のインストール
  17. まずはHTMLで構造化を学ぶ
  18. マークアップを始める
  19. メモ一覧のマークアップ練習
  20. スタイリングの練習
  21. スタイルシートの基本
  22. HTML要素をスタイリングする
  23. 複雑なスタイリング
  24. ボタンのスタイリング
  25. プログラミングの練習
  26. プログラミングの基本
  27. 関数の基本
  28. 演算子の基本
  29. 条件分岐
  30. 繰り返し処理
  31. 練習
  32. Git と Github
  33. GitとGithubのメリット
  34. GitのインストールとGithubのアカウント作成
  35. Windows / TerminalとGitのインストール
  36. Windowsのコマンド
  37. ターミナルでの操作
  38. Gitの初期化
  39. Gitの設定を変更する
  40. Gitで変更履歴を追加してみる
  41. SSH Key に関する注意事項
  42. SSHを使ったGithubとの連携
  43. SSHパスフレーズを省略せずにGithubと連携する
  44. Windows / Gitの初初期化からGithubとの連携まで
  45. テキスト版教材
  46. ★アプリ開発の環境構築
  47. Expoとは
  48. NVS と Node.js
  49. Xcode と iOS Simulator
  50. Android Studio と Emulator
  51. emulatorコマンド(Windowsの場合)
  52. Watchman のインストール(Mac)
  53. ★ React Native アプリ開発の基本
  54. Expo で作る初めてのアプリ
  55. Expo のファイル構成
  56. Git と Github で変更履歴を追跡
  57. ESLintの設定ファイルについて
  58. ESLint の導入
  59. Typescript とは
  60. React Native と Expo の関係性
  61. ★ 初めてのコンポーネント
  62. コンポーネントを作成して表示する
  63. プロパティを受け渡す(children)
  64. プロパティを受け渡す(boolean)
  65. プロパティを受け渡す(TextStyle)
  66. ★ マークアップとスタイリング
  67. Expo Router で画面を表示する
  68. メモの一覧画面をマークアップ
  69. ヘッダーのスタイリング
  70. メモリストのスタイリング
  71. ボタンのスタイリング
  72. UIをコンポーネントに切り出す
  73. リダイレクトの設定
  74. メモの詳細画面をマークアップ
  75. メモの詳細画面をスタイリング
  76. アイコンを表示する
  77. アイコンフォントを組み込む
  78. アイコンの表示を変更可能にする
  79. メモの編集画面の構造化とスタイリング
  80. KeyboardAvoidingView でUIバグを修正
  81. メモの作成画面
  82. ログイン画面のマークアップ
  83. ログイン画面のスタイリング
  84. 会員登録画面とボタンコンポーネント
  85. ★ インタラクションとナビゲーション
  86. ボタンをインタラクティブにする
  87. そのほかのインタラクション
  88. ログインと会員登録を切り替える
  89. メモの一覧画面へ遷移する
  90. すべての画面をつなぐ
  91. Stackナビゲーションの導入
  92. ヘッダーのカスタマイズ
  93. 履歴を残さない画面遷移とログアウトボタン
  94. useEffectで副作用を入れ込む
  95. React Hooks とは
  96. useState で値を保持する
  97. Eメールとパスワード入力を改善
  98. ★ 機能の実装
  99. Firebase を始める
  100. 認証サービスとデータベースとの初期化
  101. envファイルで環境変数を管理する
  102. 会員登録を実装する
  103. ログインを実装する
  104. ログイン状態を監視する
  105. ログアウトボタンの追加
  106. Firestore を始める
  107. Firestore にデータを追加する
  108. ユーザーごとにデータを保存する
  109. バグ修正(KeyboardAvoidingView)
  110. データの取得と監視
  111. データの型を定義する
  112. 取得したデータを表示する
  113. FlatList を使ったリストの最適化
  114. 画面遷移時にパラメータを渡す
  115. メモの詳細画面を実装する
  116. メモの編集画面を実装する
  117. バグ修正
  118. メモの削除機能を実装する
  119. Firestore のルールでデータを保護する
  120. ラップアップ
  121. ★ リリース
  122. 画像の準備とビルド設定
  123. EASを利用したビルド
  124. ストアの設定と審査提出(iOS)
  125. ストアの設定と審査提出(Android)
  126. ーーー 2023年10月以前の内容 ーーー
  127. こちらは古いコンテンツです
  128. <旧>アプリ開発の環境構築
  129. Expoとは
  130. M1 Mac をお使いの方へ
  131. Node.js のインストール
  132. Expo のインストール
  133. Xcode のインストール
  134. M1 Mac での Android Emulator
  135. Android Studio のインストール
  136. emulatorコマンド(Windowsの場合)
  137. <旧>React Native アプリ開発の基本
  138. Expo プロジェクトの新規作成
  139. Expo でアプリを共有する
  140. Expo の基本的なファイル構成
  141. Git でファイルの変更履歴を追跡
  142. ESLint airbnb 設定ファイルのバグ
  143. ESLint のインストール
  144. Expo における Git のデフォルトブランチ
  145. コンポーネントの基本
  146. コンポーネントを作成する
  147. React Props の仕組み
  148. props で値を受け渡す
  149. コンポーネントのスタイルを上書きする
  150. <旧>アプリ開発・構造化とスタイリング
  151. メモの一覧をマークアップ
  152. ヘッダー(AppBar)のスタイリング
  153. メモのリストアイテムをスタイリング
  154. ボタンのスタイリング
  155. コードをコンポーネントとして抽出する
  156. コードをスクリーンとして抽出する
  157. メモの詳細画面をマークアップ
  158. メモの詳細画面をスタイリング
  159. アイコンを表示する
  160. いろいろなアイコンを表示する
  161. カスタムアイコンを作成する
  162. メモの編集画面の構造化とスタイリング
  163. KeyboardAvoidingView でテキスト領域を調整
  164. メモの作成画面を作成する
  165. KeyboardAvoidingView のバグ
  166. ログイン画面のマークアップ
  167. ログイン画面のスタイリング
  168. サインアップ画面を作成する
  169. ユーザーのアクションを受け取る
  170. <旧>アプリ開発・ナビゲーションの実装
  171. React Navigation のバージョン
  172. React Navigation をインストール
  173. ナビゲーションを導入して画面をつなぐ
  174. iOS Simulator リロードのショートカットについて
  175. すべてのスクリーンを登録する
  176. ボタンをタップして画面を移動する
  177. 履歴をリセットしながら画面を移動する
  178. iOS と Android のアニメーションを統一する
  179. React Hooks
  180. useState を使って状態を保存する
  181. TextInput のオプション
  182. <旧>アプリ開発・機能の実装
  183. Firebase を始める
  184. 会員登録を実装する
  185. ログインを実装する
  186. ログイン状態を監視する
  187. ログアウトを実装する
  188. データベースにデータを保存する
  189. ユーザーごとにメモを保存する
  190. データベースからデータを取得する
  191. データをメモの一覧として表示する
  192. 効率的なリストのレンダリング
  193. メモの詳細画面でデータを取得する
  194. メモの詳細画面でデータを監視する
  195. メモの編集画面を実装する
  196. メモが0件の場合のUX
  197. ローディング状態の表示
  198. ローディングコンポーネントでUX改善
  199. メモの削除を実装する
  200. エラーメッセージを翻訳する
【2024年版】Flutter+Firebase+AWS アプリ開発実践講座

Flutter3対応。iOSとAndroidを同時に開発できるFlutterでモバイルアプリ開発に挑戦しよう。Firebase、AWSと連携し、重要なアプリの基本機能を作成。

thumbnail
平均評価
3.6
総購入者数
349
先月の購入者数
(2024年10月)
23
コースレベル
初級〜上級
コース時間
20 時間 33 分
作成日
2024年1月2日
更新日
2024年3月7日
料金
¥27,800

この講座について


2024年1月に公開した比較的新しい講義のため、受講者数が少なくなっています。気軽にご購入していただけると幸いです。


内容

どのFlutterアプリでも使用されるような認証、ストレージ、データ通信などの重要な機能を丁寧に作成していきます。


すべての講義のソースコード対応。


作成する機能

・新規登録、ログイン、ログアウトなどの認証機能

・ストレージ機能

・アルコールやヌード画像などの不適切な画像の判定

・ページ遷移

・投稿機能


使用する技術

  • Dart

  • Flutter

  • Node.js

  • Firebase Auth

  • Firebase Remote Cofig

  • Firebase Firestore

  • Firebase Cloud Functions

  • AWS S3

  • AWS Rekognition

  1. 初めに
  2. お願い
  3. 作成するアプリを見てみよう
  4. ボーナス
  5. おすすめのブラウザと拡張機能
  6. Video Speed Controllerを使ってみよう
  7. VSCodeをインストールしよう
  8. 【コマンド】MacでRubyの環境構築をしよう
  9. MacでRubyの環境構築をしよう
  10. MacでXcodeのインストールをしよう
  11. 【URL】 MacでAndroid Studioの設定をしよう
  12. MacでAndroid Studioのインストールをしよう
  13. 【コマンド】MacでFlutterの環境構築をしよう
  14. MacでFlutterの環境構築をしよう
  15. 端末とアプリを作成し、起動しよう
  16. VSCodeで日本語の設定をしよう
  17. 内容理解
  18. 【コマンド】アプリを作成しよう
  19. 【前編】生成されたコードを理解しよう
  20. 【後編】生成されたコードを理解しよう
  21. 【ソースコード】生成されたコードを理解しよう
  22. GitとGitHub
  23. GitHubに登録してみよう
  24. リポジトリに登録してみよう
  25. 【コマンド】リポジトリに登録してみよう
  26. add,commit,pushを行ってみよう
  27. 【コマンド】add,commit,pushを行ってみよう
  28. ブランチを使ってみよう
  29. 【コマンド】ブランチを使ってみよう
  30. エイリアスを設定しよう
  31. 【コマンド】エイリアスを設定しよう
  32. mergeしていないブランチを削除しよう
  33. 【コマンド】mergeしていないブランチを削除しよう
  34. Firebase
  35. 2つの環境のFirebaseのプロジェクトを作成しよう
  36. 本番環境のドメインを使用してアプリを作成しよう
  37. 【コマンド】本番環境のドメインを使用してアプリを作成しよう
  38. リポジトリに登録しよう
  39. 【コマンド】リポジトリに登録しよう
  40. flutter_flavorizrを実行してみよう
  41. 【コマンド】flutter_flavorizrを実行してみよう
  42. 2つの環境でアプリを起動しよう
  43. 【ソースコード】2つの環境でアプリを起動しよう
  44. macにNode.jsをインストールしよう
  45. firebase_optionsファイルを作成しよう
  46. 【コマンド】firebase_optionsファイルを作成しよう
  47. アプリとFirebaseを接続しよう
  48. 【ソースコード】アプリとFirebaseを接続しよう
  49. Cloud FireStoreに最初のデータを保存しよう
  50. 【ソースコード】Cloud Firestoreに最初のデータを保存しよう
  51. 【前編】モデル化したデータを使ってみよう
  52. 【ソースコード】【前編】モデル化したデータを使ってみよう
  53. 【後編】モデル化したデータを使ってみよう
  54. 【ソースコード】【後編】モデル化したデータを使ってみよう
  55. フォーマット
  56. フォーマットを整えよう
  57. 【コマンド】フォーマットを整えよう
  58. コマンドをREADME.mdに記述しよう
  59. 【ソースコード】コマンドをREADME.mdに記述しよう
  60. Freezed
  61. Freezedでコードを生成してみよう
  62. 【ソースコード】Freezedでコードを生成してみよう
  63. インスタンスメソッドを使ってみよう
  64. 【ソースコード】インスタンスメソッドを使ってみよう
  65. toJsonを使ってみよう
  66. 【ソースコード】toJsonを使ってみよう
  67. デフォルトの値を設定しよう
  68. 【ソースコード】デフォルトの値を設定しよう
  69. typedef
  70. Firestoreで使用する型名を短くしよう
  71. 【ソースコード】Firestoreで使用する型名を短くしよう
  72. アーキテクチャー
  73. FirestoreのClientを作成しよう
  74. 【ソースコード】FIrestoreのClientを作成しよう
  75. Resultクラスを作成しよう
  76. 【ソースコード】Resultクラスを作成しよう
  77. 【前編】FirestoreのRepositoryを作成しよう
  78. 【ソースコード】FirestoreのRepositoryを作成しよう
  79. 【後編】FirestoreのRepositoryを作成しよう
  80. 【ソースコード】【後編】FirestoreのRepositoryを作成しよう
  81. MyHomePageのControllerを作成しよう
  82. 【ソースコード】MyHomePageのControllerを作成しよう
  83. Constants
  84. Constantフォルダを作成しよう
  85. 【ソースコード】Constantフォルダを作成しよう
  86. UICore
  87. ui_coreの フォルダを作成しよう
  88. 【ソースコード】ui_coreの フォルダを作成しよう
  89. Obx
  90. Obxで変化を観測しよう
  91. 【ソースコード】Obxで変化を観測しよう
  92. Core
  93. Coreフォルダを作成しよう
  94. 【ソースコード】Coreフォルダを作成しよう
  95. 認証を可能にしよう
  96. メールアドレス認証を有効にしよう
  97. 【ソースコード】メールアドレス認証を有効にしよう
  98. AuthControllerを作成しよう
  99. 【ソースコード】AuthControllerを作成しよう
  100. AuthScreenを作成しよう
  101. 【ソースコード】AuthScreenを作成しよう
  102. 新規登録スクリーンを作成しよう
  103. 【ソースコード】新規登録スクリーンを作成しよう
  104. 軽いバリデーションを行おう
  105. 【ソースコード】軽いバリデーションを行おう
  106. GetUtilsを使ったバリデーションを行おう
  107. 【ソースコード】GetUtilsを使ったバリデーションを行おう
  108. フォームフィールドの情報を変数に保存しよう
  109. 【ソースコード】フォームフィールドの情報を変数に保存しよう
  110. AuthClientを作成しよう
  111. 【ソースコード】AuthClientを作成しよう
  112. AuthRepositoryを作成しよう
  113. 【ソースコード】AuthRepositoryを作成しよう
  114. FirebaseAuthにユーザーを作成しよう
  115. 【ソースコード】FirebaseAuthにユーザーを作成しよう
  116. ログアウトしよう
  117. 【ソースコード】ログアウトしよう
  118. ログイン画面を作成しよう
  119. 【ソースコード】ログイン画面を作成しよう
  120. ログインしよう
  121. 【ソースコード】ログインしよう
  122. メールアドレスを認証するページを作成しよう
  123. 【ソースコード】メールアドレスを認証するページを作成しよう
  124. メールアドレスを認証するControllerを作成しよう
  125. 【ソースコード】メールアドレスを認証するControllerを作成しよう
  126. デザインを整えよう
  127. 【ソースコード】デザインを整えよう
  128. AuthConstantに定数を格納しよう
  129. 【ソースコード】AuthConstantに定数を格納しよう
  130. VerifyEmailConstantに定数を格納しよう
  131. 【ソースコード】VerifyEmailConstantに定数を格納しよう
  132. フォームを中央に配置しよう
  133. 【ソースコード】フォームを中央に配置しよう
  134. Remote Configを使ってみよう
  135. メンテナンスページを表示しよう
  136. 【ソースコード】メンテナンスページを表示しよう
  137. Firestore
  138. メイン画面を作成しよう
  139. 【ソースコード】メイン画面を作成しよう
  140. 公開ユーザーを作成しよう
  141. 【ソースコード】公開ユーザーを作成しよう
  142. ユーザー名を編集する画面を作成しよう
  143. 【ソースコード】ユーザー名を編集する画面を作成しよう
  144. ユーザー情報を更新しよう
  145. 【ソースコード】ユーザー情報を更新しよう
  146. EditContantに定数を格納しよう
  147. 【ソースコード】EditContantに定数を格納しよう
  148. 画像をアップロードできるようにしよう
  149. AWSでAccessKeyとSecretAccessKeyを取得しよう
  150. S3バケットを作成しよう
  151. 環境変数の設定をしよう
  152. 【ソースコード】環境変数の設定をしよう
  153. 画像のモデルを作成しよう
  154. 【ソースコード】画像のモデルを作成しよう
  155. Enumを使ってKeyを管理しよう
  156. 【ソースコード】Enumを使ってKeyを管理しよう
  157. AWSS3のCore、Client、Repositoryを作成しよう
  158. 【ソースコード】AWSS3のCore、Client、Repositoryを作成しよう
  159. 画像を取得して正方形にクロップしよう
  160. 【ソースコード】画像を取得して正方形にクロップしよう
  161. 画像をアップロードしてユーザー情報を更新しよう
  162. 【ソースコード】画像をアップロードしてユーザー情報を更新しよう
  163. 画像を表示しよう
  164. 【ソースコード】画像を表示しよう
  165. 定数をクラスに格納しよう
  166. 【ソースコード】定数をクラスに格納しよう
  167. テーマ
  168. テーマ機能を実装しよう
  169. 【ソースコード】テーマ機能を実装しよう
  170. 色を整えよう
  171. 【ソースコード】色を整えよう
  172. 不適切な画像を判定しよう
  173. IAMでユーザを作成しよう
  174. GCPでシークレットマネージャーを有効化してCloud Functionsを初期化しよう
  175. 【コマンド】GCPでシークレットマネージャーを有効化してCloud Functionsを初期化しよう
  176. 不適切な画像を判定する関数を作成しよう
  177. 【ソースコード】不適切な画像を判定する関数を作成しよう
  178. UserUpdateLogが作成された時のCloud Functionを作成しよう
  179. 【ソースコード】UserUpdateLogが作成された時のCloud Functionを作成しよう
  180. 適切な画像かどうかを表示しよう
  181. 【ソースコード】適切な画像かどうかを表示しよう
  182. アカウント情報設定
  183. ページ遷移機能を作成しよう
  184. 【ソースコード】ページ遷移機能を作成しよう
  185. シンプルなフォームの画面とコントローラーを抽象化しよう
  186. 【ソースコード】シンプルなフォームの画面とコントローラーを抽象化しよう
  187. ログアウト後のページを作成しよう
  188. 【ソースコード】ログアウト後のページを作成しよう
  189. メールアドレスを更新するページを作成しよう
  190. 【ソースコード】メールアドレスを更新するページを作成しよう
  191. 再認証機能を作成しよう
  192. 【ソースコード】再認証する画面を作成しよう
  193. 再認証を行い、メールアドレスを更新しよう
  194. 【ソースコード】再認証を行い、メールアドレスを更新しよう
  195. バリデータを共通化しよう
  196. 【ソースコード】バリデータを共通化しよう
  197. Enumを使って再認証の目的を管理しよう
  198. 【ソースコード】Enumを使って再認証の目的を管理しよう
  199. パスワードを更新する機能を作成しよう
  200. 【ソースコード】パスワードを更新する機能を作成しよう
Firebase + React Hooks(TypeScript)によるWebアプリ開発

Twitter の クローンアプリを作成しながらReactとFirebase連携、Redux ToolKit、TypeScriptについて学びます。

thumbnail
平均評価
4.4
総購入者数
3,734
先月の購入者数
(2024年10月)
10
コースレベル
初級
コース時間
4 時間 21 分
作成日
2020年10月18日
更新日
2024年10月8日
料金
¥21,800

本コースは、TypeScript、React Hooks、Redux ToolKit、Firebaseを使ってWebアプリ(Twitter クローン)をハンズオンで作成していきます。


[本コースで扱っていくトピック]


-Email + Password 認証

-Password リセット機能 (リセット用Email配信)

-ユーザープロフィール登録

-Google認証

-ログイン情報のRedux ToolKitによるグローバル状態管理

-Cloud firestoreによるデータベース(投稿データとコメントデータ)

-Cloud storageによる画像保存 (Tweet画像とAvatar画像)

-Hostingによるディプロイ


[注意点]

-本コースは、mac OSで進んでいきます。

-Firebaseのアカウントを各自作っておいてください。Googleアカウントが必要になります。

  1. はじめに
  2. はじめに
  3. 必要なツールのインストール
  4. 本コースの Source code
  5. サンプル画像データ
  6. [復習] React Hooks/TypeScript/Redux ToolKit
  7. useState + useEffect (TypeScript)
  8. useEffect cleanup関数 (TypeScript)
  9. [注意]最新VersionのReduxToolKitのカウンターデモ
  10. Redux ToolKit
  11. [認証機能] Twitter App
  12. create-react-app オプションと firebase version指定
  13. React プロジェクト作成
  14. [補足] 次のレクチャー10 動画 注意点
  15. [注意] Firebase storage security rules
  16. FirebaseプロジェクトとReactの連携設定
  17. Appコンポーネント
  18. [注意] Sign in 画面のテンプレート
  19. Error Failed to parse source map
  20. Googleアカウント認証
  21. [訂正] try catch block
  22. Email + Password 認証
  23. ユーザープロフィール機能
  24. ユーザープロフィールフォーム
  25. パスワードリセット機能
  26. [Tweet機能] Twitter App
  27. ログインユーザーAvatar (Redux)
  28. Tweet投稿機能
  29. Tweet投稿フォーム
  30. Feed機能
  31. 投稿一覧機能
  32. 新規コメント機能
  33. コメント一覧機能
  34. Deploy
  35. 更に学びたい人向け
  36. Firebase ver 9.0〜対応
  37. ボーナスレクチャー
【実践編】Flutter+Firebase アプリ開発マスター講座

Flutter3対応。iOSとAndroidを同時に開発できるFlutterでFirebaseと連携してモバイルアプリ開発に挑戦しよう。SNSアプリに必要な機能を一通り開発。

thumbnail
平均評価
3.2
総購入者数
1,693
先月の購入者数
(2024年10月)
3
コースレベル
初級〜上級
コース時間
38 時間 46 分
作成日
2022年7月20日
更新日
2024年10月29日
料金
¥27,800

この講座について


多くの人にとって馴染み深いSNSの機能を中心に作成していくのでかなり楽しく学べると思われます。


しかも、動画講義の長さは、なんと38時間。


すべての講義のソースコード対応。


作成する機能

・新規登録、ログイン、ログアウトなどの認証機能

・ページ遷移

・投稿機能

・コメント機能

・リプライ機能

・いいね機能

・検索機能(Firebaseでの検索機能と、Algoliaの検索機能の2種類)

・記事取得機能

・メール送信機能

・AIで不適切なコメントを判別する機能

・ストレージ機能(写真)


使用する技術

  • Dart

  • Flutter

  • Node.js

  • Firestore

  • Firestore Security Rules

  • Cloud Functions

  • Firebase Storage

  • Firebase Storage Security Rules

  • Algolia

  • AWS Comprehend

  • SendGrid

  • HTTP

3. YouTubeおすすめ講座3選

Outlectureで厳選したおすすめのYouTube講座3選はこちらです。

動画名 総視聴数 先月の視聴数
(2024年10月)
いいね数 公開日

【2022最新版】Firebase入門!Reactと連携してデータベース接続をしてみよう

thumbnail

チャンネル名:プログラミングチュートリアル

24,810 482 472 2022年1月6日

FirebaseとReactでログイン認証機能を実装してみよう ~Firebase入門~

thumbnail

チャンネル名:プログラミングチュートリアル

17,086 410 365 2022年2月21日

【どっちがいい?】Firebase vs Supabase

thumbnail

チャンネル名:マフィア先生のエンジニア塾

5,620 326 120 2023年7月8日

YouTubeは、広告がつくものの無料で視聴でき、日常生活でもお馴染みとなっています。
最近では、良質な教材も増えており、学びたいけどお金をかけるほどでもない方や、概要をさらっと理解したい方には、YouTubeで学ぶことをおすすめします。

こんな方におすすめ

  • お金をかけずに学びたい
  • Firebaseの概要だけさらっと理解したい

各講座の詳細は以下に記載します。

【2022最新版】Firebase入門!Reactと連携してデータベース接続をしてみよう

プログラミングチュートリアル

総視聴数
24,810
先月の視聴数
(2024年10月)
482
いいね数
472
公開日
2022年1月6日
#入門 #firebase #React #データベース #firestore

【Firebaseを用いてツイッタークローンを構築したい方はこちらから】
http://shincode.info/2021/12/31/udemy-discount-coupon/

【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
↓↓↓↓↓
http://shincode.info/2021/12/31/udemy-discount-coupon/

\ShinCode_Camp開校しました/
プログラミング講座&副業・起業&就職・転職が学べるプラットフォーム🚀
🎁月額2500円で全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁コミュニティ機能付き
🎁いつでも解約可能etc...
↓↓↓↓↓
https://code-s-school-5bc2.thinkific.com/bundles/shincode-camp

♥ソースコード(App.css):https://github.com/Shin-sibainu/firebase-react-tutorial/blob/main/src/App.css
*--------------------------------------------------------------------*
今回は2022年版最新のFirebase入門ということで、Reactと連携してデータベース接続をしてみました。Firebaseを使えばデータベースやアカウント認証、そしてデプロイまでを簡単に行うことができます。
FirebaseのVer8.0以降までのコーディング方法とVer9.0では若干違うので、それ以前の動画やレクチャーを見る際は気を付けた方がいいかもしれませんね。

この動画が良いと思ったらチャンネル登録よろしくお願いします。
バグや分からないことがあればコメント欄、またはDMでご質問ください。
*--------------------------------------------------------------------*
♥運営者のTwitter:https://twitter.com/Shin_Engineer
*--------------------------------------------------------------------*
使用している機材:
キーボード(Keychron K6 赤軸):https://amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス):https://amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク):https://amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド):
https://amzn.to/3se5onZ
※アフィリエイトリンクになります。
*--------------------------------------------------------------------*
FirebaseとReactでログイン認証機能を実装してみよう ~Firebase入門~

プログラミングチュートリアル

総視聴数
17,086
先月の視聴数
(2024年10月)
410
いいね数
365
公開日
2022年2月21日
#入門 #Firebase #react #ログイン #認証 #webアプリ

★FirebaseとReactを使ってTwitterクローンを作りたい人はこちら。
http://shincode.info/2021/12/31/udemy-discount-coupon/

【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
↓↓↓↓↓
http://shincode.info/2021/12/31/udemy-discount-coupon/

\ShinCode_Camp開校しました/
プログラミング講座&副業・起業&就職・転職が学べるプラットフォーム🚀
🎁月額2500円で全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁コミュニティ機能付き
🎁いつでも解約可能etc...
↓↓↓↓↓
https://code-s-school-5bc2.thinkific.com/bundles/shincode-camp

【この動画を視聴するメリット】
・Ver9.0以降のFirebaseでログイン(サインイン)機能が実装できる
・React×firebaseの連携方法が理解できる
・react-firebase-hooksを扱えるようになる
・ユーザーログイン状態を監視することができる

【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ300人突破
・Webアプリ/サイト開発数:200以上

★チャンネル登録はこちらから★
https://www.youtube.com/channel/UCNTxclE0N4qsUuirssL_D8w?sub_confirmation=1

★さらに深くプログラミングを学びたい方へ(92%引き割引クーポン)★
http://shincode.info/2021/12/31/udemy-discount-coupon/

★今回のソースコード★
https://github.com/Shin-sibainu/firebase-login-tutorial

★無料Slackコミュニティ開設しました★
https://t.co/HCsoL7hlft
プログラミングに関するご相談やお悩みはこちらで回答します。

★運営者SNS★
Twitter:https://twitter.com/Shin_Engineer

★この動画で使用している機材★
キーボード(Keychron K6 赤軸):https://amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス):https://amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク):https://amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド):
https://amzn.to/3se5onZ
※アフィリエイトリンクになります。
【どっちがいい?】Firebase vs Supabase

マフィア先生のエンジニア塾

総視聴数
5,620
先月の視聴数
(2024年10月)
326
いいね数
120
公開日
2023年7月8日
#プログラミング #エンジニア #firebase #supabase
ITや開発に関するネタやお役立ち情報を発信していきます。
良かったらチャンネル登録お願いします!

# プログラミング動画教材
Udemyでプログラミングに関する動画教材を販売しています。
2000円以下で大ボリュームですので気になる方はチェックしてください!

【2023年最新】【JavaScript&CSS】ガチで学びたい人のためのWEB開発実践入門(フロントエンド編)
https://d.codemafia.tech/yt-frontend-tutorial

【JS】ガチで学びたい人のためのJavaScriptメカニズム
https://d.codemafia.tech/yt-javascript-essence

【2022年最新】React完全入門ガイド|Hooks、Next.js、Redux、TypeScript
https://d.codemafia.tech/yt-react-guide

【PHP, APACHE, MYSQL】ガチで学びたい人のためのWEB開発の基礎(バックエンド編)
https://d.codemafia.tech/yt-backend-tutorial

【2022年最新】Node.js完全入門ガイド Webシステムとソフトウェア開発基礎!
https://d.codemafia.tech/yt-nodejs-guide

プログラミング中級者になりたい人のためのクリーンコード入門
https://d.codemafia.tech/yt-clean-code-tutorial

# Not Equal - ハイエンドなWeb制作学習サービス(20%OFF 5/10まで)
https://not-equal.dev

# プロフィール(Udemyの講師紹介に飛びます。)
https://d.codemafia.tech/my-profile

# プログラミング本の出版
独習JavaScript新刊(翔泳社出版)
https://www.amazon.co.jp/dp/479816027X/

# 自己紹介
はじめまして。CodeMafia(コードマフィア)です!
→ ソフトバンクでエンジニアとして4年間システム開発に携わる
→ 独立してサービスを立ち上げようとするが、3年位全然うまく行かず、Web開発などで食いつなぐ。→ Udemy講師でプログラミングについて教え出す。
→ プログラミングの本出す。
→ 会社として活動する。
→ Udemy80,000人超える。
→ハイエンドなWeb制作学習サービスNot Equal立ち上げる。← 今ここ

講師としてのお仕事の他に企業、大学のWebアプリやWebサイトの開発をしてます。
ご興味のある方は下記リンクよりお気軽に〜。

# 弊社の事業をお手伝いいただける方募集しています!フリーランス、副業どちらでもOKです!
https://d.codemafia.tech/partner

# 案件を紹介いただける『紹介パートナー』も募集しています!
https://d.codemafia.tech/sales-partner

皆様のご応募お待ちしております!

# その他、何かありましたらこちらまで!
https://d.codemafia.tech/contact

5. まとめ

Firebaseのおすすめ講座を紹介しました。他の関連講座を学びたい方は、下記をご参考ください。

React
Next.js
Vue.js
React
Next.js
Vue.js

今回紹介したいずれかの講座を受講した後にさらに深掘りして学びたい方は、公式サイトやコミュニティサイトに行くことを、最新の情報をキャッチアップしていきたい方場合は、公式twitterアカウントをフォローすることをおすすめします。

また、ChatGPTなどの汎用AIを勉強のヘルプツールとして活用することも強くおすすめします。これにより、より効果的な学習が可能になりますのでぜひ試してみてください。

「自ら機会を創り出し、機会によって自らを変えよ」

株式会社リクルート創業者 江副浩正氏の有名な言葉です。自分の知識やスキルを高めることは、機会を作り出すことに役に立ちます。自らを変えようとしている方にとって、本ページの情報が少しでもお役に立てれば幸いです。

一覧に戻る
Home About Share
Home
About
Privacy policy
Disclaimer
Contact
Official
© 2024 outlecture.com All Rights Reserved.