フロントエンド開発の人気フレームワーク「Vue.js」と Google提供のBaaSサービス 「Firebase」を使った実践的なWEB開発

本教材では、フロントエンド開発において人気のあるフレームワーク「Vue.js」について、はてなブックマーク風ブックマークサービスを作りながら学習していきます。

Vue.jsは、他のJavaScriptのフレームワークと比べてシンプルであり、学習コストが低いと言われています。その利便性の高さと導入の容易さから、近年多くのサービスにて採用されており、2020年3月現在、GithubでのJavaScript系フレームワークのスター数を最も多く集めています。

また今回のように、フロントエンドをメインでWEBアプリケーションを開発したいときに、認証周りのユーザー管理を実装するのは大変ですよね？そこで、Firebaseが活躍します。

Firebaseとは、”BaaS”(Backend as a Service)と呼ばれ、Googleが運営するソーシャルログインや、リアルタイムデータベースの機能を提供するサービスです。 認証やデータ管理のためのバックエンドシステムを用意する必要がなくなり、フロントエンドの開発に専念できるようになります。今回、作成するはてなブックマーク風なブックマークサービスやリアルタイムチャットアプリなどが手軽に公開できるようになります

学習内容

• Vue.js を使った実践的な UI 開発スキルを学びます
• Bulma を使った UI 開発スキルを学びます
• Firebase Authentication を使った認証機能の開発を行います
• ブックマークの登録・スター機能の開発を行います
• Firebase Cloud Function の使い方を学びます
• Firebase Hosting を使ってサービスを公開する方法を学びます

実際に作成するサービスのイメージ

この教材の対象者

• 書籍などを見ながらVue.jsで簡単なサンプルアプリケーションを作ったことがある方
• JavaScript を学んだことがあり、何かフレームワークを使ってアプリケーションを作りたい方
• Firebase を使った簡単なアプリケーションについて学びたい方

受講における必要条件

• HTML/CSSの基礎知識のある方
• JavaScript の基礎知識がある方

学ばないこと

本教材では Vue.js と Firebase を連携して開発することを主目的としているため、Vue.js 理解のために必要な技術ではありますが HTML/CSS/JavaScript の解説はほとんど行いません。

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

• Mac OS
• Cloud9

Windowsの方はCloud9で進めてください。Cloud9でしたら質問対応可能です。Mac OSやCloud9以外での開発環境における質問対応はできかねますのでご了承ください。

本教材の対応バージョン

• Vue.js 2系

この教材を執筆した想い

技術のトレンドがめまぐるしく移り変わるこの業界で、割と勢いのある技術を選びました。Vue.js と Firebase の基本的な部分をしっかり学習できるようにできる限り便利なライブラリなどを使用せずシンプルに仕上げました。新しい何かを作り出していく人の入口に立てたら光栄です。