• 環境構築編
    • PCの設定など、一回だけ行う作業
    • 記事ではMacを対象としていますが、Windowsでも応用可能です
  • プロジェクト構築編
    • 新規に作業するときなど、新たに仕事を請け負うたびに行う作業
  • 日常業務編
    • プロジェクトの進行中、つまり仕事を進めるときに行う作業
  • 初心者のとっかかり編(いまここ)
    • 初心者がまず最初に何から学べばわかりやすいかを弊社なりに考えた結果

Nuxt.jsを業務で使うための必要最低限は前回までの3回で説明できたと思いますが、おそらくそもそもNuxt.jsって何?ってところから疑問が残る形になっていると思います。

はじめに – Nuxt.js

インストール – Nuxt.js

ディレクトリ構造 – Nuxt.js

設定 – Nuxt.js

ルーティング – Nuxt.js

公式サイトが、これ以上ないくらいわかりやすく的確に説明されていますので上記以外のページもとにかく熟読することを強くオススメします。
しますが、公式ドキュメントにおびえる初心者の気持ちもよくわかりますので(私も初心者の時は初心者ですので)このページではその補足として、まずとっかかりを探すための勘所などを説明していきたいと思います。

ざっくり言うと、あれやこれやをいちいち個別に設定しなくていいってこと

再度紹介しますが、公式ドキュメントのこちら
はじめに – Nuxt.js https://ja.nuxtjs.org/guide
にあるように、Vue.jsやVueRouterなど、いろいろなライブラリがあらかじめ便利に設定された状態がNuxt.jsと考えることも出来ます。
ということはNuxt.jsを使いこなすには土台となるVue.jsやVueRouterなどの知識が前提として必要になるということでもありますが、そんなに一度に覚えるのはとても大変だと思いますので、ひとまずはNuxt.jsはそういうもんだと覚えておくにとどまることにします。
ただし、Vue.jsについて全く予備知識ゼロだとつらいかと思われますので、ひとまずVue.jsについて説明します。
ややこしいですが、Vue.jsというライブラリを使いやすくしたのがNuxt.jsというフレームワークです。言葉を意味まで含めて正確に理解する必要はないですが、なんとなくNuxt.jsというものがあってそれはVue.jsというものを使ってるんだな、と思っていれば理解が深まります。で、まずはNuxt.jsを置いといてVue.jsのリンクから紹介します。

はじめに — Vue.js https://jp.vuejs.org/v2/guide/

こちらの、Vue.js公式サイトの説明を熟読することをオススメしますが、最初に読んだだけでは大部分がなんのこっちゃかわからないと思います。それでいいです。

Vue.jsについて、誤解を恐れずに説明するなら、jQueryのようなJavaScript便利ツール、あれのもっと高性能版がVue.jsです。

「自分はjQueryで事足りてるし、それ以上の高性能版は特に必要ないかな」と思われるのもごもっともです。最初に出しといてなんですがこの記事でjQueryと比較してどうこう、ということについてこれ以上突き詰めることはしませんので、Vue.jsが必要ないと感じたら無理に使う必要はないものです。

ただし、Nuxt.jsはVue.jsなどをひとまとめに便利に使うフレームワークですので、Nuxt.jsを使いたいのであれば最低限のVue.jsへの理解は必要になってきます。どの部分が最低限かは人によって意見が違うと思いますが、最初はVue.jsがさっぱりわからなくてもNuxt.jsを使っていくうちに自然と使いこなしていくようになります。
逆に、今までVue.jsやVueRouterを使いこなしていた人なら、Nuxt.jsの強力な機能はきっと気に入るはずですし、トラブルシュートや「こんなことしたい」ときの検索語句の切り分けなども適切に行えるはずです。
早い話がつまり、わかってないまま読み進めていってもOKということです。

ディレクトリ構成の説明

