概要

ブログサイトを作ってみました。

chobilog

Nuxt.jsでプロジェクトを作成。
UIコンポーネントはVuetifyとほんとにちょっとだけVuesaxを使いました。(併用できるのかの実験を兼ねて。結果できました。)
記事はContentfulにマークダウン記述で作成。
APIで取得してHTML変換して表示しています。
デプロイ先はNetlifyです。

完成品

PCトップ画面

PC記事画面

スマホトップ画面

スマホ記事画面

動機

最近WordPressにハマってよくブログを書いているのですが、
あまりにも自分のためだけの備忘録的日記と化してしまっていました。笑
少しは誰かの役に立てるような情報を僕なりに頑張って発信するブログを別で作りたいなと思い作りました。(未経験エンジニアの情報なんて役に立たないだろとかそういう突込みはしないでください。。。笑)

学び

ブログ作成を通じて沢山のことを学ぶことができました。
- Vue.jsの基礎(データバインディングも初めて実装&理解)
- Nuxt.jsの基礎(SSR)
- Markdown記法(markdownitの実装)
- Font Awesomeの実装
- Vuetifyの実装(VUesaxとの併用)
- 公式ドキュメント(英文でも逃げずに)を読む大切さ
- ブログデザイン(WordPressのテーマとかよくできているなと思いました。)
- ESLint便利だけどたまに邪魔になる(初心者だからですきっと。。。)
- CSS設計(楽で使いがちだったインライン記述をやめる。)
- Flexboxの利用

おわりに

引き続きこのブログサイトは記事書きながら、追加・微修正していく予定です。

また、作る過程は僕の日記的ブログに書いてますので省きました。
気になる！って方はぜひ覗いてみてください。

個人ブログ

次はLaravel+Vue.jsでポートフォリオを作りたいなと思います。
Vue.js最初は難しかったけど今とても楽しい◎

Vue.jsとは

JavaScriptでUI部品を作るためのフレームワーク。noteや一休.comに使用されているNuxt.jsはこのVue.jsをベースとし，サーバーサイドレンダリングをフレームワーク化したものである。
自分でモダンなwebアプリを開発するのにNuxt.jsを勉強するのが良さそうだと思ったので，その基礎としてVue.jsを軽く勉強した。
(参考にした記事)

• Nuxt.jsとpythonで機械学習アプリ
• その他，個人的にいつも参考にしているp1assさんが作成しているアプリのフロントはNuxt.jsで書かれている。memoito，えもじっく

そもそもの一人開発についてはせっかくなのでQiitaのアドベントカレンダーを見るのがいいだろう。

ちなみに，フロントの知識皆無の人間が書いている。JavaScriptも昔，少しだけ勉強しようとしたが実際にコーディングした経験はない。htmlの基礎の基礎タグについての軽い知識はある。普段はbioinformaticsの研究をしている。
JavaScriptの勉強は，progateの無料部分→ドットインストールの無料講座→しまぶーさんのyoutubeという順で勉強した。１日かからずに概要自体は理解できるので割と良い勉強法だったのではないかと思う。
この記事は自分が普段勉強したことを自分用にまとめているブログの垂れ流しで，読みながら操作するのには向いていないかもしれない。流れなどで少しでも参考になればと，，，

Vue.jsの基本を理解する

ドットインストールを取り敢えず見てみた。
ドットインストール知らなかったんだけど，いい。
Vue.jsは双方向データバインディングを行えるのが大きな特徴。データバインディングとは データとUIを結びつけるという意味で，双方向はどちらか一方を更新する事でもう片方も更新されるという事。取り敢えず簡単に，ブラウザ上で文字入力すると表示が変わるアプリを作成してみる。

　ブラウザ入力により表示テキスト変更アプリの作成

1.Vue.jsを導入

以下のスクリプトをindex.htmlのbodyタグの中に記載することで簡単に導入することができる。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/main.js"></script>

二行目は必須ではなく，連携させるjavaファイルを記載しているだけ。

2.データの作成

データ側である，UIに結びつくモデルの作成を行う。ここでは，html上でdivタグによって定義されたid="app"のUIに対するデータを作成している。上記でscript指定したmain.jsを以下のようにする。

main.js

(function() {
    'use strict';
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'TsumaR'
        }
    });
})();

