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

<p>TODO: Node Package Managerの記事として全てまとめる</p>
<h2>環境</h2>
<ul>
<li>m1 mac</li>
</ul>
<h2>目的</h2>
<p>corepackを使用する。</p>
<...

## アップデート可能なパッケージの確認

```bash
npm outdated
```

[npm-outdated | npm Docs](https://docs.npmjs.com/cli/v8/commands/npm-outdated)

## 個別でアップデート

```bash
yarn add <package>
```

## 全体をアップデート

```bash
npx -p npm-check-updates  -c "ncu" # 確認
npx -p npm-check-updates  -c "ncu -u" # アップデート
yarn install
```

## インタラクティブにアップデート

```bash
yarn upgrade-interactive
# or
yarn upgrade-interactive --latest
```

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

## 参考記事

- [package.json に記載されているパッケージのバージョンアップ方法 【 npm-check-updates, outdated 】 - Qiita](https://qiita.com/sugurutakahashi12345/items/df736ddaf65c244e1b4f)
- [yarn upgrade | Yarn](https://chore-update--yarnpkg.netlify.app/ja/docs/cli/upgrade)

npmパッケージの更新と確認

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

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

package.jsonのソート

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

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

環境

目的

ドキュメント

m1のBrewの再インストール

nodenvのbrew install

nodenvのコマンド

fnmも使ってみる

Related

Tags

Share

Table of Contents