Vue.jsとFirebaseで作るミニWebサービス １回目

2019年あけましておめでとうございます。
最近ブログ更新しなさ過ぎて、運営様からそろそろ記事を書けとメールをいただきました。
2019年はなるべく更新できるよう頑張りたいと思います。

そんなわけで、今日からVue.jsを使ってミニWebサービスを作ってみたいと思います。
今回参考にさせて頂く参考書はこちら
【Vue.jsとFirebaseで作るミニWebサービス】です。

改訂新版　Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）)

簡単に本書の紹介から

はじめにこの本の目的とターゲット

本書のターゲットとしては次のように明記されています。

・HTML,CSS,Javascriptを利用して、簡単なWebサイトを作ったことがある人 　
・複数のページや状態管理をJavascript使って自力で行い、ごちゃついてしまい消耗している人 　
・普段デザイナーとしてマークアップしており、フロントエンドの新しめな環境でのサイト構築を経験してみたい人 　
・シングルページアプリーケーション、Vue.jsってものを触ってみたい、またはそれらの挫折経験がある人 　
・やったことないけどとにかくWebサービスを作ってみたい人
・FirebaseのWeb版を使ってみたい人、どんなことができるのか知りたい人
・普段サーバーサイドやネイティブアプリを作っていて、Webフロントエンドをさらっと触ってみたい人

私の場合は「やった事ないけどとにかくWebサービスを作ってみたい人」に当てはまります。
ターゲット層を見てわかる通り、初心者向けにも対応しています。
気になる方は是非お手にとってご覧になって下さい。

SPA(シングルページアプリケーション)について

そもそもシングルページアプリケーションってなんなの？
簡単に要約すると、Webページを遷移させずに情報を更新する事、今までのWebサイトの仕組みだとページのURLやセッションの情報に紐付き、サーバから出力するHTMLを変更する事でコンテンツ（情報）を切り替えていた。

SPAフレームワークを使うメリット

ページの再読み込みがなくてもサイトの内容を切り替える事ができるです。
そのためにURLやキャッシュにページの内容を記録しておくような機能、それらに応じて適切なデータを返すといった仕組みが必要になってきます。
そのあたりの機能を使いやすまとめたものがSPAフレームワークとなっています。

Firebaseで何ができるのか

今までWebサービスを作る上でサーバサイドプログラムが必要だった部分の一部が、コードを書かずに利用できる。
・Hosting：静的サイトのホスティング及びSSL対応
・Authentication：Googleアカウントを利用してログイン、アカウント情報の取得
・Realtime Database：NoSQLなデータベースの読み書き
これらの機能を利用する事で、Webサービスを公開まで開発することが非常に簡単に可能になっている。

作業用端末（Mac）で事前準備

macにbrewをインストールする

brew本家サイトにアクセスすると下記のようにコマンドが紹介されているのでそのままコピーしてmacのターミナルで実行する。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

実行後、以下コマンドで確認する。

$ which brew
/usr/local/bin/brew

nodebrewのインストール

下記コマンドでnodebrewをインストールしよう。

$ brew install nodebrew

コマンド実行後、下記コマンドで確認

$ brew list
nodebrew

nodebrewのセットアップ

下記コマンドでnodebrewをセットアップしよう

$ nodebrew setup

セットアップ実行時のターミナルログにPATHを追加するような指示が出るのでPATHの追加を行い.bash_profileの反映を行う。

$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source .bash_profile 

Node.jsとnpmのインストール

現在の安定板をインストールするのでオプションは「stable」を使う。実行後「Installed Successfully」と出ればOK

$ nodebrew install-binary stable

問題なく任意のバージョンがインストールされていることを確認する。

$ nodebrew list
v10.15.0
v11.6.0

current: none

私は安定版と最新版の２つを入れておきました。
今回は安定版を使用する。下記コマンドで安定版を有効にしよう。

$ nodebrew use v10.15.0

下記コマンドでNode.jsとnpmがインストールされている事を確認する。

$ node -v
v10.15.0
$ npm -v
6.4.1

開発環境のセットアップ

ここから本書に沿って手順を進める。

vue-templateのダウンロードとセットアップ

下記コマンドで「vue-cli」をインストールする

$ npm install -g vue-cli

問題なくインストールできたか次のコマンドで確認する

vue -h

作業用ディレクトリに移動して、テンプレートダウンロードの準備を進める

$ cd 作業ディレクトリ名
$ vue init webpack-simple Test_Markdown

いくつか質問されますが、最後の「Use sass?」以外はそのままEnterでOK
ちなみに私の場合はこんな感じでした。
Project nameの箇所だけ小文字にしています。
最初大文字にしていたんですが、大文字は使えないみたいで怒られました・・・

$ vue init webpack-simple Test_Markdown

? Project name test_markdown
? Project description A Vue.js project
? Author 
? License MIT
? Use sass? Yes

作成したプロジェクトディレクトリに移動し、npmのインストールを実行

$ cd Test_Markdown/
$ npm install

最後にnpmを起動させる

$ npm dev run

するとブラウザが立ち上がりVue.jsの画面が表示されます。

Vue.js起動画面

ひとまず今日はここままで。
頑張って２回目の更新ができるように努力します！
ではでは〜