これがVue.jsの書き方である。

• varとは：JavaScriptにおける変数定義法。再宣言ができるのでローカル変数の定義に便利。letは再代入はできるが，再宣言ができないのが大きな違い。(しまぶーさんはvarを使うことはないと言っていた)
• new Vue：宣言的にデータをDOMに描画している。
• elとは：Vue.jsの文法。Vue()の中にあるのだから理にかなっている。mountする要素を指定している。elementの略で，Vue.jsが作用を及ぼす範囲を指定するということ。
• dataの中身：key:値で指定している。

3.データをUIへ反映

二重波括弧の中に，dataで指定したkeyを記載するとUIに対応づけることができる。
v-modelでkeyを対応づけることで，UIの変更をデータに反映することもできる。ちなみに二重括弧の中はJavaScriptの式をそのまま書くことができる。

<div id="app">
    <p>Hello {{name}}!</p>
    <p><input type="text" v-model="name"></p>
</div>

以上でブラウザ上で文字入力すると表示が変わるアプリを作成することができた。htmlを変更することなく，Vueが完全に制御している。

基礎から学ぶVue.js

ここから先，todoリストを作成しているが有料。課金してもいいのだが，本当の基礎の部分がわかったらあとは記事を探して勉強するので十分な気がするので記事を参考に勉強した。
実際は基礎から学ぶVue.jsのサポートサイトを利用した。このサイトには，To Doリストを作りながら学習しよう！というページや，Netlifyで自動デプロイするまでの記事まであり大変勉強になる。ただし，本章の内容に関しては当然細かい説明はない(本を買って読むべき)。今回はチュートリアルのToDoリストを作りながら学習しよう"を動かす。
作成するToDoリストは下のもの

---

Vueのmethod

ドットインストールではVueにdataしか宣言しなかったが，methodsを宣言することができる。

const app = new Vue({
  el: '#app',
  data: {
    // 使用するデータ
  },
  methods: {
    // 使用するメソッド
  }
})

データの構想

必要になるデータは

• ToDo のリストデータ
  • 要素の固有ID
  • コメント
  • 今の状態
• 作業中・完了・すべて などオプションラベルで使用する名称リスト
• 現在絞り込みしている作業状態 リストデータをテーブル形式(tableタグを使用)で記載する。

フォーム入力

ドットインストールでは，フォーム入力は以下のようにし，フォーム入力(UI)とデータを参照した

<p><input type="text" v-model="name"></p>

一方で，入力データを画面に表示させず，常にデータとして持っている必要がない場合はref属性を使う。ref属性を使って参照するための名前をタグ付けしておくと，そのDOMに直接アクセスできる。今回の例の場合下のように記載することでref参照を行うようにする。一方で，全表示の切り替えボタンなどにおいてはv-modelもよく使う要素の一つなので覚えておく必要がある。

<input type="text" ref="comment">

メソッド内でこれを参照するためには

this.$refs.comment.value

のように，thisをつける必要がある。ちなみにDOMとは「Document Object Model」の略で，ファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決めのこと。
(余談)
バックエンドエンジニアは，データベースなどからweb APIを介してJSONを返す仕組みを作る。JSONをHTMLに落とし込むのははパースという操作。DOM操作はこのパースを行う一つ一つの操作のこと。多分。
少し冗長になるが，

<h2>新しい作業の追加</h2>
    <form class="add-form" v-on:submit.prevent="doAdd">
        コメント <input type="text" ref="comment">
        <button type="submit">追加</button>
    </form>

で作業追加の項目を作成できる。説明したようにrefでcommentを参照するようになっている。一方で，ここまで出てきたことのなかったv-onというものが現れた。ここでは，下で指定されたフォームのサブミットが行われると，それをハンドリングしてdoAddメソッドが呼び出されるようになっている。

Vueのmethods

v-onによって呼び出されたdoAddメソッドはVueを用いて，自分で定義するものである。ToDoアプリでは，フォームの入力値を取得して新しいToDoの追加処理を行うようにする。methodオプションに記載する。

