```
node -v
nodebrew ls
nodebrew install {バージョン}
nodebrew use {バージョン}
```

NodeJS

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

node -v
nodebrew ls
nodebrew install {バージョン}
nodebrew use {バージョン}

…

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

## インストール
```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
  }
}
```

Vercel

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

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

関連記事