![FLStudio Buffer Length](//images.contentful.com/0jyj5pjwic68/OMDY9X3NtIMAVb3HrAsfa/7f2fd02c3a1968d63eeb20372c645602/____________________________2021-09-22_23.36.23.png)

Buffer Length を短くすると、リアルタイムで楽器が鳴る

ただし、CPU負荷が増えるので、楽器が増えてきたら増やすこと🕺

FLStudio

FLStudio Buffer Length

音楽

とあるプロジェクトにて…

```bash
zsh: command not found: redis-cli
```

```bash
# インストール
brew install redis

# 確認
which redis-server
# /usr/local/bin/redis-server

# 起動
redis-server
```

Redis

MacにRedisのインストール

VSCodeの拡張機能を入れる

![スクリーンショット 2021-09-22 19.05.49](//images.contentful.com/0jyj5pjwic68/6mTiTGISh0Xbm3ELyxI6Or/90f9f183536f7dbe61df8e49d93133c3/____________________________2021-09-22_19.05.49.png)

**Command+Shift+p** で 「**emoji**」を入力し、選択する

![スクリーンショット 2021-09-22 19.06.49](//images.contentful.com/0jyj5pjwic68/5qO775MOlLOtBUqOo6wjzs/e52f4ca0014ac84ca48c3fddc7fc6196/____________________________2021-09-22_19.06.49.png)

検索する 🎉

![スクリーンショット 2021-09-22 19.07.10](//images.contentful.com/0jyj5pjwic68/qq5JLVGkwffW3oTbOMWkX/337684889392e1ee628d35b96bda06e7/____________________________2021-09-22_19.07.10.png)

visual-studio-code

VSCodeで絵文字を使う

## インストール
```bash
brew install mysql # v8.xのインストール
brew install mysql@5.7 # v5.7のインストール

mysql --version # バージョン確認
mysql -V # バージョン確認
# mysql  Ver 14.14 Distrib 5.7.35, for osx10.16 (x86_64) using  EditLine wrapper

brew info mysql # BrewのMySQL情報の確認
brew info mysql@5.7 # BrewのMySQL5.7情報の確認
```

## v5.7のPATH設定

```bash
vim ~/.zshrc
```

```.zshrc
# MySQL
export PATH="/usr/local/opt/mysql@5.7/bin:$PATH"
```

```bash
source ~/.zshrc
```

## 起動/停止など

**👇 必須**

```bash
brew services start mysql@5.7
```

```
ERROR! The server quit without updating PID file (/usr/local/var/mysql/$USER.local.pid).
```

が出る場合は、実行できていない可能性がある。

```bash
brew services list # Brewで起動しているサービスの確認
```

```bash
mysql.server start # MySQLの起動
mysql.server stop # MySQLの停止
mysql.server status # ステータスの確認
```

ログインできるか？

```bash
mysql -uroot
```

## 正常に起動できている場合

![mysql.sock画像](//images.contentful.com/0jyj5pjwic68/5BT7VgGZb9lqycCgba0wLM/9b962de157c54e2fb42092bf6e3fbc9f/____________________________2021-09-21_14.02.55.png)

![MySQL pidファイル](//images.contentful.com/0jyj5pjwic68/5yweFaBNEArzuhU0hbxqYs/867f263eb1d0586db74a2b0b7b0e77c3/____________________________2021-09-21_16.10.43.png)

## アンインストール

```bash
sudo rm -rf /usr/local/mysql
sudo rm -rf /Library/StartupItems/MYSQL
sudo rm -rf /Library/PreferencePanes/MySQL.prefPane
sudo rm -rf /Library/Receipts/mysql-.pkg
sudo rm -rf /usr/local/Cellar/mysql*
sudo rm -rf /usr/local/bin/mysql*
sudo rm -rf /usr/local/var/mysql*
sudo rm -rf /usr/local/etc/my.cnf
sudo rm -rf /usr/local/share/mysql*
sudo rm -rf /usr/local/opt/mysql*
sudo rm -rf /usr/local/mysql*
sudo rm ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist
sudo rm -rf /Library/StartupItems/MySQLCOM
sudo rm -rf /Library/PreferencePanes/My*
```

```bash
sudo rm -rf /tmp/mysql.sock 
sudo rm -rf /tmp/mysql.sock.lock
```

```bash
brew uninstall mysql@5.7
brew uninstall mysql
```

## ドキュメント

- [MySQL5.7をHomebrewでmacOSにインストールする手順 |](https://weblabo.oscasierra.net/mysql-57-homebrew-install/)

MySQL

MacでMySQLの操作とインストール

## ドキュメント

- [コンテクスト – React](https://ja.reactjs.org/docs/context.html) : 公式のドキュメント
- [Context API with TypeScript and Next.JS - DEV Community 👩‍💻👨‍💻](https://dev.to/shareef/context-api-with-typescript-and-next-js-2m25)

## 課題

Recoilによる、開発体験は非常によかったが、下記のエラーに悩まされた。

```bash
app_1    | Duplicate atom key "isLoading". This is a FATAL ERROR in
app_1    |       production. But it is safe to ignore this warning if it occurred because of
app_1    |       hot module replacement.
```

Issueはこちら

[[SSR][NextJS] Duplicate atom key during development and during production build in nextjs · Issue #733 · facebookexperimental/Recoil](https://github.com/facebookexperimental/Recoil/issues/733)

やりたいこととしては、シンプルなので、React Context APIを使用する。

## やりたいこと

- **ローディングコンポーネントの呼び出し**
- **メッセージ（アラート）の呼び出し**

などの状態をグローバルステート（React Context API）で管理し、開発体験を向上させる。

## ポイント

> コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリー内でデータを渡す方法を提供します。

## React Context 実装

```context/state.js
import { useState, createContext, useContext } from 'react';
import Loading from '@/components/atoms/loading'; // 👈 使用するローディングコンポーネント

// 👇 Contextの作成
const AppContext = createContext({
  loading: false,
  setLoading: (_) => {},
});

// 👇 _app.tsxでコンポーネントツリーの上の方に追加する
export const AppWrapper = ({ children }) => {
  const [loading, setLoading] = useState(false);

  const value = {
    loading,
    setLoading,
  };

  return (
    <AppContext.Provider value={value}>
      <Loading loading={loading} />
      {children}
    </AppContext.Provider>
  );
};

// 👇 Pageコンポーネントなどで読み込む
export const useAppContext = () => useContext(AppContext);
```

```pages/_app.tsx
import React from 'react';
import { AppProps } from 'next/app';
import { AppWrapper } from '@/context/state';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
			{/* 👇 Context を コンポーネントツリーに追加 */}
      <AppWrapper>
        <Component {...pageProps} />
      </AppWrapper>
    </>
  );
}

export default MyApp;
```

## コンポーネント呼び出し

```pages/index.tsx
import { useAppContext } from '@/context/state';

export default function Index() {
  const { setLoading } = useAppContext();

	const func = () => {
		setLoading(true); // 👈 ローディングの表示
		setLoading(false); // 👈 ローディングの非表示
	}
}
```

### ⚠️ SWRでデータがfetchできていない場合のローディング

```jsx
import { useAppContext } from '@/context/state';

const { setLoading } = useAppContext();
const { data: user, error } = useSWR('/api/user');

if (!user) {
	setLoading(true)
	return <></>;
}

setLoading(false)
```

上記の実装だと、下記のエラーが発生する。

```bash
react-dom.development.js:67 Warning: Cannot update a component (`AppWrapper`) while rendering a different component (`Index`). To locate the bad setState() call inside `Index`,
```

レンダリングできていない状態で、Index以外のHooksを呼び出すと警告される。（実行はできるが）

💡 **回避手段:** staticなローディングコンポーネントを返す。（もっといい方法があるかもしれない）

```jsx
import StaticLoading from '@/components/atoms/static-loading';
const { data: user, error } = useSWR('/api/user');

if (!user) return <StaticLoading />;
```

NextJS

Next.js Context API を使用してローディング呼び出し

## ドキュメント

- [フック API リファレンス – React](https://ja.reactjs.org/docs/hooks-reference.html#useeffect)

> useEffectは、コンポーネントがレンダリング後に何かを行う必要があることをReactに伝えます。

## 実装

レンダリング時に一度実行する

```jsx
useEffect(() => {
  someFunc(); // 実行
}, []);
```

値が入ってきた時に、実行する

```jsx
const { data: user, error } = useSWR('/api/user');

// userが存在すれば実行する
useEffect(() => {
  someFunc(); // 実行
}, [user]);
```

Next.js ページのレンダリング時に関数を実行する

## ドキュメント

- [Qiita API v2ドキュメント - Qiita:Developer](https://qiita.com/api/v2/docs#%E6%8A%95%E7%A8%BF)

## 準備

- [Qiita](https://qiita.com/settings/applications) から個人用アクセストークンを取得する
    - scopeで`read_qiita`と`witre_qiita`にチェックを入れる
- axiosをインストールしておく

## 実装

```js

import axios from 'axios'

async function postQiita() {
	// TODO: 👇取得したTokenをセットする。漏洩しないように注意
	const QIITA_ACCESS_TOKEN = 'xxxxx'

	// POSTリクエスト
	const response = await axios.post('https://qiita.com/api/v2/items', {
		body: '# テストだよ', // 内容
		group_url_name: null,
		coediting: false,
		private: false, // 👈 限定公開 APIのテストは非公開&すぐに消しましょう
		// タグ必須だよ
		tags: [{
		  name: 'Ruby',
		  versions: ['0.0.1']
		}],
		title: 'テスト Qiita API',
		tweet: false // 投稿をTweetするか否か
		},
		{
		headers: {
		  Authorization: `Bearer ${QIITA_ACCESS_TOKEN}` // 認証
		}
	})

	// 確認
	console.log('response:', response)
}
postQiita() // 実行
```

JavaScript

Axios使ってQiita投稿する

## ドキュメント

- [barryvdh/laravel-dompdf: A DOMPDF Wrapper for Laravel](https://github.com/barryvdh/laravel-dompdf)

## Laravel実装

### インストール

```bash
# インストール
composer require barryvdh/laravel-dompdf

# 設定
php artisan vendor:publish --provider="Barryvdh\DomPDF\ServiceProvider"
```

### 実装

```PdfController.php
public function htmlToPdf() {
    $pdf = App::make('dompdf.wrapper');
    $pdf->loadHTML('<h1>Test PDF</h1>');
    return $pdf->stream();
}
```

```api.php
Route::get('pdf/html-to-pdf', 'Api\PdfController@htmlToPdf');
```

## JavaScript実装(Vue.js)

Vue.jsはあまり関係ないですが、APIサーバとしてLaravelを採用している場合の、JS側での`$pdf->stream();`の受け取り処理です。

[vue.js - Download PDF with laravel-dompdf with vuejs front-end - Stack Overflow](https://stackoverflow.com/questions/57649147/download-pdf-with-laravel-dompdf-with-vuejs-front-end) を参考に

### 実装

```js
// axios で API Call
const response = await this.axios.get('/pdf/html-to-pdf', {
  responseType: 'blob'
})

// Response 確認
console.log('response: ', response)

// blobURL作成
const url = window.URL.createObjectURL(new Blob([response.data]))

// ダウンロード
const link = document.createElement('a')
link.href = url
link.setAttribute('download', 'markdown.pdf')
document.body.appendChild(link)
link.click()
```

### POSTの例

`BODY`に `htmlString`が入ってくる。

```PdfController.php
public function htmlToPdf(Request $request) {
    $htmlString = $request->input('htmlString');

    $html = <<< DOC_END
		<!doctype html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
				<style type="text/css"></style>
		</head>
		<body>
			$htmlString
		</body>
    </html>
		DOC_END;

    $pdf = App::make('dompdf.wrapper');
    $pdf->loadHTML($html);
    return $pdf->stream();
}
```

## 日本語化について

[Mac Laravelのライブラリ「laravel-dompdf」を日本語表示に対応させる - Qiita](https://qiita.com/miriwo/items/57933377be008d61f810) を参考に

### メモ

```bash
php load_font.php ipag fonts/ipag.ttf
cp -r vendor/dompdf/dompdf/lib/fonts storage/

# 必要ないかも
chmod 777 storage/fonts/*
php artisan optimize:clear
```

Laravel

laravel-dompdf × Vue.js で PDF出力

## ドキュメント

- [Redirect new user to dynamic URL · Discussion #530 · nextauthjs/next-auth](https://github.com/nextauthjs/next-auth/discussions/530) : よく読むべし
    - [Client API | NextAuth.js](https://next-auth.js.org/getting-started/client#specifying-a-callbackurl) : よく読むべし

## 実装

`callbackUrl`使う。

```jsx
import { signIn, signOut } from 'next-auth/client';

signIn('google'{ callbackUrl: `http://localhost/foo` });
signOut({ callbackUrl: `http://localhost/foo` });
```

### envを使う

```.env.local
NEXT_PUBLIC_BASE_URL="http://localhost:3000"
```

```jsx
import { signIn, signOut } from 'next-auth/client';

signIn('google', {
  callbackUrl: `${
    process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'
  }/foo`,
});

signOut({
  callbackUrl: `${
    process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'
  }/foo`,
});

```

`||`はもっといい使い方あるかも。

`env.local` を修正したら、再起動しましょう。

NextAuthでsignInとsignOut時に特定のURLにリダイレクトさせる

## TL;DR
`{APP_SCHEME}:///`で開きます。

- Slack `slack:///`
- Asana `asanadesktop:///`

![Slack App Open](//images.contentful.com/0jyj5pjwic68/2jWKbpU1tBhqnfMABhJ2Yt/5fe45f9ecc41db8ef18be4b2631ce86d/____________________________2021-08-05_11.26.47.png)
※デスクトップアプリがないと開きません。

ちなみにChromeアプリは、`chrome://apps`で管理できます。

[アプリのインストールと管理-Chromeウェブストアのヘルプ](https://support.google.com/chrome_webstore/answer/1053346?hl=en#zippy=%2Ccreate-shortcuts-for-apps-installed-from-the-chrome-web-store%2Cuninstall-an-app)

## 環境
- Electron
- Vue.js

## 調査内容
SlackやNotionなどのデスクトップアプリは、ログインする際に、ブラウザに移動しログインさせた後にデスクトップアプリに戻ります。

これらの動きについて調査します。

上記を調査するにあたって3つにスコープを分けました。

- 1.Electronからブラウザ遷移させる
- 2.ブラウザからデスクトップアプリ(Electron)を開く指示を出す
- 3.ELectronを開いた時に値を受け取れるかを調べる

それぞれ解決策が見えたので共有します。

## デスクトップアプリのログインフロー

基本的な処理の流れは、以下のようになります。

- 1.ログイン画面を表示(デスクトップアプリ)
- 2.デスクトップアプリからブラウザに移動(デスクトップアプリ)
- 3.ブラウザで認証する(ブラウザ)
- 4.ブラウザからデスクトップアプリを開く(ブラウザ)

## Electronからブラウザ遷移させる

[How do I open a url from <a> on default OS browser?](https://github.com/electron/electron/issues/1344)

下記を任意のAPIで呼び出します。

```js
const shell = require('electron').shell
shell.openExternal('http:localhost:4000/login') // ログインページ
```

この際に、queryを入れることによって、デスクトップアプリからのログインかを判別します。

```js
const shell = require('electron').shell
shell.openExternal('http://localhost:8080/login?desktop_login') // desktop_loginで判別する
```

## ブラウザからデスクトップアプリ(Electron)を開く指示を出す

```js
window.location.href = 'slack:///'
```

認証時のアクセストークンなどを扱う場合は、
`asanadesktop:///desktop_start_session?external_auth_token=xxxx&email=xxxx@xxxx.xxx` のようなリンクになるかと思います。これはAsanaの例です。
(試していないので注視してください！)

## デスクトップアプリのSchemeを定義する

[nklayman/vue-cli-plugin-electron-builder: Easily Build Your Vue.js App For Desktop With Electron](https://github.com/nklayman/vue-cli-plugin-electron-builder)を使用しています。

通常のelectron-builderであれば、[Common Configuration - electron-builder](https://www.electron.build/configuration/configuration.html)を参照してください。

```vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        protocols: {
          name: 'App',
          schemes: [
            'appdesktop' // ここがschemeになる
          ]
        },
        // ついでにアイコン設定
        mac: {
          icon: 'src/assets/app.icns'
        },
        win: {
          icon: 'src/assets/app.ico'
        }
      }
    }
  },
}
```

`nom run electron:build`を実行すると、`dist_electron/builder-effective-config.yaml`が生成されるので、こちらで正しく設定されるか確認してください。

正しく設定できている場合、`dmg`を解凍して、Chromeで`appdesktop:///`を叩くと、起動できるはずです。

## electron:serveの場合のScheme定義

```json
"electron:serve": "vue-cli-service electron:serve --mode development",
```

`electron:serve`の場合は、`vue.config.js`で設定したProtocol Schemeがうまく働かないので、下記のように設定してみてください。

```js
app.setAsDefaultProtocolClient('appdesktop')
```

## ELectronを開いた時に値を受け取れるかを調べる

下記でScheme起動したURLを受け取ることができます。ここでTokenなどを受け取りましょう。
遷移などは、`ipcRenderer.on()`を使用し発火させます。

```js
 app.on('open-url', async (event, url) => {
  console.log('event:', event)
  console.log('url:', url)

  // Focus
  if (win) {
    if (win.isMinimized()) win.restore()
    win.focus()
  }
}) 
```

- [Launching Electron Apps From the Browser | Ship Shape](https://shipshape.io/blog/launch-electron-app-from-browser-custom-protocol/)
- [Electron を Custom URL Scheme で起動する - Qiita](https://qiita.com/umamichi/items/e47e17fca0bc8fe2bcdd)

Electron

ブラウザ(Chrome)のURL Schemeからデスクトップアプリを起動する

## ドキュメント

- [intercom/contentful-typescript-codegen: Generate TypeScript interfaces from a Contentful environment](https://github.com/intercom/contentful-typescript-codegen)
    - 使用したライブラリ
- [Contentfulで型安全にコンテンツを取得する](https://silurus.dev/article/7DJobP47XUTkDjNavzyf2s)

## インストール

```bash
yarn add contentful
yarn add -D contentful-management dotenv contentful-typescript-codegen @contentful/rich-text-types
```

```bash
npm install contentful
npm install --save-dev dotenv contentful-management contentful-typescript-codegen @contentful/rich-text-types
```

## 実装

`.env`を作成し、各値を設定する。

```.env
CONTENTFUL_SPACE_ID=
CONTENTFUL_ENVIRONMENT=
CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN=
```

プロジェクトルートに`getContentfulEnvironment.js`を作成する。

```getContentfulEnvironment.js
require('dotenv').config();
const contentfulManagement = require('contentful-management');

module.exports = function () {
  const contentfulClient = contentfulManagement.createClient({
    accessToken: process.env.CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN,
  });

  return contentfulClient
    .getSpace(process.env.CONTENTFUL_SPACE_ID)
    .then((space) => space.getEnvironment(process.env.CONTENTFUL_ENVIRONMENT));
};
```

`package.json`のscriptを追記する。

```json
"scripts": {
  "contentful-typescript-codegen": "contentful-typescript-codegen --output @types/generated/contentful.d.ts"
}
```

## 実行

```bash
yarn contentful-typescript-codegen
```

実行すると、`@types/generated/contentful.d.ts`が生成される。

いくつか要らないContent Typeも入っていたので、消した 🤢

## 使用の一例(Next.js)

```jsx
import { IArticle, IArticleFields } from '@/@types/generated/contentful';

interface Props {
	articles: IArticle[];
}

export default unction IndexPage({ articles }: Props) {
	....
}

export const getServerSideProps: GetServerSideProps<Props> = async () => {
  const articles = await client.getEntries({
    content_type: 'article'
  });

  return {
    props: {
      articles: articles.items,
    },
  };
};
```

Contentful

Contentful の Content Type を型定義する

## ドキュメント

- [markedjs/marked: A markdown parser and compiler. Built for speed.](https://github.com/markedjs/marked)
    - Markdown パーサーとコンパイラ
- [KaTeX/KaTeX: Fast math typesetting for the web.](https://github.com/KaTeX/KaTeX)
    - 数式のレンダリング
- [How can I close render '_' · Issue #1538 · markedjs/marked](https://github.com/markedjs/marked/issues/1538#issuecomment-526189561)

## インストール

```bash
npm install marked katex
yarn add marked katex
```

## 実装

```jsx
import marked from 'marked'
import katex from 'katex'
import 'katex/dist/katex.min.css' // 👈 CSSも忘れずに

// 数式の表現
const mathsExpression = (expr) => {
  if (expr.match(/^\$\$[\s\S]*\$\$$/)) {
    expr = expr.substr(2, expr.length - 4)
    return katex.renderToString(expr, { displayMode: true, noannotation: true })
  } else if (expr.match(/^\$[\s\S]*\$$/)) {
    expr = expr.substr(1, expr.length - 2)
    return katex.renderToString(expr, { isplayMode: false })
  }
}

// カスタムレンダー
export const customPreviewRender = (text) => {
  const renderer = new marked.Renderer()

  // code
  renderer.code = (code, lang, escaped) => {
    if (!lang) {
      const math = mathsExpression(code)
      if (math) {
        return math
      }
    } else {
      return `<pre><code class="hljs ${lang}">${hljs.highlightAuto(code, [lang]).value}</code></pre>`
    }
  }

	// codespan
  renderer.codespan = (text) => {
    const math = mathsExpression(text)

    if (math) {
      return math
    }

    return `<code>${text}</code>`
  }

  return marked(text, { renderer: renderer })
}
```

## 書き方

```
## code

/```
$
L = \frac{1}{2} \rho v^2 S C_L
$
/```

/```
$$
L = \frac{1}{2} \rho v^2 S C_L
$$
/```

## codespan

`$L = \frac{1}{2} \rho v^2 S C_L$`

`$$L = \frac{1}{2} \rho v^2 S C_L$$`

```

![marked-katex](//images.contentful.com/0jyj5pjwic68/N6lfLOF5c9nxAkYXbkewe/e6688cce69943dd0b380ddd17acf37f5/marked-katex.png)


MarkedとKatexで数式を表示する

## ドキュメント

- [Best practice for instantiating PrismaClient with Next.js | Prisma Docs](https://www.prisma.io/docs/support/help-articles/nextjs-prisma-client-dev-practices)
- ["FATAL: sorry, too many clients already" postgres error in develop mode on · Issue #1983 · prisma/prisma](https://github.com/prisma/prisma/issues/1983)

## エラー

NextAuthを開発環境で使用していると、下記のエラーが発生し、クラッシュしてしまうことが多かった。

```jsx
FATAL: sorry, too many clients already

...

too many connections
```

## 解決策

開発環境で、単一の PrismaClient インスタンスを使用すること

## 実装

`@/lib/server/prismaClient.ts`に作成しています。

```jsx
import { PrismaClient } from '@prisma/client'

// 型定義
declare global {
  var prisma: PrismaClient | undefined
}

export const prisma =
  global.prisma ||
  new PrismaClient({
    log: ['query', 'info'], // 👈 ログ出力。消してOK！
  })

if (process.env.NODE_ENV !== 'production') global.prisma = prisma
```

`global`は、おそらくNode.jsのグローバルオブジェクト

[Global objects | Node.js v16.8.0 Documentation](https://nodejs.org/api/globals.html)

## 読み込み

`[...nextauth].ts`

```jsx
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
import { PrismaAdapter } from '@next-auth/prisma-adapter'
import { prisma } from '@/lib/server/prismaClient'

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  adapter: PrismaAdapter(prisma),
  callbacks: {
    session: async (session, user) => {
      return Promise.resolve({
        ...session,
        user: {
          ...session.user,
          id: user.id
        }
      })
    }
  }
})
```

API Routes

```jsx
import { prisma } from '@/lib/server/prismaClient'
await prisma.user.findUnique({...})
```

getServerSideProps

```jsx
const { prisma } = require('@/lib/server/prismaClient')
await prisma.user.findUnique({...})
```

開発環境で PrismaClient を単一インスタンスにする

## ドキュメント

- [API Routes: Introduction | Next.js](https://nextjs.org/docs/api-routes/introduction)
- [HTTP リクエストメソッド - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Methods)

## 実装

```jsx
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {

  switch (req.method) {

  case 'GET':
    res.status(200).json({ message: 'GET' })
    break

  case 'POST':
    res.status(200).json({ message: 'POST' })
    break

  case 'PATCH':
    res.status(200).json({ message: 'PATCH' })
    break

  case 'DELETE':
		res.status(200).json({ message: 'PATCH' })
    break

  default:
    res.status(405).end()
    break
  }
}
```

## API呼び出し

axiosを使用し、API を呼び出します。

```jsx
yarn add axios
```

```jsx
// GET Method
await axios.get('/api/user', {
  params: {
    id: userId
  }
})

// POST Method
await axios.post('/api/user', {
	id: userId
})

// PATCH Method
await axios.patch('/api/user', {
	id: userId
})

// DELETE Method
await axios.delete('/api/user', {
  params: {
    id: userId
  }
})
```

- GET と DELETE は、リクエストのクエリに値を持つことができます（Bodyには含めることができません）
- POST と PATCH は、Bodyに値を持つことができます

`getServerSideProps`で API Routes を呼び出すのはあまりよくなさそうです 🤔

[use getStaticProps with /api routes · Discussion #16068 · vercel/next.js](https://github.com/vercel/next.js/discussions/16068)

## 値の取得

```jsx
const { id } = req.query // GET DELETE
const { id } = req.body // POST PATCH
```

## NextAuth

NextAuthを使用している場合は、sessionからuserIdを呼び出すこともできます。

- [Securing pages and API routes | NextAuth.js](https://next-auth.js.org/tutorials/securing-pages-and-api-routes#using-getsession)

```jsx
import type { NextApiRequest, NextApiResponse } from 'next'
import { getSession } from 'next-auth/client'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const session = await getSession({ req })

  if (!session?.user?.id) {
    res.status(401).send({ message: 'Unauthorized' })
    return
  }

  const userId = session.user.id
}
```

sessionにuserIdを含めるには、 `pages/api/auth/[...nextauth].ts`の `callbacks.session` を変更します。

- [Callbacks | NextAuth.js](https://next-auth.js.org/configuration/callbacks#session-callback)
- [How to get userId on api Endpoints while using next-auth · Discussion #536 · nextauthjs/next-auth](https://github.com/nextauthjs/next-auth/discussions/536)

```jsx
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
import { PrismaAdapter } from '@next-auth/prisma-adapter'
import { prisma } from '@/lib/server/prismaClient'

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  adapter: PrismaAdapter(prisma),
  callbacks: {
    session: async (session, user) => {
      return Promise.resolve({
        ...session,
        user: {
          ...session.user,
          id: user.id // 👈 ココ
        }
      })
    }
  }
})
```

Vercel

Next.js API Routes で REST API 実装

## 実装

```jsx
import { useState } from 'react'
const [user, setUser] = useState(initUser)

const handleChange = (e) => {
  const target = e.target
  const value = e.value
  const name = e.name

  if (name in user) {
    const updateItem = {...user, [name]: value} // 👈 ポイント
    setUser(updateItem)
  }
}
```

```jsx
<input
  type="text"
  name="username"
  value={user?.username || ''}
  onChange={handleChange}
  id="username"
/>
```

`onBlur`で保存とかしても良いかも

Redux

React Hooks でオブジェクトを気持ちよく扱う

BNB通貨のネイティブチェーンのこと。

※バイナンスコイン（BNB）とは世界最大級の仮想通貨取引所BINANCE（バイナンス）で発行されている取引所で使われるトークンのこと。

## 特徴

- 超高速取引のために最適化されている
- スマートコントラクト機能
- イーサリウム仮想マシン(EVM)との互換性(DAppsをサポート、Layer2ではない)

## 資料
- [バイナンススマートチェーン(BSC)の紹介](https://academy.binance.com/ja/articles/an-introduction-to-binance-smart-chain-bsc)
- [Binance Coinの購入方法](https://www.binance.com/ja/buy-BNB)
- [Binance Smart Chainによる送金について](https://coincheck.blog/10966)

仮想通貨

【仮想通貨】BSC(バイナンススマートチェーン)とは

投資

## はじめに

**相当楽しみです！**
\
NuxtJS バージョン3のロードマップ的なものが公表されていたので共有します。
リリースは、**2021年のQ1にアルファ版、Q2にベータ版その後、安定板のリリース**といった形が想定されているようです。詳細は下記をよく読んでください。

- [Nuxt 3 in Action](https://nuxtjs.slides.com/atinux/nuxt-3-in-action)
- [State of Nuxt {2,3}](https://docs.google.com/presentation/d/1cWxCe9IZVRzM2W4OqvA4PtBr9_GLcF3n7VJEUoBLjg8/edit#slide=id.p)
- [Nuxt Architecture Updates](https://slides.com/pi0/nuxt3-arch/)

まだ、NuxtユーザーでDiscordサーバに入っていなかったり、その他諸々キャッチアップできていない人はまずフォローから始めましょう。

- [Discord](https://discord.com/invite/ps2h6QT)

- [Twitter](https://twitter.com/nuxt_js)

- [GitHub](https://github.com/nuxt/nuxt.js)

- [404 donators](https://opencollective.com/nuxtjs)

これからNuxtJSを始める初心者の方は、

- [NuxtJS](https://nuxtjs.org/)
- [Get Started with Nuxt with Debbie O'Brien](https://explorers.netlify.com/learn/get-started-with-nuxt/nuxt-data-fetching)
- [MasteringNuxt](https://masteringnuxt.com/)

このあたりをよく読み、バージョンアップに備えましょう。
また、[NuxtJS Team](https://nuxtjs.org/team/)の方々のアカウントなどもフォローしておくと、最新の情報をキャッチアップできます。
\
以下、バージョン3での対応内容ですが、気になった箇所を太字にしています。

## Nuxt v3 - Internal changes

- **Webpack 5 and Vite support**
- PostCSS 8
- ESBuild
- **Rewritten in TypeScript**
- **vue-bundle-renderer for Vue 3**
- **Modules utils**
- **New rendering engine: Nitro (see Daniel Roe talk)**
- See Pooya Parsa talk for more details

## app.vue - The entry point of your Nuxt app

- Optional if using pages/ directory
- **Perfect for global data fetching**
- **Great for landing pages or app without router**
- **Produces 20.68KB gzipped JS**

## Routing - A powerful routing system based on Vue Router 4

- pages/_slug.vue becomes pages/[slug].vue
- Catch sub paths with pages/blog/[...all].vue
- **Support pages/404.vue and pages/_error.vue**
- Ignore prefix is now underscore: pages/_ignored.vue
- **Add routes at runtime with plugins**
- <nuxt/> and <nuxt-child/> become <nuxt-page/>

## Data Fetching - How to fetch data with Nuxt 3

- **Brainstormed with Evan You**
- **Based on the composition API**
- Can pause the page navigation until fetched
- **Support server-side rendering and hydration**
- Works at the component level == everywhere
- **Will support caching (SWR like)**
Support custom data fetcher

## More - What are the other changes

- **Auto import of plugins**
- static/ becomes public/
- app.html becomes document.html
- Hooks on the app side: app:created, page:finish, etc.
- Support for multi apps (theming)
- **New functions/ directory for server-only execution**
- **First class Serverless support**

## その他

- [リリースノート](https://nuxtjs.org/docs/release-notes)
- [Explore Nuxt Modules](https://modules.nuxtjs.org/)

NuxtJS

NuxtJS V3のロードマップと情報の整理

[NuxtJS](https://nuxtjs.org/)で「SPA」「SSR」「SSG」をそれぞれ設定するには、nuxt.config.jsの`ssr`と`target`プロパティを変更します。SPAを構築する場合は、`target`プロパティは不要です。

### SPA(シングルページアプリケーション)とSSRの違い
SPAはクライアントサイドレンダリングです。SPAとSSRをビルドすると、生成されるDOM構造が異なります。(大量のJavaScript)これがSEOに影響を与えると言われています。SPAはHTMLファイルも1つだけでJSでページ遷移をしているように見せています（挙動を変えています）。それがSPAのメリットでもあり、初期ロードに時間がかかりますが、複雑なUIを構築したり、初期ロード以外は高速にする事ができます。また、SPAの場合、インフラ環境にそれほど影響を受けないこともメリットでしょう。(CSRのため)
\
※**CSR(Client Side Rendering)**: クライアント側で実行されるJavaScriptと思えば良いかも

### SSR(サーバーサイドレンダリング)

SSRを行う場合は、Node.jsの環境が必要になります。リクエストごとにHTMLを生成して返すからです。Node.js環境の準備は、[Heroku](https://heroku.com/)が低価格で使用しやすいです。また、[Vercel](http://vercel.com/)や[Cloud Run](https://cloud.google.com/run)といった選択肢もあります。個人的におすすめは、東京リージョンのあるCloud Runです。Herokuはリージョンの設定が個人レベルではできないこと。VercelとCloud Runを比較して、Cloud Runの方がパフォーマンスが良かったことが挙げられます。もちろん料金とも相談しましょう。

### SSG(静的サイトジェネレーター)

SSGはプリレンダリングです。静的ファイルのみなので[Netlify](https://www.netlify.com/)やVercel、[GitHub Pages](https://pages.github.com/)などが良いでしょう。JAMStackと言われれるアプリケーションはSSGに当たります。環境に関しては、Node.js環境を必要としません。その代わり 設計によってはクライアント側に大きな負荷をかけやすい&動的コンテンツの実装は難しい(できないことはない)ので、優れた設計が必要です。CDNと相性が良いので、ホスティング先のリージョンは気にしなくて良いでしょう。VercelのCDNは、非常に強力に見えますが、Netlifyの扱いやすさを加味するとどちらも良い選択肢でしょう。
\
メリットとしては、

- 高速(CDN配信)
- セキュア(サーバを管理しない)

でしょうか。

### 各モードのデプロイ

公式のドキュメント[(例) Deploy Nuxt on Netlify](https://nuxtjs.org/docs/2.x/deployment/netlify-deployment)で、各サービスへのデプロイ方法と`static` か`server`
どちらの環境で実行できるか整理されているので、見ておくと良いでしょう。
\
※Node.js:  サーバーサイドJavaScript環境
※CDN : コンテンツデリバリーネットワーク(Content Delivery Network)

## SPA・SSR・SSGの使い分け

- HTML生成によるSEOをあまり気にしない&ページ内で複雑なUIを構築したい場合→SPA
- 動的ページでSEOも気にする場合→SSR
- 静的ページのみの場合→SSG

## SPAの設定

```js
ssr: false
```

※`mode: "spa"`や`mode: "universal"`は非推奨になりました。[The mode Property](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-mode/)を参照してください。

## SSRの設定

```js
ssr: true,
target: "server"
```

リクエスト毎に`asyncData`や`fetch`などのSSR関数が呼び出されます。
状態の永続化やルーティング毎の設定に優れています。

## SSGの設定

```js
ssr: true,
target: "static"
```

`nuxt generate`時に、一度だけ`asyncData`や`fetch`などのSSR関数が呼び出されます。`created`や`beforeCreate`はCSRなので、ここでAPIを呼び出すことができます。従って、静的ホスティングでもAPIを連携することは可能です(例えば、AlgoliaやStripe)。しかし、動的なコンテンツが大きくなればなるほど、クライアントに負荷がかかります。また挙動にも困るケースが増えるでしょう。その場合、SSRを検討した方が良いかもしれません。

## SSRの関数の挙動

SSRを選択した場合、基本的にSSR時に呼び出される関数の中で処理を行うことになります。また、Netlifyなどは静的サイトのホスティングサービスなので、SPAやSSGの作り方で動作しないことがあります。NuxtJSのライフサイクルをよく理解して実装することが大事になってきます。[Nuxt Lifecycle](https://nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle)が理解を深めてくれます。

### SSR

nuxtServerInit
plugins
middleware
asyncData
fetch
beforeCreate
created

### CSR

plugins
beforeCreate
created
beforeMount
mounted

## まとめ

実際に大事なことは、目的に沿って最大限にパフォーマンスを発揮することです。ユーザーが何を重視するかによって、選択する方式は異なってきます。もっとも柔軟な選択肢は、SSRです。なぜSPAにするのかSSGにするのかといったところを深掘りすることで、開発物のコアバリューがわかるかもしれません🚀

<iframe src="https://giphy.com/embed/NOThVG9wAs0J0mjBzu" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/bitcoin-astronaut-moon-drummer-meme-doge-NOThVG9wAs0J0mjBzu">via GIPHY</a></p>

Nuxt.jsでSPA, SSR, SSGの違いと設定方法について

## 意図

`vm.$destroy()`が呼ばれた時に、**beforeDestroy** → **destroyed** の順番で実行されるが、URLの直変更やリロードでは、`vm.$destroy()`が実行されないようなので、**beforeunload** を使用して、処理を実行する。
\
例としては、ユーザーがサービス使用中に用意している手順で終了しないケースです。

- ブラウザそのものを終了する。
- ブラウザのタブを消す。
- ページをリロードする。

## コード

```js
export default {
  // windowを使うのでmountedでイベント登録
  mounted () {
    window.addEventListener('beforeunload', () => {
      this.test()
    })
  },

  // 一応破棄
  destroyed () {
    window.removeEventListener('beforeunload', () => {
      this.test()
    })
  },

  methods: {
    test () {
      console.log('test')
    }
  }
}
```

## 結果

`test()`にDBにデータを保存して確認してみた結果です。

- ブラウザそのものを終了する。 => 実行できている。
- ブラウザのタブを消す。 => 実行できている。
- ページをリロードする。 => 実行できている。

素晴らしい！
\
ですが、おそらくブラウザ自身が終了することを知っていないとだめなので、マシン自体の強制終了では動かないような気がします。

> beforeunload イベントは、ウィンドウ、文書、およびそのリソースがアンロードされる直前に発生します。

また、ここでネットワークに関する処理を使う場合は、オフラインかどうか判定して`localStorage`や`sessionStorage`に保存するなども考えられます。

## 資料

- [Window: beforeunload イベント](https://developer.mozilla.org/ja/docs/Web/API/Window/beforeunload_event)


Vue.js

Vue.jsでリロード前に処理を実行する

## 意図

顧客のクレジットカード情報を更新する機能を作りたい。

- クレジットカードの有効期限切れ
- 謝って入力したケース

また、バックエンドはLaravelだが、 サーバレス(node.js)で構築してみたいのでエッセンス的なところを身に付けておきたい。

## 環境

- Laravel: 6.x
- Vue.js
- [Laravel Cashier (Stripe)](https://laravel.com/docs/8.x/billing)

## カードのテスト

テストできるカードは、[Stripe テスト方法](https://stripe.com/docs/testing)に記載されています。めちゃめちゃ親切なドキュメントですね。感動しました。

- VISA: `4242424242424242`
- Master Card: `5555555555554444`

を使いまわそうかなと。
\
エラーのテストや不正請求のテストも実施することができるので、便利です。

## お支払い方法(カード情報)の変更

詳細は、[Updating The Default Payment Method](https://laravel.com/docs/8.x/billing#updating-the-default-payment-method)に書いてあります。

## Lereval側(StripeController)

※`user()`はLaravelのAPIトークンを見て、Userを取得しています。

```php
// 支払いの意図を作成し、支払いを捕捉できるようにします
public function getSetupIntent( Request $request )
{
    return $request->user()->createSetupIntent();
}
```

```php
// 支払い方法の更新
public function updatePaymentMethod(Request $request) {
    $paymentMethod = $request->input('paymentMethod');
    $request->user()->updateDefaultPaymentMethod($paymentMethod); // ココで更新
    return $this->status(); // ステータスを返しています
}
```

## Vue.js側

```js
export default {
  data () {
    return {
      card: null,
      stripe: [],
      stripeAPIToken: YOUR_STRIPE_PUBLIC_KEY, // StripeのPublic Keyを入れる
      intentToken: ''
    }
  },

  mounted () {
    // eslint-disable-next-line no-undef
    this.stripe = Stripe(this.stripeAPIToken)
    const elements = this.stripe.elements()
    this.card = elements.create('card', { options }) // 任意のオプション
    this.card.mount('#card-element')
    this.loadIntent() // ここでgetSetupIntentを呼び出し
  },

  methods: {
    async submit () {
      // 決済情報の登録
      await this.stripe.confirmCardSetup(
        this.intentToken.client_secret, {
          payment_method: {
            card: this.card,
            billing_details: {}
          }
        }
      ).then(result => {
          this.updatePaymentMethod(result.setupIntent.payment_method)
          this.card.clear()
        }
      })
    },

    loadIntent () {
      this.axios.get('/get-setup-intent')
        .then(res => {
          this.intentToken = res.data
        })
    },

    /**
     * カード情報の更新
     * @param {object} paymentMethod 支払い情報
     * @return {void}
     */
    async updatePaymentMethod (paymentMethod) {
      const data = {
        paymentMethod: paymentMethod
      }
      await this.axios.post('/update-payment-method', data)
    }
  }
}
```

※`mounted`で`getSetupIntent`を呼び出しているので、処理を実行したあとは、コンポーネントを破棄してあげる。
\
また、apiのエンドポイントは、スパイナルケース(ケバブケース)が良いとのこと。メソッド名もDBの更新であれば、 changeよりも**update**を使用したい。

- 変更結果が永続化されるならupdate
- 変更結果が一時的なものならchange

## お支払い方法(カード情報)の作成

先ほどは更新だけでしたが、お支払い方法(カード情報)のみをユーザーに登録してもらいたいケースもあると思います。カード情報の登録は、顧客を作る必要があります。
`stripe_id`を確認し、ある場合は支払い方法の更新。ない場合は、顧客を作成した後に支払い方法を更新します。(stripe_idは、Userテーブルのカラムです。)

```php
// お支払い情報(カード情報)の作成/更新
public function savePaymentMethod(Request $request) {
    $user = $request->user();
    $paymentMethod = $request->input('paymentMethod');
    if ($user->stripe_id) {
        $user->updateDefaultPaymentMethod($paymentMethod);
    } else {
        // カード情報作成の場合、顧客を作る
        $user->email = decrypt($user->email);
        $user->createAsStripeCustomer();
        $user->updateDefaultPaymentMethod($paymentMethod);
    }
    return $this->status(); // 独自で作った
}
```

また、サブスクリプションの作成の際に既に支払い情報がある場合は、`add()`を使用します。

```php
$user->newSubscription('default', $planId)->add();
```

## お支払い方法(カード情報)の削除

お支払い情報の削除は、[Deleting Payment Methods](https://laravel.com/docs/8.x/billing#deleting-payment-methods)に書いてあります。

## 資料

- [Laravel Cashier (Stripe)](https://laravel.com/docs/8.x/billing)

Stripe

Stripeで支払い方法(カード情報)の変更 with Laravel

※SPAで試しています。

## $router.push()

### name指定

```js
this.$router.push({ name: name, query: { id: id } })
// または
this.$router.push({ name: name, params: { id: id } })
```

遷移のhistoryを遡る場合は、`$router.go`を使用する。

`router-link`や`nuxt-link`(NuxtJS)も同じコンポーネントの場合は、遷移が走らないので注意が必要です。

### path指定

```js
this.$router.push({ path: path })
// または
this.$router.push(path)
```

## beforeRouteLeave()

別コンポーネントに遷移する場合

```js
beforeRouteLeave (to, from, next) {
  next() // Hookを解決する = 次の遷移を行う
},
```

```js
beforeRouteLeave (to, from, next) {
  if (OK?) {
      someFunc(to, from, next) // この中でnext()または、$router.push()を行う
  } else {   
    next() // Hookを解決する = 次の遷移を行う
  }
},
```

## beforeRouteUpdate()

同じコンポーネントで、paramsのみを変更する場合

```js
beforeRouteUpdate (to, from, next) {
  next() // Hookを解決する = 次の遷移を行う
},
```

遷移させずに、何か処理を入れ込む場合は、

```js
beforeRouteUpdate (to, from, next) {
  if (OK?) {
      someFunc(to, from, next) // この中でnext()または、$router.push()を行う
  } else {   
    next() // Hookを解決する = 次の遷移を行う
  }
},
```

## Error: Navigation aborted...

```bash
Error: Navigation aborted from "/〇〇" to "/〇〇" via a navigation guard.
```

```js
next(false)
```

を消す

## $root.data

直接、Vue Routerとは関係ない。

Vueオブジェクトにdataを定義し、どこからでも呼び出せるようにする。
意図としては、App.vueとPage.vueで初期化の処理を書いている場合、Page.vueでリロードした際に、Page.vueのcreatedが先に発生し、App.vueでの共通の初期化が機能しないため。（非推奨）

```js
  new Vue({
    data: {
      isLoaded: false
    },
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
```

```js
watch: {
  isLoaded (newVal) {
    if (newVal) {
      this.someFunc()
    }
  }
},

computed: {
  isLoaded () {
    return this.$root.isLoaded
  }
},
```
## location.href

同じコンポーネントの場合、`params`や`query`を変更しても、created関数が機能しないため、watchなどを使うか画面をリロードする。watchを使用する場合、初期化に必要な処理は、`initData`などでまとめておくこと。

```js
location.href = `/list?user_id=${this.userId}`
```

## location.reload()

reload（）メソッドは、現在のドキュメントをリロードするために使用されます。
reload（）メソッドは、ブラウザのリロードボタンと同じように機能します。

```js
location.reload()
```

## 参考

- [動的ルートマッチング](https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5)
- [Vue.js+VueRouterでページの離脱、再読込、別ルートへの移動時に警告を表示する](https://blog.hirokiky.org/entry/2019/08/22/111031)
- [Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)
- [The Location Object](https://www.w3schools.com/jsref/obj_location.asp)

Vue Routerの使用方法まとめ

**GOX（ゴックス）** とは、仮想通貨取引所の「Mt.Gox（マウントゴックス）」社が、ハッキングを受けてBTCを盗まれた事件を発端として使われるようになった言葉です。
\
GOXは、取引所などに預けていた資金を持ち逃げされることを意味します。
\
ID,パスワード,などを紛失し、暗号資産を取り出せなくなることを **セルフGOX(ゴックス)** と言ったりします。
\
取引所も、完全にセキュアという訳ではありません。暗号資産の世界は、取引のスピードも技術の進歩も非常に早い世界です。取引所も全てをセキュアにというわけには行きません。ゲインも大きい代わりにリスクも大きいです。投資や投機の視点ではなく、セキュリティやリスク、技術を学ぶこともまた暗号資産の醍醐味とも言えます。

【仮想通貨】GOX(ゴックス)とは？

**Vuetify** も`v-select`だし、**Vue Select** も`v-select`でインポートするから、ややこしい。
（Vuetify使っていて、Vue Selectを使っている場合もあるし）

## 見分け方

Vuetifyもv-selectは、`:items`で選択肢を渡すのに対して、Vue Selectは、`:options`で渡すのでみたい。

## 意図

localStorageに保存した値を読み取り、初期表示でv-selectに表示させたかったが、空になっていたのでうまく表示させるようにしたい。

## Vue Select コード

このような形でvalueを選択したidのtext(この場合name)に揃えることができる。

```js
<v-select
  :value="valueOptions.find(option => option.id === targetId) || ''"
  :options="valueOptions"
  label="name"
  id="target-id"
  @input="changeValue">
</v-select>

data () {
  return {
    targetId: 0,
    valueOptions: [
      { id: 1, name: 'A' },
      { id: 2, name: 'B' },
    ]
  }
},

methods {
  changeValue (event) {
    if (!event) {
      this.targetId = 0
      return
    }
    this.targetId = event.id
  }
}
```

## Vuetifyの場合

多分このような形になると思う。
（試していないが。。。）

```js
<v-select
  v-model="targetId"
  :items="valueOptions"
  item-text="name"
  item-value="id">
</v-select>
```
## 資料

- [Vue Select](https://vue-select.org/)

Vue Select(v-select) 初期表示でtextが空になる

今回は、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は、価値の低いページを検索結果に表示させないようにして、サイト全体の評価を下げるのを防ぎます。