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

  • これから始める初心者さんが対象
  • 汎用的なもの、今後各方面に特化してツールを増やしていくにしても、最初に用意しとこうみたいなの
  • 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. 個人の感想です。 

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.