Nuxt.jsとは？超シンプルなTODOアプリを作りながらサクッと理解しよう！【メチャクチャ簡単です】

2021 12/03

こんにちは。takabeeです。

今回はNuxt.jsをTODOアプリを作りながらサクッと理解してしまおう、という記事です。

この記事を見てくれている方は、

Nuxt.jsを使ってみたいけど、あんまりよく分からない。
実際に作りながら学んでみたいな。

という方が多いと思います。

はい。こちらの記事ではその悩みをバッチリ解決します。

この記事ではそもそもNuxt.jsとは？という基本的なことから、実際にNuxt.jsでTodoアプリを作るという実践まで全てできます。

画像を使って分かりやすく解説していくので、はじめの方だけ見るだけでも結構役に立つと思います。

ではご覧ください。

ネコ大先生

この記事は【約10分】で読めるニャ。

Nuxt.jsとは？

結論から言うと、Nuxt.jsはJavaScriptのフレームワークの一つです。フレームワークというのは、開発をしやすくする道具だととらえてもらって構いません。ちなみに読み方は「ナクストジェイエス」です。

例えばいま、JavaScriptを使ってなにかを開発していくとき、イチから全部コーディングしていくのは結構大変です。そこでフレームワークを使うと、メチャクチャ簡単に開発を進めていくことができます。

その一つがNuxt.jsです。あとでTODOアプリを作るときに、その威力を体感してください。

Nuxt.jsのほかに、Vue.jsというフレームワークがあり、Nuxt.jsはVue.jsの弱点を補う形で開発されました。なので、JavaScript→Vue.js→Nuxt.jsという順番で勉強することをおすすめします。

勉強法は記事にまとめてみたので、やる気のある方は実践してみてください。

Nuxt.jsでTODOアプリを作ってみよう！

では実際にNuxt.jsでTODOアプリを作っていきます。

手順としてはこんな感じです。

【STEP1】環境構築をしよう！
【STEP2】TODO入力画面を作ろう！
【STEP3】TODOを追加しよう！
【STEP4】TODOを削除しよう！

ではさっそく【STEP1】環境構築をしよう！から始めていきます。

【STEP1】環境構築をしよう！

環境構築で必要なのは、

・エディタ
・Node.js

の二つです。エディタはなんでもいいですが、僕はVisual Studio Code（以下VSCode）を使っていきます。

Nuxt.jsに興味を持つ方はおそらく自前のエディタを持っていると思うので、それを使っていただいて構いません。

VSCodeとNode.jsのインストール方法については、以下の記事で詳しく解説しました。画像をふんだんに使っているのでぜひ参考にしてみてください。

TakabeeBlog

404: ページが見つかりませんでした | TakabeeBlog

VSCodeとNode.jsがインストール出来たら、プロジェクトを作成していきます。

npm init nuxt-app <好きなプロジェクト名>

とターミナルに打てば、Nuxt.jsでは簡単にプロジェクトを作成できます。ちなみに僕は、今回のプロジェクト名はtodo-appとしておきました。

いろいろ聞かれますが、UI frameworkはBootstrap Vueを選択してください。あとはすべてデフォルトでOKです。

全て聞き終わったら、インストールが開始し、終わると実際にプロジェクトが作られています。cdコマンドで作ったプロジェクトに移動しましょう。

これで環境構築が完了です！

【STEP2】TODO入力画面を作ろう！

つづいて入力画面を作っていきます。

こちらは簡単ですね。HTMLを使ってそれっぽく画面を作ればいいだけです。

pagesフォルダのindex.vueの中身を全部削除して、以下のコードを丸々コピペしてください。デザインはBootstrapで整えています。

<template>
  <div class="container">
    <form class="row">
      <div class="form-group col-6 offset-3">
        <h2 for="inputTodo">TODO</h2>
        <input
          type="text"
          class="form-control"
          id="inputTodo"
          placeholder="TODOを入力..."
        />
      </div>
      <button type="submit" class=" col-6 offset-3 btn btn-primary btn-block">TODOを追加する</button>
    </form>
  </div>
