kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

Vue School の無料コース「Nuxt.js Fundamentals」を受講して 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