new Vue({
  // ...
  methods: {
    // ToDo 追加の処理
    doAdd: function(event, value) {
      // ref で名前を付けておいた要素を参照
      var comment = this.$refs.comment
      // 入力がなければ何もしないでリターン
      if (!comment.value.length) {
        return
      }
      // { 新しいID, コメント, 作業状態 }
      // というオブジェクトを現在の todos リストへ push
      // 作業状態「state」はデフォルト「作業中=0」で作成
      this.todos.push({
        id: todoStorage.uid++,
        comment: comment.value,
        state: 0
      })
      // フォーム要素を空にする
      comment.value = ''
    }
  }
})

結果としてはこうなる。$refs以外は普通のJavaScriptの構文。通常のpushメソッドを利用するだけで，Vueのデータtodosにリストの要素として追加される。
todosに追加されると，htmlではbodyを下のように記載しているため，

<tbody>
            <tr v-for="item in todos" v-bind:key="item.id">
                <!-- 要素の情報 -->
                <th>{{ item.id }}</th>
                <th>{{ item.comment }}</th>
                <td class="state">
                    <button>{{ item.state }}</button>
                </td>
                <td class="button">
                    <button>消去</button>
                </td>
            </tr>
</tbody>

htmlに要素が追加された形で表示することができるのである。Vue.jsすごい。
ToDoのリストも，フォームも<div id="app">内にあるからできることであることをちゃんと理解しておくこと。

ストレージへの保存(watch)

上記で表示上，新たなToDoを追加できるようになったが，このままだとJavaScriptがtodosというリストの要素として記憶しているだけになってしまう。そのため，書き換えが起こった場合にストレージに保存する機能を追加する必要がある。ここに関しても当然のようにVue.jsが行ってくれる。
ここで，操作ごとにストレージ保存のスクリプトを書かずとも，Vueのデータが書き換わるごとにストレージに自動で保存してくれる機能を追加することができる。watch機能である。

watch: {
  監視するデータ: function(newVal, oldVal) {
    // 変化した時に行いたい処理
  }
}

ストレージからデータを取得する際にはインスタンス作成時に実行される用，ライフサイクルフックのメソッドを使用していた。ライフサイクルメソッドは特定のタイミングに何かの処理を挟みたいときに用いるメソッドのことである。todoStorageオブジェクトのfetchメソッドを利用していた。

算出プロパティ

ドットインストールの中で，二重カッコの中に式を描くことができると書いたが，長すぎる式をかくとコードが肥大化してしまう。そのような複雑な処理を施したい場合は算出プロパティを利用するべきである。
以下，Helloを逆から表示する例

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

JavaScript

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 算出 getter 関数
    reversedMessage: function () {
      // `this` は vm インスタンスを指します
      return this.message.split('').reverse().join('')
    }
  }
})

算出プロパティは，リアクティブな依存関係が更新されない限りキャッシュされる。そのため，上の例ではmessageが変わらない限り，何度reverseMessageにアクセスしても，関数を実行することなく以前計算された結果を即時に返すことができる。
定義方法は違うが使い方はデータと一緒。v-for="item in reversedMessage"などと指定すれば良い。

ToDoアプリの完成スクリプト

ここ

やりたいこと

• Hopperを使って簡単にPaginationとNavigation付きのカルーセルを実装する
• 最後のスライドに移動したらPaginationとNavigationを決してボタンを表示する

Hooperのinstall

• 公式
  https://baianat.github.io/hooper/

• 導入手順
  yarn add hooper

HooperComponentsの呼び出しと設定

• これだけで基本的にカルーセルが実装可能
• 設定値やイベント等については 公式ドキュメント で確認できる

HooperSample.vue

<template>
  <div class="hooper-sample">
    <hooper class="hooper-sample__hooper" :settings="hooperSettings">
      <slide class="hooper-sample__slide">
        Hooperを<br>
        使って
      </slide>
      <slide class="hooper-sample__slide">
        簡単に<br>
        カルーセルを
      </slide>
      <slide class="hooper-sample__slide">
        実装してみる
      </slide>
      <slide class="hooper-sample__slide">
        最後のスライドは<br>ボタンだけを表示する
      </slide>
      <hooper-pagination slot="hooper-addons" />
      <hooper-navigation slot="hooper-addons" />
    </hooper>
  </div>
</template>

