これからJavaScriptを始める人向けの環境

人に教える用に整理してたものです。こんな感じでどうでしょうか。コメントください。🙏

- これから始める初心者さんが対象
- 汎用的なもの、今後各方面に特化してツールを増やしていくにしても、最初に用意しとこうみたいなの
- MacでもWinでも

# 入れるもの

本記事ではインストール作業や各種設定の説明自体は省略します。個別記事も大量にあるだろうし。

- Node.js、nvm
- VS Code、拡張3点
- ESLint
- EditorConfig
- Git、SourceTree
- Browsersync（クライアント側開発用）
- WSL（Windows用）

WSLはWindows環境だけの話なので最後に紹介しますが、先に何度も出てくるので一言で説明すると、Windowsでターミナルをすごく良い感じにアレするやつです。

# Node.js、nvm

nvmはNode.jsのバージョン管理。

- https://nodejs.org/
- https://github.com/creationix/nvm#install-script
- Node.jsはnvm経由で
- バージョン指定の代わりに `--lts`
- [Windows] WSLにインストール

## nvmで入れる

別にnvm自体のインストールが別に難しくないので、そっちを入れて簡単にバージョン変えられるようにしておきます。Node.jsを本家のインストーラーを使って入れる理由は特に思いつかない。（Windowsは後述。）

欠点はシェル起動が遅くなるくらいかな。

## バージョン指定の代わりに `--lts` [^lts]

[^lts]: LTS = Long-Term Support、長期サポート版。ちなみに "Time" ではない。

最近気づいたんだけど `--lts` で指定すれば数字を考える必要がない。

```console
$ nvm install --lts
$ nvm use --lts
```

LTSだから長く使えると思うんだけど、どうだろう。単純にその時の最新版を入れる方が良いかもしれない。迷ってる。

## [Windows] WSLにインストール

主な作業はWSL（別項）でやることになるので、そちらにnvmを入れます。方法は他の環境と同じ。

