前のパートに戻る 完了して次のパートへ  

  0-1 Vue (Nuxt) と Firebase でリアルタイムチャットアプリを作ってみよう!

本教材は Vue.js のフレームワークである Nuxt.js と MBaaS(mobile backend as a Service)サービスである Firebase を使って リアルタイムにやり取りが行えるチャットアプリを作って行きます。

環境構築から、基本的な機能をステップごとに作成していきます。HTML・CSS・Vue を使用して開発します。 ※ お使いの PC が Windows の方向けの説明はありません。ご了承ください。

教材を進めて行く上で質問項目がございましたら、「質問」の箇所からご質問ください。 (Mac OS 以外での開発環境における質問対応はできかねますのでご了承ください。)

学習内容


  • Nuxt を使った実践的な開発スキルを学びます。
  • Firebase Authentication を使った Google アカウントでのログイン方法について学びます。
  • Firebase Cloud Storage を使った画像アップロード機能の開発を行います。
  • Firebase Cloud Firestore を使ってデータの保存や参照を行い、チャット機能の開発を行います。
  • Firabase Hosting を使って Web アプリケーションを公開する方法を学びます。

受講における必要条件


  • HTML/CSS の基礎知識
  • JavaScript の基礎知識
  • Vue.js の基礎知識

JavaScript や Vue.js を一度も触ったことがない方は、まずは書籍やドットインストール等で学習することをおすすめします。

この教材の対象者


  • jQuery から脱却し、モダンな javaScript に挑戦してみたい方
  • Vue は学んだことがあるが、Nuxt は使ったことが無い方
  • Firebase を利用したサーバーレスなアプリケーション開発に興味のある方

学ばないこと


本教材は HTML・CSS の解説、つまり作成するアプリケーションの見た目の解説は詳しくしていません。細かく知りたい方はご自身で調べていただければと思います。

作成するアプリケーションのイメージをつかもう


この教材では Nuxt でリアルタイムチャットアプリを作成します。実際にどういったアプリを作成するかイメージをつかむために下記の動画を見てください。

目次


0 章 はじめに

本教材を進める上での環境を整えたり、設計を解説していきます。

1 章 Nuxt 環境のセットアップ

新規 Nuxt アプリケーションの作成を行い、開発の準備を行います。 見た目を効率よく整えるために Tailwind CSS の導入も行います。

2 章 ログイン機能

Firebase をつかって Google アカウント認証機能を開発します。

3 章 Firestore について

アカウント情報やチャットのデータなどを保存する Firestore の説明を行います。

4 章 ユーザー登録機能

名前とアイコン画像を登録し、Firestore に保存できるようにします。

5 章 チャットルーム新規登録機能

チャットを行う部屋を新規作成できるように実装します。

6 章 チャットルーム一覧機能

チャットルームの一覧ページを作成し、チャットルームのデータをリアルタイムに参照できるように実装します。

7 章 メッセージ投稿機能

チャットルーム内でメッセージを投稿できるように実装します。

8 章 Fibabase でデプロイしよう

ローカルで開発した Web アプリケーションを Firebase を使って公開します。

議論

0 質問

このコースの評価は?