<script>
  import {Hooper, Slide, Pagination as HooperPagination, Navigation as HooperNavigation} from 'hooper';

  export default {
    components: {
      Hooper,
      Slide,
      HooperPagination,
      HooperNavigation,
    },
    data() {
      return {
        hooperSettings: {
          itemsToShow: 1,
          centerMode: true,
          wheelControl: false,
        },
      }
    }
}
</script>

<style lang="scss">
  .hooper-sample {
    background-color: #d5d5d5;
    text-align: center;

    &__hooper {

    }

    &__slide {
      display: flex;
      justify-content: center;
      align-items: center;
    }

  }
</style>

実行してみる

イベント

• Hooperの@slideイベントから、「最後のスライドになったらPaginationとNavigationを隠してボタンを表示する」を実装してみる
• そのほかのイベントについは [公式ドキュメント]((https://baianat.github.io/hooper/api.html) で確認できる

HooperSample.vue

<template>
  <div class="hooper-sample">
    <hooper class="hooper-sample__hooper" :settings="hooperSettings" @slide="slide">
      <slide class="hooper-sample__slide">
        Hooperを<br>
        使って
      </slide>
      <slide class="hooper-sample__slide">
        簡単に<br>
        カルーセルを
      </slide>
      <slide class="hooper-sample__slide">
        実装してみる
      </slide>
      <slide class="hooper-sample__slide">
        最後のスライドは<br>ボタンだけを表示する
      </slide>
      <hooper-pagination slot="hooper-addons" v-if="!isLastSlide"/>
      <hooper-navigation slot="hooper-addons" v-if="!isLastSlide"/>
    </hooper>
    <button v-if="isLastSlide" class="hopper-sample__button">
      ボタン
    </button>
  </div>
</template>

<script>
  import {Hooper, Slide, Pagination as HooperPagination, Navigation as HooperNavigation} from 'hooper';

  const SLIDE_COUNT = 3

  export default {
    components: {
      Hooper,
      Slide,
      HooperPagination,
      HooperNavigation,
    },
    data() {
      return {
        hooperSettings: {
          itemsToShow: 1,
          centerMode: true,
          wheelControl: false,
        },
        currentSlide: 0,
      }
    },
    computed: {
      isLastSlide() {
        return this.currentSlide >= SLIDE_COUNT
      },
    },
    methods: {
      slide({currentSlide}) {
        this.currentSlide = currentSlide;
      }
    },
  }
</script>

<style lang="scss">
  .hooper-sample {
    background-color: #d5d5d5;
    text-align: center;

    &__hooper {

    }

    &__slide {
      display: flex;
      justify-content: center;
      align-items: center;
    }

  }
</style>

実行してみる

所管

超簡単にナビゲーションアイテム付きのカルーセルが実装可能でした！
イベントを使えばSlideをトリガーに何かを行うことも可能なので、お手軽に実装したい場合は便利でした。

結局使ってて一番詰まったのは、Hooper内のスタイリングのリセットだった

サーバー側とクライアント側のルーティング

1.サーバー側ルーティング
クライアントはURLが変更されるたびにサーバーにリクエストを送信するため、これを「サーバー側ルーティング」と呼びます。

2.クライアント側ルーティング
ルーティングはJavaScriptを使用してブラウザー自体で行われます。Webページは1つのindex.htmlページから読み込まれ、クライアント側のルーティングを使用して、クリックされたリンクに応じて、さまざまなビューを動的に表示できます。多くの場合、表示する必要のあるビューはすでにブラウザーにロードされているため、サーバーにアクセスする必要はありません。

3.単一ページのアプリケーション（SPA）
1つのHTMLをロードして，ユーザーインタラクションに応じて動的にページを更新するWebアプリケーションです。ただし、単一ページアプリケーションを使用している場合は、コンテンツ間を移動する方法（クライアント側ルーティング）が必要です。

Vueルーター

配置場所：

/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    //URLの観点から、実際のルートを示します
    path: "/",
    //ルートを参照するためにアプリケーション全体でその名前を使用する
    name: "Home",
    //ルートでレンダリングするためにどのコンポーネントを指定する
    component: Home
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

App.vue

<router-link></router-link>

router-link: 特定のルートにリンクすることを目的とする（vue-routerライブラリの）コンポーネントです。そして本質的には、コンポーネントのコンテンツがページにレンダリングされるプレースホルダーです。

router-view: router-linkで指定されたコンポーネントが表示されている場所に読み込まれます。
例えば、リンク/aboutをクリックしたら、views/App.vueの内容が「router-view」のところに表示されます

<template>
  <div id="app">
    <div id="nav">
      <router-link :to="{name:'Home'}">Home</router-link>
      <router-link :to="{name:'About'}">About</router-link>
    </div>
    <router-view />
  </div>
</template>

redirectとエイリアス

要件:/aboutを/about-usへ変更しましたが、/aboutで同じく変更前のコンテンツにアクセスするできるようにしたい。

ソリューション１：redirect

  {
    path: "/about-us",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  },
  {
    path:"/about",
    redirect:{name:"About"}
  }

ソリューション2：エイリアス

{
    path: '/about-us',
    name: 'About',
    component: About,
    alias:'/about'
  }

ユーザーは/aboutと/about-usに移動すると、同じコンテンツを取得したりできます。

まとめ

• PropTypeはランタイムバリデーションはしてくれない
• vue-property-decoratorを採用してるならPropTypeを用いる意味はない
• vue+typescriptでobject-styleで書くときにのみ型推論の面で意味がある

説明

PropTypeは型推論のための、型定義です。
vue + typescriptだけども、vue-class-component(vue-property-decorator)は使わず、object-styleで開発するときにのみ意味があります。

Vue.extend({
  props: {
    propA: Array as PropType<Date[]>
  },
  methods: {
    methodA() {
      this.propA // ←Date[]と型推論される
    }
  }
});

これを、vue-class-component(vue-property-decorator)で用いることに意味はありません(と私は結論した)。

class extends Vue {
  // @Prop({ type: Array as PropType<Date[]> }) propA: Date[] // こう書いても意味はなく
  @Prop({ type: Array }) propA: Date[] // これでよい

  methodA() {
    this.propA // どっちの書き方でもDate[]推論される
  }
}

まして、ランタイムバリデーションを期待して使うのはだめです。Arrayであることのチェックはしますが、中身がDateであるチェックは、 PropTypeを使ったとしてもやってくれません。

また、PropTypeについては、公式ドキュメントも皆無です。

記事を書いたときの環境

vue: 2.6.11

参考

• https://github.com/vuejs/vue/blob/v2.6.11/types/options.d.ts#L149
• https://github.com/vuejs/vue/pull/6856

1.プロジェクトの構成

node_modules:
Vueのを構築するために必要なライブラリのすべてが保存されている場所のディレクトリ。

public:
プロジェクトをビルドする際のWebPACKを介して実行させたくない任意の静的な資産を配置

asset:
Webpackで最適化できるように、イメージやフォントなどのアセットの大部分をassetディレクトリに配置。

component:
Vueのアプリのコンポーネント、または構築ブロックを保管

views:
ビュー用のファイル、またはページを保存する場所

app.vue:
他のすべての構成要素が内にネストされていることをルートコンポーネント

main.js:
app.vueをレンダーリングし、それをDOMにマウント

2.ロードの流れ

main.jsの中で、まずVue,ルートコンポーネントApp.vue,routerとstoreをインポートします。
それからvueインスタンスを作り、routerとstoreを利用することを指定し、ルートコンポーネントApp.vueをレンダーリングし、それをDOMにマウントします("#app")

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

index.htmlファイル内を覗くと、IDがのdivがあることがわかります。"app"つまり、これAppがマウントされる場所です。

 <div id="app"></div>
    <!-- built files will be auto injected -->

Vue CLI 3-プロジェクトの作成

1.Node.jsバージョン8以降をインストールする

2.CLIをインストールする

$ npm i -g @vue/cli

3.Vueプロジェクトの作成

$ vue create myapp

4.次に、デフォルトのプリセットを選択するか、機能を手動で選択するオプションが表示されます。

下矢印キーを使用して、[機能を手動で選択する]を強調表示し、Enter キーを押します。

Manually select features

5.機能オプションのリストを次を選択。

[space]選択、[i]で選択を取り消しする

Router
Vuex
Linter/Formatter

6.次に、リンター/フォーマッターを選択します:

ESlint +Prettier

7.Lint on saveの追加機能を追加します:

Lint on save

8.専用の設定ファイルを用意することにします。

In dedicated config files

9.これらの設定をすべてプリセットとして保存するオプション(y/n)

使用しないことを選択しますN。

10.Enterキーを押すと、プロジェクトが自動的に作成されます。

11.ブラウザでライブ表示するには、次のコマンドを実行します。

$ npm run serve

vue create [project] で作ったwebアプリをbuild後、firebase にデプロイしたらconsole logでエラー発生

手順は、
firebase deploy --only hosting 後、指定された firebaseapp.comを開いても、ブランクページが表示される。

consoleのエラー内容は、
Failed to load resource: the server responded with a status of 400 ()


firebase.jsonを変更すればok

npm run build でroot配下に、distディレクトリが自動生成された事を確認後、

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }

ここの public: "public" をpublic: "dist　に変えるだけ。

修正後のfirebase.json はこちら

firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }

