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)

## 処理が重複する可能性ある場合は、uuidを使う

例)チャット

```ts
import { v4 as uuid } from 'uuid'
uuid()
```


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

## 動機・概要

外部アプリケーションとの連携で使用する

```mermaid
flowchart LR
    A["API Geteway"]-->B["トークンベース認証"]-->C["AWS Lambda"]
```

## インストール

macOSにインストール

```bash
brew install docker
brew tap aws/tap
brew install aws-sam-cli
```

```bash
sam --version
> SAM CLI, version 1.36.0
```

```bash
brew upgrade aws-sam-cli
```

## プロジェクトの作成

```bash
sam init
```

✅ TypeScriptのTemplateがあったので、選択する。（これにてTypeScriptの設定は完了）

```bash
...省略
AWS quick start application templates:
	1 - Hello World Example
	2 - Hello World Example TypeScript
	3 - Step Functions Sample App (Stock Trader)
	4 - Quick Start: From Scratch
	5 - Quick Start: Scheduled Events
	6 - Quick Start: S3
	7 - Quick Start: SNS
	8 - Quick Start: SQS
	9 - Quick Start: Web Backend
```

## 権限の付与

https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/sam-permissions.html

```
AWSCloudFormationFullAccess
IAMFullAccess
AWSLambda_FullAccess
AmazonAPIGatewayAdministrator
AmazonS3FullAccess
AmazonEC2ContainerRegistryFullAccess
```

## 開発環境で起動する

templateからプロジェクトを作成すると、`hello-words`が作成される

```bash
cd hello-words && yarn install # 実行しないと sam build で esbuild でエラーになる
sam build
```

### コードの変更

Hot Reloadはなかったので、`sam build`を再実行する必要がある。
（`sam build --beta-features`でyesを選択すると、作成したfuntionに対してesbuildを実行してくれるので、`yarn compile`の実行の必要なさそう）

```bash
sam build

> You can also enable this beta feature with 'sam build --beta-features'
yes

Running NodejsNpmEsbuildBuilder:CopySource
Running NodejsNpmEsbuildBuilder:NpmInstall
Running NodejsNpmEsbuildBuilder:EsbuildBundle
```

```bash
sam build --beta-features
```

### 起動

```bash
sam local start-api
> localhost:3000 で起動する
```

## event.json

## localでenvの設定

```bash
sam local invoke --env-vars env.json
```

```json
{
  "MyFunction1": {
    "TABLE_NAME": "localtable",
    "BUCKET_NAME": "testBucket"
  },
  "MyFunction2": {
    "TABLE_NAME": "localtable",
    "STAGE": "dev"
  }
}
```

```template.yml
AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31

# More info about Globals: https://github.com/awslabs/serverless-application-model/blob/master/docs/globals.rst
Globals:
  Function:
    Runtime: nodejs10.x
    Handler: index.handler
    Timeout: 10
    MemorySize: 1024
    Environment:
      Variables:
        DYNAMO_ENDPOINT: DUMMY_ENDPOINT

Resources:
  A001:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: ../build/A001/
      Events:
        HelloWorld:
          Type: Api
          Properties:
            Path: /groups
            Method: GET
      Environment:
        Variables:
          TABLE_GROUP_WORDS: DUMMY_GROUP_WORDS
```

