はじめに
Reactを始めた私にとってのnpx create-react-appは
よく分からんけどとりあえず動く！すげぇ！には最適で、本当に助けられました。
ですが、少しずつこなれて来るとそんなコマンドに個人的に唯一不満なところが出てきます。
これはnpx create-react-appをした直後、初期のディレクトリですが、どうでしょうか？
ちょっと中身がゴチャゴチャに感じませんか。？
そうなんです。
create-react-appをすると、npm startをするだけでそれっぽい初期画面が立ち上がってきますが、そのために不要なファイルや記述が多く含まれています。
最初は色々な内容を試したりできる為、便利なのですが、ある程度使ってくると、この使わないファイルや記述を消したい気持ちが湧き上がってきます。きてください。
でも、必要なファイルまで削除してしまっては逆にはめんどくさい..そんな迷えるデスクトップ画面に物を置かない方々のためにこの記事を書きます！
削除について、あくまで私の開発に沿ったものになりますので、適宜必要なものは残していって頂けると各プロジェクトにあったものになると考えます。
こんな方に読んで欲しい
・React・動的なWebサイト初心者！という方
・デスクトップにファイルやショートカットを置くなんて許せない。という方
不要な記述編
それではまず、不要な記述や不要なファイルへのリンクを削除していきます。
また、コメントについては事前に削除しております。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
削除ポイント
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
後から不要なアイコン等のファイルを消したときに不都合なため削除
<meta name="description" content="Web site created using create-react-app"/>
いつも感謝してます！が。必要のないmetaタグなので削除
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
PWAというスマホ対応のための情報を記述するためのファイルですが、必要な場合には後から記述し直すため一旦削除
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>RemoveReactApp</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
少しだけスッキリしました！
またlangとtitleのところをそれぞれ変更しておきましょう。
app.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
削除ポイント
import logo from './logo.svg';import './App.css';
初期表示のスタイルを読み込むための記述のため削除
（使用する場合にはApp.cssは残す）
<div>タグの中身全て
初期表示を行うための記述のため削除
（表示確認のためdeleteを記述）
function App() {
return (
<div>
delete
</div>
);
}
export default App;
これでApp.jsは最低限の記述になりました！
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
削除ポイント
import './index.css';
index.cssの内容が不要・後から指定するため削除
（使用する場合にはindex.cssは残す）
import reportWebVitals from './reportWebVitals';reportWebVitals();
WebVitalsというUXの適合度を測定するための記述ですが、今回は使用しないため削除します
（使用する場合には残す）
function App() {
return (
<div>
delete
</div>
);
}
export default App;
不要なファイル編
次に不要なファイルについて削除していきます。
先程のindex.htmlとApp.jsとindex.jsで読み込んでいたファイルを主に削除していきます。
| ファイル名 | 概要 |
|---|---|
| favion.icon | ファビコン用ファイルのため削除 |
| logo192.png logo512.png |
ロゴ用のファイルのため削除 |
| manifest.json | プログレッシブウェブアプリとしての情報の定義を行うためのファイル ですが後から記述し直すため一旦削除 |
| robots.txt | 今回はクロールの制御を行わないため削除 |
| App.css | 今回は使用しないため削除 |
| index.css | 今回は使用しないため削除 |
| logo.svg | ロゴ用ファイルのため削除 |
| reportWebVitals.js | 今回はWebVitalsを使用しないため削除 |
| README.md | npmコマンド等の使い方が記述されているため不要 （残してもOK） |
削除・残したファイルに関する補足
-
robots.txtとは検索エンジン等にそのサイト内のどのページに対してクロールを許可するかを記述する事のできるファイルです。
今回は使用しませんが、本ファイルを調節することでSEO対策を行うことができます。 -
App.test.jsとsetupTest.js
App.jsに対してテストを行う際に使用します。本記事では詳しくは解説しませんが、初期ではjestというテスト用のフレームワークが入っています。 -
package.json
プロジェクト内で使用するパッケージの一覧が記述されています。
npm installでインストールを行ったパッケージはメタデータとしてこのファイルに追加されます。 -
manifest.json
PWA（プログレッシブウェブアプリ）と呼ばれるWebアプリに、ネイティブアプリと同様の振る舞いをもたらすための情報を記述するファイルです。
各種記述をすることによ李、例えばブラウザのUIを非表示にし、ネイティブアプリの様な形態で表示をする事が可能になります。
完成系
なんと晴れやかな気持ちでしょうか...
すっかりダイエットに成功してしまいました
ですが、今回削除したファビコンやロゴ用のファイルは当然最終的には必要になってくるファイルですので、ファイルと記述を再度加える事をお忘れなさいませんように。
最後に
結論としてここまでやるならもうpacage.json書くところから自分でやれよ..という声が聞こえてきそうで、全くもってその通りなのですが、一旦初学者への参加ハードルを下げてくれているcreate-react-appへ感謝の想いを伝えて記事を終えたいと思います。
私自身も未だ初学者であるため、記事中に誤りや間違った記述等が存在する恐れがあります。
そういった点に関するご指摘を頂けますと大変助かります。
また、皆さんのご意見・ご感想をお待ちしております。