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

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

package.jsonのソート

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


Husky v6でESLint実行をHookさせる

## 動機

1.GitHubからNode.jsのPackageをforkし、

2.ローカルで開発する

という流れを作って、OSSにPRを送ってみたい。

## ①forkしてgit cloneする

1.GitHubでforkし

2.`git clone url`を実行する。

### Couldn't find the binary git

Dockerコンテナ内(`node14.15.3-alpine`)で実行していたら、上記のエラーが出たので、gitをインストールする。`Dockerfile`にも記載しておく。

```bash
apk add git
```

## ②package.jsonを確認する

[package.json](https://docs.npmjs.com/cli/v7/configuring-npm/package-json)

- **main**: 一番最初に実行されるファイル。ここを真っ先に確認すると良さそう。設定されていない場合は、デフォルトでパッケージのルートディレクトリ`index.js`が設定される。

```js
const modules = require("modules") // CommonJS

// ES modules
import Foo from "modules" // 1つ
import { Foo } from "modules"　// 複数ある場合
import { Foo as MyFoo } from "modules" // 名前をつけて
import { default as MyFoos } from 'modules'; // default exportの場合
import { * as MyFoos } from 'modules'; // まとめて
// ※あまり詳しくないので、これから勉強
```

を実行した場合、`index.js`に記載されている`exports`のオブジェクトが返ってくる。

```json
{
  "main": "dist/index.js"
}
```

- **name**: パッケージ名。
- **version**: バージョン。nameと共に、一意になることが想定されている。
- **scripts**: ShellScriptを実行するaliasを貼る。
- **repository**: ソースコードの管理場所を指定する。
- **private**: trueの場合、モジュールの公開ができない。エンドユーザアプリなどは基本、falseになると思う。

※結構出てくる`esm`はES modules`cjs`はCommonJSをだいたい意味する。

## ③installとbuild

`npm install`した際に、`package.json`に`install`の記述がない場合、`node-gyp rebuild`が実行されるみたい。

だが、Docker内で実行したら、`dist/`が生成されなかったので、`npm install`した後に、`npm run build`を実行し、`dist/`の生成を確認。（`scripts`に`dist/`に吐き出す設定は書いてある。）

### ex) install ライフサイクル

- preinstall
- install
- postinstall
- prepublish
- preprepare
- prepare
- postprepare

の順番で実行される。実際にログを見るとこの順番で実行されている。

## ④ローカルリポジトリにmodulesをインストール

`fork_modules`というディレクトリを作り、forkしてきたリポジトリを置いてみた。

```bash
mkdir fork_modules
cd fork_modules
npm install
npm run build
```

`dist/index.js`ができていることを確認する。

プロジェクトに戻り、

```bash
yarn add ./fork_modules/{modules}
```

`package.json`にはこのような形で、記載された。

```json
{
  "dependencies": {
    "modules": "./fork_modules/modules/"
  }
}
```

※プロジェクトに`yarn`を使っていて、moduleのビルドに`npm`を使っています。

## forkしたGitHubリポジトリからインストール

`"modules": "git+{https://github.com/username/リポジトリ名}"`で指定する。

ブランチ・タグ・コミットハッシュ値を指定する場合は、`#`で指定する。

```json
{
"dependencies": {
  "modules": "git+https://github.com/username/リポジトリ名.git"
}
```

上記が完了したら、`npm install`を実行する。

## そのまま相対パスでimportする

冷静に考えて、毎回ファイルを変更する度に、`npm run build`した後に、`yarn install`するのも面倒くさいので、そのまま相対パスで読み込むことにした。

### ex) ビルド前

ビルド前のソースコードは`src/`にあったので、そのまま読み込む。

```js
import { Foo as Bar } from '../fork_modules/modules/src/index'
```

### ex) ビルド済 dist/

```js
import { Foo as Bar } from '../fork_modules/modules/dist/index'
```

実際の`scripts`は以下のような形。

```json
"scripts": {
  "build": "npm run build:cjs && npm run build:esm && webpack",
  "build:cjs": "BABEL_ENV=cjs babel src --out-dir ./dist/cjs",
  "build:esm": "BABEL_ENV=esm babel src --out-dir ./dist/esm"
}
```

## そして...

そしてよく見てみたら、開発サーバーの起動もありましたw
読みづらいなあと思っていたが、webpackのbundle済ファイルでした。ちゃんと読みやすかった。

```json
"dev": "webpack-dev-server --hot --inline"
```

```bash
npm run dev
```

## 注釈

- **npm**: Node Package Manager。Node.jsのPackageを管理する。
- **Node.js Package**: modulesとほぼ同義で扱われる。インストールしたmodulesは`node_modules`に配置される。
- **Modules**: ある一定の機能を持ったコード群。[JavaScript Modules: From IIFEs to CommonJS to ES6 Modules](https://dev.to/tylermcginnis/javascript-modules-from-iifes-to-commonjs-to-es6-modules-33p1)この投稿が良いかも。
- **ES modules**: ES2015で決められたJavaScriptファイルから別のJavaScriptファイルを読み込む仕組みのこと(`export`, `import`, etc)
- **CommonJS**: ES2015より前に決められたAPIの仕様(`module.exports`, `require()`, etc)
- **Webpack**: Module Bundlers。コードをまとめる。色々なサポート機能がある。(ex) 開発サーバ)
- **babel**: JavaScriptコンパイラ。
> 現在および古いブラウザまたは環境でECMAScript2015 +コードを下位互換性のあるバージョンのJavaScriptに変換するために主に使用されるツールチェーンです。
- **トランスパイル**: ある言語で書かれたコードを元に別の言語のコードを生成すること。
- **Polyfill**: 古いブラウザでは実現できないAPIを、古いブラウザでも同等の機能を使用できるように補うための小さなライブラリのようなもの。

## 参考

- [Modules: Packages](https://nodejs.org/api/packages.html)
- [package.json](https://docs.npmjs.com/cli/v7/configuring-npm/package-json)
- [scripts](https://docs.npmjs.com/cli/v7/using-npm/scripts)
- [JavaScript Modules: From IIFEs to CommonJS to ES6 Modules](https://dev.to/tylermcginnis/javascript-modules-from-iifes-to-commonjs-to-es6-modules-33p1)
- [Babel is a JavaScript compiler](https://babeljs.io/docs/en/)
- [Webpack DevServer](https://webpack.js.org/configuration/dev-server/)