"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

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

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

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

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

 

f:id:arakan_no_boku:20190509225706p:plain

 

前提

 

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

arakan-pgm-ai.hatenablog.com

 

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

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

 

チュートリアルの準備

 

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

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

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

 

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

 

使うブラウザは「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 CodeVsCode)」を使います。

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

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

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

qiita.com

 

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

 

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

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

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

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

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

f:id:arakan_no_boku:20190511100242p:plain

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

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

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

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

 

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

 

ということで。

まずは、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の2つの画面を作って、相互にリンク(画面遷移)する。
  • 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> の4つは、すべて同じものです。

 

次に遷移先の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>

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

  • 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からデータを取得する方法は2種類あります。

  • Promiseを返す方法
  • async/awaitを使う方法

です。

ja.nuxtjs.org

今回は、Promiseを返す方法でやってます。

とりあえずPromiseがよくわからなくても、上記の「型」を覚えておけば使えるところが「axios」のいいところです。

興味があれば、こちらでもどうぞ。

developer.mozilla.org

 

さて動かしてみます

 

VsCodeで「デバッグの開始」またはコマンドプロンプト等でプロジェクトフォルダにcdしてから「npm run dev」します。

それで「http://localhost:3000/」にアクセスします。

f:id:arakan_no_boku:20190511140447p:plain

 

リンクで画面遷移すると。

f:id:arakan_no_boku:20190511140550p:plain

一応、郵便番号検索APIにアクセスして、応答ステータス「200」(正常)を受け取れているみたいです。

画面のレイアウトは滅茶苦茶ですが・・、まあ、最初の一歩としてはこんなもんです。

ではでは。