ちなみにnvmはWindowsをサポートしてないが、WSLでなら使える。ただし、別項に書いた通りWSLに入れれば全部動くわけじゃない。[nvm for Windows](https://github.com/coreybutler/nvm-windows)という別プロジェクトもあるんだけど、開発止まってるっぽい。[^nvm-windows-deprecated]

[^nvm-windows-deprecated]: 動くし、実際使ってるけど。

WSLの外側、Windows直下で動かす場合は、本家Windows版インストーラーからLTSを入れるのが最善かなあ。Electronとかに手を出さなければVS Code + ESLintくらいだろうし。どうでしょうか……。

# VS Code

エディタ。

- https://code.visualstudio.com/
- 多機能
- 無料
- 日本語対応
- 拡張機能が充実、加えて導入と管理も容易
- Gitやターミナルとも連携

最近使い始めたんだけど良い感じ、広く推奨できそう。例外はもうIDE使ってる人と、Vimmerくらいだろうか。

## 最初に入れるべき拡張

左側のアクティビティバーから「拡張」を開いて検索、そのままインストールできる。

以下の3点は最初から導入してほしい。

### Code Spell Checker

- by Street Side Software
- 英単語の綴りを確認してくれる
- `BigApple` みたいに繋がってても認識
- 単語の追加も簡単
- 追加した単語はVS Codeの設定に保存される（→すぐ確認、編集できる）

### ESLint

- by Dirk Baeumer
- 別途本体のインストールが必要
- 別項のESLintを参照

### EditorConfig for Visual Studio Code

- by EditorConfig
- 別項のEditorConfigを参照

### その他

- ReactやVue用の拡張もすぐ見つかるので、そこらへんは用途に合わせて追加
- HTML、CSS系のやつも欲しいかもしれない
- 最強のVimエミュレーター探してます

## [Windows] WSLを使う設定

```json
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\bash.exe",
```

# ESLint

文法的に正しいけど良くない書き方のコード、をびしばし検出してくれるやつ。

- https://eslint.org/
- プロジェクトごとに `.eslintrc.js` を設置
- ルールセットは自分で一から作るより、公開されているもの (`eslint-config-xxx`) を使う:
    - フレームワーク推奨のルールセットがあればそれを
    - なければAirbnbのやつが良さそう
- npmでインストールしてVS Codeに拡張も入れると、結果が随時表示される [^vscode-eslint-autoformatter]
- `npm test` にも仕込む

後から導入するとつらいけど、新規なら入れるべき。

[^vscode-eslint-autoformatter]: そういえばVS Codeの自動整形ってESLintじゃないよね。一緒にできるかな。

## Airbnbの設定

- https://www.npmjs.com/package/eslint-config-airbnb-base [^eslint-config-airbnb]

[^eslint-config-airbnb]: "base" じゃない版はReactの設定も入ってるっぽい。

"eslint-plugin-import" が別途必要。

[standard](https://github.com/standard/eslint-config-standard)よりこっちの方が好きだけど、好みの問題なので決まってればどちらでも良いです。

# EditorConfig

インデントの深さやスペースの数といったエディタの設定をファイルに書ける。

- http://editorconfig.org/
- プロジェクトごとに `.editorconfig` を設定
- VS Codeその他エディターに拡張を入れると、設定ファイルに合わせて一時的にエディターの設定を変えてくれる

ESLintみたいに書いた結果を確認、修正するんじゃなくて、最初からエディターの設定の方を変えてくれるやつ。

# Git、SourceTree

ご存知ソースコードのバージョン管理とGUI。

- https://git-scm.com/
- https://www.sourcetreeapp.com/
- SSHの設定でつまづきそう？

# [クライアント側開発] Browsersync

開発用ウェブサーバー。

- https://browsersync.io/
- `file:` なURLは避ける
- かんたんべんり
- ファイル更新時に自動再読み込み
- `--global` では入れさせない

ただし今後webpackやgulpを入れるタイミングで卒業します。 [^browsersync-in-the-future]

[^browsersync-in-the-future]: 間接的に使うかも。

# [Windows] WSL (Windows Subsystem for Linux)

強い黒い画面。WindowsでもMac [^mac-as-unix] と同じ（ような）ターミナルが使えるようになる。

[^mac-as-unix]: というかLinux。

- [WSL インストール - Google Search](https://www.google.co.jp/search?q=WSL+%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
- Windows用のスクリプトが不要に
- 仮想マシンじゃないぞ
- 万能ではない、対処できない場面も
- インストールは面倒そうに見えて意外とあっさり
- `C:\Users\ginpei` → `/mnt/c/Users/ginpei`
- `/home/ginpei` → Win側からは見えない [^home-not-exposed]
- ドットファイルはWin側に持ってリンクすると楽
- aptの更新はたぶんいらない

[^home-not-exposed]: 頑張れば見えるっぽいけど頑張らない方が良い。

## Windows用のスクリプトが不要に

例えば `NODE_ENV=test npm test` はWindowsの `cmd.exe` じゃ動かないんだけど、WSLなら動く。（とてもうれしい。）

## 仮想マシンじゃないぞ

ターミナルで開いて作業する用です。Apacheとかのサービスをインストールするのは違う感じ。

VMともDockerとも違う。あくまでコマンド類だけ [^only-commands] 。CygwinとかMinGWとか、そういうやつの仲間。なんか呼び方あったっような？

[^only-commands]: という表現で大丈夫？

## WSLで対処できないもの

- VS Code用のESLint
- ElectronやReact Native、他

ターミナルから使うだけなら良いけど、VS CodeでESLintを使うにはWindows側にインストールが必要。（Node.jsの項を参照。）

ElectronやReact Nativeといったやつらも同様。

# 次に入れたいもの

最初の一歩から入れる必要はないけど、第二歩とか第三歩くらいの時期に導入したいもの。

- [Mocha](https://mochajs.org/), [Chai](http://www.chaijs.com/), [SinonJS](http://sinonjs.org/) - 試験。三点セットで使ってる。
- [GitHub] [Travis CI](https://travis-ci.org/) - PRとか `git push` したときとかで試験実行して結果を教えてくれるやつ。
- [GitHub] [Greenkeeper](https://greenkeeper.io/) - 利用パッケージの更新を監視。CIの試験結果も併せて、PR投げてくれる。
- [クライアント側開発] [webpack](https://webpack.js.org/), [Babel](https://babeljs.io/) - モジュールバンドラーとトランスパイラー。第二歩どころか一歩半くらいですぐ使い始めることになると思う。
- [クライアント側開発] [gulp.js](https://gulpjs.com/) - タスクランナー。制作会社系の案件ならwebpackよりこっちの方が人気。 [^gulp-vs-webpack]

[^gulp-vs-webpack]: 比べるのも違う気がするけど……。

# その他

- 個人的には[Browserify](http://browserify.org/)の方が好きなんだけど、webpackが優勢という認識
- 試験は最近[Jest](https://facebook.github.io/jest/)が盛り上がってるらしいので、そのうち乗り換えるかも
- あと[Prettier](https://prettier.io/)も
- [yarn](https://yarnpkg.com/)はnpm (v5)から乗り換えるほどではないかなと [^imo]
- 他の領域（サーバー側とかグラフィック特化とか）で初期から必須なツール類は明るくないです。教えてください！

[^imo]: 個人の感想です。

---