create-react-appを使わないワケ
2021年12月初旬に、「create-react-app」を使ってプロジェクトを作成し、eslintのルールを変更しました。
npx eslint --init
で、「.eslintrc.js」を作成しルールを書き、VSCodeで指摘されることを確認しました。
ある程度コードを書いて
npm start
としたところエラーが発生しました。
原因は、「create-react-app」で使われている「eslint」がV7系で、「eslint --init」で追加されるプラグインなどが「eslint V8系」なためでした。
2021年12月14日に、webpack5、eslint8が採用した「create-react-app V5」がリリースされ問題は解決しました。
「create-react-app」は、
- コマンド一発で環境構築できる
- テンプレートが豊富
- eslint、webpackなど全て設定済み
なのは良いのですが、少し設定を変えようと思うと今回のようにエラーが起こります。
ゼロからReact開発環境を作成してみる
npm init -y
プロジェクト用のディレクトリを作成します。作成したディレクトリに移動し
npm init -y
を実行します。対話形式で「package.json」を作成したい場合には「-y」なしで実行します。
webpack
webpackは、JavaScript(TypeScript)、css(scss)、画像などをすべてJavaScriptとして扱い、ひつつのファイルにまとめてくれます。
インストールするものは、
- webpack 本体
- webpack-cli コマンドライン用
- webpack-dev-server 開発用webサーバー
です。
npm install -D webpack webpack-cli webpack-dev-server
でインストールを行います。
動作確認用に「lodash」をインストールします。
npm install lodash
プロジェクトフォルダ内に「src」、「dist」フォルダを作成し、
import _ from 'lodash';
function component() {
const element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['webpack', '動いてるお〜'], ' ');
return element;
}
document.body.appendChild(component());
トップページを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
動作確認します。
npx webpack server --open --static-directory dist --mode=development
既定のブラウザが起動し、index.htmlが表示されます。ブラウザのdevToolsで「main.js」を確認します。
webpackの設定ファイルを作成します。
npx webpack-cli init
対話形式で質問されますので、カーソルキーで選択してください。
これで、プロジェクトディレクトリ内に「webpack.config.js」が作成されます。
以下は、私の選択です。
- どのタイプのJSを使いますか？ --> TypeScript(none, ES6)
- devServerを使いますか？ --> Yes
- バンドル用のHTMLファイルを作成しますか？ --> Yes
- PWAサポートが必要ですか？ --> No
- CSSは、どのタイプを使いますか？ --> SASS(none, CSS only, LESS, Stylus)
- SASSと一緒にCSSスタイルも使いますか？ --> Yes
- PostCSS(Node.js製のCSSを作るためのフレームワーク)を使いますか？ --> No
- ファイル毎にCSSを別にしますか？ --> Yes
- 設定ファイルをフォーマットするのにPrettierをインストールしますか？ --> Yes
- パッケージマネージャーを選択してください。 --> npm
- package.jsonがすでにありますが上書きしても良いですか？ --> No
- README.mdがすでにありますが上書きしても良いですか？ --> No
選択が終わると、必要なパッケージがインストールされます。
本家サイトの推奨により、
- webpack.common.js 共用
- webpack.dev.js 開発用
- webpack.prod.js 製品版用
に分割します。
この時点で、package.jsonにスクリプトを登録します。
babel
Babel.jsは、ES2015以降のJavaScriptが解釈できない古いブラウザ向けに、ES2015以前のJavaScriptに変換してくれる優れものです。
古いブラウザを切り捨てる場合は不要です。
Babel本家セットアップで、webpackを選択すると、インストール方法、設定が表示されます。
React
Reactのインストールは、
npm install react react-dom
で完了です。
TypeScript
TypeScriptのインストールは、
npm install -D typescript
で完了です。
「webpack-cli init」を行ったときに「tsconfig.json」が作成されていますが、削除して再度作成します。
npx tsc --init
で再作成されます。
コメントアウトされているものはディフォルト設定です。
TypeScript開発元のMicrosoftのReact推奨です。
eslint
Eslintは、指定したコーディングルールからハズれると指摘してくれる良き指導者です。是非、導入してください。
npx eslint --init
を入力すると質問が始まります。質問と私の選択したものです。
- How would you like to use ESLint? · style
- What type of modules does your project use? · esm
- Which framework does your project use? · react
- Does your project use TypeScript? · Yes
- Where does your code run? · browser
- How would you like to define a style for your project? · guide
- Which style guide do you want to follow? · airbnb
- What format do you want your config file to be in? · JavaScript
現時点で、どのようなルールが適用されているのかは、
npx eslint --print-config .eslintrc.js > 出力するファイル名(例:current-rules.txt)
で確認できます。
ルールを変更したい場合には、「.eslintrc.js」の「rules」へ追加してください。
「.eslintrc.js内のextends」の順番に適用され、最後に「rules」が適用されます。同じルールがあった場合には、後から読み込んだもので上書きされます。
prettier
prettierでもコーディングルールのチェックは出来ますし、eslintもフォーマッタとして使えますが、餅は餅屋へ。
npm install -D prettier eslint-config-prettier
でインストールが完了します。
まとめ
以上で最新版のライブラリを使用したReact開発環境ができあがります。
ひとつひとつをインストールし、自分で設定ファイルをいじりながらwebpackで画像やスタイルシートを別ファイル出力するよう変更し、動作確認するとwebpackへの理解が深まります。
上記を細かく解説したものがありますので、興味のある方は参照してください。
また、間違いがあればコメントで指摘してください。
ここまで読んでいただき、ありがとうございます。