今回は、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データを簡単に変換することができます。

NuxtJS

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

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で不要なライブラリを見つけ出す方法

今回は、Nuxt.jsで`noindex`を設定する方法ついて解説します。
`noindex`は、価値の低いページを検索結果に表示させないようにして、サイト全体の評価を下げるのを防ぎます。

## noindexを設定する方法

`noindex`を設定するには、`<head>`に以下のような`<meta>`を設定します。

```html
<meta name="robots" content="noindex" >
```

## Vueファイルでnoindexを設定する

記事ページの`head()`に以下のようなコードを書きます。

```js
head() {
  return {
    meta: [
      this.article.fields.noindex
        ? { hid: "robots", name: "robots", content: "noindex" }
        : {},
    ]
  }
}
```

Contentfulを使っているので、ArticleモデルにBoolean型の`noindex`カラムを追加しています。
他のCMSやWebフレームワークでも同じような形にできると思います。
\
`this.article.fields.noindex`が`true`の場合に、`nofollow`のリンクが設定されます。
\
以上で`noindex`の設定はおわりです。

## noindexを確認する

設定すると、以下のようなリンクが設定されているはずです。

![noindex](//images.ctfassets.net/0jyj5pjwic68/uBEVZpc0biWi9Dtd1L0EN/f2f5963450f23e6319df70dbb062baec/____________________________2020-10-27_10.01.13.png)

実際に、インデックスされているかどうかは[Googleサーチコンソール](https://search.google.com/search-console/welcome?hl=ja)から確認できます。
価値が低いページは`noindex`を貼っておいた方がいいでしょう。

## noindexとnofollowの違い

`nofollow`と類似するリンクで、`noindex`があります。

`noindex`との違いは、

- noindexは、検索結果に表示させないようにする。
- nofollowは、クローラーにページ内のリンクを辿らせないようにする。

ことです。

`nofollow`は、外部リンクをページの評価(ページランク)に含めないようにすることです。

`noindex`は、各記事ページに設定しますが、`nofollow`は、外部リンクに対して設定します。

### nofollowの場合

`nofollow`の場合は、以下のようにリンクを設定します。

```html
<a href="リンク先URL" rel="nofollow">リンクテキスト</a>
```

`nofollow`は、外部リンクをサイト評価に含めたくない場合に貼っておいた方がいいでしょう。


今回は、Nuxt.jsでnoindexを設定する方法ついて解説します。
noindexは、価値の低いページを検索結果に表示させないようにして、サイト全体の評価を下げるのを防ぎます。

Nuxt.jsでnoindexを設定する方法

今回は、Nuxt.jsでscssを使用する方法を解説しています。
scssを使用すると、CSSを書く際に便利な機能がたくさん使えます。グローバルで読み込む方法も解説しています。

## ライブラリをインストール

`sass-loader`と`node-sass`をdevDependenciesにインストールします。

```bash
yarn add -D sass-loader node-sass
```

以上で、Nuxt.jsではscssが使えるようになります。

プロジェクトを立ち上げたままインストールすると`node-sass`が読み込まれないようなので、Nuxt.jsを再起動してください。

## Vueファイルでscssを書く

Vueファイルでscssを使用する場合は、`lang="scss"`をstyleタグに記載します。

```html
<template>
  <div class="article">
    <h2>テスト</h2>
  </div>
</templatet>
<script>
export default {}
</script>
<style lang="scss">
h1 {
  ...
}
.article {
  ...
}
</style>
```

## scssファイルをグローバルに読み込む

- `appilication.scss` scssをまとめて読み読ませるファイル
- `variables.scss` 変数を扱うscssファイル
- `common.scss` 共通で使うscssを記載するファイル

上記の3つを例にして解説します。
\
`appilication.scss`

```scss
@import "variables";
@import "common";
```

`variables.scss`

```scss
$primary: #EE817B;
```

`common.scss`

```scss
h1 {
  font-size: 30px;
}
.article {
  font-size: 22px;
}
```

3つファイルがありますが、最終的に`appilication.scss`1つで吐き出すように設定します。

### nuxt.config.jsの設定

グローバルにCSSを読み込ませるには、`nuxt.config.js`の`css`プロパティにscssファイルを指定します。

```js
export default {
  css: ["@/assets/stylesheets/application.scss"],
}
```

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

以上Nuxt.jsでscssを使用する方法でした。
scssの量が増えてくると１ファイルでは管理できなくなってくると思うので、管理しやすいディレクトリ構成を探してみてください！


今回は、Nuxt.jsでscssを使用する方法を解説しています。
scssを使用すると、CSSを書く際に便利な機能がたくさん使えます。グローバルで読み込む方法も解説しています。

Nuxt.jsでscssを使用する方法

今回は、Nuxt.jsにGoogle Adsenseを導入する方法を解説します。
Adsenseはブログを収益化させる方法の1つです。是非これを機会に導入してみてください。
\
前提として、Google Adsenseにサイトを申請している必要があります。
もし、申請していない方は、[Google Adsense](https://www.google.com/intl/ja_jp/adsense/start/)から、ご自身のサイトを申請してください。
※申請の許可には、時間がかかります。

## @nuxtjs/google-adsenseをインストールする

[@nuxtjs/google-adsense](https://www.npmjs.com/package/@nuxtjs/google-adsense)を使って、Nuxt.jsにGoogle Adsenseを導入していきます。

```bash
yarn add @nuxtjs/google-adsense
```

## nuxt.config.jsの設定

基本的に、Nuxt.jsプロジェクトにライブラリを追加する際は、`nuxt.config.js`を編集していきます。
\
`modules`プロパティを下記のように設定します。

```js
export default {
  modules: [
    [
      "@nuxtjs/google-adsense",
      {
        id: "ca-pub-XXXXXXXXXXX",
        pageLevelAds: false, // 自動広告を表示させる場合
        analyticsUacct: "UA-XXXXXXXX-X", // Google Analyticsとの連携
        analyticsDomainName: "example.com", // Google Analyticsとの連携
      },
    ],
  ],
}
```

Analyticsと連携が不要な方は、`analyticsUacct`と`analyticsDomainName`は記載しなくて良いです。

## VueファイルにGoogle Adsenseを追加する

次に、実際に`<template>`の中にAdsense組み込んでいきます。

```html
<template>
 <div>
  <adsbygoogle
   :ad-slot="'広告ユニットID'"
   :ad-style="{ display: 'block' }"
   :ad-format="'auto'"
  />
 </div>
</template>
```

`ad-style`でアドセンスのstyleを変更することができます。

もし、`ad-style`に正確な`width`や`height`を設定する場合は、`ad-format`を`''`にしてください。`height: auto !important`が自動で適用させるので、思うようにstyleが当たらない可能性があります。

### サイドバーでGoogle Adsenseを表示する

一例ですが、サイドバーの`width`が290pxの場合、以下のようにstyleを当てることができます。

```js
<template>
 <div>
  <adsbygoogle
   :ad-slot="'広告ユニットID'"
   :ad-style="gadStyle"
   ad-format=""
  />
 </div>
</template>
<script>
export default {
  data() {
    return {
      gadStyle: {
        display: "inline-block",
        width: "290px",
        height: "250px",
      },
    }
  },
}
</script>
```

上記を設定して本番環境にデプロイすると、Adsense広告が表示されます。
※審査に合格している必要があります。

## Google Adsense 審査基準

Google Adsenseの審査に落ちてしまう方もいると思うので参考程度に、このブログが合格した時の状態を載せておきます。

- 記事数: 約20記事
- 記事の文字数: 1000~3000文字
- 画像: 全て著作権フリー
- プライバシーポリシーの設置
- お問い合わせの設置

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

以上、Nuxt.jsにGoogle Adsenseを導入する方法を解説してきました。
\
ただブログを書くだけではモチベーションが続かなくなると思うので、これを機会に「どういう記事に価値が高いのか？」や「どういう文章が必要とされているか？」を考えてみてもいいかもしれません。


今回は、Nuxt.jsにGoogle Adsenseを導入する方法を解説します。
Adsenseはブログを収益化させる方法の1つです。是非これを機会に導入してみてください。

Nuxt.jsにGoogle Adsenseを導入する方法

## 開始する

```bash
firebase init functions
```

上記を実行すると`functions`というディレクトリができます。最初のサンプルコードをデプロイしてみます。

```js
const functions = require('firebase-functions');

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
exports.helloWorld = functions.https.onRequest((request, response) => {
  functions.logger.info("Hello logs!", {structuredData: true});
  response.send("Hello from Firebase!");
});
```

## デプロイする

```bash
firebase deploy --only functions
```

## 実行する

```bash
curl --header Content-Type:"application/json" {エンドポイント}
````

Nuxt.jsでFirebase Cloud Functionsを使う方法

## はじめに

`firebase.js`

```js
import firebase from "firebase/app"
import "firebase/auth"
import "firebase/storage"
import "firebase/firestore"

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.env.FIREBASE_MEASUREMENT_ID,
  })
}
export const auth = firebase.auth()
export const storage = firebase.storage()
export const db = firebase.firestore()
export default firebase
```

## CORS周り

[HTTP 関数](https://cloud.google.com/functions/docs/writing/http?hl=ja#handling_cors_requests)