クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【Vue.js】Nuxt.jsのプロジェクトファイルを見てみる

Vue.jsの続きです。前回はNuxt.jsのプロジェクトを作成しました。今回はそのプロジェクトファイルの中身を見てみる。それではいきましょう!

【目次】

※参考:前回の記事
【Vue.js】Nuxt.jsのプロジェクトを作成する - クモのようにコツコツと

※参考:Vue.jsの習得のためにやったことまとめ
qiita.com

プロジェクトの起動

前回のあとにプロジェクトファイルやターミナルを閉じているので、再度ターミナルを立ち上げてプロジェクトを起動する。

デスクトップに移動

$ cd DeskTop

プロジェクトがあるフォルダに移動

$ cd (実行するフォルダ名)

プロジェクトのフォルダ(今回はnuxt_app)に移動

$ cd nuxt_app

プロジェクトの起動

$ npm run dev

立ち上がった! f:id:idr_zz:20191101062005j:plain

トップページのコードがどうなっているか確認

Nuxt.jsプロジェクトのファイル構成はこうなっている。

f:id:idr_zz:20191101062213j:plain

いっぱいあってよくわからない。また書籍「Vue.js & Nuxt.js超入門」を参考に進めてみる。

Vue.js & Nuxt.js超入門

Vue.js & Nuxt.js超入門

プロジェクトを起動したときに表示されるトップページ画面に相当するファイルはどれに当たるのか。どうやら1つではなく複数のファイルが組み合わさってできているようだ。以下の3つ。

  • layouts/default.vue:画面の基本レイアウト(ここに各ページのコンテンツが読み込まれる)
  • pages/index.vue:トップページのコンテンツ部分
  • components/logo.vue:ロゴ部分のコンポーネント(部品)

順番に見ていく。

layouts/default.vueの中身

layoutsフォルダの中身。

f:id:idr_zz:20191112045443j:plain

default.vueとREADME.mdがある。default.vueを見てみる。

<template>
  <div>
    <nuxt />
  </div>
</template>

<style>
 /*(中略)*/
</style>
  • templateタグの中にdivタグがある
  • divタグの中にnuxtタグがある
  • styleタグの中にCSS設定が書かれている

とてもシンプルな構成。以前の記事にも書いたようにhtmlファイルじゃなくてvueファイルの場合はhtmlタグやheadbodyタグなどは不要でいきなりtemplateタグから書く。

※参考:【Vue.js】Nuxt.jsをインストールして簡易ページを作成した - クモのようにコツコツと

中身はdivタグとnuxtタグしかない。nuxtタグはNuxt.jsの独自のコンポーネントで、空要素(単独のタグ)になっている。空要素の中にスラッシュ/があるのはXHTML時代を思い出す書き方。

これがデフォルトページの雛形で、ここに各ページのコンテンツ部分が読み込まれる。では、トップページのコンテンツはどこにあるか。

pages/index.vueの中身

トップページ のコンテンツはpagesフォルダの中にある。フォルダの中身。

f:id:idr_zz:20191112050323j:plain

index.vueとREADME.mdがある。まだトップページしかないということか。トップページのファイル名が「index」なこととURL上でファイル名を省略しても表示されることはHTMLファイルと共通している。

index.vueの中身を見る。

<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        nuxt_app
      </h1>
      <h2 class="subtitle">
        My wicked Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green"
        >
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

<script>
 /*(中略)*/
</script>

<style>
 /*(中略)*/
</style>
  • templateタグの中に. container
  • logoタグはNuxt.jsの独自のコンポーネント
  • scriptタグにモジュール設定が書かれている
  • styleタグの中にトップページ固有のCSS設定が書かれている

scriptタグの中身

 /*(中略)*/
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  }
}
  • importでlogoのモジュールを読み込み
  • export defaultcomponentsLogoコンポーネントを登録

はい、でましたモジュール!これを理解するために前回の記事でモジュールに触れた。

※参考:【JS】モジュール(import / export)でどんなことができるのか事始めてみた - クモのようにコツコツと

importでモジュールを読み込み。前回はjsファイルを読み込んだが今回はvueファイルを読み込んでいる。

export defaultはモジュール内で名前がなくても読み込み側で名前をつけれる仕組みだったが、ここでは名前をつけずに無名のまま処理を行っている。

ロゴのモジュールの元はどこにあるか。importfromを見ると~/components/Logo.vueにあると。

components/logo.vueの中身

では、ロゴの中身を見ていく。componentsフォルダの中身。

f:id:idr_zz:20191112052102j:plain

Logo.vueとREADME.mdがある。コンポーネンツも初期状態ではロゴの部品しかないということか。

Logo.vueの中を見てみる。

<template>
  <div class="VueToNuxtLogo">
    <div class="Triangle Triangle--two" />
    <div class="Triangle Triangle--one" />
    <div class="Triangle Triangle--three" />
    <div class="Triangle Triangle--four" />
  </div>
</template>

<style>
/* 中略 */ 
</style>
  • templateタグの中に.VueToNuxtLogoタグ
  • .VueToNuxtLogoタグの中. Triangleタグが4つ
  • .TriangleタグにはそれぞれTriangle--twoTriangle--oneTriangle--threeTriangle--fourと固有のクラス名
  • styleタグにロゴのスタイル設定がある

こちらもタグの構成はシンプル。templateの中にロゴの4つの部品が入っている。このロゴはページを開いたときにVue.jsのロゴからNuxt.jsのロゴに変形する三角形たち。

変形するロゴのアニメ設定はCSSに書かれている。

.VueToNuxtLogo {
  /* 中略 */
  animation: turn 2s linear forwards 1s;
  /* 中略 */
}

.Triangle {
  /* 中略 */
}

.Triangle--one {
  /* 中略 */
}

.Triangle--two {
  /* 中略 */
  animation: goright 0.5s linear forwards 3.5s;
  /* 中略 */
}

.Triangle--three {
  /* 中略 */
  animation: goright 0.5s linear forwards 3.5s;
  /* 中略 */
}

.Triangle--four {
  /* 中略 */
 animation: godown 0.5s linear forwards 3s;
  /* 中略 */
}

@keyframes turn {
  100% {
    transform: rotateX(0deg);
  }
}

@keyframes godown {
  100% {
    top: 180px;
  }
}

@keyframes goright {
  100% {
    left: 70px;
  }
}
  • .VueToNuxtLogoはキーフレームturnのアニメ設定を実行
  • .Triangle--two.Triangle--threeはキーフレームgorightのアニメ設定を実行
  • .Triangle--fourはキーフレームgodownのアニメ設定を実行
  • キーフレームturnは回転、godownは下に移動、gorightは右に移動

実際の動きが想像付きやすいキーフレーム名が付けられている。

index.vueを打ち替えてみる

index.vueを打ち替えて、挙動を確かめる。

<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        nuxt_appへようこそ!
      </h1>
      <h2 class="subtitle">
        私の邪悪なNuxt.jsプロジェクト
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green"
        >
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

テキストをちょっと日本語にしてみた。「My wicked」がGoogle翻訳では「私の邪悪な」と訳された。邪悪?なぜ?

さあ、画面がどうなるか?

f:id:idr_zz:20191112055318j:plain

おお、日本語になった!ということでindex.vueが間違いなくトップページのコンテンツだとわかった!

最後に

今回、プロジェクトのトップページの中身を見て行きました。プロジェクトの初期状態ではトップページ以外のコンテンツは作られていないことがわかりました。次回は他のページを追加してみたく思います。それではまた!