Nuxt.jsの基本と学習メモ

はじめに

Nuxt.jsにチャレンジしてみたので、基本なり調べたことをまとめていこうと思います。(備忘録)

以下で記載していたNuxt.js & Contentfulでハイスペックなポートフォリオサイトを超簡単に公開しよう!【JAMstack】 に挑戦もしています。

【Vue.js】基本のおさらいと教材まとめ

✅参考
Nuxt.jsビギナーズガイド
firebaseの実装はaxiosでやってる。※CRUD全て実装はしてない。泣
デプロイやテストまで幅広く記載されている良書です。

Nuxt.jsの基本

✅導入メリット

・SSR基盤の提供(自動的なルーティング、プリコンパイル)
・ミドルウェア、asyncDataなどの拡張システム
・SEO対策
・Scoped CSS

👇以下主観

・Vue Routerが不要。<nuxt-link>タグの活用。
・Vuexのモジュールモード活用によるオートローディング機能(クラシックモード※通常仕様と切替可能)

参考:Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発

✅プロジェクト作成

npmの場合

npx create-nuxt-app プロジェクト名 // 本格的にアプリケーション開発をする場合はこちら推奨(教本)
npm run dev # サーバー起動

npmの別パターン(教本参考)

vue init nuxt-community/starter-template プロジェクト名 // BabelとESLintのみのシンプルなテンプレート
npm i
npm run dev

yarnの場合

npm i -g yarn # yarnのインストール
vue init nuxt-community/starter-template(テンプレート名) プロジェクト名
yarn # パッケージのインストール
yarn dev # サーバー起動

追記:Nuxt.jsのChoose UI frameworkに以前使ったVuesaxがあって感動しました。

※以下を選択するとプロジェクト直下にjsconfig.jsonができる。どうやらVS code環境下でJavaScriptのバージョン指定やらいろいろオプションを加えてくれるっぽい。
参考:VS CodeでJavaScriptアプリを作成する上で知っていると便利(?)なこと (1/3)

Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
( ) jsconfig.json (Recommended for VS Code)

✅構成

layoutsディレクトリ
ページ共通の要素をここに追加する。

pagesディレクトリ
ルーティングに対応したコンポーネントを管理するディレクトリ。
ここに存在するVueファイルがファイル名そのままにルーティングとなる。pages/index.vueがホームディレクトリ。

assetsディレクトリ
画像など静的リソースを格納

componentsディレクトリ
Vue CLIと使い方は同じ。Vueコンポーネントを管理するディレクトリ。

staticディレクトリ
そのまま公開されてほしい静的リソースを管理するディレクトリ。favicon.icoなど。

storeディレクトリ
Vuexストアを管理するディレクトリ。

pluginsディレクトリ
プラグインに1つの関数を持たせて、その関数の引数としてプラグインのインスタンス変数が格納されている。
関数をエクスポートすることによって、Nuxt.js全体へインジェクションを行うことができる。

nuxt.config.js
HTMLメタを変更可能。head()メソッドと組み合わせてタイトルの設定ができたりする。

✅ルーティング方法(Vue.jsと異なる点)

Vue CLI&Vue Routerではindex.jsにルーティングの設定を記載しなければいけないが、
Nuxt.jsではpagesフォルダ内にファイルを作成することで、自動的にルーティングの設定を行ってくれる。
またposts/:idのような動的なルーティングはpostsディレクトリと接頭辞に_を付けて_id.vueファイルを作成することで実現できる。

pages/posts/_id.vue

上記のような構成でファイルを作成することで、ドメイン名/posts/スラッグ名(ページや記事を指定するURL)でアクセスがあった際に_id.vueの内容が表示される。
また、<nuxt-link>という特別なタグを用いてリンクを追加する。

✅API連携

axios-moduleの導入

yarn add @nuxtjs/axios

nuxt.config.js(nuxtの設定ファイル)に追記。

modules: [
    '@nuxtjs/axios'
  ],
  axios: {
},

✅asyncData関数

Nuxt.jsが独自に実装したVueコンポーネントのdata関数の拡張。非同期処理を実行しSSRするための関数。コンポーネントの初期化前に行われる。
mountedフックだと、Vueコンポーネントの生成後、コンポーネントがブラウザ上で動作しだすときに利用されるフックのため、SSRが適切に行われない。
※asyncは非同期処理を実行できる関数を定義できる。

レンダリング・・・一つのWebページに含まれる、HTMLCSSなどによる描画内容の記述、スクリプトによる動作の記述、画像ファイルやフォントファイルなど外部のデータなどを組み合わせ、Webブラウザのウィンドウ内にページ内容の描画を行うこと (参考:e-Words)

✅ミドルウェア

ミドルウェアはmiddlewareディレクトリにファイルを作成することで機能。ページ遷移の際、最初に読み込まれて認証認可の処理を行うことが可能。
universal-cookieなどのライブラリを用いて実装する。

✅デプロイ方法

ビルド

