kakakakakku blog

Weekly Tech Blog: Keep on Learning!

Vue School の無料コース「Nuxt.js Fundamentals」を受講して Nuxt.js の基礎を学んだ

Vue.js Nuxt.js

Vue School で今月から提供されている最新の無料コース「Nuxt.js Fundamentals」をさっそく受講した．最近よく聞くようになった Nuxt.js をまだ試したことがなく気になっていて，タイミングも良かった！今まで Vue School で「Vuex for Everyone」と「Vue.js + Firebase Realtime Database」と「Vue.js + Firebase Realtime Database」を受講して，素晴らしく体験が良く，今回もオススメできる内容だった！

vueschool.io

Nuxt.js Fundamentals

コースは計14個の動画で構成されている．動画を見るだけなら35分で見れるし，動画を見ながら写経をするとしても，2時間あれば終わる．Nuxt.js とは何か？を速習するのに最高なコースと言える．

  • 1 : Introduction to Nuxt.js
    • What is Nuxt.js? ⏲ 3:45
    • Create Nuxt App ⏲ 1:38
    • Guided Nuxt.js Project Tour ⏲ 2:02
  • 2 : Working with Nuxt.js
    • Customize the home page ⏲ 0:56
    • Create Application Pages ⏲ 2:59
    • Global CSS ⏲ 2:31
    • Adding a Navbar to Nuxt Apps ⏲ 1:29
    • Dynamic Routes ⏲ 1:53
    • Linking Between Pages ⏲ 2:37
    • Utilising the Vuex Store ⏲ 4:13
    • SEO and Meta Tags ⏲ 3:14
  • 3 : Build & Deploy
    • Build and Serve the Nuxt.js App ⏲ 0:49
    • Deploy Nuxt.js App to Heroku ⏲ 3:47
    • Deploy Nuxt.js App to Netlify ⏲ 3:54

以下のように英語字幕が出るので，英語が苦手な人でも，問題なく受講できると思う．前回とまた少しデザインが変わっていた．

f:id:kakku22:20181121233026p:plain

（受講画面例）

github.com/vueschool/nuxt-fundamentals

Vue.js 部分を写経するとして，スタイルやスタブデータなどは写経する意味があまりなく，Vue School の GitHub リポジトリからコピーした．動画ごとにコミットされていて，助かる！

github.com

1 : Introduction to Nuxt.js

What is Nuxt.js?

  • Nuxt.js = Vue.js フレームワーク
  • Server-Side Rendering
    • SEO 対策
    • meta タグ
  • Static Generated (Pre Rendering)
  • Automatic Code Splitting

nuxtjs.org

Create Nuxt App

yarn で Nuxt.js プロジェクトを作成する．

$ yarn create nuxt-app nuxt-fundamentals
yarn create v1.9.4
（中略）
? Project name nuxt-fundamentals
? Project description My tiptop Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module no
? Use eslint no
? Use prettier no
? Author name kakakakakku
? Choose a package manager yarn

$ cd nuxt-fundamentals
$ yarn dev

yarn dev でローカルサーバを起動すると http://localhost:3000 にアクセスできるようになる．

f:id:kakku22:20181121233122p:plain

インストール方法の詳細はドキュメントに書いてある．

nuxtjs.org

Guided Nuxt.js Project Tour

Nuxt.js プロジェクト階層を確認した．以下は tree コマンドで第一階層を出力している．

$ tree -L 1 .
.
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package.json
├── pages
├── plugins
├── static
├── store
└── yarn.lock

2 : Working with Nuxt.js

Customize the home page

まず Nuxt.js のロゴを Vue School のログに変更した．

f:id:kakku22:20181121233140p:plain

Create Application Pages

Nuxt.js には最初から router が入っているため pages ディレクトリにファイルを追加すると，すぐアクセスできるようになる．今回は http://localhost:3000/post にアクセスできるように pages/post.vue を追加した．

f:id:kakku22:20181121233203p:plain

Global CSS