はじめに

おはようございます。こんにちは。こんばんは。
今回はFirebaseのAuthenticationについて見てきます。
では、早速行って見ましょう。
※今回もwebベース(Vue.js)の解説です。

Authenticationとは

https://firebase.google.com/docs/auth/?hl=ja

Firebaseが提供してくれているサービスの１つでFirebase Authentication を使用すると、ユーザーがアプリにログインする際に、
メールアドレスとパスワードのログイン、Google ログインや Facebook ログインなどのフェデレーション ID プロバイダなど、複数のログイン方法を使用できるようになります。

使用方法

管理画面

①管理画面のAuthenticationを選択する。

②ログイン方法を選択する。(複数選択可)

webプログラム側

ユーザー登録

※ログイン方法をメールアドレス・パスワードを選択したとき
管理画面から直接ユーザーを作成することもできるのですが、コードでの作成方法です。

createUser.vue

<template>
    <div class="hope">
        <h2>アカウント登録</h2>
        <input type="text" v-model="email" placeholder="メールアドレス" class="hoge">
        <input type="password" v-model="password" placeholder="パスワード" class="hoge">
        <input type="button" value="登録" @click="createAccount">
    </div>
</template>

<script>
import firebase from '@/plugins/firebase'

export default {
    data() {
        return {
            email: '',
            password: ''
        }
    },
    methods: {
        createAccount() {
            firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
            .then(user => {
                // 登録完了
            });
        }
    }
}
</script>

