のせっち 
こんにちは！のせっちです。
Web制作エンジニアとして普段はHTML/CSS, WordPressを中心に書いています。
僕のようなWebエンジニアがNuxt.jsでLPを書くために必要な知識をご紹介します。
なぜLPをNuxtで書くのか？
僕がNuxtでLPを書こうと思ったきっかけは下記です。
- コンポーネント化して使いたい（header, footerなど）
- for文を使いたい。
- metaタグを別で管理したい。
- 一緒に入ってくるビルドツールを活用したい。
ということで、要は見通しよく、効率よく書きたいということです。
LPコーディングですので、データベースとの連携等は行いません。
これだけでグッと難易度は下がります。
コラム：
これはとても個人的な理由ですが、ejsがどうにも好きになれなくて、勉強を兼ねてNuxtでLPを書いてみたら便利だった！という感じです。
LPをNuxtで書くために必要な知識一覧
まずは、必要な知識を一覧でババっと並べた上で、一つずつ解説していきます。
- Vue、Nuxtの基礎知識
- webpackの基礎知識
- v-forの使い方
- v-htmlの使い方
- propsの使い方
- SCSSを使う方法
- SCSSをglob importする
- autoprefixerを設定する
- jQueryを使う方法
- metaタグの書き方
- Google Tag Managerの書き方
- サブディレクトリのパスを通す方法
自分で調べようとすると結構ハマるポイント盛りだくさんなので是非最後まで読んでいってくださいね！
Vue、Nuxtの基礎知識
『NuxtでLPを書く』ことが目的ならば全ての知識を入れておく必要はないです。
「Vue/Nuxtってこんな感じなんだな。」くらいでOKです。
オススメはVue.js&Nuxt.js超入門 ですね。
学習のはじめは、まず詰まないことが最重要なので超やさしいこちらの本から始めましょう。
「ここだけは最低限押さえておこう！」
「今これはわからなくてOK！」
という感じで書かれており、安心して読み進めることができます。
YouTubeにもオススメ教材があります。書籍を読んだ後は、動画でNuxtでのWebサイト制作をザクっと把握しましょう！
ここまで来ると、NuxtでのLP制作が俄然できる気がしてきます。
資料も用意されており、かなりいい教材です！
webpackの基礎知識
必須ではないですが、知っているとかなり理解が早いです。
gulp、webpack、laravel-mix等でフロントエンド環境を構築したことがあれば問題ありません。
僕のブログでも紹介していますので是非ご覧ください！
v-forの使い方
カードや、リストなど繰り返し要素はv-forを使ってスッキリと書くことができます。
下記のような感じ
<template>
<div>
<ul>
<li v-for="color of colors" :key="color">
{{color}}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
colors: ['system', 'light', 'dark', 'sepia']
}
}
}
</script>
v-htmlの使い方
html/cssコーディングをしていると、
- 一部色が違う
- 太さが違う
- リンクタグが挟まる
といったイレギュラーがあります。
そういうケースではv-htmlを使えばOKです。
<template>
<div>
<ul>
<li v-for="text in texts" :key="text">
<h2>{{text.title}}</h2>
<p v-html="text.sub"></p>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
texts: [
{
title: 'This is Title1',
sub: 'This is text. <span class="font-weight-bold">Text is bold</span>'
},
{
title: 'This is Title2',
sub: 'This is text. <span class="text-red">Text is red</span>'
},
]
}
}
}
</script>
<style>
// 省略
</style>上記例では、<span>タグを使いました。ヒゲ構文{{}}で囲むとテキストとしてそのまま表示されてしまいますので、v-htmlを使って、htmlとして出力します。
上記公式ドキュメントにある、XSS 脆弱性に関して、出力される値がユーザーから入力される場合は注意が必要ですが、Web制作においてはそこまで気にする必要はないと考えます。
XSS 脆弱性をクリアしたい場合は、sanitize-htmlを使用してください。
そのまま使うとid、classまでもcleanされてしまうので別途許可設定が必要です。
参考になった記事
propsの使い方
コンポーネントを作って、中身のテキストや画像パスなどを任意に変えたいケースがあります。
そういう場合は、propsを使います。
『各セクションのタイトルをコンポーネント化したい』
という想定で、例を挙げて説明していきます。
まず、コンポーネント側でpropsをセットします。
<template>
<div class="heading">
<h2 class="heading__ttl">{{title}}</h2>
<div class="heading__img"><img :src="imgPath" :alt="alt"></div>
</div>
</template>
<script>
export default {
name: "Heading",
props: ["title", "imgPath", "alt"]
}
</script>propsでtitle, imgPath, altをセットしました。
あとは、importして使うだけです。
<template>
<Heading
:title="title"
:imgPath="imgPath"
:alt="alt">
</Heading>
</template>
<script>
import Heading from "~/components/component/Heading.vue";
export default {
components: {
Heading,
},
data () {
return {
title: 'This is Title',
imgPath: require('@/assets/img/img.jpg'),
alt: 'This is alt tag'
}
}
}
</script>SCSSを使う方法
create-nuxt-app だけではscssは使えないので、使えるようにしていきます。
まずはpackageをインストールします。
npm i -D node-sass sass-loader各vueファイルでは、lang="scss"を追加すればOKです。
scssがちゃんと使えることを確かめるために変数をセットしてみます。
<template>
<!-- 省略 -->
</template>
<script>
// 省略
</script>
<style lang="scss">
$color-red: #f00;
.hoge {
color: $color-red;
}
</style>globalでscssを使用するには、nuxt.config.jsを編集します。
export default {
css: [
{ src: '~/assets/scss/app.scss', lang: 'scss' }
],
}SCSSをglob importする
glob importとは、*(ワイルドカード）を使って一気にscssファイルを読み込むことです。
- reset, responsive, mixin…などの共通ファイルをグローバルで読み込みたい。
- cssはcssで管理したい。
- html/cssコーディングした後、Nuxtにお引越ししたい。
上記のようなケースで使えます。
ということで、早速設定していきます。
@nuxtjs/style-resourcesをインストールします。
npm i -D @nuxtjs/style-resources次に、nuxt.config.jsを編集していきます。
modules: [
'@nuxtjs/style-resources'
],
styleResources: {
scss: [
'~assets/scss/setting/**.scss',
'~assets/scss/foundation/**.scss',
'~assets/scss/mixin/**.scss',
'~assets/scss/layout/**.scss',
'~assets/scss/component/**.scss',
'~assets/scss/project/**.scss',
'~assets/scss/utility/**.scss',
'~assets/scss/external/**.scss',
]
},これで一つ一つファイル指定しなくても一気にscssを読み込んでくれます。
autoprefixerを設定する
autoprefixerはCSSベンダープレフィックスや古いバージョンとの互換のためのプロパティなどを自動で追加してくれるものです。
IE11は入れておきたいので設定します。
package.jsonか.browserslistrcに書くかお好みですが、今回は.browserslistrcに記載する方法を紹介します。
package.jsonと同じ階層に.browserslistrcを作成します。
touch .browserslistrc設定を追加します。
defaults,
IE 11,
Android >= 6defaultsには0.5%, last 2 versions, Firefox ESR, not dead が含まれます。
jQueryを使う方法
Webエンジニアにとって、jQueryはまだまだ手放せないでしょう。
jQueryは古いとか、バニラjsで対応可能とか、当ブログでも脱jQuery系の記事を沢山書いていますが、、、
やはりjQueryは便利だと思います。歴史があるからこそ情報が多く、関連ライブラリも多いです。
これはjQueryの持つ大きな資産だと言えます。
ということで、jQueryを使えるようにしていきましょう。
まずはパッケージのインストールからです。
npm i jquery次に、nuxt.config.jsに設定を書いていきます。
const webpack = require('webpack')
export default {
build: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
],
}
}各jsファイルでいちいちimport $ from 'jquery'とかを書かなくていいようになります。
今までjQueryは別で管理してきたでしょうから、Nuxtでも別ファイルで管理して読み込みます。
pluginsに記載すればOKです。
plugins: [
{ src: '~/plugins/js/app.js', ssr: false }
],ちなみにですが、通常のwebpackのような感じでimportできます。
import {floatingBtn} from "./modules/floatingBtn";
floatingBtn();moudulesフォルダで役割ごとにjsを書いて、app.jsで纏めてimportするような使い方ですね！
metaタグの書き方
メタタグは全てnuxt.config.jsに書きます。共通部分もあるので、変数も使いながら共通化していきます。
const title = 'Website Title';
const description = 'description';
const url = 'https://flex-box.net/';
const ogImage = `${url}ogimage.png`;
const fbAppId = "1234567890";
export default {
head {
title,
titleTemplate: '%s | Website Name',
htmlAttrs: {
lang: 'ja'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: description },
{ hid: 'ogTitle', property: 'og:title', content: title },
{ hid: 'ogType', property: 'og:type', content: 'website' },
{ hid: 'ogUrl', property: 'og:url', content: url },
{ hid: 'ogImage', property: 'og:image', content: ogImage },
{ property: 'og:site_name', content: title },
{ hid: 'ogDescription', property: 'og:description', content: description },
{ name: 'twitter:card', content: 'summary_large_image' },
{ hid: 'twitterSite', name: 'twitter:site', content: title },
{ hid: 'twitterUrl', name: 'twitter:url', content: url },
{ hid: 'twitterTitle', name: 'twitter:title', content: title },
{ hid: 'twitterDescription', name: 'twitter:description', content: description },
{ hid: 'fb:app_id', property: 'fb:app_id', content: fbAppId },
],
link: [
{ hid: 'shortcut icon', rel: 'icon', type: 'image/x-icon', href: `${url}favicon.ico` },
{ hid: 'icon', rel: 'icon', sizes: '48x48', href: `${url}favicon-48x48.png` },
{ hid: 'apple-touch-icon', rel: 'apple-touch-icon', sizes: '144x144', href: `${url}apple-touch-icon-144x144.png` },
]
},
}faviconやogimageはstaticフォルダに置く想定です。
Google Tag Managerの書き方
通常NuxtでGoogle Tag Manage(GTM)を使う場合は、Nuxt側の設定と、GTM側（トリガーの設定）両方が必要です。
とはいえ、Web制作案件では、権限をもらえない場合も多くあり、クライアントに設定をお願いするのは負担になるケースがあります。
そこで、こちらの記事を参考に設定をしていきます。
該当部分の抜粋です。（ ありがとうございますm(_ _)m )
const gtmID = 'GTM-XXXXXXX'
const gtmHeadTag = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','${gtmID}');`
const gtmBodyTag = `<iframe src="https://www.googletagmanager.com/ns.html?id=${gtmID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`
export default {
head: {
script: [
{
hid: 'gtmHead',
innerHTML: gtmHeadTag
}
],
noscript: [
{
hid: 'gtmBody',
innerHTML: gtmBodyTag,
pbody: true
}
],
__dangerouslyDisableSanitizersByTagID: {
'gtmHead': ['innerHTML'],
'gtmBody': ['innerHTML']
}
}
}これでGTMタグを出力することができます！
サブディレクトリのパスを通す方法
通常は、npm run generateして、distフォルダの中身をそのままFTPアップロードすればおしまいです。
ただ、アップロード先がサブディレクトリの場合は、一手間必要です。
そのままアップロードしても画像のパスなどが合わないはずです。
nuxt.config.jsを編集します。
export default {
router: {
base: '/DIRECTORY_NAME/' // ここをサブディレクトリのurl名にする
},
head: {
base: {
href: 'router.base'
},
}
}これで改めてnpm run generateすればパスが通ります。
npm run devでもlocalhost:3000がlocalhost:3000/DIRECTORY_NAME/に変わります。
以上です。お疲れ様でした。
まとめ
・LPをNuxtでコーディングするには抑えるべきポイントが結構ある。
・一度作ってしまえば、役割ごとに管理でき見通しがよくなる。