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

  0-1 Vue.js & FirebaseでTwitterライクなSNSアプリを作ろう

このチュートリアルでは、Vue.jsとFirebaseを使って、Twitterのように、ユーザーが短い投稿をシェアできるSNS「Wisperer」を作っていきます。

具体的には、次のような機能を実装します。

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

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

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

この教材に取り組む上で備えておいて頂きたい技術的な前提は、次の2点だけです:

  1. HTML, CSS, Javascriptの基本を理解していること
  2. Vue.jsの構文について一通り認識していること(公式ガイドの「基本的な使い方」パートに目を通していただくので十分です)

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


デモサイト:https://whisperer-sample.firebaseapp.com/

学習内容


0章 はじめに

  • 0-1 Vue.js & FirebaseでTwitterライクなSNSアプリを作ろう
  • 0-2 開発に必要なツールを用意しよう(Mac)
  • 0-3 開発に必要なツールを用意しよう(Windows)

1章 Firebaseでプロジェクトを作成しよう

  • 1-1 Firebaseで新規プロジェクトを作成しよう
  • 1-2 Firestoreのデータを用意しよう

2章 Vue.jsのアプリを作成しよう

  • 2-1 Vue.jsのアプリを新規作成しよう
  • 2-2 アプリのファイル構成を確認しよう
  • 2-3 ヘッダーを作成しよう
  • 2-4 トップページを作成しよう
  • 2-5 リストアイテムをコンポーネント化しよう

3章 サインイン機能を実装しよう

  • 3-1 サインイン機能を実装しよう
  • 3-2 サインインの有無に応じてボタン表示を切り替えよう
  • 3-3 サインイン時にユーザーデータを保存しよう
  • 3-4 ユーザーページを作成しよう
  • 3-5 ユーザーが投稿したwhisperのリストを表示させよう

4章 CRUDを実装しよう

  • 4-1 新規投稿できるようにしよう
  • 4-2 投稿を削除できるようにしよう
  • 4-3 投稿を更新できるようにしよう

5章 Firebase Hostingでアプリをデプロイしよう

  • 5-1 Firebase Hostingでアプリをデプロイしよう

議論

0 質問

このコースの評価は?