[React] よーし! いっちょReactやってみっか! #2 プロジェクト俯瞰編

よーし! いっちょReactやってみっか!

#初心者向け

#SPA

#React

中安佑一

2020.09.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

CX事業本部の中安です。まいどです。

モバイルアプリエンジニアな自分がReactを始めてみることにした「よーし! いっちょReactやってみっか!」シリーズの続きです。今回もよろしくお願いします。

前回は環境構築をしてWEBアプリを作成し、起動するところまでをやりました。また、Chromeの開発ツールの導入も行いました。

今回は作成したプロジェクトを一度俯瞰して見てみましょう。

VSCode

開発のために使うIDEとして VSCode を使うことにしました。簡単に手に入りますからね。

前回の復習

前回は、以下のように任意のディレクトリでReactアプリのプロジェクトを作成しました。

% npx create-react-app my-app

VSCodeを簡単に開けるようにしよう

もし「VSCode を初めて使うよ」って場合は、ちょっと一工夫しておくと良いかと思います。

まず、VSCodeを開いてcommand+shift+Pを押します。すると検索窓のようなものが出てくると思うので、下記の文字列をそこに入力します。

Shell Command: Install 'code' command in PATH

サジェストのように出てきた青い文字列を押下すると、(!) Shell command 'code' successfully installed in PATH.と右下に表示されます。

こうするとターミナルでcodeというコマンドが打てるようになります。

% code my-app

このように実行すると、プロジェクトを選択した状態でVSCodeが起動します。便利ですね。

もしターミナル上で既にmy-appディレクトリ内にいる場合は

% code .

で同じことができます。

Reactに限らず他のプロジェクトでも使用できるTipsでした。

ディレクトリ構成

VSCodeで開いてみると、デフォルトでこのような構成になっていることがわかります。

node_modules

npmで管理されるモジュール群が入っています。Reactが動くのはこれらが作用しあってフレームワークになっているからですね。沢山のディレクトリとファイルで構成されていますが、ここをイジることはないんじゃないかなと思います。

public

その名の通りで「公開フォルダ」になります。リソースとしてユーザに見えるものが入っているアセット群といったところでしょうか。

デフォルトで Favicon や検索ロボット用のファイル等が用意されています。

index.html

公開フォルダ内に置かれているHTMLファイルは一つだけで、SPA用に用意されています。コメントのせいで長くなっていますが、それらを消すと20行ほどの軽い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>

bodyにはjavascriptが使用できなかった場合の<noscript>タグと、<div id="root">タグがひとつあるだけです。

<div id="root">の中がReactによって描き直される(レンダリングされる)仕組みというわけですね。

また、注目するところは、このHTMLには<script>タグが存在しないところです。 javascriptをフルに使うにしては不思議なことですが、これはReact自体が「クライアントサイドレンダリング」を行っているからだそうです。レガシーな開発方法に慣れていると少し違和感がありますが、そういうものと思っておいたほうがよいですね。

src

基本的には開発に関わるソースコードはこのディレクトリに配置します。

例外はありそうですが、ここに置かれたjavascriptやcssファイルはクライアント側には隠れている状態になるようです。

ここにはファイルが多いので以降はカテゴライズして書きます。

serviceWorker.js

Progressive Web Application 略してPWAの機能を実現するためのファイルです。今現在は自分では上手く整理できていないので、またどこかの機会で言及できればと思います。

詳しくはこちらのGoogleのドキュメントを参考ください。

index.js / index.css

index.jsはページの表示についての処理が書かれています。今シリーズで初めてjavascriptのソースコードが出てきましたが、これがシンプルなReactの実装というわけですね。 (内容については次回以降に書きます)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

index.cssは見た目(スタイル)を指定しているファイルですね。 index.jsの3行目でindex.cssをインポートしている流れだというのも分かります。

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

さて、このCSSファイルはレンダリングされた際には<link>タグにCSSファイルのリンクが貼られているというわけではなさそうです。実際にはHTMLのヘッダ部内の<style>タグにレンダリングされているようです。

App.js / App.css

App.jsの中を見てみると

import React from 'react';
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;

実際に画面に表示されている内容に近しいHTMLのような記述があります。そして改めてindex.jsを見てみるとAppをインポートした上で <App /> という実装がされていることが見てとれます。

コンポーネントベースというReactの特長と照らし合わせると、「App」がコンポーネントに当たることが分かります。

「なるほどReactとは、そういうノリで書いていくんだな」というのが何となく分かりますね。

App.cssの内容については、index.cssと同じく<style>タグにレンダリングされますが、別の<style>タグにレンダリングされていることが確認できます。