Help us understand the problem. What is going on with this article?

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

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

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

Visual Studio Code

https://code.visualstudio.com/

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

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

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

ESLint

https://eslint.org/

JavaScript (EcmaScript) 用リンター。

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

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

Prettier

https://prettier.io/

コードフォーマッタ。

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

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

Node.js

https://nodejs.org/en/

JavaScript 実行環境。

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

TypeScript

https://www.typescriptlang.org/

JavaScript 拡張言語。

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

React

https://reactjs.org/

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

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

みんな React やろう!

最後に

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 のダウンロード数を圧倒している。 

drytt
React Lover
https://drytt.com
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away