Vueで質掲示板を作る

こんにちは、今回はVueで掲示板を作ることで、Vueについて理解していただければと思います。なお、初期設定についてはすでにできているという前提で進めます。

新しいページを作ろう

では、まずは基本の基本として新しいページを作ることから始めたいと思います。

HelloWorld.vueの内容をそのままコピーする

新規プロジェクトを作ると必ず、HelloWorld.vueができますよね?まず、はじめにそれを開いて内容を新規のファイルにコピーすることから始めます。

スクリーンショット 2020-02-09 9.44.06.png

HelloWorldの内容をコピーして、

スクリーンショット 2020-02-09 9.44.41.png

新規で作ったファイルに内容をコピペします。ファイル名はsample1.vueとしておきます。

スクリーンショット 2020-02-09 16.57.24.png

次にsample1.vueのテキスト内をスクロールして、name と書いてあるところに移動します。HelloWorldと書いていると思いますが、Sample1と書き換えます。これが、このコンポーネントの名前となります。sample1_mov.png

続いて、  router>index.jsを開きます。

スクリーンショット 2020-02-09 16.58.16.png

そして、以下のコードを書きましょう

{

 path:'/sample1',

 name:'Sample1',

 component:Sample1

}

スクリーンショット_2020-02-09_17_02_48.png

全体的にこんな感じになります。

ここまでで、一旦保存して中身を見てみましょう

スクリーンショット 2020-02-09 17.19.25.png

#/sample1のルートまで行って、以下のように表示されればひとまず成功です。

スクリーンショット 2020-02-09 21.21.29.png

文字を表示させよう

まずは、新しいページを作成します。

HelloWorld.vueから内容をコピーします。

スクリーンショット 2020-02-11 11.29.38.png

そして、不要な内容を消します。ここではtemplatよりも上にあるdivの中のタグを全て消しました。

スクリーンショット 2020-02-11 11.30.20.png

templateのなかにH1要素を入れて。そこにmsgと入力し2重カッコで囲みます。なお、msgというのは任意の変数名で、後ほど定義します。Vueではscript内で定義した変数を二重カッコで囲むことで使用することができます(ちなみにタグ内だと、また書き方が違うんですが、一旦はこう書けば良いと覚えてください)

<h1>{{msg}}</h1>

スクリーンショット 2020-02-11 11.31.50.png

続いて、script内にdataという箇所があり、そこにmsgというのが定義されていると思いますが、グローバル変数を定義するときはdata内に定義します。ここでは、msgという変数を定義して、初期値として”How are you?”と設定します。

スクリーンショット 2020-02-11 12.08.04.png

保存して、中身を見てみましょう

スクリーンショット 2020-02-09 17.19.25.png

H1のタグで囲まれた箇所が”How are you?”という文字列に置き換わっているのがわかると思います。

スクリーンショット 2020-02-11 13.08.46.png

以下がコードの全容となります。

<template>

    <h1>{{msg}}</h1>

</template>

<script>