公式サイト [ ディレクトリ構造 – Nuxt.js https://ja.nuxtjs.org/guide/directory-structure ] を読みながら、補足する形で説明を進めていきましょう。
ディレクトリの中には設定次第で構成を変えることが出来るものも存在しますが、ここではデフォルトの設定で進めるものとします。

layout, pages ディレクトリ

上の3つのリンクを参考にしながら、説明を進めます。ちなみに上記3つは全て同じページですがアンカーリンク先が違います。

まずプロジェクトのルートフォルダに置いたapp.htmlファイルが大本のテンプレートになります。通常、このブログを参考にプロジェクトを作成した場合は存在しませんが、特に理由がない限りわざわざ作る必要はないと思います。headやbodyタグの属性をちょっといじりたい場合なんかは、nuxt.config.jsで設定できますので、app.htmlを触る機会というのはまず起こらないと考えて差し支えありません。

次にlayoutsフォルダについて説明します。layoutsフォルダに置いたvueファイルが、レイアウトファイルになります。
このブログのやり方でプロジェクトを作成した場合はすでに layouts/default.vueというファイルが出来ているはずなので、参考にしてください。このファイルがデフォルトのレイアウトになります。
もしページによっては違うレイアウトを使いたい場合、例えばlayouts/blog.vueというファイルを作るとページによってレイアウトを指定することも出来ます。詳しくはlayoutsディレクトリを参考にしてください。
ちなみにですが、layouts/default.vueを開いてみてください。

<template>
  <div>
    <nuxt />
  </div>
</template>

こんな記述があるかと思います。templateという見慣れないタグがありますが、その直下にdivタグ、さらにその下にnuxtというまた見慣れない独自タグがあります。vueファイルはこういうのなんだなーと現段階ではなんとなく認識しておいてください。
ちなみにちなみになんですが、nuxtタグの部分が、後述するpagesフォルダの中のページに置き換わります。置き換わります、って言ってもこれも現段階ではナンノコッチャだと思いますが、そのままわからないままで読み進めて結構です。

次はPagesフォルダの説明です。pagesフォルダに置いたvueファイルが、静的ページでいうところのページ遷移の役割をします。
詳しくは公式ガイドのルーティングをご覧ください。「動的なルーティング」以降はちょっとむずかしいかも知れませんが、完全に理解できなくても心配いりません。vueファイルの配置がサイトマップと対応しているんだな、ということだけわかれば結構です。
ここもデフォルトでindex.vueというファイルが出来ているはずなので、開いてみてください。

<template>
  <!-- HTMLに馴染みの深い記述がある -->
</template>

<script>
  // JavaScriptが書かれてある
</script>

<style>
  /* CSSが書かれてある */
</style>

この形になっていることに気が付かれたのではないでしょうか。これこそがNuxt.jsフレームワークが使っているVue.jsというライブラリの、コンポーネントという機能の基本形ですので、少し頭の片隅に置いといてみてください。

components ディレクトリ

pagesフォルダでごりごりNuxt.jsサイト制作が行えるようになってきたら、ぜひとも使っていきたいのがこのcomponentsディレクトリです。
デフォルトでLogo.vueというファイルが入っているはずです。どこで使われているかと言うと、デフォルトで入ってたpages/index.vueです。

~/pages/index.vueの中に

<script>
import Logo from '~/components/Logo.vue'
export default {
  components: {
    Logo
  }
}
</script>

↑こういう記述と、

<template>
  <!-- 中略 -->
  <logo />
  <!-- 中略 -->
</template>

こんな記述があります。

ちょっと話題が関連情報にずれますが、〜(半角チルダ)とか@(半角アットマーク)の記号はエイリアスと言ってプロジェクトのトップディレクトリを指せる、Nuxt.jsで使える便利な記号なのでフォルダの指定のときには積極的に使っていきたい機能のひとつです。

話題をcomponentsフォルダに戻しますが、このフォルダに入れたvueファイルはコンポーネントとして使うことが出来ます。
使う時は、

  • まずscriptタグの中で
    • インポートする
    • componentsオブジェクトに登録する
  • templateタグの中で
    • 呼び出す

他の使い方も出来ますが、基本形は上記のような手順が一般的になります。

このとき名前に法則性があって、

  • scriptの中ではアッパーキャメルケース(大文字から始まる、大文字で単語を区切る命名法則)
  • temlateの中ではチェインケース(原則として全て小文字で、単語と単語をハイフンで区切る命名法則)

となっています。命名規則に関してはこちらも参考にしてみてください。
例えば

<template>
  <div>
    <h1>テスト</h1>
    <p><daigaku-map</p>
  </div>
</template>

<script>
import DaigakuMap from '~/components/DaigakuMap.vue'
export default {
  components: {
    DaigakuMap
  }
}
</script>

こういう対応になります。
馴染みがないと最初ちょっと戸惑うと思いますが、回数重ねればだんだんと馴染んできますので、がんばって習得してみてください。

少しお説教臭くなるかも知れませんが、わたしがウェブサイトデザイナーさんやコーダーさんにNuxt.jsをおすすめしたい理由のひとつに、このコンポーネントが使いやすいことがあります。
ウェブサイトにマテリアルデザインを取り入れてみたり、BootstrapやVuetify.jsなどのフレームワークを取り入れてみたりしてると、いえ、そうでなくてもサイトにちょっとした要素を追加するたびに思いの外深くなるネストや複雑化するCSSに悩まされるコーダーは多いと思います。
そんなとき、画面の要素を気軽にコンポーネント単位で切り離して設計できるVue.jsとそれを簡単に使うNuxt.jsの恩恵は、使えば使うほど多大なものに感じるはずです。
最初の取っ掛かりは難しい印象を受けるかも知れませんが、必ずマスターできますので、マスターしたときの恩恵が計り知れないほどコーダーさんにも大きいので、ぜひとも挑戦してみてほしい機能です。

assets, static ディレクトリ

assetsディレクトリとstaticディレクトリのどちらに何を入れれば良いのか、議論の余地があるのですが、我社では原則として以下のようなルールで振り分けています。

  • png, jpeg, gifなど画像ファイル
    • 通常ページ内で使う場合はassets
    • OGPやfavicon.icoなど外部から読み込む可能性のものはstatic
    • その他、ファイル名が変わってまずいものはstatic(assetsだとwebpackがファイル名を変える可能性が高いので)
  • css
    • 原則としてassets
    • 外部ライブラリのcssファイルなど、自分で編集・保守を行わないファイルはstaticを検討
  • js
    • 原則としてassets
    • 外部ライブラリなど、自分で編集・保守を行わないファイルはstatic

ディレクトリに関して、最初の取っ掛かりは以上を踏まえていればなんとかなるかと思います。
静的ページだけでなくて、Nuxt.jsをつかってガンガンにリアクティブなフロントエンド開発やサーバーサードレンダリングなどに挑戦したくなったら、他のディレクトリにも関心がいくかと思いますが、その頃にはリンク先の公式ガイドも読めるようになっていて何が書かれてあるかわかると思いますので、ぜひとも挑戦してみてください。

ディレクトリのエイリアス

componentsディレクトリの項目でも触れましたが、ディレクトリ構造、フォルダのパスと言った方がわかりやすいでしょうか、プロジェクトのトップディレクトリをエイリアスで指定できます。

ディレクトリ構造 – Nuxt.js

このとき、~半角チルダか@半角アットマークがソースディレクトリのトップを指してて、~~半角チルダ二つか@@半角アットマーク二つがプロジェクトディレクトリのトップを指しています。
初期設定ではふたつのディレクトリに違いはないので、つまり半角チルダも半角アットマークも、半角チルダ二つも半角アットマーク二つも、どれでも好きなものを使えることになります。

選び方の目安としては、将来的にソースディレクトリとプロジェクトディレクトリのパスを分けたい事情が出てくる可能性を考えたときに、ふだんだいたいはソースディレクトリのトップを指したい場合が多いと思うので半角チルダひとつか半角アットマークひとつのほうを選べばいいと思います。

チルダとアットマークのどちらを使うかに関しては、好きなほうを使いたいところですが、CSSのパス指定の時に半角チルダを使うと「~/」半角チルダと半角スラッシュの組み合わせでエラーになるため、アットマークのほうを優先的に使っていった方が良いように思えます
詳しくはこちら公式サイトにも少し書いています。

ヘッダーはどこに書く?

デフォルトでは
nuxt.config.js
に書きます。詳しくはこちらを参考にしてください。

ビュー – Nuxt.js

ディレクトリ構成の項目でも少し触れましたが、プロジェクトのトップにapp.htmlを置かなければデフォルトで以上の設定が効くようになります。オリジナルのapp.htmlを置いた場合にはその設計に従ってください。

vueファイルを書く

こちらを参考にしてください。

ビュー – Nuxt.js

最初のうち、特に難しいことをせず静的ページを構築したいだけなら、次のポイントを押さえておけばすぐに作業に取りかかれると思います。

ディレクトリの説明でも使いましたが、

<template>
  <!-- HTMLに馴染みの深い記述がある -->
</template>

<script>
  // JavaScriptが書かれてある
</script>

<style>
  /* CSSが書かれてある */
</style>

ひとつのvueファイルにtemplate(HTMLのようなもの)、script、cssを一度に書けます。
今までscriptはscriptファイルに、cssはcssファイルにと、それぞれ専用のファイルに分けるほうが良しとされてきたのに、vueファイルでは一度に書いた方が管理しやすいとされています。これは、vueがカスタムコンポーネントと言って機能をひとかたまりの単位にわけて、コンポーネントにつきひとつのファイルで管理できるようになっているためです。「お問い合わせボタン」とかを、コーディング進うちに機能や要件が増えてきてHTMLもCSSもJavascriptもぐっちゃぐっちゃになったり、影響範囲が把握できずに別のところで不具合が出てしまったり、しかもそれをローンチまでに見つけられずに稼働してから発見される、みたいなシナリオが、だいぶ回避しやすくなります。

Nuxt.js案件、手伝ってくれるコーダーさん、どちらも募集中です!

弊社では、Nuxt.jsを使った静的ページ作成にとどまらず、サーバーサイドレンダリングのアプリケーション、シングルページアプリケーション、プログレッシブウェブアプリなどなど、横文字かっこよさげな今時の技術トレンドを押さえた案件も多数行っております。技術に縛られるのでは無く、人や地域に活かすために技術のその先を提供するためにも、基礎的な技術探求を追い求めています。なにかお手伝いできそうなことありましたらぜひともお声がけください。

カテゴリー: ブログ

2件のコメント

Nuxt.jsをつかおう:環境構築編 – 大学堂株式会社 · 2019年9月2日 11:58

[…] 初心者のとっかかり編 […]

Nuxt.jsをつかおう:プロジェクト構築編 – 大学堂株式会社 · 2019年9月2日 13:52

[…] 初心者のとっかかり編 […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です