## はじめに

今回は、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を導入する方法

<h2>はじめに</h2>
<p>今回は、Nuxt.jsアプリケーションに<a href="https://tailwindcss.com/">Tailwind CSS</a>を統合していきいます。CSSフレームワークを使用することで、開発...

今回は、Nuxt.js×markdown-itで記事を表示する方法を解説しています。
markdown-itを使用すると、取得したMarkdownデータを簡単に変換することができます。

## @nuxtjs/markdownitをインストールする

[@nuxtjs/markdownit](https://www.npmjs.com/package/@nuxtjs/markdownit)をインストールします。
[markdown-it/markdown-it](https://github.com/markdown-it/markdown-it)を拡張したNuxtモジュールです。

```bash
yarn add @nuxtjs/markdownit
```

## nuxt.config.jsの設定

`nuxt.config.js`にmarkdow-itのオプションを書いていきます。

```js
{
  modules: [
    '@nuxtjs/markdownit'
  ],
  markdownit: {
    injected: true // $md.render()がグローバルで使えるようになる
  }
}
```

## VueファイルでMarkdownを変換する

`injected: true`を設定したので、Vueファイルで変換する準備ができました。
` v-html="$md.render()"`で変換を行います。

```js
<template>
  <div v-html="$md.render(markdown)"></div>
</template>

<script>
export default {
  data() {
    return {
      markdown: '# Hello World!'
    }
  }
}
</script> 
```

以上で基本的な変換設定はおわりです。

## おすすめのプラグイン

### 目次の生成

- markdown-it-table-of-contents
- markdown-it-anchor

```bash
yarn add markdown-it-table-of-contents markdown-it-anchor
```

```js
export default {
  markdownit: {
    injected: true,
    // プラグインを使用する場合、ここに書いていきます
    use: [
      "markdown-it-anchor",
      [
        "markdown-it-table-of-contents",
        {
          includeLevel: [1, 2], // 目次で生成する<h>タグ
        },
      ],
    ]
  },
}
```

`markdown-it-table-of-contents`は、目次を自動生成してくれるプラグインで、
`markdown-it-anchor`は、リンクをクリックすると、その場所まで移動してくれるプラグインです。
\
変換データの中に`[[toc]]`を書くと、指定した`<h1>`タグなどから目次を生成してくれます。

### `<a>`タグのの設定

- markdown-it-link-attributes

```bash
yarn add markdown-it-link-attributes
```

```js
export default {
  markdownit: {
    injected: true,
    use: [
      [
        "markdown-it-link-attributes",
        {
          attrs: {
            target: "_blank",
            rel: "noopener noreferrer",
          },
        },
      ],
    ]
  },
}
```

`markdown-it-link-attributes`は、オプションに書いた`attributes`を`<a>`に追加してくれます。

上記の設定の場合、`[リンクテキスト](リンク)`から以下のようなHTMLが生成されます。

```html
<a href="/" target="_blank" rel="noopener noreferrer">リンクテキスト</a>
```

主に重宝しているのは、上記の3つのプラグインです。

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

この他にも、YoutubeやSoundCloudをいい感じに変換してくれるプラグインやCSSをいい感じに変換してくれるプラグインなどたくさんのプラグインが公開されています。気になる方は[markdown-it プラグイン](https://www.npmjs.com/search?q=keywords:markdown-it-plugin)から調べてみてください。
\
また、[markdown-it](https://github.com/markdown-it/markdown-it)を拡張したり、パーサーを１から作るというのも一手かもしれません！


今回は、Nuxt.js×markdown-itで記事を表示する方法を解説しています。
markdown-itを使用すると、取得したMarkdownデータを簡単に変換することができます。

Nuxt.js×markdown-itで記事を表示する方法

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
```

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

はじめに

設定

Related

TAGS

SHARE