人に教える用に整理してたものです。こんな感じでどうでしょうか。コメントください。🙏
- これから始める初心者さんが対象
- 汎用的なもの、今後各方面に特化してツールを増やしていくにしても、最初に用意しとこうみたいなの
- 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 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。
- https://git-scm.com/
- https://www.sourcetreeapp.com/
- SSHの設定でつまづきそう？
[クライアント側開発] 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
- 他の領域（サーバー側とかグラフィック特化とか）で初期から必須なツール類は明るくないです。教えてください！