export default {

  name: 'Sample1',

  data () {

    return {

      msg: 'How are you?'

    }

  },

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1, h2 {

  font-weight: normal;

}

</style>

ボタンを押すと文字が変わる

続いて、ボタンを押すと文字が変わるページを作成したいと思います。

HelloWorldを使用して、新しくページを作成します。

先ほどと同じように、余分な項目を削除します。templatよりも上にあるdivの中のタグを全て消しました。

スクリーンショット 2020-02-11 11.30.20.png

次にtemplate内に以下のコードを入れます。

<div>
 <h1>{{msg}}</h1>
</div>

なでDivで囲ったかというとtemplate内は一つの要素しか使えないからです。つまりDivタグを親として、そこに子タグがあるのは良いですが、Divタグを親として、そのほかにH1タグを親タグと書くことは禁止されています。

ダメな例

<div>
 <h1>{{msg}}</h1>
</div>
<div>
 <p>Hello</p>
</div>

これで、H1タグに”How are you?”が表示されると思います。

スクリーンショット 2020-02-11 13.31.37.png

スクリーンショット 2020-02-11 13.08.46.png

次にButtonタグをH1タグの下に加えます。そして、:v-on:clickという属性を書きます。そして、実行すべきメソッドを:v-on:click=”実行したいメソッド”と記載します。このコードで言えば、ボタンがクリックされた時にchangeTextと内のメソッドを実行することを意味します。

<template>
 <div>
  <h1>{{msg}}</h1>
  <button v-on:click="changeText">ChangeText</button>
 </div>
</template>

スクリーンショット 2020-02-11 13.57.19.png

次に実行すべきメソッドchangeText内の内容を記載します。メソッドは、script以下に記載します。今回の場合はdataというコードの下に書きます。その際に、必ずカンマを書くことを忘れずに!

スクリーンショット 2020-02-11 14.11.52.png

このmethodsという関数内にどんどん処理すべきメソッドを記載します。msgが先ほどのグローバル変数で、そこに文字列を代入します。文字列は’クオテーションで囲ってあげます。なお注意して欲しいのがグローバル変数でもメソッド内で使用するときはthis.というのを必ずつけないといけません。つけないと全く反映されないので、グローバル変数にはthis.をつけるのをお忘れなく。

スクリーンショット 2020-02-11 14.13.51.png

保存して、中身を見てみましょう

スクリーンショット 2020-02-09 17.19.25.png

ボタンをクリックしてPush buttonに変更されれば成功です。

スクリーンショット 2020-02-11 14.26.49.png

コード:

<template>
 <div>
  <h1>{{msg}}</h1>
  <buttonv-on:click="changeText">ChangeText</button>
 </div>
 </template>
 <script>
  export default {
  name:'Sample1',
  data () {
   return {
   msg:'How are you?'
  }
 },
  methods:{
   changeText:function(){
   this.msg='Push button'
  },
 }
}
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
  h1, h2 {
  font-weight: normal;
 }
 </style>

テキストボックスを追加する

テキストボックスを追加しましょう。ここからはSample1をベースに新規作成しましょう。まずは、新規のページを作成します。

スクリーンショット 2020-02-11 15.13.36.png

sample1.vueのテキストをコピペで貼り付けます。

スクリーンショット 2020-02-11 15.13.48.png

するとこんな感じになります。

スクリーンショット 2020-02-11 15.14.08.png

次にname属性をSample2に変更して

2020-02-11 15.14.50

sample2.vueという名前で保存します。

スクリーンショット 2020-02-11 15.14.33.png

続いて、index.jsというファイルを開いて、下記のようにコンポーネント登録を行います。ここまでで、一旦準備は完了ですね。

2020-02-11 15.15.25

続いて、inputと記載すればテキストボックスが出来上がります!なお、value属性には初期値をtypeにはtextと書きます。

<input type="text" value="Text here">

スクリーンショット 2020-02-11 15.32.18.png

こんな感じになれば、成功です。

スクリーンショット 2020-02-11 15.34.05.png

複数行のテキストボックスを追加する

複数行のテキストボックスを追加してみましょう。先ほどのテキストボックスの下に複数行のテキストボックスを追加します。まず、先ほどのinputタグをPタグで囲いましょう。

スクリーンショット 2020-02-11 15.50.50.png

次に以下の内容をInputタグのすぐ下に入力します。

<textarea name="question" rows="4" cols="40"></textarea>

スクリーンショット 2020-02-11 15.52.27.png

なお、初期値はテキストエリアタグ内に記載すると、初期値となります。実際に表示させてみましょう。このように複数行のテキストエリアが表示されれば、成功です。

スクリーンショット 2020-02-11 15.53.35.png

テキストボックスの内容を別の場所に表示させる。

先ほどのコードをもとに、inputテキストの内容を別の場所に反映させてみましょう。

ボタンを押すとテキストボックスの内容が反映されるものを作る

ボタンを押すと、テキストボックスの内容が反映されるものを作りましょう

ツイッターのように入力内容がどんどん追加されるものを作る

Firebaseと連携できるようにしよう

まず、プロジェクトがあるフォルダー上でFirebaseをインストールします。以下のコマンドを打ち込んでください。

npm install vue-firestore –save

main.jsを開いて

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

となっているので、

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import firebase from 'firebase'

Vue.config.productionTip = false

  // Your web app's Firebase configuration
  const firebaseConfig = {
    apiKey: 'ここにキーを書く',
    authDomain: 'プロジェクトのドメインを書く',
    databaseURL: 'https://プロジェクトのリンクを取ってくる.firebaseio.com',
    projectId: 'プロジェクトIDを引っ張ってくる',
    storageBucket: 'プロジェクトID.appspot.com',
    messagingSenderId: 'Firebaseから引っ張ってくる',
    appId: 'Firebaseから引っ張ってくる'
  }
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

// Your web app’s Firebase configuration以下を追加する。

この時apikeyや他のパラメーターはFirebase から引っ張ってくる。

次にindex.jsに行ってFirebaseを呼び出せるようにする。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Sample1 from '@/components/sample1'
import Sample2 from '@/components/sample2'
import Mainpage from '@/components/mainpage'
import Signup from '@/components/Signup'
import Signin from '@/components/Signin'
import posttopic from '@/components/posttopic'
import topics from '@/components/topics'
import thankyou from '@/components/thankyou'
import firebase from 'firebase' //これを書く

Vue.use(Router)

let router= new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
  ]
})

