Edited at

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

More than 1 year has passed since last update.

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


  • これから始める初心者さんが対象

  • 汎用的なもの、今後各方面に特化してツールを増やしていくにしても、最初に用意しとこうみたいなの

  • 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. 個人の感想です。