ReactでWebサイト又はWebアプリを作成する方法（初動）

2022年6月10日
React

React

今日はJavaScriptのライブラリーとして人気の高いReactで、Webサイト・Webアプリを立ち上げるための初動について解説したいと思います。localhostにHello Worldと表示させることが目的です。

1 Reactのロードマップ
2 Node.jsのインストール
3 Reactを立ち上げる
4 React内の不要なファイルの削除
5 Hello Worldの作成
6 CSSファイルの整理

Reactのロードマップ

具体的な手順に入る前に、Reactの入門から中級辺りまでのロードマップをお示ししたいと思います。今日こちらの記事でご紹介するのは1のステップです。

npx create-react-app my-appが実行できる
functionコーポントの構造を理解する
JSXを書ける
propsを使える
基礎のHooks（useStateとuseEffect）の仕組みを理解して使える
ライフサイクルを理解する
routerを使える
Recoil, context, Reduxなどのglobal stateが使える
その他Hooks（useRef、カスタムフック）が使える

Node.jsのインストール

Reactを使うには、PCにNode.jsがインストールされている必要があります。これは、Node.jsそのものを使うわけではなく、パッケージのインストール・管理にnpmが必要だからです。

Node.jsはホームページからインストールできます。Current版ではなく、LTS版（Latest Stable Version）をインストールすることをおすすめいたします。

Reactを立ち上げる

Node.jsがインストールできたら、次はWebサイト又はWebアプリを立ち上げるフォルダ（ディレクトリー）を作成します。ディレクトリーの名前はなんでもよいです。ディレクトリーを作成した後、ターミナルのcdコマンドで同ディレクトリーに移動します。Windowsの場合は、下記のように目的のディレクトリーのアドレスバーにpowershellと入力すると、そのディレクトリーでターミナル（powershell）を開くことができます。macでも同じような方法があると思います。

対象ディレクトリーでターミナルが開けたら、下記のコマンドを打ちEnterを打ちます。「my-app」の部分はWebサイト又はアプリの名称ですので任意です。なお、reduxを使用する場合は、下段のように「–template redux」を追加します。

npx create-react-app my-app

npx create-react-app my-app --template redux

下記スクリーンショットでは、second-appというアプリ名で作成しています。

100M弱のファイル群のインストールで、さほど重くはないのですが、ファイルが非常に多いので数分程度時間がかかります。インストールが終わると、先ほど作ったディレクトリーとば別に、その下に、新たな子ディレクトリーができていることが確認できるはずです。

続いて、作成された子ディレクトリー（上記ではmy-app）に、ターミナル上のcdコマンドを使って移動します。

cd my-app

下記のようなフォルダ構成が見られれば、Reactのアプリの作成に必要な準備が整っています。

次に下記コマンドを打って、このディレクトリーでVSCodeを開きます。codeとドットの間には半角スペースが入っています。なお、ここまでの作業をVSCode内のターミナルで実施している場合はこのコマンドは不要です。VSCodeについては、私の以前のこちら記事でご紹介してます。

code .

VSCodeが起動したら、Ctrl + JでVSCode内にターミナルを開きます。ここで次のコマンドを打ち、Reactのアプリを起動させます。

npm start

ブラウザで、localhost:3000に移動した後、次のようなReactのロゴが回転していればここまでは順調です。

React内の不要なファイルの削除

VSCodeの左側のサイドバーでmy-app（下記ではsecond-app）内のsrcディレクトリーがメインに作業をする場所です。他のディレクトリーはいったん忘れてもらっても大丈夫です。

さてsrcディレクトリーの中を見ると、下記のようなReactのフォルダ構成になっていると思います。こちらはある程度大規模なReactのWebアプリを動かす場合でも、必要なパッケージが全て揃った状態になっていますが、個人開発のレベルでは幾つか不要なファイルもあります。まず、App.test.js、setupTests.jsの2つは削除して問題ありません。先ほどの回転ロゴも不要ですので、logo.svgも削除できます。

続いて、App.jsを開き、前述の回転するReactロゴを表現していた<div>の内側を全て削除します。上部にあるimport logo from ‘./logo.svg’も削除します。私は、CSSのルールをBEMに従っているので、ここでいつもクラス名の”App”は小文字の”app”としますが、こちらは任意です。

Hello Worldの作成

削除したdiv内に、仮の<h1>タグを作ってHello Worldとでも入れておきます。

localhost:3000で、無事にHello Worldと表記されていれば、Reactを使ったWebサイトの原型が完成しています。

CSSファイルの整理

最後に、App.cssの内容を全て消します。元々のapp.cssは回転するロゴ用に書かれていたので全て消した上で、全体にmargin:0を適用し、上記のHello Worldの上部にある余計なmarginを消します。進んで、margin:0を定めるだけのApp.cssファイルは不要であるとしてApp.cssをファイルごと削除し、対応するApp.jsのインポート文を消す人もいますし、App.cssに限らずindex.cssの内容もいったん全て消す人もいます（index.cssファイルは削除しない方がよい）。この辺りは人によって分かれますが、私はApp.cssにmargin:0を適用してファイルは残し、index.cssの内容もそのまま残します。index.cssの内容は必要になった時点で変更します。