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

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

Vue.jsFirebaseの連携によるTwitterSNSアプリ開発

本教材では、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


この教材の執筆者


安久 京
安久 京

学生時代にRuby on Rails, Vue.js, AngularなどによるWebアプリ開発を独学で習得。大学卒業後、機械学習関連のスタートアップに入社し、Webアプリ開発とPythonプログラミングを経験。現在は大学院にてゲーム理論、計量分析を専攻。


本教材のカリキュラム



今すぐはじめる!