NUXT.JSの基本的な機能や利用方法を整理したチュートリアルをまとめてみます。
しばらく「NUXT自己流チュートリアル」というテーマで、続き物を書いていく予定で、今回は、その１回目です。
この記事は「NUXT自己流チュートリアル（１）」として続き物で書いている記事の１回目です。
1回目から続けて読んでもらえることを想定して書いていますのでご了承ください。
前提
以下の手順で、Node.jsとNuxt.jsがインストールされている前提です。
チュートリアルの準備
動作確認するための準備です。
画像データの用意
そして画像データを２つ用意します。
前回、Nuxtをインストールしたフォルダが、「C:\01demos\00_nuxt」でプロジェクトが「demop」の場合を例にします。
まず、以下の画像を「C:\01demos\00_nuxt\demop\assets\00_node_nuxt.JPG」で保存します。
もうひとつ。
以下の画像を「C:\01demos\00_nuxt\demop\static\post.JPG」で保存します。
もちろん。
「C:\01demos\00_nuxt」の部分は例です。
Nuxtをインストールした自分の環境にあわせて変更してください。
テスト用ブラウザのショートカットを準備する
使うブラウザは「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）」を使います。
でも、別に慣れているものならなんでもいいと思います。
チュートリアルでデバッグしなきゃいけないようなものは無いですけど、VsCodeでNuxt.jsのデバッグをできるようにしとくと、「デバッグの開始」で、ブラウザで表示確認できるようになるので便利です。
とりあえず、自分が手順を参考にしたサイトはこちらです。
あと、ESLintでの文法チェックと、フォーマットができるようにしておきます。
この辺のやり方や設定方法はネット上に沢山上がっているので、自分の好みで設定してもらえば良いと思います。
ちなみに、このチュートリアルを書いている時点の自分の環境は。
拡張機能として以下の２つ。
設定(setting.json）のeslint関係の設定は以下です。
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true
}
],
最初に使う時にESLint本体をinstallするかどうか聞いてくる場合もあるようですが、そんな時は素直にインストールします。
とりあえず、超シンプルな最低限の設定しかしてませんが、これでJSとVueの拡張子のファイルのチェックと整形ができていて、今のところ自分的には不満なく使えてます。
チュートリアルの方針を決める
Nuxt.js関連資料やサンプルソースを見ると、最初のうちは、複雑に見えて混乱します。
何でかな？と・・四苦八苦して、自分がたどり着いた結論は、以下です。
- Nuxt.jsはVue.jsの機能を包含するけど、構文とかがVue.js単独で使う時と微妙に違うので、混乱する。
- ひとつのソースに様々な技術要素が混在していて、Nuxt.jsの機能だと思ってドキュメントを見ても書いてなかったりして焦る
その混在しているイメージを図にしてみました。
厳密に見たら違う部分もありますが、今回の場合だとこんな感じの構造に見えます。
こういう要素がひとつのソースに混在すると、わかりづらくなるのは当然です。
なので、自己流チュートリアルでは、欲張らずに、各技術要素にわけたうえで、一回に少しずつ要素を追加確認していくことにします。
予定としては、以下のような順序で考えてます。
- Nuxt.js独自の要素ー基本
- Vue.js独自の要素
- BulmaのCSS要素（Burfyのclassは、Bulmaを使っている場合が多い）
- Buefy独自の要素
- Nuxt.js独自の要素ー応用
- テストフレームワーク他モジュールの要素
自己流チュートリアルスタートです
ということで。
まずは、Nuxtの基本構造から確認・理解していこうかと思ってます。
ソースをゴチャゴチャさせたくないので、しばらくの間は、画面の体裁（CSS等）は一切使いません。
ソースファイルの前提
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とかあるのですが、そこは、順次必要になるステップで確認するようにします。
とりあえず「Hellow world」的な・・
はじめの一歩として、簡単なものを作ってみます。
やることはこれだけです。
- index.vueとabout.vueの２つの画面を作って、相互にリンク（画面遷移）する。
- about.vueの中でWebApiをたたいて結果ステータスを表示する。
でも。
たった、これだけのことでも、
- 全Vueファイルの共通レイアウトの設定
- 各画面に対応するvueファイルの配置場所とソースコードの基本構成
- 内部リンクの書き方と画面遷移（ルーティング）
- HTMLのヘダー要素の指定の仕方
- コンポーネントのロード前に呼ばれる非同期処理（asyncData）の書き方
- WEB－APIへのリクエストとレスポンス（JSON)の処理方法
- 静的ファイル（画像等）へのアクセス方法
みたいな、ベーシックなポイントはみんな確認できるようになってます。
まず、共通のレイアウトファイルを作ります。
全体のレイアウトは、layoutsというフォルダのvueファイルとして作成します。
任意の名前で複数作って使い分けとかできますが、とりあえず、今回はデフォルトであるlayoutsフォルダの「default.vue」だけ使います。
インストール時にできている内容はすっぱり消して、以下だけ書き込みます。
layouts/default.vue
<template>
<div>
<nuxt />
</div>
</template>
これが最小限のレイアウトです。
<nuxt/>の部分にpagesフォルダのコンテンツが読み込まれます。
つぎは、pagesフォルダです。
ルート「/」で表示されるファイルの名前も決まってます。
それが「index.vue」です。
これもインストール時に既にできてますが、さっぱり消して入れ替えます。
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>
凄いシンプルですが、重要なことがいくつかあります。
- HTMLのheader要素に出力する内容は、head:部に書くこと
- assetsフォルダに置いた静的画像ファイルの参照方法
- 内部リンクによる画面遷移（NLinkタグ）の書き方
です。
NLinkについて、補足します。
NLinkは「内部専用のリンク」です。
about.vueに遷移するときは「about」と拡張子をとります。
pagesフォルダ内の相対位置で指定します。
今回はpages直下にあるので「/about」になります。
<NLink>は「<nuxt-link>」のエイリアス名です。
<nuxt-link><n-link>, <NuxtLink>, <NLink> の４つは、すべて同じものです。
次に遷移先のabout.vueを作ります。
今度は遷移先のページです。
とりあえず、WEB-APIを動かして、結果のステータスだけを表示するだけの画面です。
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>
このページで重要な点は３つです。
- asyncData()内でaxiosを使ってWebAPIからデータを取得・表示をしているところ
- staticフォルダの画像を「／post.JPG」のようにルートで参照しているところ。
- NLinkを使った内部遷移で「/」でルートのページに戻っているところ
です。
見たらわかりますが、Nuxt.jsは<script＞</script>内に、asyncData()とか、head:とかみたいなブロックを作り、その中にJavaScriptの関数なり、変数の定義などを書いていく形をとります。
そのブロックも役割がしっかり決まっていて、上記のソースで言えば。
- asyncData()：ページコンポーネントがロードされる前に実行すべき関数などを書く
- head:HTMLのヘダー部に反映させる定義を書く
てな感じです。
つまり、上記の固定の郵便番号でWEB-APIを取得している処理は「初期表示に反映させるために、ページコンポーネントのロード前にデータをとってこようとしている」というわけですね。
さて。
asyncDataのところを補足します。
WEB-APIからデータを取得するのに、便利な外部プラグイン「axios」を使ってます。
axiosを使ってWebAPIからデータを取得する方法は２種類あります。
- Promiseを返す方法
- async/awaitを使う方法
です。
今回は、Promiseを返す方法でやってます。
とりあえずPromiseがよくわからなくても、上記の「型」を覚えておけば使えるところが「axios」のいいところです。
興味があれば、こちらでもどうぞ。
さて動かしてみます
VsCodeで「デバッグの開始」またはコマンドプロンプト等でプロジェクトフォルダにcdしてから「npm run dev」します。
それで「http://localhost:3000/」にアクセスします。
リンクで画面遷移すると。
一応、郵便番号検索APIにアクセスして、応答ステータス「200」（正常）を受け取れているみたいです。
画面のレイアウトは滅茶苦茶ですが・・、まあ、最初の一歩としてはこんなもんです。
ではでは。