目次
- はじめに
- Nuxt.jsを整理する方針
- Nuxt.js基本要素－拡張子とフォルダの役割
- サンプルでやることと確認したいポイント
- 内部リンクの書き方と画面遷移（ルーティング）などをサンプルで確認
- WebApiからデータを取得するなどをサンプルで確認
- 実行イメージ
- テスト用：Originのチェックを行わないようにChromeを起動する方法
- 開発環境：Visual Studio Code（VsCode）の設定
はじめに
リライトして目次を追加しました。
内容は2019年5月当時のままです。
僕がNuxt.jsの各機能を理解するために、ひとつひとつ確認したことをまとめていこうと考えています。
インストール・環境構築は、以下の手順でできている前提です。
Nuxt.jsを整理する方針
Nuxt.js関連資料やサンプルソースを見ると混乱することが多いのは、Nuxt.jsはVue.jsの機能を包含していて、ひとつのソースの中で、どれがNuxt.js特有の機能で、どれがVue.jsの機能かの区別がつけにくいからだと感じています。
その混在しているイメージを図にしてみると、こんな感じに見えます。
なので、僕はアプローチとして、各技術要素にわけて、一回に少しずつ要素を確認していくことにしました。
分け方としては、以下のようになると考えています。
- Nuxt.js独自の要素ー基本
- Vue.js独自の要素
- BulmaのCSS要素（Burfyのclassは、Bulmaを使っている場合が多い）
- Buefy独自の要素
- Nuxt.js独自の要素ー応用
- テストフレームワーク他モジュールの要素
今回は、Nuxtの基本構造から確認・理解していこうかと思ってます。
Nuxt.js基本要素－拡張子とフォルダの役割
ソースをゴチャゴチャさせたくないので、しばらくの間は、画面の体裁（CSS等）は一切使いません。
ソースファイルの拡張子は「.vue」
Nuxt.jsは「「Vue アプリケーションを作成するフレームワーク」ですから、ソースファイルの拡張子は「.vue」です。
フォルダ構成と各フォルダの役割
フォルダ構成は、以下の手順で自動生成されています。
Nuxt.js においては、各フォルダの役割がきっちり決まっています。
だから「この役割を理解して、ルールをしっかり守る。」
まず、これが基本です。
とりあえず・・今回の時点で理解しといた方がいいのは、以下のフォルダです。
| フォルダ名 | 意味と参照の仕方 |
|---|---|
| layouts |
アプリケーション共通に適用するレイアウトファイルを置きます。 |
| pages |
アプリケーションのvueファイルを置きます。 ディレクトリ内のすべての *.vue ファイルを読み込ん、 Vue ファイルの木構造に沿って、自動的に vue-router の設定を生成してルーティングしてくれます。 index.vue は必ず置きます。 |
| assets | imageファイルやFontファイルなどの静的ファイルを置きます。 WebPackの対象になります。 <img src=""~/assets/image.png"">のように参照します。 |
| static | imageファイルやFontファイルなどを置きます。 WebPackの対象になりません。 <img src=""/image.png""/>のように参照できます。 |
他にも、componentsとかstoreとか plugins とかmiddlewareとかあるのですが、そこは、順次必要になるステップで確認するようにします。
サンプルでやることと確認したいポイント
やることはこれだけです。
- index.vueとabout.vueの２つの画面を作って、相互にリンク（画面遷移）する。
- about.vueの中でWebApiをたたいて結果ステータスを表示する。
ここでは、これだけのことでも、
- 全Vueファイルの共通レイアウトの設定
- 各画面に対応するvueファイルの配置場所とソースコードの基本構成
- 内部リンクの書き方と画面遷移（ルーティング）
- HTMLのヘダー要素の指定の仕方
- コンポーネントのロード前に呼ばれる非同期処理（asyncData）の書き方
- WEB－APIへのリクエストとレスポンス（JSON)の処理方法
- 静的ファイル（画像等）へのアクセス方法
みたいな、ベーシックなポイントが確認できます。
全Vueファイルの共通レイアウトの設定
全体のレイアウトは、layoutsというフォルダのvueファイルとして作成します。
任意の名前で複数作って使い分けとかできますが、とりあえず、今回はデフォルトであるlayoutsフォルダの「default.vue」だけ使います。
サンプルは以下のようになります。
layouts/default.vue
<template>
<div>
<nuxt />
</div>
</template>
これが最小限のレイアウトです。
<nuxt/>の部分にpagesフォルダのコンテンツが読み込まれます。
内部リンクの書き方と画面遷移（ルーティング）などをサンプルで確認
ルート「/」で表示されるファイルの名前も決まってます。
それが「index.vue」です。
これもインストール時に既にできてますが、さっぱり消して入れ替えます。
サンプルで以下のことを確認します。。
- HTMLのheader要素に出力する内容は、head:部に書くこと
- assetsフォルダに置いた静的画像ファイルの参照方法
- 内部リンクによる画面遷移（NLinkタグ）の書き方
です。
pages/index.vue
<template>
<div>
<p>ハロー・ワールド（笑）</p>
<img src="~assets/00_node_nuxt.JPG" alt="image01">
<br>
<NLink to="/about">
内部リンクによる画面遷移です。
</NLink>
</div>
</template>
<script>
export default {
head: {
title: 'First page'
}
}
</script>
header要素に出力する内容の書き方
HTMLのheader要素に出力する内容は、head:部に書くことは以下の部分です。
head: {
title: 'First page'
}
assetsフォルダに置いた静的画像ファイルの参照
assetsフォルダに置いた静的画像ファイルの参照方法は以下の部分です。
<img src="~assets/00_node_nuxt.JPG" alt="image01">
内部リンクによる画面遷移（NLinkタグ）の書き方
内部リンクによる画面遷移（NLinkタグ）の書き方の書き方です。
<NLink to="/about">
内部リンクによる画面遷移です。
</NLink>
この部分ですが、NLinkという「内部専用のリンク」を使います。
例えば、about.vueに遷移するときは「about」と拡張子をとります。
pagesフォルダ内の相対位置で指定します。
今回はpages直下にあるので「/about」になります。
<NLink>は「<nuxt-link>」のエイリアス名です。
<nuxt-link><n-link>, <NuxtLink>, <NLink> の４つは、すべて同じものです。
WebApiからデータを取得するなどをサンプルで確認
今度は遷移先のページです。
とりあえず、WEB-APIを動かして、結果のステータスだけを表示するだけの画面です。
ここで確認したいポイントは３つです。
- asyncData()内でaxiosを使ってWebAPIからデータを取得・表示をしているところ
- staticフォルダの画像を「／post.JPG」のようにルートで参照しているところ。
- NLinkを使った内部遷移で「/」でルートのページに戻っているところ
です。
pages/about.vue
<template>
<div>
<p>郵便番号APIからの応答ステータスは「 {{ answer }}」です。</p>
<img src="/post.JPG" alt="image02">
<br>
<NLink to="/">
ルートのページへの内部リンクです
</NLink>
</div>
</template>
<script>
import axios from 'axios'
export default {
asyncData () {
return axios.get(`http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060`)
.then((res) => {
return { answer: res.data.status }
})
},
head: {
title: 'About page'
}
}
</script>
ソース内のブロック分けと役割
見たらわかりますが、Nuxt.jsは<script＞</script>内に、asyncData()とか、head:とかみたいなブロックを作り、その中にJavaScriptの関数なり、変数の定義などを書いていく形をとります。
そのブロックも役割がしっかり決まっていて、上記のソースで言えば。
- asyncData()：ページコンポーネントがロードされる前に実行すべき関数などを書く
- head:HTMLのヘダー部に反映させる定義を書く
てな感じです。
つまり、上記の固定の郵便番号でWEB-APIを取得している処理は「初期表示に反映させるために、ページコンポーネントのロード前にデータをとってこようとしている」というわけです。
asyncData()内でaxiosを使ってWebAPIからデータを取得・表示
asyncDataのところを補足します。
WEB-APIからデータを取得するのに、便利な外部プラグイン「axios」を使ってます。
axiosを使ってWebAPIからデータを取得する方法は２種類あります。
- Promiseを返す方法
- async/awaitを使う方法
です。
今回は、Promiseを返す方法でやってます。
とりあえずPromiseがよくわからなくても、上記の「型」を覚えておけば使えるところが「axios」のいいところです。
興味があれば、こちらでもどうぞ。
staticフォルダ内の静的データの参照
このような書き方になります。
<img src="/post.JPG" alt="image02">
staticフォルダの画像を「/post.JPG」のようにルートで参照しています。
ルートのページに戻る内部遷移
NLinkを使った内部遷移で「/」でルートのページに戻ります。
<NLink to="/">
ルートのページへの内部リンクです
</NLink>
実行イメージ
プロジェクトフォルダにcdしてから「npm run dev」します。
それで「http://localhost:3000/」にアクセスします。
リンクで画面遷移すると。
一応、郵便番号検索APIにアクセスして、応答ステータス「200」（正常）を受け取れています。
画面のレイアウトは滅茶苦茶ですが・・。
なお、上記を実施するにあたり、ちょっとした工夫が必要になる場合があるので、続けてまとめておきます。
テスト用：Originのチェックを行わないようにChromeを起動する方法
使うブラウザは「chrome」です.。
Chromeのショートカットを用意します。
そのプロパティを開いて以下のようなオプションをつけたパスに張り替えて「テスト専用ショートカット」を準備しておきます。
"C:\--chromeのパス--\chrome.exe" --allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt --user-data-dir="C:\01demos\00_nuxt\demop" --disable-web-security
なお、上記の赤字の部分は、実際のパスに張り替えてください。
なぜ、これが必要か？です。
ご存じのように、JavaScriptからのWebAPI呼出しは普通にすると「Access-Control-Allow-Origin」のエラーになり、「Network Error」になります。
なので、そのチェックを行わないようにするオプションをつけてChromeを起動する必要があるということです。
もちろん。
セキュリティのレベルを落とすわけですから、この対応をしたショートカットから起動したブラウザはテスト以外に使わないでください。
あしからず。
開発環境：Visual Studio Code（VsCode）の設定
僕は「Visual Studio Code（VsCode）」を使います。
別に慣れているものならなんでもいいと思います。
VsCodeでNuxt.jsのデバッグをできるようにしとくと、「デバッグの開始」で、ブラウザで表示確認できるようになるので便利です。
とりあえず、自分が手順を参考にしたサイトはこちらです。
あと、ESLintでの文法チェックと、フォーマットができるようにしておきます。
この辺のやり方や設定方法はネット上に沢山上がっているので、自分の好みで設定してもらえば良いと思います。
ちなみに、このチュートリアルを書いている時点の自分の環境は。
拡張機能として以下の２つ。
設定(setting.json）のeslint関係の設定は以下です。
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true
}
],
最初に使う時にESLint本体をinstallするかどうか聞いてくる場合もあるようですが、そんな時は素直にインストールします。
とりあえず、超シンプルな最低限の設定しかしてませんが、これでJSとVueの拡張子のファイルのチェックと整形ができていて、今のところ自分的には不満なく使えてます。
今回はこんなところで。
ではでは。