この記事は公開されてから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
の実装というわけですね。
(内容については次回以降に書きます)
index.js
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
をインポートしている流れだというのも分かります。
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>
タグにレンダリングされていることが確認できます。
App.test.js / setupTests.js
App.test.js
は名前の通りにテストファイルになると思います。
テストとその方法については別途ブログにしようと思うので割愛しますが、コンポーネント単位でテストができそうな感じに見えますね。
ルートディレクトリ
package.json
npm
でパッケージ管理するための依存関係を書く設定ファイルです。
サードパーティなどのライブラリを使うときに書き換えてnpm
を使ってアップデートします。
package-lock.json
package.json
を元にライブラリを取り込んだ際に、バージョンに差異が生まれないようにするためのファイルです。
こちらを直接編集するようなことはないと思います。
.gitignore
git
を使ってるとおなじみですが、git
管理から無視するファイルが書かれています。
README.md
React
の説明書のようなものですね。勉強中は必要かもしれませんが、不要になったら削除してもよさそうです。
最後に
今回は、VSCodeのちょっとしたTipsと、
create-react-app
で出来上がったデフォルトのプロジェクトの中をサラッと確認してみました。
まだ、あまり面白い内容とは言えませんね(苦笑)
次はReact
での開発で使うキーワードをまとめようかなと思います。
では、またー。