ログイン

ユーザーの作成ができれば認証も作ります。

login.vue

<template>
    <div class="bowbow">
            <h2>ログイン</h2>
            <input type="text" placeholder="メールアドレス" v-model="email"  value="hoge@gmail.com" class="loginHoge">
            <input type="password" placeholder="パスワード" v-model="password" value="Passw0rd" class="loginHoge">
            <input type="button" value="ログイン" @click="login">
    </div>
    </transition>
</template>
<script>
import firebase from '@/plugins/firebase'

export default {
    data() {
        return {
            email: '',
            password: ''
        }
    },
    methods: {
        login() {
            firebase.auth().signInWithEmailAndPassword(this.email, this.password)
            .then(user => {
                // ログインしたら飛ぶページを指定
                this.$router.push('/mypage');
            }).catch((error) => {
                //ログイン失敗
            });
        }
    }
}
</script>

その他のログイン方法

Google ログイン

const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => /* ... */);

Facebook ログイン

const provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => /* ... */);

Twitter ログイン

const provider = new firebase.auth.TwitterAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => /* ... */);

ログアウト

firebase.auth().signOut()
.then(() => {
    //ログアウトできた
}).catch((error) => {
    //ログアウトできない
});

ユーザー情報取得

取得できる情報はuid(ユーザーIDと思ってください。),ユーザ名,アイコン,メールアドレス,パスワードなどがありますが、
ユーザ名やアイコンは設定されていないので後述のユーザー編集で作成してください。

firebase.auth().onAuthStateChanged((user)=> {
    if (user != null) {
        //ユーザーがいれば
    }
})

ユーザー編集

var user = firebase.auth().currentUser;
user.updateProfile({
    //編集したいもの
    displayName: "ユーザ名",
    photoURL: "アイコン画像のURL"
}).then((user) => {
    //アカウントを編集しました
}).catch((error) => {
    //アカウントを編集を失敗しました
});

