モダンなフロントエンド開発向けに、作業環境をサクッと整備して、ガンガン開発効率をあげましょう。
VSCode + TypeScript + React の構成を想定しています。
Visual Studio Code
https://code.visualstudio.com/
圧倒的人気1を誇るテキストエディタ。略称 VSCode 。
- スピード(起動/実行速度)良し
- コスト(オープンソース/無料)良し
- 品質(強力なコード補完、見やすいUI 等々)良し
で三拍子揃ってるので言うことなし。
ESLint
JavaScript (EcmaScript) 用リンター。
GitHub Star 数 17.5k 。リントツールとして定番中の定番。
VSCode 拡張機能は VSCode Marketplace から ESLint で検索してインスール。
Prettier
コードフォーマッタ。
HTML 、CSS 、 JavaScript を始めとして様々なプログラミング言語をサポート。
VSCode はもちろん Vim や Emacs 、Sublime Text といったテキストエディタもサポート。
VSCode 拡張機能は VSCode Marketplace から Prettier で検索してインスール。
Node.js
JavaScript 実行環境。
サーバサイド JavaScript とも言われる。
インストール時に同梱されている npm(パッケージマネージャ)がもはやフロントエンド開発において必須になっている。npx も便利。
TypeScript
https://www.typescriptlang.org/
JavaScript 拡張言語。
静的型付け可能な JavaScript と言われる。みんな大好き、型。
React
UI 構築用の JavaScript ライブラリ。
Vue.js や Angular とともにフロントエンドフレームワークとして人気。
世界ではその他 2 つよりも圧倒的な人気2がある。
みんな React やろう!
最後に
VSCode のターミナルから以下コマンドを実行して、早速開発を始めましょう!
my-app は任意の名前を設定してください。
$ npx create-react-app [my-app] --template typescript
-
The State of JavaScript 2019 の Other Tools における Text Editors において
Which text editor(s) do you regularly use?
で 56% 以上を取得 ↩ -
npm trends では React が Vue.js や Angular のダウンロード数を圧倒している。 ↩