React　で list 表示をする際には、keyを設定し、その値で rendering の挙動を変えています。

useState で配列が頻繁に変更される場合に、index を使用する場合 rendeing　の挙動がおかしくなります。そのため各要素に緩いユニークを付与します。

```ts
const createId = (): string => {
  const tmpId: string = new Date().getTime().toString(16)
  return `list-${tmpId}`
}

createId()
```

[リストと key – React](https://ja.reactjs.org/docs/lists-and-keys.html#keys)

React の List 表示のために緩くユニークなIDを作成する

- LGTM: Looks Good To Me 良いと思います
- IMO: In My Opinion
- WIP: Work in progess　作業中です
- FYI: For Your Information 参考までに
- nits: 細かいことだけど
- type: スペルミス

こんな感じでPull Request作ったり

```
[WIP] ~~
```

コメントされたりする。

```
[nits]~~
```

Review時やPull Request に使用される略語

[axios/index.d.ts at 6b4fd93e6886c281ef1a51fca556616ce17f8fba · axios/axios](https://github.com/axios/axios/blob/6b4fd93e6886c281ef1a51fca556616ce17f8fba/index.d.ts)

```ts
import axios, { AxiosRequestConfig } from 'axios';

const requestParam: AxiosRequestConfig = {
  method: 'get',
  url: `${process.env.NEXT_PUBLIC_API_ENDPOINT}/users`,
  headers: {
    Authorization: `Bearer ${accessToken}`,
  },
};

const { data }: any = await axios(requestParam);
```

axiosの型メモ

## Gitのバージョンアップ

```sh
git --version

brew install git

git --version
```

## Gitのデフォルトブランチ名をmain変更

```sh
git config --global init.defaultBranch main
```

## ユーザー設定

```bash
git config --global user.name "John Doe"
git config --global user.email johndoe@example.com
```

## alias設定

```bash
# system
git config --system alias.co checkout
git config --system alias.br branch
git config --system alias.cm commit
git config --system alias.st status
# global
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.cm commit
git config --global alias.st status
# local
git config --local alias.co checkout
git config --local alias.br branch
git config --local alias.cm commit
git config --local alias.st status
```

## config確認

```bash
# local
cat {repo}/.git/config
# global
/Users/user/.gitconfig
# system
cat /usr/local/etc/gitconfig
```

### .gitconfigが無い場合

```bash
rm ~/.gitconfig
touch ~/.gitconfig
```

## リモートリポジトリの確認

```bash
git remote -v
```

追加

```sh
git remote add origin {url}
```

変更

```sh
git remote set-url origin {url}
```

## ローカルの直前コミットを戻す

```bash
git reset --soft HEAD^
```

合わせて、ステージを戻す

```bash
git reset
```

## リモートの直前コミットを戻す

```bash
git reset --hard HEAD^
```

```bash
git push origin +master
git push origin +develop
```

上記は履歴が残らないので、履歴を残したい場合は、`revert`を使いましょう。

## マージ済ブランチの削除

```bash
git branch -D `git branch --merged | grep -v \* | xargs`
```

## 特定のコミットを打ち消す

ログを調べて、コミットのハッシュを特定する。

```bash
git log
tig
```

```bash
git revert {ハッシュ値}
```

## ブランチ名の変更

```bash
git branch -m <古いブランチ名> <新しいブランチ名>
git push origin :<古いブランチ名> # ついでに削除
```

## unstagedファイルを削除

```bash
git clean
git clean -f # 強制
git clean -df # ディレクトリも含める
```

## 特定のファイルを特定のコミットに戻す

```bash
git checkout [コミット番号] [ファイルパス]
```

## GitHub SSH接続

- SSHキーを作成し、`~/.ssh/config`に記載、GitHubにSSH公開鍵を設定する。

## GitHub でパスワードを変更した後
```bash
git config --global user.name <username>
git pull # なんでも良い
```

を実行し、パスワードを聞かれるので、入力する。

## Personal Access Token設定後のMac設定

```bash
 $ git credential-osxkeychain erase ⏎
 host=github.com  ⏎
 protocol=https   ⏎
 ⏎
 ⏎
```

```bash
git fetch
```

[How do you reset the stored credentials in 'git credential-osxkeychain'?
](https://stackoverflow.com/questions/11067818/how-do-you-reset-the-stored-credentials-in-git-credential-osxkeychain)

## credential-osxkeychainの設定

```bash
git credential-osxkeychain
```

認証アシスタントがインストールされていない場合は、以下の内容が表示されます。

```bash
git: 'credential-osxkeychain' is not a git command. See 'git --help'.
```

この時点で、認証アシスタントを正しいパスにダウンロードすることができます。

```bash
curl -s -O http://github-media-downloads.s3.amazonaws.com/osx/git-credential-osxkeychain
chmod u+x git-credential-osxkeychain
mv git-credential-osxkeychain /usr/local/bin
```

インストール後、オープン認証アシスタントの設定を行います。

```bash
git config --global credential.helper osxkeychain
```

[GitHub for Mac error: git: 'credential-osxkeychain' is not a git command](https://stackoverflow.com/questions/13661354/github-for-mac-error-git-credential-osxkeychain-is-not-a-git-command/55060030)

## Rebase
```sh
git rebase [つなぐ元にするブランチ名]
git rebase origin/[つなぐ元にするブランチ名]
# コンフリクト解消
git rebase --continue
```

## 元ブランチの確認

```sh
git show-branch
```

## git blame
行ごとに差分を見る

```
git blame <paths>
```

## 大文字と小文字のファイル検知

```
$ git config -l --local | grep core.ignorecase
core.ignorecase=true
これをfalseにしてあげたらOK.

$ git config core.ignorecase false
```

## Tagの利用

```
git tag v1.0.0
git push --tags
```

## git管理から削除

```bash
git rm client/.env
```

## 直前のコミットの修正

```sh
git commit --amend -m "修正するコメント"
```

Gitの使い方まとめ

## Document

- [hokaccha/nodebrew: Node.js version manager](https://github.com/hokaccha/nodebrew)

## Install for MacOS

```sh
brew install nodebrew
nodebrew -v
# これを設定しないと Node をインストールできない
nodebrew setup
```

`.zshrc`に`PATH`を追記する。

```.zshrc
export PATH=$HOME/.nodebrew/current/bin:$PATH
```

```sh
source ~/.zshrc
where node
# /Users/user/.nodebrew/current/bin/node
```

### Uninstall

```sh
brew uninstall nodebrew
```

`.zshrc`の`PATH`を戻す。

## Usage

### インストール可能なバージョンの確認

```sh
nodebrew ls-remote
```

### インストールされたバージョンの確認

```sh
nodebrew ls
```

### 特定のバージョンのインストール

```sh
nodebrew install v14.18.2
nodebrew install v16.13.0
```

### 特定のバージョン削除

```sh
nodebrew uninstall v14.18.2
nodebrew uninstall v16.13.0
```

### 特定のバージョンの使用

```sh
nodebrew use v14.18.2
node -v
```

## Warning

`PATH`を設定して、`use`を使用してもバージョンが切り替わらない場合は、nodeのbinaryがない場合があるので、一度`uninstall`してから、`install`する。

nodebrewでnodeのバージョン切り替え

今回は、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で記事を表示する方法

```js
const getLengthOfOptiomalCompression = function(str) {
  if (str.length === 0) {
    console.log('Please enter valid string.');
    return;
  }

  let output = '';
  let count = '';
  for (let i = 0; i < str.length; i++) {
    count++;
    if (str[i] !== str[i+1]) {
      output += str[i] + count;
      count = 0;
    }
  }
  console.log(output);
}

getLengthOfOptiomalCompression('aaaa');
getLengthOfOptiomalCompression('aaaabbccddd');

```

JavaScript Run-length encoding

[Rigellute/spotify-tui: Spotify for the terminal written in Rust 🚀](https://github.com/Rigellute/spotify-tui)

[Spotifyd/spotifyd: A spotify daemon](https://github.com/Spotifyd/spotifyd)

## 設定

```bash
brew install spotify-tui
spt
```

[Connecting to Spotify’s API](https://github.com/Rigellute/spotify-tui#connecting-to-spotifys-api) API と接続する。

```bash
brew install spotifyd
brew services start spotifyd
```

Good

![spotify-tui](//images.contentful.com/0jyj5pjwic68/6ypzIfgQSdAnCpqwlWjAqR/631962ac1adec6f7a1d17ed365f883cc/____________________________2021-10-19_22.53.09.png)

macOS spotify-tui で terminal から spotify を聞く

## 起動関連

### ビルド
```
docker build .
```

### イメージ名/タグ名の変更
```
# イメージの確認
docker images
docker tag {イメージID} {イメージ名}:{タグ}

# 例
docker tag {イメージID} app:latest
```

## 削除関連

### Volume 削除
確認
```
docker volume ls
```

```
docker volume rm {Volume_ID}
```

全部削除
```
docker volume rm $(docker volume ls -qf dangling=true)
```

リンク切れ削除
```
docker volume ls -qf dangling=true | xargs -r docker volume rm
```

### Contaniner 削除
コンテナ削除

```
docker rm {コンテナID}
```

強制終了
```
docker kill 
```

すべてのコンテナを停止する
```
docker stop $(docker ps -q)
```

### Images 削除

```
docker images
```

```
docker rmi {IMAGE_ID}
```

```
docker image prune
```

## 全削除

```bash
docker system prune
```

## 参考
- [How To Remove Docker Images, Containers, and Volumes | DigitalOcean](https://www.digitalocean.com/community/tutorials/how-to-remove-docker-images-containers-and-volumes)
- [Dockerのイメージ、コンテナおよびボリュームを削除する方法 - DigitalOcean](https://www.digitalocean.com/community/tutorials/how-to-remove-docker-images-containers-and-volumes-ja)
- [使用していない Docker オブジェクトの削除（prune）](https://docs.docker.jp/config/pruning.html)

Docker

Docker操作まとめ

- [クロージャ - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures)
- [You-Dont-Know-JS/README.md at 2nd-ed · getify/You-Dont-Know-JS](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md)

> クロージャは「関数」と「その関数が作られた環境」という 2 つのものの組み合わせです。

```js
function makeFunc(name) {
  return function(age) {
    return `${name}の年齢は、${age}ですね！`;
  };
}

const func1 = makeFunc("田中太郎");
const func2 = makeFunc("山田太郎");

console.log(func1(22)); // 田中太郎の年齢は、22ですね！
console.log(func2(23)); // 山田太郎の年齢は、23ですね！
```

## クロージャでプライベートメソッドの模倣

```js
// Module Pattern
const counterModule = (function() {
  let count = 0;

  return {
    increment: function() {
      count++;
    },
    show: function() {
      console.log(count);
    }
  };
})();

counterModule.show(); // 0
counterModule.increment();
counterModule.show(); // 1
console.log(count); // ReferenceError: count is not defined
```

[IIFE (Immediately Executed Function Expression) --MDN Web Docs Glossary: Definition of Web-related Terms | MDN](https://developer-mozilla-org.translate.goog/ja/docs/Glossary/IIFE?_x_tr_sl=ja&_x_tr_tl=en&_x_tr_hl=en&_x_tr_pto=nui,sc)

Bad Case:

> アロー関数 call、apply、bind のような、一般にスコープの設定のためのメソッドには適していません。

[アロー関数式 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

JavaScript Closure

```js
str = "http://example.com";
str = str.replace("http://", "https://");

console.log(str);
// "https://example.com"
```

正規表現で先頭だけでも良いかも

JavaScript http https replace

```js
let lastElement = array.slice(-1)[0];
// or 
let lastElement = array[array.length - 1];
```

JavaScript 配列の最後の要素 取得

```js
const str = "-";
const valid = /^[0-9a-zA-Z\-]*$/.test(str);

console.log(valid);
// true
```

JavaScript 半角英数字ハイフンのみ

```js
// 予約リスト(APIから取得した想定)
const reservationList = [
  { startTime: new Date('2021-10-01 09:00:00'), endTime: new Date('2021-10-01 10:00:00') },
  { startTime: new Date('2021-10-01 10:00:00'), endTime: new Date('2021-10-01 11:00:00') },
  { startTime: new Date('2021-10-01 14:00:00'), endTime: new Date('2021-10-01 15:00:00') },
];

/**
 * 予約可能かを判定して返す
 * 予約リストにレコードがない場合は、予約できる true
 * 予約リストにレコードがある場合は、予約できない false
 * @param {Object} params
 * @param {Date} params.startTime - 予約の開始時間
 * @param {Date} params.endTime - 予約の終了時間
 * @returns {boolean}
 */
function searchReservation(params) {
  const { startTime, endTime } = params;

  let canReserve = true;
  for (reservation of reservationList) {
    // 予約可能な条件の逆の場合、予約できないフラグを立てる
    if (!((reservation.endTime <= startTime) || (endTime <= reservation.startTime))) {
      canReserve = false;
      break; // falseになった場合、ループを終了する
    };
  }
  return canReserve;
};

// 実行
// 予約が埋まっていない場合、true
console.log(searchReservation({
  startTime: new Date('2021-10-01 11:00:00'),
  endTime: new Date('2021-10-01 12:00:00')
})); // true

// 予約が埋まっている場合、false
console.log(searchReservation({
  startTime: new Date('2021-10-01 09:00:00'),
  endTime: new Date('2021-10-01 10:00:00')
})); // false
```

JavaScript カレンダー予約の重複チェック

設定

```user.rb
has_many :childs, class_name: "User", foreign_key: "parent_id"
belongs_to :parent, class_name: "User", optional: true
```

取得

```rb
user = User.find(1)
user.childs # 子を取得
user.parent # 親を取得
```

FactoryBot

```rb
# 親
　parent = FactoryBot.create(:user)

# 子
ambassador_child = FactoryBot.create(
  :user,
  parent_id: parent
)
```

ridgepole

```rb
t.integer "parent_id", null: true, commnet: "親のID"
t.index ["parent_id"], name: "parent_id"
```

[Active Record の関連付け - Railsガイド](https://railsguides.jp/association_basics.html#%E8%87%AA%E5%B7%B1%E7%B5%90%E5%90%88)

Rails 自己結合

## ドキュメント

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

## 実装

```js
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 を呼び出します。

```bash
yarn add axios
```

```js
// 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)

## 値の取得

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

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

```js
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 // 👈 ココ
        }
      })
    }
  }
})
```

Next.js API Routes で REST API 実装

[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の違いと設定方法について

※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.js

Vue Routerの使用方法まとめ

## 意図

`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でリロード前に処理を実行する

## 意図

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

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

また、バックエンドは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

## 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からデスクトップアプリを起動する

**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が空になる

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

仮想通貨

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

Investment

## はじめに

**相当楽しみです！**
\
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 V3のロードマップと情報の整理

`align="center"`を付与しても、`details`が高さに影響を与えるため、中央揃えにならず、`hide-details`をつける必要がある。

```js
<v-row align="center">
  ...
  <v-col>
    <v-text-field
      hide-details // 👈
      outlined
      dense
    ></v-text-field>
  </v-col>
  ...
</v-row>
```