create-react-app qiita-advent-like
# なんでそんな名前のAppなのかは前日の記事参照
cd qiita-advent-like
npm start
でReactの基礎構造を作成し、開発環境を整えたところで
何が書かれているか全然わからん！
という衝撃を受けてお勉強。
フォルダ構成
qiita-advent-like
├─node_module\
│ ：省略
│
├─public\
│ ├─favicon.ico
│ ├─index.html
│ ├─logo192.png
│ ├─logo512.png
│ ├─manifest.json
│ └─robots.txt
├─src\
│ ├─App.css
│ ├─App.js
│ ├─App.test.js
│ ├─index.css
│ ├─index.js
│ ├─logo.svg
│ ├─reportWebVitals.js
│ └─setupTests.js
├─package.json
├─package-lock.json
└─README.md
index.htmlとWelcomページを比べてみると…
npm start
これにより起動するReactのWelcomeページ
ロゴがくるくる回ってカッチョ良い
public/index.htmlを見ると以下のとおり
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- (中略) -->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
お、<div id="root"></div>がありますねぇ。
そんでindex.jsとApp.jsをそれぞれ見てみる
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
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;
すごい！Z会(Progate)で勉強したとおりだ！
つまりはindex.htmlに書かれた<div id="root">の部分に
index.jsにより<App />を埋め込むように指定されて
App.jsにより<App />の内容が定義されexportされている。
あぁやっていて良かったZ会(Progate)…
と思ったのだけど、WelComeページのソースを表示すると以下のとおり
<!-- 中略 -->
<title>React App</title>
<script defer src="/static/js/bundle.js"></script></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
ん？あれ？置き換わってなくない？
もうちょっとよく見てみて
index.htmlとWelcomeページのソースが一致していても、よく見たら描画されている文言が違う。
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
このアプリを実行するにはJavaScriptを有効にする必要があります
src/App.js を編集して保存し、再読み込みします。
え、もしかしてこのWelcomeページってhtmlが表示されているのではなくて全部JavaScriptによる出力物ってこと？
Edgeの開発者ツールで覗き込むとどうなってるのかな。
あれ？こっちには<div id="root">に<App />が埋め込まれたような出力になっている。
Webブラウザの「ソースの表示」は必ずしも全部吐き出してくれるわけではないのかぁ。
知らないことを探して調べてみる
<noscript>
index.htmlに書かれている1行。
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
このアプリを実行するにはJavaScriptを有効にする必要があります
内容から察するに「JavaScriptが実行できない状態で開かれた場合に出力されるメッセージ」って感じなのだろうか。調べてみる。
考え方はあっていた。SEO対策にもなるんだね。
reportWebVitals
実はnpm startするときに一度、`web-vitalsが無いよ｀と言われて起動に失敗している。
参考：Reactのプロジェクト作成でエラーが起きた
これってなんなんだろう。index.jsに定義されている。
import reportWebVitals from './reportWebVitals';
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
アプリのパフォーマンス測定を開始する場合は、結果をログに記録する関数 (例: reportWebVitals(console.log)) を渡すか、分析エンドポイントに送信します。詳細については、https://bit.ly/CRA-vitals を参照してください。
参考：CreateReactAppにWebVitals計測ライブラリが入ったので試してみた
とりあえず例えばconsole.logとか入れておけばコンソールに計測した何かが出力されるみたい。おそらく描画速度とか負荷計測してくれるのであろう。パブリックに公開されるようなサイトを作るときになにかの指標となりそうだし、性能要件としても求められそうだ。
<React.StrictMode>
初めてみた。なんだこれ。
参考：【React】Strictモードの挙動【バージョン18による】
端的にいうとjavascriptのコードを通常より厳しくエラーチェックすることのできる仕組みのことです。
あー！JavaScriptの頭に書くuse strictのことか！そういやstrictってなんだ。
語彙：strict
厳しい、厳格な、厳しくて、厳格で、(…に)厳しくて、厳密な、精密な、完全な、まったくの
はい。
で、最初の参考記事に戻るとココのところにちょっとびっくりした。
- 将来の ECMAScript で予定されている構文(キーワードを変数名として使用するなど) を禁止して、バージョンが変わった後の動作を修正を無くことができる。
- Javascriptの構文としてはエラーにはならないが、バグを誘発するようなコードを検出することができる
2個目はなんとなく想像ついているんだけど、1個目！へぇ！世の中そんなとこまで見据えて開発されてるんだとびっくりした。そりゃシステム開発においても「ここっていずれこういう機能作られると思うから…」で拡張性は残しておいたりするもんだけど、あらかじめ関数名とか変数名を予約まではしない。しかもそれは、ただ1つのシステムにおける話。言語・ライブラリレベルでそんなことまで気にしておくなんて世の中のエンジニアはみんな優しいなぁ！
拡張子:.svg
import logo from './logo.svg';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
なんだこりゃ！
参考：SVG（エスブイジー）ファイルとは？PNG・JPEG画像の変換方法やSVGファイルの作り方を解説
JPEGやPNGと言ったようなwebでよく見かけられる画像との違いは、PEGやPNGがビットマップデータなのに対し、SVGはXMLをベースにした二次元ベクターデータであることです。
はぁ～Reactのロゴのようにうねうね滑らかに動くやつはこうやって作られているのか。
となるとQiita Advent Calenderのページの木や丘、Qiitanの画像も.svgぽいな。
<img ... alt="xxx">
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
参考：HTMLのalt属性（オルト属性）とは？基礎から使い方まで徹底解説
alt属性は主にウェブアクセシビリティを考慮し、画像が表示されない場合の代替テキストを提供します。一方で、title属性はユーザーに対して追加情報や説明を提供するために使用されます。
▼それぞれの使用例
- alt属性：画像が読み込めない場合やスクリーンリーダー使用時に、「この画像は夕日です」という情報を提供。
- title属性：マウスカーソルを画像上に置いたときに、「夕日の美しい写真」という追加情報を表示。
あーあったな、そんなの。。FEやってないとこういう細かいところ溢しちゃうな。これもまたSEO対策にもなるらしい。へぇ。
<code></code>
Edit <code>src/App.js</code> and save to reload.
参考：codeタグとは？HTML文にコードを解りやすく書く方法を解説
もしかしてMarkdownで書かれたコード部分ってHTMLでは<code></code>で囲まれて表示されているのかしら。ついでに改行も描画してくれる<pre></pre>も知ることができたし、<code></code>のハイライトを制御してくれるプラグインprism.jsについても知ることができた。
<a target="_blank">
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
参考：target=”_blank”とは？htmlの設定方法やセキュリティの脆弱性やnoopenerの意味
おぉおぉ、この次調べようと思ってたrel="noopener noreferrer"についても書かれている。セットなんだね。