TL;DR
新規サービス・プロダクト開発を行う部署に所属しているため、業務で新たに環境構築を行うことが頻繁にあります。そのため、自分がいつも行う手順をまとめたいと思います。この記事では手順の列挙のみでやり方には言及しませんので、詳細はリンクをご確認ください。
Gatsbyを利用される方はこれ1つ
これから説明する手順の1~3をコマンド1つで行うことができます。
Reactのフレームワークの1つであるGatsby（Reactの公式ページもこのフレームワークが用いられています）には、starterというパッケージが存在します。そのパッケージを使ってコマンド1つで環境構築が可能です。
1~3の手順による環境を構築するstarterを作成しました
gatsby-starter-typescript-sass
手順
ReactやVueなどのライブラリや、Sassの使用をおすすめしますが、そうでなくても以下の手順は適用できるかと思います。
- Gitリポジトリの作成
- TypeScriptの導入
- ESLint・Prettierの導入
- VSCodeの各種設定を行い、設定ファイルを保存
- CI/CDの設定
各ステップの必要性
2. TypeScriptの導入
型によって無用なエラーを防げたり、補完が便利に使えます。
3. ESLint・Prettierの導入
コード作成のルールやフォーマットを自動でしてくれます。人間がやらなくてもいいことはとことん減らしたいので導入します。Linterが走るタイミングは、実際のその変更を確認できるためonSaveがおすすめです。（VSCodeの場合設定できます。）ただ確実にLinterが走ることを担保するため、huskyを使ってprecommitでLinterを走らせます。
ESLint - Prettier連携のやり方と仕組み
Prettier 入門 ～ESLintとの違いを理解して併用する～
ESLint と Prettier の共存設定とその根拠について
4. VSCodeの各種設定を行い、設定ファイルを保存
前述したように、LinterなどをonSaveなどで走らせるために設定を行います。またその際にワークスペースに設定を保存すると、設定が書かれたファイルが保存されるので他の開発者と共有することができます。
5. CI/CDの設定
GitHubなどにcommitしたタイミングでビルド・デプロイできるような仕組みを導入しておくことで、開発するたびにそれらのことを行う手間が省けます。
heroku 中級編 - 1分で実現するCI/CDをHeroku Pipelinesで
注意点
- 上記は手順の概要なので、1つ1つの具体的なやり方については以下の記事が分かりやすそうでした。Reactを使ったモダンなフロントエンド開発の環境構築
- ライブラリなどを使わずビルドが必要な場合は、percelなどのツールを活用する必要があります