初めてのNuxt.jsで学んだことをまとめる

15989 ワード
CTO nuxt.js フロントエンド 用語 用語 テキストリンク

前提

知り合いにホームページ作成を任されたため、
Nuxt.jsについて学んでみた。

チュートリアルに使用したサイトは主に以下
https://www.boel.co.jp/tips/vol107/

用語

'ゲッター' and 'セッター'

ゲッターは、特定のプロパティの値を取得するメソッド
セッターは特定のプロパティの値を設定するメソッド

'computed'

算出プロパティ。メソッドと対をなしそう。
入力に対して、暫時的に呼び出される関数群
例えば電話番号入力に対するバリデーションなどに使われる。

この点はメソッドとほぼ同じだが、
computedはキャッシングが同時に行われるようで、
変数に変更がなければ、キャッシュが利用される。

また依存関係が明確で、指定した入力フォームでのみ機能するっぽい
methodはすべての入力フォームで機能する事例もあり。

ゲッター、セッターともに利用できる

けど、基本的にはゲッターだけを定義するっぽい。

呼び出し方もちがう。

var vm = new Vue({
  el: '#example',
  data: {
    firstNum:3,
    secondNum:4
  },
  computed: {
    // 算出 getter 関数
   resultNum: function () {
      // `this` は vm インスタンスを指します
      return this.firstNum * this.secondNum
    }
  }
})

を呼び出すのは

<p>{{ resultNum }}</p>

'methods'

メソッド
再描画のたびに呼び出される

セッター及び、他の関数を定義する模様。

methodsプロパティはv-onのハンドラ関数としても利用できる。

var vm = new Vue({
  el: '#example',
  data: {
    firstNum:3,
    secondNum:4
  },
  methods: {
    // 算出 getter 関数
   calcNum: function () {
      // `this` は vm インスタンスを指します
      return this.firstNum * this.secondNum
    }
  }
})

をよびだすのは

<p>{{ calcNum() }}</p>

となる。カッコの有無に気をつけよう。

よく出てくるthis

非常によく出てきて、なおかつ急すぎる

<script>に出てくるやつはdataと同義だと考えたが、
冷静になって考えてみると、JavaScript独特のやつだと気づく。
JSの文法事項をちゃんと学んでなかったことを自覚した

メソッド内

var myObj = {
    name: '太郎',
    myFunc: function() {

        //メソッドの中にthisを記述 
        console.log( this );
    
    }
}

この場合、thisはmyObjectを指す

コンストラクタ内


function Human( name, age ) {

    this.name = name;
    this.age = age;

}

var taro = new Human( '太郎', 30 );

console.log( taro );

この場合は、Humanであり、taroを指す。

HTML要素内にある

<body>
  <form>

      <!— onclick属性にthisを使ってinput要素そのものを参照する -->
      <input id="btn1" type="button" value="ボタン１" onclick="getFunc( this.id )" />
      <input id="btn2" type="button" value="ボタン２" onclick="getFunc( this.id )" />
  </form>

  <script>
      function getFunc( id ) {

          console.log( id );

      }
  </script>
</body>

このときはthisが要素内を指すため、btn1、btn2を示す。

export default内のthis

これを解決するのが非常に厄介であった。なぜなら、data{}内のプロパティがdefault.data.プロパティだと勘違いしていたからである。
しかし、実際はdataはいわば見出しのようなものなので、default.プロパティと書ける。

よって、

export default {
    data: function() {
      return {
        content:{},
        find_state: '',
        find_flg: false
      }
    },
    computed: {
      ...mapState(['todos']),
      display_todos: function() {
        if(this.find_flg) {
          var arr= [];
          var data = this.todos;
          data.forEach(element => {
            if(element.content.toLowerCase() == this.content.toLowerCase()) {
              arr.push(element);
            }
          });
          return arr;
        } else {
          return this.todos;
        }
      }
    }
}

の場合、再三出てくるthisは<template>のHTML要素など関係ない。defaultを指す。

ファイルの役割

pages/index.vue

ほぼ根幹。

<template>で囲んだ部分がレンダー前のHTML

<script>で囲んだ部分がjsで、
import
export default {
data
computed
methods}
等を書き込む

export default 内の変数や関数は、同ファイルのtemplateで使用可能
また、外部ファイルでもimportに記載してexportに放り投げると使用可能

なんて便利な。。。

<style>で囲んだ部分は主にCSS

store/index.js

Vuex.Storeに、コンポーネントを超えて使用したいグローバルなデータを保存する。
平たく言えば、index.vueで呼び出したい何かが入っている（リストや関数など）

const store = createStore({
  state: {
    count: 1
  },
  mutations: {
    increment (state, n) {
      // 状態を変更する
      state.count += n
    }
  }
})

pages/index.jsの<script>内で呼び出し可能。
...mapGetters(['insert']}
...mapActions
...mapState
のように宣言すると使える。他にもいろんな書き方があるようだ

ミューテーション

Storeのstateを唯一書き換えることができるのが、ミューテーション内の関数であるようだ。
以下のように呼び出す。

pages/index.vue
store.commit('increment', 10)

さらっと通り過ぎたが、ミューテーションの第二以降の引数をペイロードと呼ぶ。
これは、基本的にオブジェクトで渡すべきであるようだ。

store/index.js
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
pages/index.vue
store.commit('increment', {
  amount: 10
})

また、index.vueは以下のようにオブジェクトスタイルで書き得られるようだ

pages/index.vue
store.commit({
  type: 'increment',
  amount: 10
})

この場合、オブジェクト全体がペイロードらしい。

まとめ

今回初めてNuxt.jsを触ったが、reactよりも使いやすい気がした。まあreactにはreactの良さがあるのだが、、
次はNuxt.jsでホームページ的なものを書こうと思う。

また、Qiita投稿も初めてである。今まで、記事を書くのは時間の無駄な気がしてためらっていたが、なるほど、知識の整理がかなりはかどる。
加えて、マークダウン記法がかなり便利。さくさくかける。

よって、これからも書いていこうと思う。