Nuxt.jsを実際の案件で使ったら初期設定が大事だった件

2021年2月15日 10:01

Nuxt.jsを勉強してnoteにちょくちょくあげていましたが、この度初めて実案件に取り入れてみました！

但し、レンタルサーバーでの公開だったので、自分の環境でrun generateしてサーバーにアップするというNuxt.jsの良さが（おそらく）半減の状況でしたが、「まずは実案件で開発して善し悪しを考えよう！」というまずやってみる精神でNuxt.jsで制作を進めてみました！

その中で、各ページのタイトルやディスクリプションやOGPの設定、Webフォントの設定、URLのサブディレクトリの設定、CSSをどう書くかなど、開発に入る前にやっておくべきことが多くあったなぁと実際案件に導入してみて気付きました。

今回はそんな初期設定を忘れないための備忘録となります。

URLを決定しておく

地味なことで人によってはどうでもいいし、ぶっちゃけ後からでも設定できるのでいいんですが、開発環境をきっちりしてから制作に臨みたい方はここら辺もすり合わせした方がいいです。

URLを最初のうちに決めておくということはWordPressを使うにしても他のフレームワークを使うにせよ、本番環境と開発環境の階層が変わると地味にしんどいので、しっかり確認が必要になる項目です。

また今回はサブディレクトリ型のURLだったので、そちらもしっかり決めておく必要があります。
サブディレクトリの場合、設定方法はこちら。

// nuxt.config.js
export default {
  router: {
    base: '/サブディレクトリ名/'
  },
}

Webフォントの設定

webフォントも始めに設定したい項目です。

// npmでのインストール
npm i nuxt-webfontloader

// nuxt.config.js
export default {
  modules: [
    'nuxt-webfontloader',
  ],
  webfontloader: {
   google: {
     families: ['フォント名:太さ','フォント名:太さ01,太さ02']
   }
 },
}

Google Fonts用のモジュールもあったみたいですが、これ書いてるときに見つけました。まぁうちはGoogle Fontを絶対使うみたいな決まりはないので、今後もこっちでやるかも。

タイトル、ディスクリプション、OGPの設定

タイトルやディスクリプションはnuxt.config.jsで共通化して、各ページでscript内に個別で設定していきます。

// nuxt.config.jsでの設定
export default {
 head: {
   title: 'タイトル',
   meta: [
     { charset: 'utf-8' },
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
     { hid: 'description', name: 'description', content: 'ディスクリプション' },
     { hid: 'og:site_name', property: 'og:site_name', content: 'タイトル' },
     { hid: 'og:type', property: 'og:type', content: 'website' },
     { hid: 'og:url', property: 'og:url', content: 'サイトのURL' },
     { hid: 'og:title', property: 'og:title', content: 'タイトル' },
     { hid: 'og:description', property: 'og:description', content: 'ディスクリプション' },
     { hid: 'og:image', property: 'og:image', content: 'OGPの画像URL' },
   ],
   link: [
     { rel: 'icon', type: 'image/x-icon', href: 'faviconの設定' }
   ],
 },
}

export default {
 data() {
   return {
     meta: {
       title: '各ページのタイトル',
       description: '各ページのディスクリプション',
       type: 'article',
       url: '各ページのURL',
     },
   }
 },
 head () {
   return {
     title:this.meta.title,
     meta: [
       { hid: 'description', name: 'description', content: this.meta.description },
       { hid: 'og:type', property: 'og:type', content: this.meta.type },
       { hid: 'og:title', property: 'og:title', content: this.meta.title },
       { hid: 'og:description', property: 'og:description', content: this.meta.description },
       { hid: 'og:url', property: 'og:url', content: this.meta.url },
       // ↑data()で設定したtitle、description,type,urlを入れている
     ],
   }
 },
}

CSSをどうまとめるか

scopedという特定のページのみスタイルを記述する方法がありとても便利です。

では、共通部分はどうするのがいいか。componentsに書いてたんですが、多分違う気がする。てか、公式に書いてることにこれを書いてる時に気が付いた…。

これですね...。何でこのページ気づかんかったんやろ？公式サイト見てたはずやのに...。

// npmでインストール
npm install --save-dev sass sass-loader@10 fibers

// nuxt.config.jsで設定
export default {
 css: [
   // プロジェクト内の 共通ファイル
   '@/assets/css/共通ファイル名.scss'
 ]
}

今回は設定してないので、今後うちでNuxt.jsを使って制作する場合はこういう設定の仕方になると想定して記述しました。
次回はこの方法でやっていきます。

【おまけ】お問い合わせをどうするか

知識があればnode.jsでお問い合わせ作成したり、axiosで通信してWordPressでContact form7使ってお問い合わせ構築したりしたんでしょうが、今回はそんな時間も予算もなかったので、PHPを使って別ディレクトリでフォーム作りました。スマートなやり方ではないです。苦肉の策です。

今後の課題

お問い合わせをどうするかもそうですが、そもそも設定も内部での処理もサーバー周りも挙げだしたらキリがないくらいNuxt.jsのことを深くわかってないので、SSRができるサーバー構成にしてそこでどんなことが行われてるかを知る必要があると思います。

遠くない日にNuxt.jsを自社のサイトに使いたいと思うので、これからも精進していきます。