共通となる CSS を assets/style.css に作成し，Nuxt.js の設定ファイルとなる nuxt.config.js に以下のような設定を追加した．

module.exports = {
（中略）
  /*
  ** Global CSS
  */
  css: [
    '~/assets/style.css'
  ],
（中略）
}

nuxtjs.org

Adding a Navbar to Nuxt Apps

次にナビバーコンポーネントを追加する．このあたりは普通に Vue.js を実装するのと同じだった．

<template>
  <nav class="nav">
    <div class="logo">
      <a href="#" class="logo text-lg">
        Nuxt Fundamentals
      </a>

      <span class="subheader">A Vue School course</span>
    </div>
  </nav>
</template>

f:id:kakku22:20181121233242p:plain

Dynamic Routes

Nuxt.js の router 機能を使って http://localhost:3000/posts/${id} という URL にアクセスできるようにした．具体的にはスタブデータの関係上，以下の 3 URL にアクセスできる．

  • http://localhost:3000/posts/balut
  • http://localhost:3000/posts/whereIsIt
  • http://localhost:3000/posts/how

f:id:kakku22:20181121233315p:plain

Linking Between Pages

リンクを nuxt-link コンポーネントにリファクタリングして，SPA として画面遷移ができるようになった．

<template>
  <div class="container">
    （中略）
    <aside>
      <h3>Posts you might enjoy</h3>
      <ul>
        <li v-for="related in relatedPosts">
          <nuxt-link :to="{name: 'posts-id', params: {id: related.id}}">
            {{related.title}}
          </nuxt-link>
        </li>
      </ul>
    </aside>
  </div>
</template>

リンク一覧を返すメソッドでは，自分自身を filter で除外する実装になっている．

computed: {
  （中略）
  relatedPosts () {
    return this.posts.filter(post => post.id !== this.id)
  }
}

右側にリンク一覧を追加できた．

f:id:kakku22:20181121233352p:plain

nuxtjs.org

Utilising the Vuex Store

スタブデータを Vuex を使ってリファクタリングした．さらにトップページにもリンク一覧を追加した．

f:id:kakku22:20181121233626p:plain

nuxtjs.org

SEO and Meta Tags

Nuxt.js には指定した meta タグを生成する機能がある．例えば，以下のように index.vue に実装した．

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  },
  head () {
    return {
      title: 'Home Page 🍕',
      meta: [
        { name: 'twitter:title', content: 'Nuxt Fundamentals by Vue School'},
        { name: 'twitter:description', content: 'Nuxt + Vue School = 🍕'},
        { name: 'twitter:image', content: 'https://i.imgur.com/UYP2umJ.png'},
        { name: 'twitter:card', content: 'summary_large_image'}
      ]
    }
  },
  computed: {
    posts () {
      return this.$store.state.posts.all
    }
  }
}
</script>

nuxtjs.org

3 : Build & Deploy

Build and Serve the Nuxt.js App

最後は yarn build で，本番環境用に minify する．

$ yarn build
$ yarn start

Deploy Nuxt.js App to Heroku

完成した Nuxt.js プロジェクトを Heroku にデプロイする．特にハマるところはなく，通常通り Heroku に push する．

$ heroku git:remote -a xxx
$ git push heroku master

f:id:kakku22:20181121233654p:plain

nuxtjs.org

Deploy Nuxt.js App to Netlify

さらに Heroku だけではなく Netlify にもデプロイする．Netlify は静的ファイルを配信するため，今回は Netlify 側で yarn generate を実行し，生成された /dist ディレクトリを配信できるようにした．

$ yarn generate

f:id:kakku22:20181121233709p:plain

nuxtjs.org

まとめ

  • Vue School が公開している無料コース「Nuxt.js Fundamentals」を受講した
  • Nuxt.js で簡単なアプリケーションを実装して，Nuxt.js の基礎を学ぶことができた
  • ローカルサーバだけではなく，Heroku と Netlify にデプロイする手順も学ぶことができた
  • 今回の写経結果は GitHub に push してある

github.com

Vue School 受講履歴

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com