</template>

もちろん自分で書いても、なんの問題もありません。自分の好きなデザインにしましょう！

ターミナルで

npm run dev

と打ち、ローカルサーバーを立ち上げたあと、リンクを[Ctrl]+クリックしてlocalhost:3000にアクセスします。

こんな感じのデザインです。

あんまりイケてるデザインじゃないな。。。

【STEP3】TODOを追加しよう！

ここが一番難しいです。文章だけで説明するのが結構難しかったので、一番始めにいまから説明する全体の流れを示します。

一通り説明し終わったらまた確認するので、今はさらっと眺めてください。

TODOを表示させるには、僕たちが入力したTODOを保存しておく場所が必要です。そのデータの保存を担っているのがVuexです。

なのでVuexを使っていくんですが、まずはpages/index.vueに戻って、TODOを入力したときにデータを受け取れるようにします。

v-model=”todoInput”とすると、todoInputに入力した内容が入ります。デフォルトでは空文字です。

つぎにクリックしたときに、入力したTODOを追加するaddTodoFromPageメソッドが発火するようにしましょう。そのためにはまず、form要素に@submit.prevent=”addTodoFromPage”を追加します。

「@submit」はフォームが送信されたときの動作を定義できます。なので

@submit=”addTodoFromPage”

とすると、フォームが送信されたら、addTodoFromPageメソッドを実行しますよー、てことです。

「.prevent」はフォームがデフォルトで画面遷移してしまうのを防ぎます。つまりつけないとどっか意味わからんページに飛んでいき、addTodoFromPageメソッドが実行できなくなります。

じゃあaddTodoFromPageメソッドはどこに書くのかというと、methodsの中に書きます。

これでボタンをクリックしたときにaddTodoFromPageメソッドが発火します。

ここで気になるのは、「this」と「dispatch」ですね。

data内にある値（今回はtodoInputのこと）を同じ<script>内で使うときには、thisをつける決まりです。（よくつけるの忘れます。。。）

dispatchはVuexのactionsに渡すメソッド名と引数を書いています。

あとから詳しく説明するので、いったん今は、VuexのactionsのaddTodoFromActionsというところに、入力したtodoInputの値が渡されるんだな、とふわっと覚えておいてください。

最後に

this.todoInput = ” “;

で入力フォームを空に戻しています。

次にstoreフォルダの中に、index.jsファイルを作ってください。

これがVuexです。その中にこのコードを書きます。コピペでOKです。

import Vuex from "vuex";

const createStore = () => {
  return new Vuex.Store({
    state: {},
    getters: {},
    mutations: {},
    actions: {}
 });
};
export default createStore;

state, getters, mutatioins, actionsという4つの項目がありますね。それぞれ

state：保存するデータの定義
getters：データの取得
mutatioins：データの変更
actions：具体的なデータ処理

を記述する場所です。

使っていけばすぐ分かりますから、まず完成コードを自分で書いてみましょう。

何をしているかというと、

・stateに保存したいデータのtodos配列を書く

・gettersにtodos配列を返す処理を書く（あとでtodos配列を取得するときに使います）

・todos配列を変更する関数をmutationsに書く（今回はtodosにtodoを追加する関数）

・actionsで実際のtodos配列に新規todoの追加する処理を書く（todos配列に新規todoを追加する際に、mutationsのaddTodoFromMutationsを呼び出します）

といったことをしています。

addTodoFromActionsの中の

commit(“addTodoFromMutations”)

というのはmutationsのaddTodoFromMutationsを呼び出す合図です。

最後にpages/index.vueに戻り、stateの変化を察知するcomputedを追加します。ここでgettersのgetTodosでtodos配列を取得しています。

computedは対象の値（今回はtodos配列）が変化したらすぐ反映されるので、todos配列にtodoが追加されたらすぐに反映されます。

