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

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

package.jsonのソート

<ul>
<li>npxで実行すると便利</li>
<li>packageに含めたくない場合に便利</li>
</ul>
<pre><code>npx sort-package-json
</code></pre>...

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のインストールと使い方

## Document

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

## Install for MacOS

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

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

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

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

### Uninstall

```sh
brew uninstall nodebrew
```

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

## Usage

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

```sh
nodebrew ls-remote
```

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

```sh
nodebrew ls
```

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

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

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

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

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

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

## Warning

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

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

```js
const subscription = await stripe.subscriptions.retrieve(
  "sub_xxxx", // Userモデルに保存したsubscriptionId
);

const params = {
  items: [
    {
      id: subscription.items.data[0].id,
      plan: "price_xxxx", // 新しいプラン
    },
  ],
};

const updatedSubscription = await stripe.subscriptions.update(
  "sub_xxxx", // Userモデルに保存したsubscriptionId
  params,
);
```

[Stripe API Reference - Update a subscription - cURL](https://stripe.com/docs/api/subscriptions/update?lang=node)

Node.js Stripe Subscription 更新

顧客の更新`customers.update`のオプションで、`invoice_settings.default_payment_method`に`PaymentMethod.id`を渡してあげると、デフォルトのお支払い方法が設定される。

```js
const customer = await stripe.customers.update('cus_xxx', {
  invoice_settings: {
    default_payment_method: 'pm_xxx',
  },
});
```

[支払いの詳細を更新する](https://stripe.com/docs/payments/checkout/subscriptions/update-payment-details#set-default-payment-method)

[Stripe API reference – PaymentMethods](https://stripe.com/docs/api/payment_methods)

Node.js Stripe Default PaymentMethod 保存

## フロントエンド(React.js)

バックエンド（Node.js）にフロントエンドで作成した`paymentMethod`オブジェクトをそのまま送ってあげる。

```js
await axios.post(
  'http://localhost:8080/users/attach-payment-method',
  {
    paymentMethod: paymentMethod,
  },
  {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  }
);
```

## バックエンド(Nest.js)

PaymentMethodをStripeの顧客に追加する。
DBには、Userに紐づくStripeの顧客IDを登録しておく。

```js
// Controllerから呼び出している想定
async attachPaymentMethod(
  paymentMethodId: string,
  stripeCustomerId: string,
): Promise<any> {
  const paymentMethod = await this.stripe.paymentMethods.attach(
    paymentMethodId,　// ⚠️ paymentMethod.id
    { customer: stripeCustomerId }, // 👈 MyApp の User.stripeCustomerId
  );
  return paymentMethod;
}
```

Userモデルに、`paymentMethod.card.brand`と`paymentMethod.card.last4`も保存しておいて、ユーザーが決済手段を確認しやすいようにしておく。

## ドキュメント
[Stripe API Reference - Attach a PaymentMethod to a Customer](https://stripe.com/docs/api/payment_methods/attach)

Node.js Stripe PaymentMethod 保存

## 経緯
ブログやドキュメントを頻繁に書くので、良い文章を書くために導入してみる。

## インストール
```bash
yarn add -D \
    textlint \
    textlint-rule-preset-ja-spacing \
    textlint-rule-preset-ja-technical-writing \
    textlint-rule-spellcheck-tech-word
```

## .textlintrcの生成

```bash
yarn textlint --init
```

## textlintの実行
```bash
yarn textlint ./public-docs/*
yarn textlint ./public-docs/* --fix # 自動修正
```

## 表記揺れ

```bash
touch prh.yml
```

`textlintrc`に追記する。

```json
{
    ... 
    "spellcheck-tech-word": true,
    "prh": {
      "rulePaths": [
        "./prh.yml"
      ]
    }
  }
}
```

`prh.yml`

```yml
version: 1
rules:
  - expected: Google
    specs:
      - from: google
        to: Google
  - expected: GitHub
    specs:
      - from: github
        to: GitHub
```

## 参考
- [ドキュメント作成時のあるあるアンチパターン20](https://qiita.com/tamikura@github/items/625b94b6046113403728)
- [textlint と VS Code で始める文章校正](https://qiita.com/takasp/items/22f7f72b691fda30aea2)

textlintを使ってみる

最低限、セミコロンやクウォートなどを整理したいケースが多いのでメモ。

## インストール

```bash
yarn add -D eslint eslint-plugin-react
```

## 設定

`.eslintrc.js`を作成

```js
module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
  },
  parserOptions: {
    // Parsing error: 'import' and 'export' may appear only with 'sourceType: module' 対策
    sourceType: 'module',
    // eslint Parsing error: Unexpected token function with async 対策
    ecmaVersion: 8
  },
  plugins: [
    'react'
  ],
  ignorePatterns: [
    'node_modules/*',
    '.next/*',
    'out/*',
  ],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  // https://eslint.org/docs/rules/　を参照
  rules: {
    'semi': ['error', 'never'],
    'react/react-in-jsx-scope': 'off', // めっちゃエラー出るので
    'react/prop-types': 'off' // めっちゃエラー出るので
  }
}
```

## 実行

`package.json`

```json
"scripts": {
  "lint": "eslint --ext js,jsx --fix ."
}
```

実行

```bash
yarn lint
```

## VSCode設定

```json
// .vscode/settings.json
{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```

Next.jsにほぼESLintだけ入れる

Huskyを使って、コミット前にESLintを実行すると便利なのでメモ。

[husky 設定](https://typicode.github.io/husky/#/)

## インストール
```bash
yarn add -D husky
yarn husky -v
6.0.0
```

## 設定

`lint-staged`を使わなくても良くなった。

```bash
yarn husky init
yarn husky install
yarn husky add .husky/pre-commit "yarn lint"
```

`pre-commit`

```bash
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint
```

ディレクトリ

```bash
.husky
├── _
│   └── husky.sh
└── pre-commit
```

`package.json`。`prepare`を書いておくと、新規の人も自動で実行されるようになると思う。

```json
"scripts": {
  "lint": "eslint --ext js,jsx --fix .",
  "prepare": "husky install"　
}
```


package.jsonのソート

関連記事

記事のタグ

Share?