```jsx
<div>
  <Comeponent />
  {() => {
    if (条件式) {
      return <></>
    }
    return <></>
  }}
</div>
```

Reactのjsx内でしっかりとしたif文を書く

rootディレクトリに対して、`/packages/web/client/`で検索をかけたい場合、

```
> files to include
./packages/web/client
```

さらに拡張子を絞る。

```
> files to include
./packages/web/client/**/*.tsx,*.ts
```

## 設定を見る

検索結果を閉じておきたい

左下の「設定アイコン」→「settings」→「Search: Collapse Results」


VSCodeで特定のディレクトリ内で検索

JSで最後の文字列を取得する

https://github.com/remarkjs/react-markdown

[GitHub](https://github.com/remarkjs/react-markdown)

Markdownでいい感じにOGPを表示する

## 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`を使いましょう。

commitとは逆順番で実行する。

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

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

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

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

```bash
git log
tig
```

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

# merge commitのrevert
git revert -m 1 {ハッシュ値}
```

```bash
git revert --continue
```

## ブランチ名の変更

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

```bash
git tag v1.0.0
git push origin v1.0.0
```

localにあるすべてのtagが更新されてしまうので、ちゃんと絞って実行する。

package.jsonのバージョンも変えないと、packageは、publishされない。その場合は、`yarn version`コマンドを叩く。

[yarn version | Yarn](https://chore-update--yarnpkg.netlify.app/ja/docs/cli/version)

```bash
yarn version
# input next version (X.X.X)

git push origin vX.X.X
```

## git管理から削除

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

削除

```
git tag -d v2.1.0
```

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

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

```

## コンフリクトの解消

```bash
git merge --continue
```

## rebaseの取り消し

```bash
git rebase --abort
```

[git - Completely cancel a rebase - Stack Overflow](https://stackoverflow.com/questions/22289345/completely-cancel-a-rebase)

## git commitをまとめる

```
git status -s
```

[git commit --amendで3つのコミットを1つのコミットにまとめる - Qiita](https://qiita.com/suin/items/9300a7ce8d8e595bec09)

```bash
git reset --soft @~2
git add .
git commit --amend -m "fix ----"
# or
git commit --amend --no-edit
```

[git--amend--no-edit拒否されたプッシュ-スタックオーバーフロー](https://stackoverflow.com/questions/49114137/git-amend-no-edit-rejected-push)

pushがrejectされる場合

```bash
git push -f origin head
```

## git show

```bash
git show
```

## pullとpushが被ってしまった場合

```bash
git reset --hard HEAD~
```

## 特定のブランチから別のブランチにpushする

actionでデプロイする時とかに便利だったり

```
git co feature/xxx # deployしたいブランチ
git push -f origin HEAD:feature/zzz
```

Gitの使い方まとめ

本当はjsonが帰ってきてほしい

Headersのpostman tokenを取り除いたら無事に帰ってきた。

Postmanでステージング叩いたら403でHTMLが帰ってくる

## 解決方法

`TextFieldProps`ではなく、`StandardTextFieldProps`を使用する。

[Cannot pass underline class through TextField as InputProps · Issue #13794 · mui/material-ui](https://github.com/mui/material-ui/issues/13794)

## 問題

```tsx
import React from 'react'
import { TextField, TextFieldProps } from '@material-ui/core'

type Props = TextFieldProps & {
  classes: Record<string, string>
}
export function renderInput(inputProps: Props) {
  const { InputProps } = inputProps
  return (
   // 👇　TypeError
    <TextField
      InputProps={{
        classes: {
          underline: classes.inputUnderline,
        },
      }}
    />
  )
}
```

## 修正

```tsx
import React from 'react'
// 👇 StandardTextFieldProps に変更
import { TextField, StandardTextFieldProps } from '@material-ui/core'

type Props = StandardTextFieldProps & {
  classes: Record<string, string>
}
export function renderInput(inputProps: Props) {
  const { InputProps } = inputProps
  return (
    <TextField
      InputProps={{
        classes: {
          underline: classes.inputUnderline,
        },
      }}
    />
  )
}
```

MuiでTextFieldにunderlineを設定しようとしたらType Errorが発生する

## mermaid Install

```bash
yarn add -D mermaid @types/mermaid
```

## Custom Markdownの作成

※あまりキレイではない

`mermaid`の場合の処理

```tsx
export const CustomMarkdown = {
  code({ node, inline, className, children, ...props }: any) {
    const code = String(children).replace(/\n$/, '');
    const [_, filename] = /language-([\w./]*)/.exec(className) || [];

    if (filename === 'mermaid') {
      return <div className="mermaid">{code}</div>;
    }
  },
  ...略
};
```

React Markdown

```tsx
import ReactMarkdown from 'react-markdown';
import { CustomMarkdown } from './CustomMarkdown';

interface Props {
  source: string;
}

export default function Markdown({ source }: Props) {
  return (
    <ReactMarkdown
      components={CustomMarkdown}
      children={source}
    />
  );
}
```

表示

```tsx
import { Markdown } from './Markdown';
import mermaid from 'mermaid';

export default function SomePage({}: Props) {
  // 👇　mermaidをレンダリング
  useEffect(() => {
    mermaid.init('.mermaid');
  }, []);
  return (
    <Markdown ..../>
  )
```

静的出力時に吐くようにしたいけども
refとかでいい感じにレンダリングされるようにしたほうが良いかも

## 確認

```
```mermaid``` な感じで囲んで書く
```

```mermaid
flowchart LR
    id1>This is the text in the box]
```

```mermaid
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
```

mermaidjsとReact Markdownの統合

## 問題

```
------------
scroll area
scroll area
scroll area
------------
fixed element // 👈 固定したい！
------------
```

`position: sticky`などでも良いが、heightを設定しないといけないので、計算が面倒になる。

## 実装

```css
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.scroll-area {
  flex-grow: 1;
}
```

```html
<div class='container'>
  <div class='scroll-area'>...</div> 👈 ここでスクロールするようにする
  <div>...</div> 👈 下に固定される
</div>
```

スクロールできる要素の中で特定の要素を下に固定する

```
------------
      |
      | div
img   |
------------
```

こんな感じで配置したい場合に使えるcss

```css
img {
  align-self: 'end',
}
```

👍

display flex で flex item を一番下に配置する

## Intro

`target`ステートを変更した時の副作用として、`target.id`を持つ要素までスクロールする機能を作る。
`useRef`を使用せず、idを使用した方が単純だったので、idを使用している。
（特に調査はしていない。）

## scrollTo

```tsx
  // ⚠️ target と item は同じデータ構造
  useEffect(() => {
    if (!target) {
      return
    }
    const targetEl = document.getElementById(target?._id)
    const containerEl = document.getElementById('container')
    const targetTop = targetEl?.getBoundingClientRect().top || 0
    const containerTop = containerEl?.getBoundingClientRect().top || 0
    const containerScrollTop = containerEl?.scrollTop || 0
    const marginTop = 36 // 👈 スクロールの位置36px下に調整する
    const scrollSize = targetTop - containerTop + containerScrollTop - marginTop
    containerEl?.scrollTo({ top: scrollSize, behavior: 'smooth' })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [target])
```

 ```tsx
 <div className="container overflow-y-auto">
  {items.map((item, index) => (
    <div id={item.id}>
     {item.name}
    </div>
  ))}
 </div>
 ```

## 改良する scrollIntoView

 `scroll-padding`をという便利なcssプロパティがあったので使用したら、スッキリした。

 [scroll-padding - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/scroll-padding)

 また、スクロールさせるコンテナのidも消すことができた。

```tsx
  useEffect(() => {
    if (!target) {
      return
    }
    const targetEl = document.getElementById(target?._id)
    targetEl?.scrollIntoView({ behavior: 'smooth' })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [target])
 ```

 ```tsx
 // ⚠️ overflow-y-autoは必須
 <div className="scroll-py-[36px] overflow-y-auto">
  {items.map((item, index) => (
    <div id={item.id}>
     {item.name}
    </div>
  ))}
 </div>
 ```


React 対象の要素までScrollさせる

再起関数を書く機会にパフォーマンスが気になったのでメモ。

```js
const startTime = performance.now(); // 開始時間
someFunc(); // 計測する処理
const endTime = performance.now(); // 終了時間
console.log(endTime - startTime); // 何ミリ秒かかったかを表示する
```

計測結果

```
map: 0.19999998807907104
for: 0.7000000476837158
```

結論: mapの方が早い

forEachとfor...ofとforの中では、forEachが一番パフォーマンスがよく。forEachとmapでは、mapの方が良いみたい。

他のもの

```ts
if (Array.isArray(action.payload)) {
  state.items = [...state.items, ...action.payload]
} else {
  state.items = [...state.items, action.payload]
}
```

```ts
const payload = action.payload
const pushed = Array.isArray(payload) ? payload : [payload]
state.items.push(...pushed)
```

```
0.20000004768371582
0.30000007152557373
```

- [Performance of JavaScript .forEach, .map and .reduce vs for and for..of](https://leanylabs.com/blog/js-forEach-map-reduce-vs-for-for_of/)
- [JavaScriptで任意の処理にかかる時間を計測する](https://sbfl.net/blog/2017/12/01/javascript-measure-time/)


JSで関数の実行時間を調べる

proxyしているエンドポイントのproxy先も含めてテストに組み込みたいときに少し悩んだのでメモ。

[mswjs/msw: Seamless REST/GraphQL API mocking library for browser and Node.js.](https://github.com/mswjs/msw)という、モックサーバーを簡単にコードレベルで書けるライブラリがあったので、これを使った。

`{ onUnhandledRequest: 'bypass' }`の箇所は、`console.warn`が発生するので、オプションを設定した。これはおそらく、mswがlistenからcloseまで全てのリクエストをインターセプトしているので、nest.jsへのリクエストも含めて、検知しているからだと思う。ここは、モックしなくて良いので、`bypass`を設定して、そのまま実行してもらう。

```ts
import { rest } from 'msw'
import { setupServer } from 'msw/node'

const mockEndpoint = 'http://localhost:3100'　// 被らないように
const mockServer = setupServer(
  rest.get(`${mockEndpoint}/example`, (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ message: 'ok' }))
  })
)
beforeAll(async () => {
  // 👇 https://mswjs.io/docs/api/setup-server/listen#onunhandledrequest
  mockServer.listen({ onUnhandledRequest: 'bypass' })
})
afterAll(async () => {
  mockServer.close()
})

describe('routes api/proxy', () => {
  it('response.status = 200 を返すこと', async () => {
    const response = await app.request
      .get('/api/proxy/example') // 👈 appは、省略しているが、nest.js
    expect(response.status).toBe(200)
    expect(response.body).toEqual({ message: 'ok' })
  })
})
```

[listen() - Api - Mock Service Worker Docs](https://mswjs.io/docs/api/setup-server/listen#onunhandledrequest)

JestでProxy先のエンドポイントをモックする

```ts
export const PeopleType = {
  A: 'A',
  B: 'B',
  C: 'C',
} as const

export type PeopleType = typeof PeopleType[keyof typeof PeopleType]
```

[TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します - LINE ENGINEERING](https://engineering.linecorp.com/ja/blog/typescript-enum-tree-shaking/)

## Memo

`as const`を使用しないと、`PeopleType`が`string`として推論される

```ts
const str: PeopleType = 'Text'
// error発生しない
```


TypeScriptでEnumを使用せずそれっぽいものを作る

## 問題

重い処理と軽い処理が混在するケースで、いい感じにローディングを表示させたいが、__処理が早い場合、ローディングがチラついてしまう。__

## 解決策

処理が早すぎる場合を考慮して、`1000ms(1秒)　-　実行時間`表示を遅延させ、`1000ms以上`実行時間がある場合は、遅延時間`0ms`にする。

## コード

```tsx
const [isLoading, setIsLoading] = useState(false)

const handleUpdate = () => {
  setIsLoading(true) // ローディング状態にする
  const startTime = new Date().getTime()　// 計測開始時間
  dispatch(update())
    .then(() => {})
    .catch(() => {})
    .finally(() => {
      const currentTime = new Date().getTime()　// 計測終了時間
      const executionTime = currentTime - startTime　// 実行時間
      const delayTime = 1000 - executionTime　// 表示を遅延させる時間
      // ローディング状態を解除する
      setTimeout(() => setIsLoading(false), Math.max(delayTime, 0))
    })
}
```

### ショートコード

```tsx
setTimeout(() => setIsLoading(false), Math.max(1000 - (currentTime - startTime), 0))
```

## hooksを作る

凝縮性

[javascript-useStatesetメソッドは変更をすぐには反映しません-StackOverflow](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately)

```ts
import { useState } from 'react'

export const useLoading = () => {
  const [isLoading, setIsLoading] = useState(false)
  let startTime = 0

  const startLoading = () => {
    setIsLoading(true)
    startTime = new Date().getTime()
  }

  /**
   * ローディングを終了する
   * @param minWaitTime ローディングが完了するまでの最小待ち時間
   */
  const endLoading = (minWaitTime: number = 1000) => {
    const currentTime = new Date().getTime()
    const executionTime = currentTime - startTime
    const delayTime = minWaitTime - executionTime
    setTimeout(() => {
      setIsLoading(false)
      startTime = 0
    }, Math.max(delayTime, 0))
  }

  return { isLoading, startLoading, endLoading }
}

```

## 解説

実行時間が1000ms以下の場合、`delayTime`は、`0 ~ 999`の値になる。

実行時間が1000ms以上の場合、`delayTime`は、`-(マイナス)`になるので、`Math.max(delayTime, 0))`で0が返され、遅延時間が0msになる。

## 参考

- [Math.max() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max)
- [javascript-useStatesetメソッドは変更をすぐには反映しません-StackOverflow](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately)

JavaScript 実行時間・遅延時間の計算

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

仮想通貨

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

Investment

※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の使用方法まとめ

## ドキュメント

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

NuxtJS

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

## 意図

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

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

また、バックエンドは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からデスクトップアプリを起動する

今回は、Nuxt.jsで存在しないURLに404ページを返す方法を解説しています。
ユーザーが存在しないURLにアクセスした時に、適切なサイト案内をできるように用意した404ページを返しましょう。

## 404ページを作る

`pages/404.vue`を作成して、404ページのルーティングの準備をしましょう。

`nuxt generate`した時に、`404.html`が出力されるようになります。
\
404ページのデザインはインターネットで調べてみるといいでしょう。
個性的なでデザインも多いので調べてみると面白いです。基本的に`https://ドメイン名:404`というケースが多いです。
\
有名な企業の404ページを調べてみました。`404.html`ではないサイトもあります。その場合任意のページにリダイレクトさせています。

- [Twitter 404](https://twitter.com/404)
- [GitHub 404](https://github.com/404)
- [Amazon 404](https://www.amazon.co.jp/404)
- [Netflix 404](https://www.netflix.com/404)

## nuxt.config.jsの設定

存在しないURLにアクセスされた場合の処理を`nuxt.config.js`の[extendroutes](https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-router/#extendroutes)プロパティに書いていきます。

```js
export default {
    router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/404.vue')
      })
    }
  },
}
```

`path: '*'`は存在しないページ全てを意味しています。
`resolve()`に`'pages/404.vue'`を指定すると、404ページが返されるようになります。
\
設定したら、デプロイ後に存在しないURLを叩いて確認してみてください。

今回は、Nuxt.jsで存在しないURLに404ページを返す方法を解説しています。
ユーザーが存在しないURLにアクセスした時に、適切なサイト案内をできるように用意した404ページを返しましょう。

Nuxt.jsで存在しないURLに404ページを返す方法

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

`className="sticky top-0 z-50"`で固定する。

```js
import Header from '@/components/organisms/header.js'

export default function Layout({ children }) {
  return (
    <>
      {/* ヘッダーを固定する */}
      <div className="sticky top-0 z-50">
        <Header />
      </div>
      {/* メインコンテンツ */}
      <div>{children}</div>
    </>
  )
}
```

人気記事

新着記事