🎉
Viteで React✖︎TailwindCSS(TS) の環境構築した時の手順をメモ
はじめに
Viteを使ってReactとTailwindCSSの環境を構築したので、その時のメモです✍️
ESLintについてはまだ理解しきれてないところがあるので、精進していきます
(それぞれの概要についても、今後まとめ次第記載していく予定です)
手順
- ターミナルで実行するコマンド：$から始まるコマンド
- ファイルに記述するコマンド：
$ vim ファイルのpath
-> 記述内容のコードを書く
プロジェクト作成
- プロジェクトの作成
$ npm create vite@latest
? Project name: <project-name> ->(project-nameにプロジェクト名)
? Select a framework: react ->(React を選択する)
? Select a variant: react-ts ->(React + TypeScript を選択する)
- プロジェクトのディレクトリに移動
$ cd <project-name>
- プロジェクトの起動
$ npm install
$ npm run dev
ESLint の導入
1. ESLint のインストール
$ npm install -D eslint
2. ESLint の設定ファイルの作成
$ npm init @eslint/config
選択画面
? How would you like to use ESLint?：(ESLintをどのような目的で使用するか)
-> To check syntax, find problems, and enforce code style
(構文のチェック、問題の検出、コードスタイルの強制の3つの目的で使用)
? What type of modules does your project use?：(どのモジュールシステムを使用しているか)：
->JavaScript modules(import/export)
(ES6の`import`と`export`を用いたモジュールシステムを使用)
? Which framework does your project use?：(フレームワークの選択)
-> React
(今回はReactを使用)
? Does your project use TypeScript?：(TypeScriptを使用してるか)
->Yes
(使ってたらYes)
? Where does your code run?：(どこでコードが実行されるか)
-> Browser
(ブラウザで実行)
? How would you like to define a style for your project?：(スタイルをどのように定義したいか)
-> Use a popular style guide
(スタイルガイドを使用)
? Which style guide do you want to follow?：(どのスタイルガイドを使用するか)
-> Airbnb
(Airbnbを採用)
? What format do you want your config file to be in?：(ESLintの設定ファイルの形式を指定)
-> JavaScript
(js形式を採用)
3. ESLint の設定ファイルの編集
$ vim .eslintrc.js
記述内容
module.exports = {
// module.exports： Node.js で使われる CommonJS のモジュールシステムの構文
env: {
// env は ESLint が対象とする環境を指定するオプション
browser: true, // ブラウザのグローバル変数を有効にする
es2021: true, // ES2021 の構文を有効にする
},
extends: [
// extends： ESLint で利用するルールを指定するオプション
"standard-with-typescript", // 標準のルールを TypeScript に対応させたルールを利用する
"plugin:react/recommended", // React に関するルールを利用する
"airbnb/hooks", // Airbnb のルールを利用する
"plugin:import/errors", // import に関するルールを利用する
"plugin:import/warnings", /// import に関するルールを利用する
"plugin:import/typescript", // import に関するルールを利用する
"plugin:@typescript-eslint/recommended", // TypeScript に関するルールを利用する
"plugin:@typescript-eslint/recommended-requiring-type-checking", // TypeScript に関するルールを利用する
],
parser: "@typescript-eslint/parser", // parser： ESLint で利用するパーサーを指定するオプション
parserOptions: {
// parserOptions は ESLint で利用するパーサーの設定を指定するオプション
ecmaFeatures: {
// ecmaFeatures は ECMAScript のバージョンごとの構文を有効にするオプション
jsx: true, // JSX を有効にする
},
ecmaVersion: "latest", // ECMAScript のバージョンを指定する
project: "./tsconfig.eslint.json", // project は TypeScript の設定ファイルを指定するオプション
sourceType: "module", // sourceType は ECMAScript のモジュールを利用するかどうかを指定するオプション
tsconfigRootDir: __dirname, // tsconfigRootDir は tsconfig.json のルートディレクトリを指定するオプション
},
plugins: ["import", "jsx-a11y", "react", "react-hooks", "@typescript-eslint"], // plugins： ESLint で利用するプラグインを指定するオプション
root: true, // root は ESLint の設定ファイルをルートディレクトリから探すかどうかを指定するオプション
rules: {
// rules ESLint で利用するルールを指定するオプション
"no-use-before-define": "off", // no-use-before-define は 未定義の変数を使用することを禁止するルール
"@typescript-eslint/no-use-before-define": ["error"], // @typescript-eslint/no-use-before-define は 未定義の変数を使用することを禁止するルール
"lines-between-class-members": [
// lines-between-class-members は クラスメンバーの間に空行を入れるかどうかを指定するルール
"error", //
"always",
{
exceptAfterSingleLine: true, // 1行の場合は空行を入れない
},
],
"no-void": [
// no-void は void 演算子を禁止するルール
"error",
{
allowAsStatement: true, // void 演算子を文として使用することを許可する
},
],
"padding-line-between-statements": [
// padding-line-between-statements は 文の間に空行を入れるかどうかを指定するルール
"error",
{
blankLine: "always", // 常に空行を入れる
prev: "*", // すべての文の前に空行を入れる
next: "return", // return 文の前に空行を入れる
},
],
"@typescript-eslint/no-unused-vars": [
// @typescript-eslint/no-unused-vars は 未使用の変数を禁止するルール
"error",
{
vars: "all", // すべての変数を対象にする
args: "after-used", // 使用後の引数のみを対象にする
argsIgnorePattern: "_", // _ で始まる引数を無視する
ignoreRestSiblings: false, // 分割代入の残りの要素を無視しない
varsIgnorePattern: "_", // _ で始まる変数を無視する
},
],
"import/extensions": [
// import/extensions は import 文で拡張子を省略するかどうかを指定するルール
"error", // エラーとする
"ignorePackages", // パッケージは対象外とする
{
js: "never", // js ファイルは拡張子を省略しない
jsx: "never", // jsx ファイルは拡張子を省略しない
ts: "never", // ts ファイルは拡張子を省略しない
tsx: "never", // tsx ファイルは拡張子を省略しない
},
{
// import 文で拡張子を省略した場合の処理を指定する
js: "never", // js ファイルは拡張子を省略しない
jsx: "never", // jsx ファイルは拡張子を省略しない
ts: "never", // ts ファイルは拡張子を省略しない
tsx: "never", // tsx ファイルは拡張子を省略しない
},
],
"react/jsx-filename-extension": [
// react/jsx-filename-extension は JSX を含むファイルの拡張子を指定するルール
"error", // エラーとする
{
// 拡張子を指定する
extensions: [".jsx", ".tsx"],
},
],
"react/jsx-props-no-spreading": [
// react/jsx-props-no-spreading： props を展開することを禁止するルール
"error",
{
html: "enforce", // HTML 要素に対しては強制する
custom: "enforce", // コンポーネントに対しては強制する
explicitSpread: "ignore", // 明示的な展開は無視する
},
],
"react/react-in-jsx-scope": "off", // react/react-in-jsx-scope は JSX を使用する際に React をインポートすることを強制するルール
},
overrides: [
// overrides：特定のファイルに対してのみルールを適用するオプション
{
files: ["*.tsx"], // 拡張子が tsx のファイルに対してのみルールを適用する
rules: {
"react/prop-types": "off", // react/prop-types は props の型を指定するルール
},
},
],
settings: {
// settings：ESLint で利用する特定のプラグインや解析ツールの設定をするオプション
"import/resolver": {
// import/resolver は import 文の解決方法を指定するオプション
node: {
paths: ["src"],
},
},
},
};
4. tsconfig.eslint.json の作成
Q：tsconfig.eslint.json とは？
A：ESLint で TypeScript のコードを解析するために必要な設定ファイル
$ vim tsconfig.eslint.json
記述内容
{
"extends": "./tsconfig.json", // tsconfig.json を継承
"include": ["src/**/*.ts", "src/**/*.tsx"], // 解析対象のファイル
"exclude": ["node_modules", "dist"] // 解析対象外のファイル
}
5. .eslintignore の作成
Q：.eslintignore とは？
A：ESLint で解析しないファイルを指定するための設定ファイル
$ vim .eslintignore
記述内容
build/ # ビルドファイル
public/ # 静的ファイル
**/coverage/ # テストカバレッジ
**/node_modules/ # パッケージ管理
**/*.min.js # 圧縮ファイル
*.config.js # 設定ファイル
.*lintrc.js # 設定ファイル
Prettier の導入
1. Prettier のインストール
$ npm install -D prettier eslint-config-prettier
2. .prettierrc の作成
$ vim .prettierrc
記述内容
{
"singleQuote": true, // シングルクォートに統一
"trailingComma": "all", // 末尾のカンマを残す
"endOfLine": "auto" // 改行コードを自動で設定
}
VSCode の設定
1. VSCode の設定ファイルの作成
$ vim .vscode/settings.json
記述内容
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false,
"eslint.packageManager": "npm",
"typescript.enablePromptUseWorkspaceTsdk": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[graphql]": {
"editor.formatOnSave": true
},
"[javascript]": {
"editor.formatOnSave": true
},
"[javascriptreact]": {
"editor.formatOnSave": true
},
"[json]": {
"editor.formatOnSave": true
},
"[typescript]": {
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.formatOnSave": true
}
}
TailwindCSS の導入
1. TailwindCSS のインストール
$ npm install -D tailwindcss@latest postcss autoprefixer
2. TailwindCSS の設定ファイルの作成
$ npx tailwindcss init -p
3. TailwindCSS の設定ファイルの編集
$ vim tailwind.config.js
記述内容
module.exports = {
content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
4. TailwindCSS の設定ファイルの編集
記述内容
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
5. index.css の設定ファイルの編集
$ vim src/style/index.css
記述内容
@tailwind base;
@tailwind components;
@tailwind utilities;
6. main.tsx の編集
$ vim src/main.tsx
記述内容
import React from "react";
import ReactDOM from "react-dom";
import "./style/index.css";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<div className="bg-gray-100">
<App />
</div>
</React.StrictMode>,
document.getElementById("root")
);
7. App.tsx の編集
$ vim src/App.tsx
記述内容
import React from "react";
const App: React.FC = () => {
return (
<div className="flex justify-center items-center h-screen">
<div className="bg-white shadow-lg rounded-lg w-80 p-6">
<h1 className="text-3xl font-bold text-center">Hello World</h1>
</div>
</div>
);
};
export default App;
おわりに
参考にした記事と書籍です
大岡由佳さんが執筆した書籍「りあクト」はReactについてすごくわかりやすく説明されています
前提知識やJavaScriptの歴史、概要なども理解できるのでぜひ読んでみてください！
対話形式でかかれているので、本をよむのが苦手と言った方でもおすすめです！
Discussion