## 動機・概要

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

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

## 開発環境で起動する

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

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

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

## 前提

- 開発環境の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 正規表現まとめ

- [regex - Using JavaScript to check whether a string contains Japanese characters (including kanji) - Stack Overflow](https://stackoverflow.com/questions/15033196/using-javascript-to-check-whether-a-string-contains-japanese-characters-includi)
- [Unicode Kanji Code Table](http://www.rikai.com/library/kanjitables/kanji_codes.unicode.shtml)

```ts
// ひらがな・全角カタカナ・漢字・アルファベットを許容
value.match(/^[a-zA-Z\u3040-\u309f\u30a0-\u30ff\u4e00-\u9faf\u3400-\u4dbf]+$/))
```

全角１や全角！を排除しやすくするために、半角カタカナも排除している。

 JS 日本語のバリデーション

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

削除されたブランチも含めて

```bash
git fetch --prune
```

Gitの使い方まとめ

## OpenAPIの一例

[ReduxToolkit RTKQuery](https://redux-toolkit.js.org/rtk-query/overview): データフェッチとキャッシュのライブラリだが、[Code Generation | Redux Toolkit](https://redux-toolkit.js.org/rtk-query/usage/code-generation)のようにコード生成ができる。

### OpenAPIとは

> The OpenAPI specification is a language-agnostic definition format used to describe RESTful APIs.
> **OpenAPI仕様は、 RESTfulAPIを記述するために使用される言語に依存しない定義形式です。**
> https://docs.nestjs.com/openapi/introduction より

ざっくり理解

```mermaid
flowchart LR
  A["OpenAPI定義ファイル<br />(hoge.yml)"] -->B["RTK Query Code Generation<br />(hoge.ts)"] -->C["使える！<br />(redux storeに定義したり、各コンポーネントでAPI呼び出し)"]
```

q: `hoge.yml`はどんな感じで生成するの？

### 良さそうなところ

- **1.OpenAPIの定義ファイルがあれば、一気にエンドポイントを生成・変更できる**
- **2.TypeScriptの場合、型が効く（RequestやResponseなども含めて）**

### どんな感じで使うの

```package.json
  "scripts": {
    "gen:api": "rtk-query-codegen-openapi ./openapi-config.json",
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.0",
    "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",
    "react-redux": "^7.2.6"
  }
}
```

のように、コマンドで一気に、APIエンドポイントの生成をすることができる。

```openapi-config.json
{
  "schemaFile": "./hoge.yaml", // OpenAPIの仕様書 
  "apiFile": "./template.ts", // createApi呼び出し箇所
  "outputFile": "./index.ts", // OpenAPIの仕様書から作成される実際のAPI呼び出しやリクエスト・レスポンスなど
  "exportName": "api", // export名
  "hooks": true // hooksを生成するか　ex) useHogeHoge
}
```

```hoge.yml
swagger: '2.0'
info:
  title: 'hoge.proto'
  version: 1.0.0
  description: 'お試し'
consumes:
  - application/json
produces:
  - application/json
host: 'hoge.com'
basePath: '/v1'
schemes:
  - 'https'
paths:
  ...
```

みたいなファイル

[OpenAPI Specification - Version 3.0.3 | Swagger](https://swagger.io/specification/)に定義が載っている。

## gRPC

`.proto`ファイルを使用して、APIを定義する。

IDL（インターフェース定義言語）

## リンク

[API 設計: gRPC、OpenAPI、REST の概要と、それらを使用するタイミングを理解する | Google Cloud Blog](https://cloud.google.com/blog/ja/products/api-management/understanding-grpc-openapi-and-rest-and-when-to-use-them)
