フォルダ構成・画面遷移・静的アクセス・asyncData()等基本形をおさえる／NUXT自己流チュートリアル（１）

NUXT.JS自体はシンプルで記述もスマートなよく出来たフレームワークなのですが、理解するのに、ちょっと苦労しました。

その時に、もうちょっと初心者向けのわかりやすいチュートリアルがあればいいのにな・・と散々思ったので、自分でまとめてみる気になりました。

ということで、しばらく「NUXT自己流チュートリアル」というテーマで、続き物を書いていく予定で、今回は、その１回目です。

f:id:arakan_no_boku:20190509225706p:plain

前提

以下の手順で、Node.jsとNuxt.jsがインストールされている前提です。

arakan-pgm-ai.hatenablog.com

構成は以下のとおりです。

サーバーサイドフレームワークはなし（NUXTデフォルト）。
UIフレームワークには、「Buefy」を選択。
外部パッケージは、axios（Web Apiを利用するのに必須）のみ選択。

チュートリアルの準備

ソースコードを書くエディタと、動作確認をするブラウザを用意します。

あと、サンプルのソースコードを掲載してますが、内部で２つほど画像ファイルを参照しているところがあります。

その画像ファイルは同じ名前で自前で適当なものを用意するか、自分の環境にあるファイルに置き換えて適宜書き換えて実行してください。

テスト用ブラウザのショートカットを準備する

使うブラウザは「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

なお、上記の赤字の部分は、実際のプロジェクトのパスに張り替えてくださいね。

なぜ、これが必要かというと、チュートリアルで使うデータ取得に、汎用のWEB-APIを使うからです。

ご存じのように、JavaScriptからのWebAPI呼出しは普通にすると「Access-Control-Allow-Origin」のエラーになり、「Network Error」になりますので、そのチェックを行わないようにするオプションをつけてChromeを起動する必要があるということです。

逆に言えば、そこさえ回避できれば、他の方法でもいいです。

もちろん。

セキュリティのレベルを落とすわけですから、この対応をしたショートカットから起動したブラウザはテスト以外に使わないでください。

あしからず。

ソースコードを書くエディタの準備

自分は「Visual Studio Code（VsCode）」を使います。

でも、別に慣れているものならなんでもいいと思います。

チュートリアルでデバッグしなきゃいけないようなものは無いですけど、VsCodeでNuxt.jsのデバッグをできるようにしとくと、「デバッグの開始」で、ブラウザで表示確認できるようになるので便利です。

とりあえず、自分が手順を参考にしたサイトはこちらです。

qiita.com

チュートリアルの方針を決める

Nuxt.js関連資料やサンプルソースを見ると、最初のうちは、複雑に見えて混乱します。

何でかな？と・・四苦八苦して、自分がたどり着いた結論は、以下です。

Nuxt.jsはVue.jsの機能を包含するけど、構文とかがVue.js単独で使う時と微妙に違うので、混乱する。
ひとつのソースに様々な技術要素が混在していて、Nuxt.jsの機能だと思ってドキュメントを見ても書いてなかったりして焦る

その混在しているイメージを図にしてみました。

厳密に見たら違う部分もありますが、今回の場合だとこんな感じの構造に見えます。

f:id:arakan_no_boku:20190511100242p:plain

こういう要素がひとつのソースに混在すると、わかりづらくなるのは当然です。

なので、自己流チュートリアルでは、欲張らずに、各技術要素にわけたうえで、一回に少しずつ要素を追加確認していくことにします。

予定としては、以下のような順序で考えてます。

Nuxt.js独自の要素ー基本
Vue.js独自の要素
BulmaのCSS要素（Burfyのclassは、Bulmaを使っている場合が多い）
Buefy独自の要素
Nuxt.js独自の要素ー応用
テストフレームワーク他モジュールの要素

自己流チュートリアルスタートです

ということで。

まずは、Nuxtの基本構造から確認・理解していこうかと思ってます。

ソースをゴチャゴチャさせたくないので、しばらくの間は、画面の体裁（CSS等）は一切使いません。

ソースファイルの前提

Nuxt.jsは「「Vue アプリケーションを作成するフレームワーク」ですから、ソースファイルの拡張子は「.vue」です。

インストール時にプロジェクトのフォルダが生成されて、必要なモジュールなどは配置された状態になっているところからスタートです。

フォルダ構成の確認

生成されたプロジェクトのフォルダ構成を確認します。

Nuxt.js においては、各フォルダの役割がきっちり決まっています。

だから「この役割を理解して、ルールをしっかり守る。」

まず、これが基本です。

とりあえず・・今回の時点で理解しといた方がいいのは、以下のフォルダです。

フォルダ名	意味と参照の仕方
layouts	アプリケーション共通に適用するレイアウトファイルを置きます。 default.vue　がデフォルトレイアウトです。
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>

このページで重要な点は３つです。