最後に実際に受け取ったtodos配列を画面に表示していきましょう。

v-forというVue.jsとNuxt.jsに特殊なタグを使い、getTodosで受け取ったtodos配列の要素1個1個に対して処理を書きます。

「:key」というのが気になりますが、これは配列の中身を区別するために書くお決まりだと解釈してください。

これで完成です。こんな動作になります。

全体の流れをおさらいしましょう。

①まずpages/index.vueでボタンをクリックしたら、addTodoFromPageメソッドが発火します。
②addTodoFromPageメソッドの中で、dispatch(“addTodoFromActions”)として、入力データtodoInputを引数に、actionsのaddTodoFromActionsに処理を移しています。
③, ④addTodoFromActionsでは、mutationsのaddTodoFromMutationsを使ってstateのtodos配列にデータを追加しています。
⑤stateが変更されたので、pages/index.vueのcomputed内で、getters.getTodosでtodos配列を受け取っています。
⑥todos配列を実際に表示しています。

初めてやるとまず理解できないと思います。僕は要領が悪かったので、理解するのに1週間くらいかかりました。（要領悪すぎい！）。

一回で理解できない方は、思考停止で5回繰り返しやってください。急に流れが分かる瞬間がきます。

【STEP4】TODOを削除しよう！

これから削除機能を作っていきます。

まずpages/index.vueを作っていきます。

<template>
  <div class="container">
    <form @submit.prevent="addTodoFromPage" class="row">
      <div class="form-group col-6 offset-3">
      <h2 for="inputTodo">TODOLIST</h2>
      <ul>
         <li v-for="(todo, index) in getTodos" :key="index">
         {{ todo }}
         <button @click="deleteTodo(index)">
           削除する
         </button>
         </li>
      </ul>
      <input
         v-model="todoInput"
         type="text"
         class="form-control"
         id="inputTodo"
         placeholder="TODOを入力..."
       />
    </div>
    <button type="submit" class=" col-6 offset-3 is-style-btn_normal btn-primary btn-block">
      TODOを追加する
    </button>
    </form>
</div>
</template>

<script>
  export default {
    data() {
      return {
        todoInput: ""
      };
    },

    computed: {
      getTodos() {
         return this.$store.getters.getTodos;
      }
    },

  methods: {
    addTodoFromPage() {
    this.$store.dispatch("addTodoFromActions", this.todoInput);
    this.todoInput = "";
  },

    deleteTodo(index) {
      this.$store.dispatch("deleteTodo", index);
    }
  }
};
</script>

pages/index.vueに削除ボタンを作成し、

@click=”deleteTodo(index)”

として、ボタンを押したときにdeleteTodoメソッドが発火するようにしています。

store/index.jsのdeleteTodoメソッドに処理が移るので、実際にtodoを削除する処理を書いていきましょう。

import Vuex from "vuex";

const createStore = () => {
  return new Vuex.Store({
    state: {
    //保存するデータであるtodos配列の定義しています。
      todos: []
    },

    getters: {
      //todos配列を取得するときにgetters.getTodosで取得できます。
      getTodos: state => state.todos
    },

    mutations: {
      //todos配列に受け取ったtodoの追加する関数の定義をしています。
      addTodoFromMutations(state, todo) {
        state.todos.push(todo);
      },

      deleteTodo(state, index) {
        //splice(index, 1)で(index)番目の要素を1つ削除しています。
        state.todos.splice(index, 1);
      }
    },

    actions: {
      //実際にtodos配列にtodoの追加を行っています。
      addTodoFromActions({ commit }, todoInput) {
        commit("addTodoFromMutations", todoInput);
      },

      //todos配列から要素を削除しています。
      deleteTodo({ commit }, todoIndex) {
        commit('deleteTodo', todoIndex)
     }
   }
  });
};

export default createStore;

これでしっかり削除ボタンをクリックしたら、該当のtodoが削除できました。