Nuxt.jsの基本的な使い方【コードの読み方編】

プロローグ

Nuxt.jsを触り始めて三ヶ月弱くらいですが、
色々と使い方を覚えてきたので、メモとして記録を残します。

また、今書いているコードが先輩たちがつくりあげてきたおかげで便利にコードがかけるんだなと、調べていくうちにわかったりしたところがあったので、さらに理解を深めるために備忘録として残します。

不備不足だったり、理解が浅くて説明不足なところがあるかと思いますが、
勉強して更新していきたいとは思っています。

この記事で何ができるようになるか

今回は、Nuxt.jsを触り始めた頃右も左も分からず、全くコードが読めなかったときから、今は「ここがこうなってるからここが動いて・・・」とゆっくりながら順を追って読めるようになったので、その経験をもとにそれぞれのコードがなにをしているか解説していきます。結果として、Nuxt.jsが少し読めるようになるかと思います。

解説

Vueファイルは下記の３つの構成になっていて、それぞれ役割があります。

ブロック	用途
< template >	HTML
< script >	JavaScript
< style >	CSS

それぞれの関数に関して詳しくは調べていただければと思います。
あくまでも読み方がわかるようになるを重点にコメントにて解説を書いていきます。

hello.vue

//ここがHTML部分で、どのように表示したいか書きます。
<template>
 <div>
  <p>{{ name }}</p>
  <!-- 上記に関しては下記の[詳しい解説]にて説明します。 -->
  <button @click="console">コンソールを開いて確認しよう</button>
  <!-- ボタンを設置した際に、そのボタンがクリックされた時、consoleというメソッドが実行されます。 -->
  <!-- どのような内容が実行されるのかは、scriptブロックに記載します。 -->
 </div>
</template>
//ここまで


//ここがJavaScript部分で、どのように動かしたいかを書きます。
<script>
export default {
  data () {
    return {
      name: "チューリップ" //下記の[詳しい解説]にて説明します。
    }
  },
  watch: { 
   //watchプロパティというもので、データなどの変化を監視するものです。
  },
  mounted() {
   //初期化の中の決められたタイミングで実行される関数です。ここに記載したメソッドは最初に実行されます。
  },
  methods: { //ここにメソッドを書いていきます。
　　console()　//templateのbutton @click="console"で書いたメソッドです。
   {
     console.log("ボタンがクリックされたよ")
   }
   //上記のように、console(){}内に実行したい内容を書くことで、
 　//templateで書いたボタンがクリックされたときに、console(){}内の処理が実行されます。
  //上記だと、開発ツールを開いてボタンをクリックすれば「ボタンがクリックされたよ」とconsole上で表示されるかと思います。
  }
}
</script>
//ここまで

//ここがcss部分で、どのようなレイアウトデザインにしたいか書きます。
<style lang="scss">
p {
  text-align: center;
  font-size: 20px;
  color: red;
}
</style>
//ここまで

詳しい解説

<p>{{ name }}</p>で何を行っているのかというと、scriptブロックのdataにあるnameを読み取って、「チューリップ」と出力させています。

Vue.jsなどのドキュメントや初心者用の教材を見たとき、それなら直接<p>チューリップ</p>と書けばいいのに、なんでそんな回りくどいやり方をするんだろうなんて思っていました。

しかし、<p>チューリップ</p>だけ出力させたいならそれでもいいものの、ログインするユーザーに合わせて<p>ひまわり</p>や<p>あじさい</p>など出力したい場合はどうすればいいのでしょう？

そのときに、dataにあるnameにそれぞれの花の名前が入ったデータを格納してれば、<p>{{ name }}</p>とするだけで、データに保存してある名前を出力させることができます。

また、一覧としてチューリップ・ひまわり・あじさい・・・などと表示することもできます。便利ですね。

じゃあどうやって、dataにデータを格納するのか、どうやって一覧にデータ一覧を表示させるのかは別の記事で書こうと思います。

今の段階では、name: "チューリップ"としているので、<p>{{ name }}</p>とすると「チューリップ」が表示されますが、dataをうまく使うことで自由に表示することができます。

{{}}は、マスタッシュ構文というようで検索すると詳しい解説がありますので、ぜひ読んでみてください。

おわりに

壊滅的にNuxt.jsができなかったので、templateとscriptの関係性さえわかっていない状態でした。
しかし、templateで書いたものがどのようにscriptで動いているのかがわかれば、あとは関数やメソッドなどを理解できればある程度動くものがつくれるようになるんじゃないかと思います。
さらに、dataの使い方がわかれば、表示させたいデータや保存したいデータを自由自在に使えるのでよりよいアプリケーションが作れるようになるかと思います。