📚

Reactポートフォリオ作成の道のり①

2023/05/09に公開

未経験でIT業界に転職したものの、正直よく理解していないまま業務を進めている私です。

流石にこれではまずいと思い、業務で開発を行ったReactを使用して、復習がてらポートフォリオの作成に着手することとしました。

開発時にも指導いただける環境ではなく我流でネットの情報をかいつまみながら泥臭く開発していたので、おかしな点がかなりあると思いますがご容赦ください。

OS:windows10
node:16.15.0
npm:9.6.2
yarn:1.22.18
create-react-app:5.0.1
~~(npmとyarnの違いがあまりわかってないクソにわかなのは内緒)~~

さて、ではcreate-react-appでプロジェクトの作成を行います。

と言ってもここはもうコマンドを一行入力するだけ。ササっと行きます。

$ npx create-react-app kimama_journey --template typescript
これでコマンドを実行した後色々聞かれたことに答えていくとディレクトリの配下にプロジェクトのディレクトリ（今回でいう"kimama_journey"）が出来上がるので、CLIに表示された通りに作成されたディレクトリに移動して完了。

(一応念のため実行して問題なく動作することも確認）

使用(予定)の各種ライブラリインストール

続いて今回のポートフォリオ作成に使用しようと思う各種ライブラリを導入していきます。

ライブラリは以下を導入していきました。

material-UI:ReactのUIライブラリの代表的なやつ。
react-router:ルーティングで使用するやつ。
react-beautiful-dnd:Todoアプリで使用するようなドラッグ＆ドロップでアイテムを移動出来るやつ。

ライブラリについてはそれぞれ以下に説明サイトを貼っておくので良ければ参考にしてください。

ライブラリのインストールはそれぞれ説明サイトに基づいて以下の通りコマンドを入れていきました。

material-UI
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material
react-router-dom
npm install react-router-dom
react-beautiful-dnd
npm install react-beautiful-dnd
ちなみにここで一つ問題が発生。

npmを使用しreact-router-domのインストールを行う際に、急にエラーが発生してインストール失敗。

以下エラー内容となります。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-scripts@5.0.1
npm ERR! Found: typescript@5.0.4
npm ERR! node_modules/typescript
npm ERR!   peer typescript@"*" from eslint-config-standard-with-typescript@34.0.1
npm ERR!   node_modules/eslint-config-standard-with-typescript
npm ERR!     dev eslint-config-standard-with-typescript@"^34.0.1" from the root project
npm ERR!   peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3
npm ERR!   node_modules/fork-ts-checker-webpack-plugin
npm ERR!     fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
npm ERR!     node_modules/react-dev-utils
npm ERR!       react-dev-utils@"^12.0.1" from react-scripts@5.0.1
npm ERR!       node_modules/react-scripts
npm ERR!         react-scripts@"5.0.1" from the root project
npm ERR!   2 more (tsutils, the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"5.0.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: typescript@4.9.5
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR!   node_modules/react-scripts
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\Shinichi\AppData\Local\npm-cache\_logs\2023-05-09T12_58_32_486Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Shinichi\AppData\Local\npm-cache\_logs\2023-05-09T12_58_32_486Z-debug-0.log

色々書いてますが、要はオプションに--forceもしくは--legacy-peer-depsをつけなさいとのことです。

今回は--legacy-peer-depsを付けることで、なんとかインストールを進めることが出来ました。

eslint+prettierの設定

続いてコード整形のためのeslintおよびprettierを設定していきます。

こちらについては以下のページを参考にさせていただきました。

また、最終的な設定ファイルは以下に落ち着いてます。

もし「ここはこうした方がいいよ！」みたいな神がかったアドバイスがございましたらご教示ください(笑)

.eslintrc.yml

env:
  browser: true
  es2021: true
  node: true
extends:
  - plugin:react/recommended
  - standard-with-typescript
  - prettier
overrides: []
parserOptions:
  ecmaVersion: latest
  sourceType: module
plugins:
  - react
rules: {}

.prettierrc.json

{
  "trailingComma": "es5",
  "printWidth": 120,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "parser": "typescript",
  "jsxBracketSameLine": true
}

ひとまずプロジェクト開発までの事前準備は以上となります。

次回からは実際の開発に入っていく（予定）ですので、更新出来ることを祈りつつ次回をお待ちいただければ幸いです。

Reactポートフォリオ作成の道のり①

目次

プロジェクトの作成

使用(予定)の各種ライブラリインストール

eslint+prettierの設定

Discussion