JavaScript
Node.js
WSL

これから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のバージョン管理。

nvmで入れる

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

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

バージョン指定の代わりに --lts 1

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

$ nvm install --lts
$ nvm use --lts

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

[Windows] WSLにインストール

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

ちなみにnvmはWindowsをサポートしてないが、WSLでなら使える。ただし、別項に書いた通りWSLに入れれば全部動くわけじゃない。nvm for Windowsという別プロジェクトもあるんだけど、開発止まってるっぽい。2

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を使う設定

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

ESLint

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

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

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

Airbnbの設定

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

standardよりこっちの方が好きだけど、好みの問題なので決まってればどちらでも良いです。

EditorConfig

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

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

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

Git、SourceTree

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

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

開発用ウェブサーバー。

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

ただし今後webpackやgulpを入れるタイミングで卒業します。 5

[Windows] WSL (Windows Subsystem for Linux)

強い黒い画面。WindowsでもMac 6 と同じ(ような)ターミナルが使えるようになる。

  • WSL インストール - Google Search
  • Windows用のスクリプトが不要に
  • 仮想マシンじゃないぞ
  • 万能ではない、対処できない場面も
  • インストールは面倒そうに見えて意外とあっさり
  • C:\Users\ginpei/mnt/c/Users/ginpei
  • /home/ginpei → Win側からは見えない 7
  • ドットファイルはWin側に持ってリンクすると楽
  • aptの更新はたぶんいらない

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

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

仮想マシンじゃないぞ

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

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

WSLで対処できないもの

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

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

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

次に入れたいもの

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

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

その他

  • 個人的にはBrowserifyの方が好きなんだけど、webpackが優勢という認識
  • 試験は最近Jestが盛り上がってるらしいので、そのうち乗り換えるかも
  • あとPrettier
  • yarnはnpm (v5)から乗り換えるほどではないかなと 10
  • 他の領域(サーバー側とかグラフィック特化とか)で初期から必須なツール類は明るくないです。教えてください!


  1. LTS = Long-Term Support、長期サポート版。ちなみに "Time" ではない。 

  2. 動くし、実際使ってるけど。 

  3. そういえばVS Codeの自動整形ってESLintじゃないよね。一緒にできるかな。 

  4. "base" じゃない版はReactの設定も入ってるっぽい。 

  5. 間接的に使うかも。 

  6. というかLinux。 

  7. 頑張れば見えるっぽいけど頑張らない方が良い。 

  8. という表現で大丈夫? 

  9. 比べるのも違う気がするけど……。 

  10. 個人の感想です。