カテゴリー
サインイン 新規登録
学習時間 12時間
難易度 中級
質問投稿
価格 ¥1,980
月額 ¥2,980
Unlimited会員はこちらの教材を含む100種類以上のUnlimited対象教材が学び放題

Vue.js & FirebaseでTwitterライクなSNSアプリを作ってみよう!

Vue.jsとFirebaseの連携によるTwitter風SNSアプリ開発!Googleアカウントでのサインインや、Vue.jsとFirebase Firestoreを使ったCRUD(投稿の保存、削除、更新)の実装方法について順序立てて学ぶ。

3.3
最終更新 2020/12
安久 京

Vue.jsとFirebaseの連携によるTwitter風SNSアプリ開発!

本教材では、Vue.jsとFirebaseを使って、Twitterのようにユーザーが短い投稿をシェアできるSNSを作っていきます。

Firebaseは、BaaS(Backend as a Service)の一種です。BaaSとは、ウェブサイトやアプリのバックエンド機能を提供するクラウドサービスです。具体的に言うと、Firebaseを使うことで、データベースの利用・ユーザー管理・アプリのデプロイ(公開)など、バックエンドで行う一連の処理を簡単に行うことができるようになります。

アプリ制作においてFirebaseが好まれる理由としては、上記のような汎用的な機能を一括で用意することができ、一箇所で管理することができるため、バックエンド側の開発コストを抑えることができる点と、Googleアカウントさえ持っていれば誰でも無料で始められる点にあります。

本教材では、Vue.jsアプリを作成し、Firebaseと連携させ、次の機能を実装していきます。

  • Googleアカウントでのサインイン
  • 投稿の新規作成、リスト表示、更新、削除

本教材を一通り進めることで、新規投稿・閲覧・更新・削除(CRUD)+ ユーザー登録という必要最低限の機能をそなえたWebアプリを誰でも1から作ることができるようになります。

各パートごとに、具体的な習得テーマを設定してあるので、明確な目的意識を持ちながら学習を進めることができます。

学習内容

  • Firebase、Vue.jsの基本を学びます。
  • Firebase Authを使った簡易サインイン機能の実装方法を学びます。
  • Firebase Firestoreを使ったCRUD(投稿の保存、削除、更新)の実装方法を学びます。
  • Firebase Hostingを使ったアプリの公開方法を学びます。

この教材の対象者

  • HTML, CSS, Javascriptの基礎を学んでいる方
  • 様々なアプリを1から開発できるようになるための着実な一歩を踏み出したい方

受講における必要条件

  • HTML, CSS, Javascriptの基礎知識
  • Vue.jsの概要の理解

学ばないこと

本教材はVue.jsとFirebaseの連携によるアプリ開発の基礎を抑える事を第一の目的としているため、HTML・CSSの解説は詳しくしていません。

本教材で質問対応可能なOSや環境

  • Mac OS
  • windows

カリキュラム

Section 0 はじめに
Section 1 Firebaseでプロジェクトを作成しよう
Section 2 Vue.jsのアプリを作成しよう
  • 2-1 Vue.jsのアプリを作成しよう
  • 2-2 アプリのファイル構成を確認しよう
  • 2-3 ヘッダーを作成しよう
  • 2-4 FirebaseとVue.jsアプリを連携させよう
  • 2-5 トップページを作成しよう
  • 2-6 リストアイテムをコンポーネント化しよう

講師のプロフィール

教材のレビュー

3.3
7件の評価
14%
42%
14%
14%
14%
内藤祐馬 1年以上前
とても勉強になりました! 私はフロントエンド経験1年でJqueryを中心に、Vueはおまけ程度業務で使用しています。 FireBaceの学習として読ませていただきました。 現在、Firebaseはv9となっていて、こちらの記事の記法をV8からV9に修正しながら進めました。 そのためFirstoreの実装部分に少し時間がかかりましたが、アプリケーションの設計や認証機能の使い方など参考になる点が多かっ もっと見る
yy 1年以上前
Vue.jsの基本を抑えなんらかしらの成果物を作ってみたいと言ったよう方におすすめできる教材だと思います
shota1234 1年以上前
良かった点はFirebaseとの連携方法が学べる点です。Firebaseを使用してこんなに簡単にアプリをデプロイ&公開できることに感動しました。悪かった点はVue CLI ver. 4ではrouter.jsが生成されない点の記載が本文にない点です。(質問にあります。)総合的に非常にためになりましたので、星5つとさせていただきました。こんなに良質な教材を使用することができて大感謝です。