$ npm run generate # 静的ファイルを生成。distディレクトリをアップロードすればOK。

どうやら様々なデプロイ方法があるらしい。
また、$ npm run generateでデプロイした際、動的なルーティングに対応できないらしい。
HerokuなどNode.jsを使用できるPaaSにデプロイすれば動的ルーティングに対応できるとのこと。
私含めXserverで運用&Nuxt初心者は、まず動的ルートなしでのアプリ制作をするのがいいのかもしれない。(Vue CLI&Vue Routerで事足りる。。。)

以下、公式ドキュメント参考。
https://ja.nuxtjs.org/api/configuration-generate/#routes

ちなみにこちらは、デプロイ用かと思いきやプロダクション環境でのサーバー起動ができるコマンドらしい。(Vue.jsのコマンドとは同義じゃないのね。)

$ npm run build
$ npm run start

✅補足:動的ルーティングのデプロイ
Nuxt.jsのgenerateプロパティに動的なルーティングを追加する
Nuxt.jsの動的ルーティングをNetlifyで行う方法(静的でSPA)
以上の記事を読んだところ、Contentfulにデータを追加した時点でページが自動更新&URLが自動生成されるわけではなく、毎回generateコマンドを打たないと生成されなそう。

✅デプロイ先
徹底比較!Firebase vs Netlify (2018年版)
データベース使うならFirebase、データベース使わないならNetlify。シンプルですね!!

教材メモ Nuxt.js & Contentfulでハイスペックなポートフォリオサイトを超簡単に公開しよう!【JAMstack】

✅所感
Twaiwindを使うが、個人的に使うとしたらVuesaxやVuetifyを選びたいなと思いました。

✅学習したことまとめ

markdown-it

インストール

$ npm install @nuxtjs/markdownit --save

使い方。以下で、マークダウン形式のデータをHTML形式に変換してv-htmlに渡す。

<div v-html="$md.render(work.fields.content)"></div>

font awesome

インストール

$ npm install nuxt-fontawesome --save
$ npm install @fortawesome/free-solid-svg-icons --save
$ npm install @fortawesome/free-brands-svg-icons --save

plugins/配下にfont-awesome.jsを作成し編集。(ここは教材を参考にしてください。)

import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faPlus)
library.add(faTwitter, faGithub)

Vue.component('fa-icon', FontAwesomeIcon)
Vue.config.productionTip = false

ツールをインストールした際はnuxt.config.jsにモジュールとして登録し設定を記入する。(ここは教材を参考にしてください。)

躓いた点①Contentfulからのデータ取得に関して

1つの記事であれば表示できるが、2つ記事を登録すると表示されない。。。【未定義のプロパティ「フィールド」を読み取れません。】

 

解決策

2つ目の記事の画像データをContentfulにアップロードしていなかったことが原因でした。。。全てちゃんと入力してからアップロードしないといけないみたいです。

躓いた点②GitHubコマンドに関して

git pushで1度失敗したが以下のコマンドを打って解決した。

$ git remote rm origin

fatal: remote origin already exists. と表示された場合の解決法

参考サイト

Nuxt.jsのCannot read property ‘fields’ of undefinedを解決したい。

NetlifyとGithubを連携させ、サイトのアップロード作業を自動化する方法

Nuxt.jsいらない説

Nuxt.jsでcomponentsフォルダのVueコンポーネントを自動でimportする

Nuxt.jsとFirebaseでサイトを作った話 続編-1- markdown変換の見直し

【JavaScript入門】5分で理解!async / awaitの使い方と非同期処理の書き方

https://ja.nuxtjs.org/guide/routing/

Nuxt.jsの学習(インストールからビルドまで)

【Nuxt.js 入門】ゼロからプロジェクトを作成するまでの手順まとめ

Nuxt.jsプロジェクトのデプロイ方法について

Nuxt.jsのgenerateプロパティに動的なルーティングを追加する

ContentfulとNuxt.jsの統合に関しての公式サイトドキュメント

教本

公式サポートページ

コチラの教材、チュートリアルではブログを作るが、不特定多数でのログイン機能実装がされており、またマークダウンの導入はされてないので、自身で個人ブログサイト作るならアレンジは必須。

ただfirebaseとの連携は学べるし、Nuxtの基礎を網羅しているのでおすすめです。

Nuxt.jsチュートリアルまとめ

Nuxt.jsとContentfulでモダンなブログを構築してみた

実際に運用されているブログ

以下、引用。少し難易度が高そう。。。ただ、GitHubでソースコードまで公開してくれているので参考になりそう。

インフラはS3とCloudFrontを使っており、CI環境にはCodePipelineを用いました。 またContentfulのWebhookからAWSのAPI Gatewayを叩き、Contentfulからも自動でCodePipelineを呼び出すようになっています。

https://github.com/hareku/mycode.rip

Nuxt.jsとContentfulで作るマイブログ

完成デモサイト

他にもRails&Nuxt.jsのチュートリアルなども公開されている。無料ですごい。

コメントを残す