フロントエンド開発の作業環境を整備して開発効率を爆上げする

モダンなフロントエンド開発向けに、作業環境をサクッと整備して、ガンガン開発効率をあげましょう。

VSCode + TypeScript + React の構成を想定しています。

Visual Studio Code

圧倒的人気¹を誇るテキストエディタ。略称 VSCode 。

• スピード（起動／実行速度）良し
• コスト（オープンソース／無料）良し
• 品質（強力なコード補完、見やすいUI 等々）良し

で三拍子揃ってるので言うことなし。

ESLint

JavaScript (EcmaScript) 用リンター。

GitHub Star 数 17.5k 。リントツールとして定番中の定番。

VSCode 拡張機能は VSCode Marketplace から ESLint で検索してインスール。

• ESLint (dbaeumer.vscode-eslint)

Prettier

コードフォーマッタ。

HTML 、CSS 、 JavaScript を始めとして様々なプログラミング言語をサポート。
VSCode はもちろん Vim や Emacs 、Sublime Text といったテキストエディタもサポート。

VSCode 拡張機能は VSCode Marketplace から Prettier で検索してインスール。

• Prettier - Code formatter (esbenp.prettier-vscode)

Node.js

JavaScript 実行環境。

サーバサイド JavaScript とも言われる。
インストール時に同梱されている npm（パッケージマネージャ）がもはやフロントエンド開発において必須になっている。npx も便利。

TypeScript

JavaScript 拡張言語。

静的型付け可能な JavaScript と言われる。みんな大好き、型。

React

UI 構築用の JavaScript ライブラリ。

Vue.js や Angular とともにフロントエンドフレームワークとして人気。
世界ではその他 2 つよりも圧倒的な人気²がある。

みんな React やろう！

• "React 未学習者 Q.「React って学習コスト高いんでしょ？」A.「"

最後に

VSCode のターミナルから以下コマンドを実行して、早速開発を始めましょう！
my-app は任意の名前を設定してください。

$ npx create-react-app [my-app] --template typescript

1. The State of JavaScript 2019 の Other Tools における Text Editors において Which text editor(s) do you regularly use? で 56% 以上を取得 ↩

2. npm trends では React が Vue.js や Angular のダウンロード数を圧倒している。 ↩