- [AWS SAMの環境変数設定方法 - Qiita](https://qiita.com/wwalpha/items/d28d053f5797f39bde4b)
- [関数のローカルでの呼び出し - AWS Serverless Application Model](https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/serverless-sam-cli-using-invoke.html)

invoke: 呼び出しの意味

## まとめ

```bash
sam build
sam local invoke --env-vars env.json
sam local start-api
```

```bash
sam local start-api --env-vars env.json
```

表示されるようになった

```ts
const privateKey = process.env.PRIVATE_KEY;
console.log('privateKey:', privateKey)
> AAAAAAA
```

template.ymlを変更したら、`sam build`

ソースコードを変更したら、`sam build --beta-features`

envを渡したい場合は、`--env-vars env.json`をつける。

## Lambda認証

1.トークンベース(通常Bearerトークンが設定されるヘッダーです。)
2.リクエストパラメータベース

認証情報に複数の値は使用しないので、トークンベース認証で実装してみる。

- [Lambda オーソライザーの例 - AWS Serverless Application Model](https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/serverless-controlling-access-to-apis-lambda-authorizer.html)
- [Lambdaオーソライザーのトークンベースとリクエストパラメータベースの挙動を比べて、どちらを選択するべきか考えてみた | DevelopersIO](https://dev.classmethod.jp/articles/lambda-authorizer-toke-request/)
- [CDK(TypeScript)でAPIにLambdaオーソライザーを適用してみた | DevelopersIO](https://dev.classmethod.jp/articles/add-lambda-authorizer-to-cdk-typescript/)
- [AWS SAMでLambdaオーソライザーを「適用するAPI」と「適用しないAPI」を作ってみた | DevelopersIO](https://dev.classmethod.jp/articles/aws-sam-api-gateway-lambda-authorizer/)

ローカルではサポートされていないので、デプロイして確認する。
（[localhost - SAM Local doesn't appear to be running Authorizer functions - Stack Overflow](https://stackoverflow.com/questions/57632539/sam-local-doesnt-appear-to-be-running-authorizer-functions)から）

```bash
sam deploy --guided

# aws credentialsの設定をしていない場合は、
aws configure
```

## Secret Managerを使う

トークン認証用のSECRETを作成する。

```bash
openssl rand -hex 32
```

- [How to use AWS secret manager and SES with AWS SAM | by Sandeep Kumar | Nerd For Tech | Medium](https://medium.com/nerd-for-tech/how-to-use-aws-secret-manager-and-ses-with-aws-sam-a93bb359d45a)
- [AWS Secrets ManagerでEC2キーペア秘密鍵の安全な受け渡しを管理してみる | DevelopersIO](https://dev.classmethod.jp/articles/managing-keypairs-with-secrets-manager/)
- [amazon web services - How to normalize a private key stored on AWS secrets manager - Stack Overflow](https://stackoverflow.com/questions/58436229/how-to-normalize-a-private-key-stored-on-aws-secrets-manager)

```
aws secretsmanager create-secret \
    --name 'private-key' \
    --secret-binary file://./private-key.pem

aws secretsmanager get-secret-value \
  --secret-id private-key
```
aws secretsmanager get-secret-value \
  --secret-id private-key

## Corsの回避

```yml
Globals:
  Function:
    Timeout: 3
  Api:
    Cors:
      AllowOrigin: "'*'"
      AllowMethods: "'OPTIONS,POST'"
      AllowHeaders: "'Content-Type,X-CSRF-TOKEN'"

Resources:
  ExampleFunction:
    Type: AWS::Serverless::Function # More info about Function Resource: https://github.com/awslabs/serverless-application-model/blob/master/versions/2016-10-31.md#awsserverlessfunction
    Properties:
      CodeUri: app/
      Handler: app.lambdaHandler
      Runtime: nodejs14.x
      Architectures:
        - x86_64
      Environment:
        Variables:
          PRIVATE_KEY: PRIVATE_KEY
      Events:
        RootEndpoint:
          Properties:
            Method: any
            Path: /
          Type: Api
        EverythingElse:
          Properties:
            Method: any
            Path: /{proxy+}
          Type: Api
```

responseにも設定してみた

```ts
response = {
    statusCode: 200,
    body: JSON.stringify({
        token: token,
    }),
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'OPTIONS,POST',
    },
};
```

`AddDefaultAuthorizerToCorsPreflight: false`と下記の設定を行う。

```yaml
  Api:
    Cors:
      AllowOrigin: "'*'"
      AllowMethods: "'OPTIONS,POST'"
      AllowHeaders: "'Origin, X-Requested-With, Content-Type, Accept,
```

[express - Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response - Stack Overflow](https://stackoverflow.com/questions/32500073/request-header-field-access-control-allow-headers-is-not-allowed-by-itself-in-pr)

responseにもくっつける

```ts
    const headersOption = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
        'Access-Control-Allow-Methods': 'POST,OPTIONS',
    };
```

## Warningの回避

```
Your template contains a resource with logical ID "ServerlessRestApi", which is a reserved logical ID in AWS SAM. It could result in unexpected behaviors and is not recommended.
```

```
botocore.exceptions.NoCredentialsError: Unable to locate credentials
```

```bash
aws configure
```

でconfigurationを設定する

### samの検証

```
sam validate --profile=${PROFILE}
```

## Preflight Request

Preflight request (プリフライトリクエスト)に関しては、SAMでAPI Gateway認証をする場合は、設定をfalseにするのが良さそう。

Corsについては下記記事がすごく分かりやすかった

[なんとなく CORS がわかる...はもう終わりにする。 - Qiita](https://qiita.com/att55/items/2154a8aad8bf1409db2b)

## Templateを指定してデプロイ

templateとSecret Managerを使用して、環境別のSecret類を管理するのが楽だと感じた。

```bash
sam deploy -t ./template.yaml
sam deploy -t template.production.yaml
```

### envを渡す場合

下記のように設定すると、`sam deploy`時にenvを渡すことができる。

```yaml
Globals:
  ...
Parameters: # 👈
  SecretMangerId:
    Type: String
    Description: Secret Manager ID
    Default: staging/my-secret
  Origin:
    Type: String
    Description: Origin
    Default: http://localhost:3000

Resources:
  AuthorizerFunction:
    Properties:
      Environment: # 👈
        Variables:
          SECRET_MANAGER_ID: !Ref SecretMangerId
          ORIGIN: !Ref Origin
```

`sam deploy`の具体的なコマンドはこちら

```bash
SECRET_MANAGER_ID="staging/my-secret"
ORIGIN="http://localhost:3000"
sam deploy --force-upload --parameter-overrides SecretMangerId=$SECRET_MANAGER_ID Origin=$ORIGIN
```

Lambda内での取得。dotenvなどはinstallする必要はなかった。

```ts
const origin = process.env.ORIGIN;
const secretManagerId = process.env.SECRET_MANAGER_ID;
if (!origin || typeof origin !== 'string') {
  throw new Error('ORIGIN is not defined');
}
if (!secretManagerId || typeof secretManagerId !== 'string') {
  throw new Error('SECRET_MANAGER_ID is not defined');
}
```

aws-sdkでsecretManagerIdを引数に渡すときになぜかエラーが発生したので、`toString()`を使用した。

```ts
import * as AWS from 'aws-sdk';

export const secretsManagerClient = async (secretManagerId: string) => {
    try {
        const secretsManager = new AWS.SecretsManager({
            region: 'us-east-1',
        });
        const response = await secretsManager
            .getSecretValue({
                // NOTE: toString()をつけないと { message: 'Invalid name. Must be a valid name containing alphanumeric characters, or any of the following: -/_+=.@!' } が返ってくる
                SecretId: secretManagerId.toString(), // 👈　ここ
            })
            .promise();
        if ('SecretString' in response) {
            return response.SecretString;
        } else {
            throw new Error('Decrypting secrets failed');
        }
    } catch (err) {
        return JSON.stringify({ err }, null, 2);
    }
};
```

## Option系

```yaml
            # Cache Time to live in seconds
            # https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/sam-property-api-lambdatokenauthorizationidentity.html
            Identity:
              ReauthorizeEvery: 0
```

## Corsの設定

[CorsConfiguration - AWS Serverless Application Model](https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/sam-property-api-corsconfiguration.html)

## ドキュメント

- [関数 - Lambda](https://us-east-1.console.aws.amazon.com/lambda/home?region=us-east-1#/functions)
- [AWS SAM CLIでTypeScriptがネイティブサポートされました (パブリックプレビュー) | DevelopersIO](https://dev.classmethod.jp/articles/typescript-native-support-in-the-aws-sam-cli/)
- [macOS への AWS SAM CLI のインストール - AWS Serverless Application Model](https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/serverless-sam-cli-install-mac.html)
https://github.com/aws/aws-sam-cli/issues/437
- https://qiita.com/subaru44k/items/fc114109f21d41243988

## メモ
- stacknameが同じ場合、上書きされるので注意

https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/sam-cli-command-reference-sam-deploy.html#w4076aac38c11c12c25

AWS SAM 使って Lambda をデプロイする with TypeScript

非同期処理を挟み、`window.open()`を実行すると、ポップアップブロックに引っかかる。

（Reactで実装）

```ts
const handleClick = async () => {
  try {
    const url = await getURL() // 非同期処理
    open.window(url, '_blank')
  } catch (e) {
    console.error(e)
  }
}
```

とにかく別タブで開きたい。

## 回避策1

先に空のwindowを開き、後でurlを入れる。

errorなどでcloseなどを行う。

（手元のChrome,Safari,Edge,Firefoxでは機能した）

```ts
const handleClick = async () => {
  try {
    let openWindow = window.open('', '_blank')
    const url = await getURL() // 非同期処理
    openWindow.localtion.href = openWindow
  } catch (e) {
    openWindow.close()
    console.error(e)
  }
}
```

https://stackoverflow.com/questions/2587677/avoid-browser-popup-blockers#answer-25050893

## 回避策2

諦めて、処理を分ける。

```ts
const [targetURL, setTargetURL] = useState('')

const handleGenerateURL = async () => {
    try {
    const url = await getURL() // 非同期処理
    setTargetURL(url)
  } catch (e) {
    console.error(e)
  }
}

const handleClick = async () => {
  targetURL && window.open(targetURL, '_blank')
}
```

## メモ

サーバ側に`getURL()`の処理を移してリダイレクトさせると、別タブで開けるのだろうか

window.open時のポップアップブロックの回避

```.env.development
REACT_APP_AUTHORIZATION_TOKEN=""
REACT_APP_LAMBDA_URL=""
```

- `.env.development`
- `.env.staging`
- `.env.production`

というenvファイルがある。yarn dev時には、`env.development`が適用され、build時には`.env.production`が問答無用で適用されていた。

下記のような npm scriptを書くと、解決できた。

```json
"scripts": {
  "build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
  "build:dev": "yarn tsc && yarn test && REACT_APP_ENV=development yarn build",
  "build:staging": "yarn tsc && yarn test &&  REACT_APP_ENV=staging yarn build",
  "build:prod": "yarn tsc && yarn test &&  REACT_APP_ENV=production yarn build",
},
```

https://stackoverflow.com/questions/42458434/how-to-set-build-env-variables-when-running-create-react-app-build-script

React ScriptでBuild時に環境ごとのenvを適用させる

## 前提

- 開発環境のsupabase環境はできている
- GCPでプロジェクトを作成している

## 方法

`/supabase/config.toml`で設定する

```toml
[auth.external.google]
enabled = true
client_id = YOUR_GOOGLE_CLIENT_ID
secret = YOUR_GOOGLE_SECRET
```

承認済みのリダイレクト URIは、`http://localhost:54321/auth/v1/callback`を指定する。

## 参考
- https://supabase.com/docs/guides/auth/auth-google
- https://github.com/supabase/supabase/discussions/2818

Supabase 開発環境でGoogleログイン

## SQL

`gears`というテーブルに`updated_at`カラムを追加する。
追加時に現在時刻が入り、全てのROW更新時に自動的に`updated_at`に更新時刻が入るようにする。

```sql
ALTER TABLE IF EXISTS public.gears
    ADD COLUMN updated_at timestamp with time zone DEFAULT now();
create extension if not exists moddatetime schema extensions;
CREATE TRIGGER handle_updated_at
    BEFORE UPDATE 
    ON public.gears
    FOR EACH ROW
    EXECUTE FUNCTION extensions.moddatetime('updated_at');
```

http://localhost:54323/project/default/sql

のSQLエディタで実行する。

## Migration

```bash
# remote db と差分の確認
supabase commit changes
# migration の作成
supabase db commit add_updated_at_to_gears
# remote db に反映する
supabase db push
```

※remote dbが設定してあること

本当は、mainブランチにマージ時に実行するのが良いかもしれない。

## Error

```
Error: ERROR: must be owner of table genres (SQLSTATE 42501); while executing migration 20220622150744
```

`supabase db commit`時に権限のエラーが発生する場合は、

remote db で

```sql
ALTER ROLE postgres SUPERUSER
> success. No rows returned
```

を実行する。

実行した後は、

```sql
ALTER ROLE postgres NOSUPERUSER
> success. No rows returned
```

（で戻した方が良いかも？）

## 型の更新

openapiで型生成しているので、実行しておく。

```bash
npx openapi-typescript '${PROJECT_URL}/rest/v1/?apikey=${ANON_API_KEY}' --output types/supabase.ts
```

で更新しておく。


supabase updated_at カラムの追加

## Pairで作る

```
openssl ecparam -genkey -name prime256v1 -noout -out ec256-key-pair.pem
```

https://notes.salrahman.com/generate-es256-es384-es512-private-keys/

## 別々で作る

```bash
openssl ecparam -genkey -name prime256v1 -noout -out ec_private.pem
openssl ec -in ec_private.pem -pubout -out ec_public.pem
```

https://cloud.google.com/iot/docs/how-tos/credentials/keys

es256のpemを生成する

- npxで実行すると便利
- packageに含めたくない場合に便利

```bash
npx sort-package-json
```

package.jsonのソート

## publicURLを取得する関数を作る

```storage.ts
import { supabase } from "@/libs/supabaseClient";

interface Props {
  bucketName: string;
  fileName: string;
  defaultURL: string;
}

export async function fetchPublicURL({
  bucketName,
  fileName,
  defaultURL,
}: Props): Promise<string> {
  if (!fileName) {
    return defaultURL;
  }
  const { data, error } = supabase.storage
    .from(bucketName)
    .getPublicUrl(fileName);

  if (error) {
    return defaultURL;
  }
  return data?.publicURL ?? defaultURL;
}
```

## 呼び出し

```tsx
  const ogpImage = await fetchPublicURL({
    bucketName: "gears",
    fileName: gear?.image || "",
    defaultURL: "/images/ogp.png",
  });
```

## 確認

![image](//images.ctfassets.net/0jyj5pjwic68/kFe7AhKJ8VY4cwu7rlwiR/6a89a768d7f6691c4463d1e3cbbcebc3/image.png)

Supabase stoargeでOGP表示

なぜかHTMLが返却されているのに、`console.log()`が表示されていない場合は、cacheを疑う。

```ts
@Get('/redirect')
@Header('Cache-Control', 'none') // 👈追加
@Redirect('*', HttpStatus.TEMPORARY_REDIRECT)
public async redirectFunc() {
  ...
  console.log('Hello')
  return { url }
}
```
https://docs.nestjs.com/controllers
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control

Chromeの場合、`must-understand`が無いと、キャッシュされてしまう。要調査が必要。

```ts
@Header('Cache-Control', 'must-understand, no-store, no-cache, max-age=0')
```

Firefox, Edgeだと下記でもキャッシュされない。

```ts
@Header('Cache-Control', 'no-store, no-cache, max-age=0')
```

## redirectのcacheの削除

chacheを明示的に削除

https://zenn.dev/phi/articles/clear-301-redirect-cache-by-chrome

一時的な削除

Chrome DEV tool でネットワークタブから、キャッシュを無効化を選択

## Statusコード

https://developer.mozilla.org/ja/docs/Web/HTTP/Redirections

> 302 Found：302 Foundは、要求されたリソースが一時的に新しいURLに移動されたことを意味します。今後のリクエストでは、訪問者が同じURLを使用する必要があります。

https://www.geeksforgeeks.org/http-status-codes-redirection-responses/

302を使用するのが良さそう

## Cache-Control

- [Cache-Controlとは？ | キャッシュの概要 | Cloudflare](https://www.cloudflare.com/ja-jp/learning/cdn/glossary/what-is-cache-control/)


NestJS redirect cache

## Commads

- fn 12 関数ジャンプ
- cmd shift o 関数検索
- F2 でファイル名を変更した方がよい。勝手に他のファイルでも変更を見てくれる
- cmd . convert named function.
- cmd . selected lines new file.vs

## 拡張

- https://marketplace.visualstudio.com/items?itemName=nicoespeon.abracadabra 三項演算子などに変換してくれる。関数にする必要がないケースなどのリファクタリングで使える

## 参考

- [keyboard-shortcuts-windows.pdf](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)

VSCode 知っておくと、便利なことまとめ

![Snackbar](//images.ctfassets.net/0jyj5pjwic68/4PFpSF3I3EXVkgWGq0DExa/577e3883fdb2feec002c591d07b0621f/____________________________2022-06-04_23.18.59.png)

## Snackbarコンポーネント

```Snackbar.tsx
import { Fragment } from "react";
import { Transition } from "@headlessui/react";
import {
  CheckCircleIcon,
  ExclamationIcon,
  InformationCircleIcon,
  BanIcon,
} from "@heroicons/react/outline";
import { XIcon } from "@heroicons/react/solid";

interface Props {
  open: boolean;
  setOpen: (show: boolean) => void;
  variant?: "success" | "error" | "info" | "warning" | undefined;
  message?: string;
}

export function Snackbar({
  open,
  setOpen,
  variant = "success",
  message,
}: Props) {
  const icon = () => {
    switch (variant) {
      case "success":
        return <CheckCircleIcon className="h-6 w-6 text-green-400" />;
      case "error":
        return <BanIcon className="h-6 w-6 text-red-400" />;
      case "info":
        return <InformationCircleIcon className="h-6 w-6 text-blue-400" />;
      case "warning":
        return <ExclamationIcon className="h-6 w-6 text-orange-400" />;
      default:
        return <CheckCircleIcon className="h-6 w-6 text-green-400" />;
    }
  };

  return (
    <>
      <div
        aria-live="assertive"
        className="z-[9999] fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start"
      >
        <div className="w-full flex flex-col items-center space-y-4 sm:items-end">
          <Transition
            show={open}
            as={Fragment}
            enter="transform ease-out duration-300 transition"
            enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
            enterTo="translate-y-0 opacity-100 sm:translate-x-0"
            leave="transition ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="max-w-sm bg-white w-full shadow-lg rounded-lg pointer-events-auto overflow-hidden">
              <div className="p-4">
                <div className="flex items-start">
                  <div className="flex-shrink-0">{icon()}</div>
                  <div className="ml-3 w-0 flex-1 pt-0.5">
                    <p className="text-sm font-medium">{message}</p>
                  </div>
                  <div className="ml-4 flex-shrink-0 flex self-center">
                    <button
                      type="button"
                      className="rounded-md inline-flex text-gray-800"
                      onClick={() => {
                        setOpen(false);
                      }}
                    >
                      <span className="sr-only">Close</span>
                      <XIcon className="h-5 w-5" aria-hidden="true" />
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </Transition>
        </div>
      </div>
    </>
  );
}
```

## SnackbarContext

```SnackbarContext.tsx
import React, { useState, createContext, useContext } from "react";
import { Snackbar } from "@/components/shared/Snackbar";

interface ContextValues {
  openSnackbar: (
    message: string,
    variant: "success" | "error" | "info" | "warning"
  ) => void;
  closeSnackbar: () => void;
  showSuccess: (message: string, ms?: number) => void;
  showError: (message: string, ms?: number) => void;
  showWarning: (message: string, ms?: number) => void;
  showInfo: (message: string, ms?: number) => void;
}

export const SnackbarContext = createContext<ContextValues>({
  openSnackbar: () => console.error("No context."),
  closeSnackbar: () => console.error("No context."),
  showSuccess: () => console.error("No context."),
  showError: () => console.error("No context."),
  showWarning: () => console.error("No context."),
  showInfo: () => console.error("No context."),
});

export const SnackbarProvider: React.FC = ({ children }) => {
  const [open, setOpen] = useState(false);
  const [message, setMessage] = useState("");
  const [variant, setVariant] = useState<
    "success" | "error" | "info" | "warning"
  >("success");

  // NOTE: 共通でSnackbarを削除する場合
  // useEffect(() => {
  //   if (open) {
  //     setTimeout(() => {
  //       setOpen(false);
  //     }, 3000);
  //   }
  // }, [open]);

  const openSnackbar = (
    message: string,
    variant: "success" | "error" | "info" | "warning"
  ) => {
    setMessage(message);
    setVariant(variant);
    setOpen(true);
  };

  const showSuccess = (message: string, ms?: number) => {
    openSnackbar(message, "success");
    if (ms) {
      setTimeout(() => {
        setOpen(false);
      }, ms);
    }
  };

  const showError = (message: string, ms?: number) => {
    openSnackbar(message, "error");
    if (ms) {
      setTimeout(() => {
        setOpen(false);
      }, ms);
    }
  };

  const showWarning = (message: string, ms?: number) => {
    openSnackbar(message, "warning");
    if (ms) {
      setTimeout(() => {
        setOpen(false);
      }, ms);
    }
  };

  const showInfo = (message: string, ms?: number) => {
    openSnackbar(message, "info");
    if (ms) {
      setTimeout(() => {
        setOpen(false);
      }, ms);
    }
  };

  const closeSnackbar = () => {
    setOpen(false);
  };

  return (
    <SnackbarContext.Provider
      value={{
        openSnackbar,
        closeSnackbar,
        showSuccess,
        showError,
        showWarning,
        showInfo,
      }}
    >
      {children}
      <Snackbar
        open={open}
        setOpen={setOpen}
        message={message}
        variant={variant}
      />
    </SnackbarContext.Provider>
  );
};

export const useSnackbar = () => {
  return useContext(SnackbarContext);
};
```

## app.tsx

```app.tsx
function MyApp({ Component, pageProps }: any) {
  return (
    <SnackbarProvider>
      <Component {...pageProps} />
    </SnackbarProvider>
  );
}
```

## API Call

### 自動的にSnackbarを非表示にする

```tsx
import { useSnackbar } from "@/contexts/SnackbarContext";

const { showSuccess, closeSnackbar } = useSnackbar();

const handleClick = () => {
  // 1秒後に自動的にSnackbarを非表示にする
  showSuccess('メールアドレスを送信しました', 1000);
}
```

### マニュアル

```tsx
import { useSnackbar } from "@/contexts/SnackbarContext";

const { showSuccess, closeSnackbar } = useSnackbar();

const handleClick = () => {
  showSuccess('メールアドレスを送信しました');
  closeSnackbar();
}
```

## 注意点

- `useEffect`などで呼び出す際に無限ループしないように気をつける
- 呼び出し方によっては、`Warning: Cannot update a component Context...`が発生するので注意->コンポーネント内で`showError`などを呼び出す場合、呼び出し元のコンポーネントのレンダリングが完了していなければならない。SnackbarContext内で`useState`などのhooksを呼び出しているので、

ReactContextでSnackbarContextの作成と使い方

サービスのPriamryColorキメの研究

## Primary Colorの決定からコードに落とし込む

1. Primary colorを決める。カラーホイールを理解して、３次色から一般的に選ぶ。https://material.io/　のカラーパレットから選ぶと良いかも
2. Primary color から System colorを生成する。下記サイトなどを使って、success, danger (100 ~ 900)などを決める
3. コードに落とし込む。(tailwind.config.jsなど)

https://colors.eva.design/

## Practice

- 自分が知っているサービスのブランドカラーを感情表現で分類する
- 著名な絵画などを並べ、色を抽出す

https://klizos.com/guide-101-color-psychology-in-website-design/

Primary Color を決めて、コードに落とし込むまで

TODO: Node Package Managerの記事として全てまとめる

## 環境

- m1 mac

## 目的

corepackを使用する。

nodebrewでは、うまくいかないので、nodenvもしくは、fnmを使用する。

## ドキュメント

- [インストール—自作ドキュメント](https://docs.brew.sh/Installation)
- [nodenv / nodenv：複数のNodeJSバージョンを管理します。](https://github.com/nodenv/nodenv)

## m1のBrewの再インストール
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

```
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/r.nishimura/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"
```

## nodenvのbrew install

```
brew install nodenv
```

zshに記載し、再読み込み

```
eval "$(nodenv init -)"
```

確認

```
curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash
```

最新する

```
brew upgrade nodenv node-build
```

## nodenvのコマンド

確認

```
nodenv install -l
```

インストール読み込み

```
nodenv install 14.19.0
nodenv install 16.13.2
```

読み込み

```
nodenv rehash
```

```
インストールされているNode.jsのバージョン一覧
nodenv versions

# ローカル（カレントディレクトリ配下）で利用するNode.jsのバージョンを設定する
nodenv local 15.14.0

# グローバル（システム全体）で利用するNode.jsのバージョンを設定する
nodenv global 16.3.0
```

[nodenvでNode.jsのバージョンを切り替える](https://zenn.dev/donchan922/articles/b08a66cf3cbbc5)

## fnmも使ってみる

[Schniz/fnm: 🚀 Fast and simple Node.js version manager, built in Rust](https://github.com/Schniz/fnm)がいいっぽい

https://zenn.dev/rabbit/scraps/d1ba60e94217e1

```
find . -name “node_modules” | xargs rm -rf
find . -name “node_modules” | xargs rm -rf && yarn
```

[Corepack ~Node.jsに追加されたパッケージマネージャーマネージャー~ / #tng37 - Speaker Deck](https://speakerdeck.com/masashi/number-tng37)

fnmだと、`.node-version`を見て切り替えてくれなかったので、

https://github.com/Schniz/fnm/issues/92#issuecomment-564427402
を参考に、`.zshrc`にシェルスクリプトを追加。

```zsh
#FNM autoload
autoload -U add-zsh-hook
    _fnm_autoload_hook () {
        if [[ -f .node-version && -r .node-version ]]; then
	    echo "fnm: Found .node-version"
	    fnm use
	    rehash
        elif [[ -f .nvmrc && -r .nvmrc ]]; then
	    echo "fnm: Found .nvmrc"
	    fnm use
	    rehash
        else
	    fnm use system --quiet
	    rehash
	fi
    }

add-zsh-hook chpwd _fnm_autoload_hook && _fnm_autoload_hook
```

nodenvのインストールと使い方

## 特定の単語を抽出する

[danger/danger-js: ⚠️ Stop saying "you forgot to …" in code review](https://github.com/danger/danger-js)などで抽出するときに使用する。

```js
const keyword = "lookup";
const content = "aaaa lookup"
console.log('1:',content.match(new RegExp(`\b${keyword}\b`))) // Bad
console.log('2:', content.match(new RegExp(`\\b${keyword}\\b`))) // Good

// https://stackoverflow.com/questions/25938990/regex-b-word-boundary-not-works
const keyword2 = "lookup";
const content2 = "aaaa \blookup\b"
console.log('2-1:',content2.match(new RegExp(`\b${keyword2}\b`))) // match
```

`\b`: 単語境界マッチ。空白のことかな？

テンプレートリテラルが最初に実行されるのでエスケープしないといけない？

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp#%E3%82%B3%E3%83%B3%E3%82%B9%E3%83%88%E3%83%A9%E3%82%AF%E3%82%BF%E3%83%BC%E3%81%AE%E3%83%95%E3%83%A9%E3%82%B0 書いてあった

> コンストラクター関数を使用する場合は、通常の文字エスケープ規則 (文字列内に特殊文字が含まれるとき、前に \ を付加する) が必須です。

JS 正規表現まとめ

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

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

## ドキュメント

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

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

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

TailwindCSS

TailwindCSSでHeaderを固定する

今回は、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ページを返す方法

## 意図

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

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

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

## 環境

- Laravel

## 型の確認

型の確認

```php
Log::info(gettype($value));
=> array
```

確認

```bash
tail -f storage/logs/laravel.log 
```

オブジェクトや配列のLog出力
（Laravelのバージョンによっては普通に`Log::info();`で確認できる）

```php
Log::debug(print_r($user, true));
```

## Modelオブジェクトの確認

`get()`を使用し、Modelオブジェクトを使用する。

```php
$users = User::where('some_id', $some_id)->get();
Log::info($users);
foreach($users as $user) {
  Log::info($user);
}
```

## json_encode()

オブジェクト型の場合は、json_encode()を使用する。

```php
Log::info(json_encode($obj));
```

## array_push()

array をスタックとして処理し、渡された変数を array の最後に加える。

```php
$stack = array("荀彧", "荀攸");
array_push($stack, "郭嘉", "程イク");
print_r($stack);

Array
(
    [0] => 荀彧
    [1] => 荀攸
    [2] => 郭嘉
    [3] => 程イク
)
```

## in_array()

配列に値があるかチェックする。true/falseが返ってくる。

```php
$ary = ['曹操', '劉備', '孫権'];
print_r(in_array('劉備', $ary));
// 1
```

## 命名規則

- 変数名: スネークケース
- メソッド名: ロワーキャメル

## 参考

- [配列 関数](https://www.php.net/manual/ja/ref.array.php)
- [PHP Playground](https://www.tehplayground.com/)

人気記事

新着記事