//これ以下を全て書く
router.beforeEach((to, from, next) => {
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  let currentUser = firebase.auth().currentUser
  if (requiresAuth) {
    // このルートはログインされているかどうか認証が必要です。
    // もしされていないならば、ログインページにリダイレクトします。
    if (!currentUser) {
      next({
        path: '/sample1',//ログインしていない場合のリダイレクト先を書く、正しく書かないと変な挙動になるので注意
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // next() を常に呼び出すようにしてください!
  }
})

export default router

これで、一旦準備は終わりです。

Firebaseのデーターベースに値を入力する

FireSotreに実際にデーターを入れて見ましょう。

今回は、実際に値をデーターベースに書き込み、読み込むだけのサンプルを作ります。

コードとしては以下のものになります。

(最新版でない可能性があるので、Githubを見ていただいた方が、確実です)

patariro1986/convi
Contribute to patariro1986/convi development by creating an account on GitHub.
<template>
  <div class="hello">
    <h1>DBに登録</h1>
    <h2></h2>
    <p>
      <textarea name="comment2" rows="10" cols="100" v-model="textInput"></textarea >
    </p>
    <p>
      <button v-on:click="Posttopic(textInput)">DBに登録</button>
    </p>
    <p>
      <button v-on:click="Loading">DB内容表示</button>
    </p>
    <ul>
      <li v-for="item in items" :key="item.value">{{item.text}}
      </li>
    </ul>

  </div>
</template>

<script>
import firebase from 'firebase'

export default {
  name: 'Page6',
  data () {
    return {
      Output:'',
      textInput: '',
      counter:0,
      items:[],
      textInput2:'',
    }
  },
   methods: {
    Posttopic: function (textInput){
       
        const colref = firebase.firestore().collection("context"); // "formcontent"という名前のコレクションへの参照を作成

        // addの引数に保存したいデータを渡す
        colref.add({
              contents: textInput,
          }).then(function (docRef) {
            // 正常にデータ保存できた時の処理
            console.log("Document written with ID: ", docRef.id);
        }).catch(function (error) {
            // エラー発生時の処理
            console.error("Error adding document: ", error);
        });
        
       },
    //Firebaseからデーターを読み込む
    Loading: function () {
    var pageNum='';
      const colref = firebase.firestore().collection("context"); // formcontentという名前のコレクションへの参照を作成
      // this.showMessage = true;
        //配列の初期化をおこなう
        this.items.length=0;
        //データの読み込み
        colref.get().then((snapShot) => {
          snapShot.forEach((doc) => {
          this.items.push({
            text: doc.data().contents,
            value:doc.id
          })
        })
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "../css/style.css";

</style>

ポイントとしてはimport firebase from ‘firebase’をちゃんと書いて、それを使って呼び出すことです。

DBに書き込まれるとFirebaseにきちんと反映されたことがわかります。

反映されない場合、Firebaseとの連携で失敗している可能性があります。

タイトルとURLをコピーしました