create-react-appで作られた中身からHTMLの知識を得る

```powershell
 create-react-app qiita-advent-like
# なんでそんな名前のAppなのかは前日の記事参照
cd qiita-advent-like
npm start
```

でReactの基礎構造を作成し、開発環境を整えたところで
**何が書かれているか全然わからん！**
という衝撃を受けてお勉強。

# フォルダ構成

```text
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ページを比べてみると…

```powershell
npm start
```

これにより起動するReactのWelcomeページ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/92e76e8f-0818-24ac-ea59-5cce7a313bb3.png)

ロゴがくるくる回ってカッチョ良い

`public/index.html`を見ると以下のとおり

```html: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`をそれぞれ見てみる

```js:index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

```js:App.js
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ページのソースを表示すると以下のとおり

```html
<!-- 中略 -->
    <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ページのソースが一致していても、よく見たら描画されている文言が違う。

```html:index.html
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
```

>このアプリを実行するにはJavaScriptを有効にする必要があります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/752d4071-425b-f0cb-d96e-4de5bec01e67.png)

>src/App.js を編集して保存し、再読み込みします。

え、もしかしてこのWelcomeページって`html`が表示されているのではなくて全部`JavaScript`による出力物ってこと？
Edgeの開発者ツールで覗き込むとどうなってるのかな。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/26a7ba06-ee18-3de6-0ebc-d9f7e354048f.png)

あれ？こっちには`<div id="root">`に`<App />`が埋め込まれたような出力になっている。
Webブラウザの「ソースの表示」は必ずしも全部吐き出してくれるわけではないのかぁ。

# 知らないことを探して調べてみる

## `<noscript>`

`index.html`に書かれている1行。

```html:index.html
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
```

>このアプリを実行するにはJavaScriptを有効にする必要があります

内容から察するに「JavaScriptが実行できない状態で開かれた場合に出力されるメッセージ」って感じなのだろうか。調べてみる。

参考：[【html】noscript要素の使い方を徹底解説！](https://webukatu.com/wordpress/blog/8195/)

考え方はあっていた。SEO対策にもなるんだね。

## `reportWebVitals`

実は`npm start`するときに一度、`web-vitalsが無いよ｀と言われて起動に失敗している。
参考：[Reactのプロジェクト作成でエラーが起きた](https://qiita.com/Anonymous_A/items/97c9a72f1f95adff696e)

これってなんなんだろう。`index.js`に定義されている。

```js: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計測ライブラリが入ったので試してみた](https://qiita.com/ozaki25/items/6139cbc70cf988d1c870)

とりあえず例えば`console.log`とか入れておけばコンソールに計測した何かが出力されるみたい。おそらく描画速度とか負荷計測してくれるのであろう。パブリックに公開されるようなサイトを作るときになにかの指標となりそうだし、性能要件としても求められそうだ。

## `<React.StrictMode>`

初めてみた。なんだこれ。

参考：[【React】Strictモードの挙動【バージョン18による】](https://qiita.com/tsubasa_k0814/items/ce95b6b92e7994d4fdac)

>端的にいうとjavascriptのコードを通常より厳しくエラーチェックすることのできる仕組みのことです。

あー！JavaScriptの頭に書く`use strict`のことか！そういや`strict`ってなんだ。

語彙：[strict](https://ejje.weblio.jp/content/strict)

>厳しい、厳格な、厳しくて、厳格で、(…に)厳しくて、厳密な、精密な、完全な、まったくの

はい。

で、最初の参考記事に戻るとココのところにちょっとびっくりした。
>- **将来の ECMAScript で予定されている構文(キーワードを変数名として使用するなど) を禁止して、バージョンが変わった後の動作を修正を無くことができる。**
>- Javascriptの構文としてはエラーにはならないが、バグを誘発するようなコードを検出することができる

2個目はなんとなく想像ついているんだけど、1個目！へぇ！世の中そんなとこまで見据えて開発されてるんだとびっくりした。そりゃシステム開発においても「ここっていずれこういう機能作られると思うから…」で拡張性は残しておいたりするもんだけど、あらかじめ関数名とか変数名を予約まではしない。しかもそれは、ただ1つのシステムにおける話。言語・ライブラリレベルでそんなことまで気にしておくなんて世の中のエンジニアはみんな優しいなぁ！

## 拡張子:`.svg`

```js:App.js
import logo from './logo.svg';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
```

```xml:logo.svg
<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ファイルの作り方を解説](https://ferret-plus.com/8445)

>JPEGやPNGと言ったようなwebでよく見かけられる画像との違いは、PEGやPNGがビットマップデータなのに対し、SVGはXMLをベースにした二次元ベクターデータであることです。

はぁ～Reactのロゴのようにうねうね滑らかに動くやつはこうやって作られているのか。
となるとQiita Advent Calenderのページの木や丘、Qiitanの画像も`.svg`ぽいな。

## `<img ... alt="xxx">`

```js:App.js
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
```

参考：[HTMLのalt属性（オルト属性）とは？基礎から使い方まで徹底解説](https://www.sejuku.net/blog/220561)

>alt属性は主にウェブアクセシビリティを考慮し、画像が表示されない場合の代替テキストを提供します。一方で、title属性はユーザーに対して追加情報や説明を提供するために使用されます。
>▼それぞれの使用例
>- alt属性：画像が読み込めない場合やスクリーンリーダー使用時に、「この画像は夕日です」という情報を提供。
>- title属性：マウスカーソルを画像上に置いたときに、「夕日の美しい写真」という追加情報を表示。

あーあったな、そんなの。。FEやってないとこういう細かいところ溢しちゃうな。これもまたSEO対策にもなるらしい。へぇ。

## `<code></code>`

```js:App.js
Edit <code>src/App.js</code> and save to reload.
```

参考：[codeタグとは？HTML文にコードを解りやすく書く方法を解説](https://webukatu.com/wordpress/blog/13553/)

もしかしてMarkdownで書かれたコード部分ってHTMLでは`<code></code>`で囲まれて表示されているのかしら。ついでに改行も描画してくれる`<pre></pre>`も知ることができたし、`<code></code>`のハイライトを制御してくれるプラグイン`prism.js`についても知ることができた。


## `<a target="_blank">`

```js:App.js
<a
  className="App-link"
  href="https://reactjs.org"
  target="_blank"
  rel="noopener noreferrer"
>
```

参考：[target=”_blank”とは？htmlの設定方法やセキュリティの脆弱性やnoopenerの意味](https://ipeinc.jp/media/target-blank/)

おぉおぉ、この次調べようと思ってた`rel="noopener noreferrer"`についても書かれている。セットなんだね。