なおアイコン（画像）の方はfirestore storageを使用しないといけないため、
改めてfirestore Storageの回で解説します。

ユーザー削除

var user = firebase.auth().currentUser;
user.delete().catch(function(error) {
    //ユーザーを削除できませんでした。
});

以上。
もし、間違い等、アドバイス、ご指摘等有れば教えていただけたら幸いです
次回はfirebaseが提供している機能のDatabaseを見ていきます。

最後まで読んでいただきありがとうございました。
Twitterやってます。良ければチェックして見てください。

リンク

• 初めてのFirebaseを触ってみる(導入編)

クラスのデータバインディングの基本

• クラスを動的に変更するにはv-bind:classを利用する
• クラスの付け替えが楽になる

例

<p v-bind:class="{クラス名: 真偽値}">

js

var app = new Vue({
  el: '#app',
  data: {
    isLarge: true // 真偽値を定義
    }
})

html

<!-- isLargeがtrueなので、largeクラスが適用される-->
<p v-bind:class="{large: isLarge}">Hello Vue.js!</p>

複数のクラスを動的に切り替える

• カンマ区切りで、複数のクラスを指定できる。

html

<p v-bind:class="{クラス名: 真偽値, クラス名: 真偽値, ...}">

html

<p v-bind:class="{large: isLarge, 'text-danger': hasError}">Hello Vue.js!</p>

'text-danger'のように、クラス名にハイフンを含む場合は''(シングルクォート)で囲む。

プレーンなクラス属性と共存させる

一般的なクラス定義と、データバインディングしたクラスは共存できる。

例

<p class="クラス名" v-bind:class="{クラス名: 真偽値, クラス名: 真偽値, ...}">

配列構文によるクラスのデータバインディング

v-bind:classにクラスのリストを渡す事で展開できる

例

<p v-bind:class="[プロパティ名, プロパティ名, ...]">

js

data: { // dataにクラス名を持ったプロパティを定義
  largeClass: 'large', 
  dangerClass: 'text-danger'
}

html

<!-- クラスを適用するにはブランケットで囲む -->
<p v-bind:class="[largeClass, dangerClass]">Hello Vue.js!</p>

<!-- <p class="large text-danger">Hello Vue.js!</p>

オブジェクトのデータを利用する

複数のクラスをテンプレート(HTML)に書くと見通しが悪くなるので、オブジェクトで定義してv-bind:classに渡すことができる。

例

<p v-bind:class="オブジェクト">

js

data: {
  classObject: { //クラスのオブジェクトを定義
    large: true,
    'text-danger': true
    }
}

html

<!-- largeクラスとtext-dangerクラスが適用される -->
<p v-bind:class="classObject">Hello Vue.js!</p>

クラスの条件に三項演算子を使う

html

<!-- isTrueがtrueの時、trueClassクラスが適用される -->
<p v-bind:class="isTrue ? trueClass : '' ">Hello Vue.js!</p>

三項演算子の結果に関わらず、常に適用したいプロパティがある場合は[]で囲んでカンマで区切る。

html

<!-- fooClassは常に適用される -->
<span v-bind:class="[isTrue ? trueClass : '', fooClass ]">

インラインスタイルのデータバインディング

• インラインスタイルを動的に変更するにはv-bind:styleを利用する

dataオプションに、インラインスタイルで使用したいプロパティをセット

js

data: {
    color: 'blue',
    fontSize: 48
}

v-bind:styleでデータバインディングさせたインラインスタイルを適用できる。

CSSのプロパティ名はキャメルケースにする必要がある。

html

<p v-bind:style="{color: color, fontSize: fontSize + 'px'}">Hello Vue.js!</p>

<!-- <p style="color: blue; font-size: 48px;">Hello Vue.js!</p> -->

ケバブケースで書きたいときは''(シングルクォート)で囲う

html

<p v-bind:style="{'font-size': fontSize + 'px'}"></p>

また、クラスのようにオブジェクトを渡すこともできる。

js

data: {
  styleObject: { // オブジェクトを定義
    color: 'blue',
    fontSize: '48px'
    }
}

html

<p v-bind:style="styleObject"></p>

<!-- <p style="color: blue; font-size: 48px;">Hello Vue.js!</p> -->