## はじめに

今回は、Nuxt.jsアプリケーションに[Tailwind CSS](https://tailwindcss.com/)を統合していきいます。CSSフレームワークを使用することで、開発効率をあげることができます。[Setup](https://tailwindcss.nuxtjs.org/setup)にNuxt.jsへのインストール方法が記載されていました。

## 設定

```bash
yarn add --dev @nuxtjs/tailwindcss
```

```js
buildModules: ['@nuxtjs/tailwindcss']
```

NuxtJS

Nuxt.jsにTailwind CSSを導入する方法

はじめに
今回は、Nuxt.jsアプリケーションにTailwind CSSを統合していきいます。CSSフレームワークを使用することで、開発効率をあげることができます。SetupにNuxt.jsへのインストール方法が記載されていました。
設定…

Nuxt.jsとNetlify Functionsで構成しています。
\
開発環境(ローカル)は、以下のポートを使っています。

- `localhost:4000`: アプリ(NuxtJS)
- `localhost:9001`: API(Netlify Functions)

## 決済のコンポーネント

`nuxt.config.js`でstripeをCDNで読み込む。

```js
export default {
  head: {
    script: [{ src: "https://js.stripe.com/v3/" },],
  },
}
```

決済のコンポーネントを作る。

```js
<template>
  <div>
    <div id="card-element" />
    <p>{{ `${price}`¥ }}</p>
    <button @click="submit">送る</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      card: null,
      stripe: [],
      stripeAPIToken: process.env.STRIPE_PUBLIC_KEY,
      price: "500",
    }
  },

  mounted() {
    this.stripe = Stripe(this.stripeAPIToken)
    const elements = this.stripe.elements()
    this.card = elements.create("card", {
      hidePostalCode: true,
    })
    this.card.mount("#card-element")
  },

  methods: {
    async submit() {
      try {
        // ここでStripeにカード情報(決済情報)を送り、トークンを受け取る。
        const tokenResult = await this.stripe.createToken(this.card)

        if (
          !tokenResult.token ||
          !tokenResult.token.id ||
          tokenResult.token.id === ""
        ) {
          throw new Error("トークン発行エラー")
        }

        // APIサーバにリクエストを送り、決済を行う。
        const chargeResult = await this.$axios.post("http://localhost:9001/.netlify/functions/support", {
          token: tokenResult.token.id,
          price: Number(this.price),
        })

        if (!chargeResult || chargeResult.data !== "NORMAL") {
          throw new Error("決済エラー")
        }

      } catch (error) {
        this.error = error
      }
    },
  },
}
</script>
```

※Stripe Elementsは、httpsでないといけません。
※本人確認をしないと、入金を引き落とすことはできません。
※開発環境と本番環境をうまく分けれないか思案中

## Netlify Functions

```bash
yarn add stripe
```

`functions/support.js`

```js
require("dotenv").config()

exports.handler = async function (event) {
  const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY)

  let result = false

  try {
    const data = JSON.parse(event.body)
    const res = await stripe.charges.create({
      amount: Number(data.price), // 値段
      currency: "jpy", // 通貨
      source: data.token, // トークン
    })
    if (res && res.status === "succeeded") {
      result = true
    }
  } catch (error) {
    console.log(error.message)
  }

  const headers = {
    "Access-Control-Allow-Origin": "http://localhost:4000", // 適宜変更して下さい。
    "Access-Control-Allow-Headers": "Content-Type",
  }

  return {
    statusCode: 200,
    headers,
    body: result ? "NORMAL" : "ERROR",
  }
}
```

ローカル起動

```bash
yarn run serve --port=9001
```

※Stripeの決済は、サーバサイドでないと実行できません。
※ローカルでテストする場合は、`netlify-cli`をインストールしておいてください。

## 終わり

- サブスクリプション
- 従量課金
- シンプルな購入
- 支払い方法の変更

などStripeの活躍する場は、たくさんありそうです。直近作りたいアプリなどがないのですが、使い方を知っておくとすぐに戦力になりそうなので、全部やってみたいと思います。

Netlify

Netlify FunctionsとStripeでサポート機能(charge)を作る

## コンポーネント

`ScrollIndicator.vue`を作る。

```js
<template>
  <div
    class="v-scroll--indicator-wrapper"
    :style="{ height: height, background: background }"
  >
    <div
      class="v-scroll--indicator"
      :style="{ background: color, width: width }"
    />
  </div>
</template>

<script>
export default {
  name: "ScrollIndicator",

  props: {
    height: {
      type: String,
      default: "5px",
      required: false,
    },
    color: {
      type: String,
      default: "linear-gradient(to right, #FEE645, #FEE645)",
      required: false,
    },
    background: {
      type: String,
      default: "#F9FAFB",
      required: false,
    },
  },

  data() {
    return {
      scrolled: "",
      docHeight: "",
      width: "",
    }
  },
  mounted() {
    window.addEventListener("load", this.scrollHandler)
    window.addEventListener("scroll", this.scrollHandler)
  },
  destroyed() {
    window.removeEventListener("load", this.scrollHandler)
    window.removeEventListener("scroll", this.scrollHandler)
  },
  methods: {
    scrollHandler() {
      let article = document.getElementById("article")
      if (article) {
        let articleHeight = article.scrollHeight
        this.scrolled =
          document.body.scrollTop || document.documentElement.scrollTop
        this.docHeight = articleHeight - document.documentElement.clientHeight
        this.width = (this.scrolled / this.docHeight) * 100 + "%"
      }
    },
  },
}
</script>
<style scoped>
.v-scroll--indicator-wrapper {
  /* position: fixed; */
  top: 0;
  right: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  margin-top: 0.5rem;
}
.v-scroll--indicator {
  width: 0;
  height: 100%;
}
</style>
```

## 使い方

記事のページの`id="article"`を見て判断する。

```html
<div id="article">
  ...記事
</div>
```

Headerの下に入れる。

```html
<ScrollIndicator />
```

モバイルでは表示しない && 記事ページ以外では表示しない場合、

```html
<ScrollIndicator v-show="$route.name === 'slug' && $device.isDesktop" />
```

SSRだと、`v-if`でも行けるみたい。

## ポイント

- `mounted`を使用する。`created`では、`window`プロパティが読み込めない。
- `articleHeight`は、記事の長さ
- `document.documentElement.scrollTop`は、**スクロールした長さ**
- `document.documentElement.scrollHeight`は、**スクロールできる長さ**
- `document.documentElement.clientHeight`は、heightとpaddingの合計から、スクロールバーの幅を引いた高さ(borderは含まない)
- `window.addEventListener`でイベント登録
- `window.removeEventListener`でイベント削除

## 資料

- [Element.clientHeight](https://developer.mozilla.org/ja/docs/Web/API/Element/clientHeight)
- [What is offsetHeight, clientHeight, scrollHeight?](https://stackoverflow.com/questions/22675126/what-is-offsetheight-clientheight-scrollheight)
- [robbinjohansson/vue-scroll-indicator](https://github.com/robbinjohansson/vue-scroll-indicator/blob/master/src/components/VueScrollIndicator.vue)
- [How TO - Scroll Indicator](https://www.w3schools.com/howto/howto_js_scroll_indicator.asp)

Nuxt.js(Vue.js)でScroll Indicatorを作る

今回は、Nuxt.jsで動的ページのHTML生成について解説していきます。
動的ページのHTMLを生成することは、いくつかメリットがあるので丁寧にご紹介します。

## 動的ページとは？

このブログを例に出すと、動的なページは以下のようなページがあります。
同じURL構成でもパラメーターによって内容が変化するページのことです。

- `_slug` → 記事ページ
- `/category/_slug` → カテゴリーページ
- `/tag/_slug` → タグページ

Nuxt.jsでは、`_〇〇`というVueファイルで動的なページが作れます。

## Nuxt.jsアプリケーションのモード変更

動的ページをHTML出力するには、`nuxt.config.js`の`generate`プロパティで明示的に生成する必要があります。またSPAの場合ページ遷移しないのでNuxt.jsの設定をSSRに変更します。Nuxt.jsをSPAで構築したい方は不要です。

```js
export default {
  ssr: true
}
```

これでSPAのアプリケーションから、各ページにHTMLを返すSSRのアプリケーションになりました。

## 動的ページをHTML生成する

動的ページのHTMLを生成するには、`nuxt.config.js`の[routes()](https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate/#routes)を編集する必要があります。

```js
generate: {
  routes() {
    return [
      '/nuxt-dynamic-page', // 記事ページ
      '/category/web', // カテゴリーページ
      '/tag/nuxt' // タグページ
    ]
  }
}
```

基本的な形は上記の通りです。`routes`にURLをArrayで返すとHTMLを生成してくれるようになります。
\
`nuxt.config.js`内でContentfulなどHeadlessCMSから取得したデータから生成することもできます。こちらが一般的な使われ方でしょう。

```js
// contentfulのライブラリをインポート
const client = require("./plugins/contentful").default
...
async routes() {
  const routes = []

  // 記事モデルのデータを取得
  const articles = await client.getEntries({
    content_type: "articles"
  })

  articles.items.forEach((article) => {
    routes.push({
      route: `/${article.fields.slug}`, // 記事のURL
      payload: { article: article }, // 記事のデータ
    })
  })

  return routes
}
```

上記のように`payload`を各ページに渡すことができます。`payload`に予めデータを渡すことで対象のVueファイルのデータ取得APIを節約することができます。
\
Vueファイルで`payload`を受け取る場合は、以下のような形になります。

```js
export default {
  async asyncData({ payload }) {
    if (payload)
      return { article: payload.article }

    // 通常、APIでデータを取得する処理
    ...
  }
}
```

`payload`は複数渡せるので、細かな設定もすることができます。
\
また、HTMLを生成したくないURLには、[exclude](https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate/#exclude)オプションを使い正規表現で指定することができます。

## SSRアプリケーションにするメリット

最後にSSRアプリケーションにするメリットを紹介します。
\
※JAMStackブログの場合「バックエンド」と呼べるものはないので、SSRではなく静的サイトと呼ぶのが正しいかもしれません。ContentfulやAlgoliaなどのCMSやAPIサービスがバックエンドと呼べるかもしれません。

- 予めデータを用意しておくことで、APIのリクエスト回数を減らすことができる
- 各ページにHTMLファイルを用意することでクローラーが理解しやすくなる
- SPAアプリケーションと比較して、初期表示が早くなる
- セキュリティを考慮すると、安全性が高いとされる

上記が主なメリットです。ブログのようなサービスの場合はSSRにしておいた方が良いでしょう。

### SPAのメリット

比較のためSPAのメリットを紹介しておきます。

- 初期表示以外の動作が早い
- 遷移しないので、データを保持し続けられる

Webアプリケーションは採用される機会が多いかもしれません。

<div class="sen"></div>

以上、Nuxt.jsで動的ページのHTML生成について解説してきました。
最初は難しいかもしれませんが、手を動かして少しずつデバッグ&修正していくことで理解が深まってきます。
最近では魅力的な静的サイトジェネレーターやHeadlessCMS、APIサービスなどがどんどん開発されてきているので、様々な手法で構築・研究してみてください！

今回は、Nuxt.jsで動的ページのHTML生成について解説していきます。
動的ページのHTMLを生成することは、いくつかメリットがあるので丁寧にご紹介します。

Nuxt.jsで動的ページのHTML生成について解説

`"static/**"`を`serverFiles`に追記する。

```json
{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": [
          "package.json",
          "static/**" // 追記
        ]
      }
    }
  ],
  "routes": [
    { "src": "/_nuxt/.+", "headers": { "Cache-Control": "max-age=31557600" } },
    {
      "src": "/sw.js",
      "dest": "/_nuxt/static/sw.js",
      "headers": {
        "cache-control": "public, max-age=43200, immutable",
        "Service-Worker-Allowed": "/"
      }
    },
    { "src": "/(.*)", "dest": "/" }
  ]
}
```

## 参考

[Deploy Nuxt with Vercel](https://nuxtjs.org/docs/2.x/deployment/vercel-deployment)

Nuxt.js×Vercel Staticディレクトリが読み込めない対処方法

Nuxt.js(SSG)で構成されたプロジェクトにNetlify Functionsを統合していきます。

## ディレクトリ構成

` netlify-lambda`をインストールします。

```bash
yarn add netlify-lambda
```

サーバレス関数を置くディレクトリを作ります。

```bash
mkdir functions
```

その配下に、`hello.js`というファイルを作ります。

```bash
touch functions/hello.js
```

netlifyの構成ファイルを作ります。

```bash
touch netlify.toml 
```

```bash
.
├── functions/hello.js
├── netlify.toml
├── nuxt.config.js
├── package.json
└── yarn.lock
```

## コード

`hello.js`

```js
exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: "Hello, World"
  }
}
```

`package.json`

```json
{
  "scripts": {
    "serve": "netlify-lambda serve functions/",
  }
}
```

`netlify.toml`

```js
[build]
  Command = "netlify-lambda build functions/ && nuxt generate --modern=server"
  functions = "functions/dist"
  publish = "dist"
```

※Netlify Functionsは`{TARGET}/dist`にデプロイされます。
\
`https://{DOMAIN}/.netlify/functions/hello`にデプロイされます。

## ローカル開発

ローカルで起動する。

```bash
 yarn run serve --port=9001
 ```

` http://localhost:9001/.netlify/functions/hello`から実行できます。

## 資料
- [netlify/netlify-lambda](https://github.com/netlify/netlify-lambda)
- [Netlify Functions](https://www.netlify.com/products/functions/)
- [Functions overview](https://docs.netlify.com/functions/overview/)

Netlify Functionsを使う

## Transitionの設定

`default.vue`で使ってみる。

```html
<template>
  <div>
    <TheHeader />
    // 囲う
    <transition name="page" mode="out-in">
      <nuxt />
    </transition>
    // 囲う
    <TheFooter />
  </div>
</template>
```

`name="page"`とcssのプロパティが連携するので注意。

```css
.page-enter {
  opacity: 0;
}
.page-enter-active {
  transition: opacity 1s;
}
```

## nuxt.config.jsの設定

`nuxt.config.js`

```js
{
  loading: false,
}
```

loadingを表示したくない場合は、`false`
\
使用する場合は、

```js
  loading: {
    color: "#F9FAFB",
    height: "5px",
  },
```

のような形。

## ポイント

- 高さが調節されるので、注意(https://github.com/nuxt/nuxt.js/issues/2593 未解決のよう)
- `loading`プロパティで、遷移中のloadingを制御(表示/非表示, 色)

## 資料

- [The loading Property](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading/)
- [The page `transition` Property](https://nuxtjs.org/docs/2.x/components-glossary/pages-transition/)
- [The scrollToTop Property](https://nuxtjs.org/docs/2.x/components-glossary/pages-scrolltotop/)
- [Enter/Leave & List Transitions](https://vuejs.org/v2/guide/transitions.html#Transition-Modes)

Nuxt.jsでTransitionを使用する

Nuxt.jsとTypeScriptの構築が難しいので、TypeScriptは入れていません。
今後、おそらく改善されていくと思うので、その時に頑張ろうかなと思います。

## セットアップ

Testツールをインストールする。

```bash
yarn add -D jest vue-jest @vue/test-utils babel-jest
```

`jest.config.js`を作成し、記述します。

```js
module.exports = {
  transform: {
    "^.+\\.js$": "babel-jest",
    ".*\\.(vue)$": "vue-jest",
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/$1",
    "^~/(.*)$": "<rootDir>/$1",
  },
  moduleFileExtensions: ["js", "json", "vue"],
  testMatch: ["<rootDir>/tests/components/**/*.js"], // テストの対象(〇〇test.js)
}
```

このままだと、`import`文を読み込んでくれないので、コンパイルに必要なライブラリをインストールします。

```bash
yarn add -D babel-core@bridge
```

`package.json`にbabelの設定を書きます。`.babelrc`でも良いです。

```json
{
  ...
  "babel": {
    "env": {
      "test": {
        "presets": [
          "@babel/preset-env"
        ]
      }
    }
  },
  "scripts": {
    "test": "jest --config jest.config.js"
  },
  ...
}
```

lintで`describe`や`test`が引っ掛かるので、`.eslintrc.js`の追記します。

```js
module.exports = {
  ignorePatterns: ["**/tests/**/**/*.js"], // 追記
}
```

[ESLint Ignoring Code](https://eslint.org/docs/user-guide/configuring/ignoring-code)

## テストの作成

このブログのディレクトリは下記のようになっています。`TheTag.vue`のテスト作成します。

```bash
components
├── atoms
│   └── TheTag.vue
├── molecules
└── organisms

tests
└── components
    ├── atoms
    │   └── TheTag.test.js
    ├── molecules
    └── organisms
```

`@components/atoms/TheTag.vue`のテストを作成します。hygenなどで作ってもいいかも。

```js
<template>
  <a :href="`/tag/${tag.fields.slug}`">
    {{ tag.fields.name }}
  </a>
</template>
<script>
export default {
  name: "TheTag",

  props: {
    tag: {
      type: Object,
      required: true,
    },
  },
}
</script>
```

```js
import { mount } from "@vue/test-utils"
import TheTag from "@/components/atoms/TheTag"

describe("TheTag", () => {
  const wrapper = mount(TheTag, {
    propsData: {
      tag: {
        fields: {
          name: "NuxtJS",
          slug: "nuxt",
        },
      },
    },
  })

  test("props", () => {
    expect(wrapper.props().tag.fields.name).toBe("NuxtJS")
    expect(wrapper.props().tag.fields.slug).toBe("nuxt")
  })

  test("attributes", () => {
    const aTag = wrapper.find('a')
    const href = `/tag/${wrapper.props().tag.fields.slug}`

    expect(aTag.text()).toContain(wrapper.props().tag.fields.name)
    expect(wrapper.attributes().href).toBe(href)
  })
})
```

[Vue Test Utils props](https://vue-test-utils.vuejs.org/api/wrapper/props.html)

## テストの実行

```bash
yarn test
```

![Nuxt Jest](//images.ctfassets.net/0jyj5pjwic68/1Ql3CLe4v2yhcBQInM8ggE/0b9495a82772c30c6fa544ae2751cadf/____________________________2021-03-11_22.47.16.png)

## huskyとlint-stagedの設定

設定しようと思ったら、[error Command "husky-run" not found. #881](https://github.com/typicode/husky/issues/881)が発生したので。。。

```bash
yarn add -D husky lint-staged
yarn husky init
```

`package.json`に追記する。これでGitコミット時にLinterとTestが実行されます。

```json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": "yarn lint",
    "*.{css,vue}": "yarn stylelint",
    "*.{js,vue}": "yarn test"
  },
}
```

stylelintも入れておくと、CSSのちらつきなど原因のわからないエラーを潰してくれたので良きです。

Nuxt.jsにJestを導入する

## バージョン確認

```bash
npx nuxt -v
# @nuxt/cli v2.15.2
```

## バージョンアップデート

```bash
yarn upgrade nuxt
```

## 古いライブラリの確認

```bash
yarn outdated
```

NuxtJSのバージョン確認とアップデート

今回は、Nuxt.jsで不要なライブラリを洗い出す方法を解説しています。
開発しているとアンインストールし忘れたライブラリや不要なコードが積み重なっていくと思います。
nuxt analyzeを使用すると、JSやCSSを視覚化できます。

100点を取りました。

![LightHouse100](//images.ctfassets.net/0jyj5pjwic68/Wm6Gd1iGrulizfPvAbOVU/f64e723dff2348be3ac73b345ce6959c/LightHouse100.gif)

## パフォーマンスを改善する方法

- 画像の軽量化・遅延読み込み
- ライブラリのJS・CSSの軽量化・最適化
- プロジェクトのJS・CSSの軽量化・最適化

上記が主にパフォーマンスを改善する方法です。
\
Nuxt.jsには、あらかじめ[webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)というライブラリが組み込まれており、どのライブラリがどれくらいの大きさなのか？を可視化することができます。

## ステップ1: nuxt.config.jsの設定

`nuxt.config.js`の`build`プロパティを下記のように設定することでbuild時にanalyzeを実行することができます。

```js
export default {
  build: {
    analyze: true, // 本番環境ではfalseに設定してください
  },
}
```

## ステップ2: analysisの実行

また、`nuxt.config.js`で設定しなくても、コマンドラインのオプションを付けることでanalyzeを実行できます。

```bash
yarn build --analyze
# もしくは
nuxt build --analyze
```

上記コマンドを実行すると、ライブラリの大きさを示した`.nuxt/stats/client.html`が生成されます。

```bash
open .nuxt/stats/client.html
```

## ステップ3: 結果をみる

開いた結果が以下の通りです。

![analyze](//images.ctfassets.net/0jyj5pjwic68/5TZ4dJEMDWQ8qiAhKvmRo2/e668031054752e77c20d9513c8fae285/AnyConv.com__analyze__1_.png)

- `Bootstrap`
- `moment.js`

が大きいようなので、これらのライブラリを変更する。もしくは無くすことができれば、パフォーマンス改善することができます。
\
また、プロジェクトの内のVueファイルのJSもバンドルされ可視化されているのでコードのリファクタリングに役立てることができます。

## ステップ4: 改善 - ライブラリの変更・アンインストール

- Change moment.js to dayjs.
- Uninstall Bootstrap.

I tried running the above. The results are as follows.

### Light House

[Light House](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja)

![performance20200917](//images.ctfassets.net/0jyj5pjwic68/3vc92sUM5DSpf3Ec7zha0k/62e5f13dbc647104eedbae859df17711/AnyConv.com______________________________2020-09-18_22.18.55__1_.png)

### ページスピードインサイト

[ページスピードインサイト](https://developers.google.com/speed/pagespeed/insights/)

![PageSpeed Insight20200917](//images.ctfassets.net/0jyj5pjwic68/7mtsoqiW9v4M8KZG1j8x6s/a5cd0fe45108a9ad575af3fa7bd29a85/AnyConv.com______________________________2020-09-18_21.38.19__1_.png)

※現状Google Adsenseを使用しているので、点数が落ちています。

<div class="sen"></div>

以上、「Nuxt.jsで不要なライブラリを洗い出す方法」を解説してきました。
この他にも、[Light House](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja)での分析結果を見て、パフォーマンスを上げていく方法があります。是非いろいろな改善方法を探してみてください！

今回は、Nuxt.jsで不要なライブラリを洗い出す方法を解説しています。
開発しているとアンインストールし忘れたライブラリや不要なコードが積み重なっていくと思います。
nuxt analyzeを使用すると、JSやCSSを視覚化できます。

Nuxt.jsにTailwind CSSを導入する方法

はじめに

設定

関連記事