===== 181215 改訂新版 Vue.jsとFirebaseで作るミニWEBサービスをCodeSandboxで写経してみる（１） =====
Vue.jsの入門のために、以下の本を写経しているが、面白い！Vue.jsってどんな感じなのかな？とか、WEBアプリを作ってみたいと願う初心者の方に、本当におすすめです。
今回は、CodeSandbox上で写経していきたいと思います。
CodeSandboxは、無料のオンラインWEBアプリケーション開発環境です。2017年にサービスが開始され、2018年12月現在、React.js、Angular、Vue.jsなどのJavascriptフレームワークを用いたプログラミングを、登録無しに瞬時に行うことができます。nowというサイトの連携で、無料で公開することもできます。
===== リンク =====
[[z_blog:2018:181216_nuxt_firebase|z_blog:2018:181216_nuxt_firebase]]
[[z_blog:2018:181219_windows10_config|z_blog:2018:181219_windows10_config]]
===== 開発環境 =====
Windows 8.1 Pro(MacでもOK)
Chrome
GitHubアカウント作成済み（なくても大丈夫ですが、コードを保存して後で参照しやすいです）
WEBブラウザのChromeをインストールして、Chrome上で、[[https://codesandbox.io/|CodeSandbox]]を利用していくのがよいと思います。
https://codesandbox.io/
{{:z_blog:2018:pasted:20181215-204715.png}}
===== Vue.jsアプリの新規作成 =====
https://codesandbox.io/ で、右上の Create Sandbox をクリック
{{:z_blog:2018:pasted:20181215-205521.png}}
Vue をクリック。これでVue.jsの開発環境が整います。
{{:z_blog:2018:pasted:20181215-205557.png}}
今回は、保存したものを後で呼び出しやすいように、GitHubアカウントでログインします。
{{:z_blog:2018:pasted:20181215-211611.png}}
途中でCtrl+Sを押せば、保存されます。後で、Dashboardで保存した途中から開始することができます。
{{:z_blog:2018:pasted:20181215-211705.png}}
画面一番左の上から2番目のアイコンをクリック
{{:z_blog:2018:pasted:20181215-211834.png}}
Vue Templateの右側の鉛筆ボタンをクリックして、好きな題名に変更します。
{{:z_blog:2018:pasted:20181215-211949.png}}
今回は、MyMarkdown2 としました。
{{:z_blog:2018:pasted:20181215-212036.png}}
===== Firebaseアプリの新規作成 =====
データをインターネット上で見られるようにするために、Firebaseを利用します。Googleアカウントは作成済みとします。
https://console.firebase.google.com/
から、プロジェクとの追加 で、プロジェクト名を、例えば、mymarkdownで新規作成します。
アプリ作成後の画面で、３つあるアイコンの一番右のアイコンをクリックして出てくる、「ウェブアプリにFirebaseを追加」のコードをコピーして、Vue.jsファイル群のindex.html内のの直前に、以下のようにペーストする。
Firebaseの画面
{{:z_blog:2018:pasted:20181215-212723.png}}
Vue.jsプロジェクトの画面(index.html)
(変更前)
{{:z_blog:2018:pasted:20181215-212854.png}}
(変更後)
{{:z_blog:2018:pasted:20181215-213026.png}}
===== Vueアプリにfirebaseをインストール =====
通常の開発環境では、ターミナル画面で、npm install firebase --saveと打ち込みますが、CodeSandboxでは、以下のように行います。
Dependencies をクリック
{{:z_blog:2018:pasted:20181215-213855.png}}
Add Dependency をクリック
{{:z_blog:2018:pasted:20181215-213932.png}}
Search or ...のところに、firebaseと入力して
{{:z_blog:2018:pasted:20181215-214010.png}}
firebaseのnpmをインストール
{{:z_blog:2018:pasted:20181215-214044.png}}
これで、Dependenciesのところに、firebaseが追加されました。
===== Googleアカウントでのユーザー登録と、ログイン状態の判別 =====
コンポーネントの作成
src/commponents/Home.vueと、Editor.vueを以下のように作成。
{{:z_blog:2018:pasted:20181215-214830.png}}
{{:z_blog:2018:pasted:20181215-214848.png}}
src/App.vue の編集
(変更前)
{{:z_blog:2018:pasted:20181215-214933.png}}
(変更後)
{{:z_blog:2018:pasted:20181215-221301.png}}
===== Firebaseでログイン前とログイン後でページ遷移 =====
App.vueにおいて、isLoginがtrueかfalseかで、v-ifを使用し、ログインの有無により表示するページを変える。