LoginSignup
11
8

More than 1 year has passed since last update.

【2020年版】モダンなフロントエンド環境を構築する手順

Last updated at Posted at 2020-12-01

TL;DR

新規サービス・プロダクト開発を行う部署に所属しているため、業務で新たに環境構築を行うことが頻繁にあります。そのため、自分がいつも行う手順をまとめたいと思います。この記事では手順の列挙のみでやり方には言及しませんので、詳細はリンクをご確認ください。

Gatsbyを利用される方はこれ1つ

これから説明する手順の1~3をコマンド1つで行うことができます。
Reactのフレームワークの1つであるGatsby(Reactの公式ページもこのフレームワークが用いられています)には、starterというパッケージが存在します。そのパッケージを使ってコマンド1つで環境構築が可能です。

1~3の手順による環境を構築するstarterを作成しました
gatsby-starter-typescript-sass

手順

ReactやVueなどのライブラリや、Sassの使用をおすすめしますが、そうでなくても以下の手順は適用できるかと思います。

  1. Gitリポジトリの作成
  2. TypeScriptの導入
  3. ESLint・Prettierの導入
  4. VSCodeの各種設定を行い、設定ファイルを保存
  5. CI/CDの設定

各ステップの必要性

2. TypeScriptの導入

型によって無用なエラーを防げたり、補完が便利に使えます。

3. ESLint・Prettierの導入

コード作成のルールやフォーマットを自動でしてくれます。人間がやらなくてもいいことはとことん減らしたいので導入します。Linterが走るタイミングは、実際のその変更を確認できるためonSaveがおすすめです。(VSCodeの場合設定できます。)ただ確実にLinterが走ることを担保するため、huskyを使ってprecommitでLinterを走らせます。

ESLint - Prettier連携のやり方と仕組み
Prettier 入門 ~ESLintとの違いを理解して併用する~
ESLint と Prettier の共存設定とその根拠について

4. VSCodeの各種設定を行い、設定ファイルを保存

前述したように、LinterなどをonSaveなどで走らせるために設定を行います。またその際にワークスペースに設定を保存すると、設定が書かれたファイルが保存されるので他の開発者と共有することができます。

vscodeの利用に必須な”ワークスペース”の概念

5. CI/CDの設定

GitHubなどにcommitしたタイミングでビルド・デプロイできるような仕組みを導入しておくことで、開発するたびにそれらのことを行う手間が省けます。

heroku 中級編 - 1分で実現するCI/CDをHeroku Pipelinesで

注意点

11
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
8