常連

###別ファイルのclassを利用する方法を知りたい
es6からcalssが使えるようになりましたが，c#のように他のファイルでclassを書いてから使用する方法を教えてください。
環境はnode.jsでコマンドプロンプト上で実行しています。
Babel等は使いたくありません。純粋にes6からの仕様で取得したいです。

###例

```js
// index.js
// ここでどうやって宣言すればいい？
```

```js
// cat.js
class Cat{
 // 内容
}
```

classを別ファイルから使用する

###質問概要
jsxのimgタグのsrc属性に関する質問です。
今、ディレクトリの構造が下記のようになっているとします。

root/
├ images/
│ └ sample.png 
├ public/
│ ├ bundle.js 
│ └ index.html
├ src/ 
│ ├ components/ 
│ │ └ Header.jsx
│ └ index.jsx 
├ package.json
└ webpack.config.js

`Header.jsx`の`<img>`のsrc属性値として`images/sample.png`を読み込ませようと思い、方法①と方法②を試しました。


###方法①
方法①では`Header.jsx`を下記のようにしました。

```jsx
import React from 'react';

const Header = () => (
  <div className="header">
    <div className="header-left">
      <div>
        <img
          src="../images/sample.png"
          alt=""
        />
      </div>
    </div>
  </div>
);

export default Header;

```

しかし、画像は表示されず、コンソールには`not found`と表示されてしまいます。
（ちなみに、webpackによってトランスパイルされ`public/bundle.js`として出力されます。）


###方法②
そこで、方法②では`url-loader`をインストールし、`webpack.config.js`に下記を追加し、`Header.jsx`も以下のように書き換えました。

```js
{
   test: /.png$/,
   loader: 'url-loader?mimetype=image/png',
}
```

```jsx
import React from 'react';

import imgUrl from '../../images/sample.png';

const Header = () => (
  <div className="header">
    <div className="header-left">
      <div>
        <img
          src={imgUrl}
          alt=""
        />
      </div>
    </div>
  </div>
);

export default Header;

```

上記のようにすると、うまく画像が表示されます。

###質問まとめ
方法①で画像が表示されない原因は何なのでしょうか？
（できるだけ方法①を採用したいと考えています。）
何かご回答をいただけると非常に助かります。

React.jsにおけるimgタグのsrc属性の記述方法について

### 前提・実現したいこと
まずはソースコードは以下の通りです。
```javascript
class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
      word: [],
    }
  }; 
  render() {
    return (
      <div>
        {this.state.text.map(number => (<Button value={number} onClick={() => this.handleClick(number)} />))}
        <Word word={this.state.word}/>
      </div>
    );
  }
  handleClick(number) {
    console.log(number);
  }
}

class Button extends React.Component {
  render() {
    return (<button onClick={this.props.onClick}>{this.props.value}</button>)
  }
}

class Word extends React.Component {
  render() {
    return (<div>{this.props.word}</div>);
  }
}

React.render(<Main />, document.getElementById('app'));
```


handleClick関数内のconsole.log(number)では
クリックしたボタンの値が取れています。
ボタンをクリックするたびに
この値をthis.state.wordにpushして画面に表示させたいです。

やり方は色々あるみたい？ですが、スマートな書き方を教えてください

reactでstateの配列に値を追加して画面に表示したい

reactを学習しています。
配列をmapで回してリストを作ることができたのですが、
以下のコードのmapの箇所をforEachに書き換えると表示することができませんでした。

ReactではforEachではなくmapを使わないといけないのでしょうか？

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
    <h1>React</h1>
    <div id="root">wait...</div>

    <script type="text/babel">
        let dom = document.querySelector('#root');


        const table = {
            fontSize: "16pt",
            padding: "5px 50px",
        }
        const th = {
            color:'white',
            backgroundColor:'#006',
            padding:'5px 15px',
        }
        const td = {
            color:'black',
            padding:'5px 15px',
            border:'1px solid gray',
        }


        let data = [
            {name:'Taro', mail:'taro@yamada', age:45},
            {name:'Hanako', mail:'hanako@flower', age:37},
            {name:'Sachiko', mail:'sachiko@happy', age:29}
        ];


        let el = (
            <div>
                <table style={table}>
                <tr>
                    <th style={th}>name</th>
                    <th style={th}>mail</th>
                    <th style={th}>age</th>
                </tr>
                {data.map((value) =>(
                <tr>
                    <td style={td}>{value.name}</td>
                    <td style={td}>{value.mail}</td>
                    <td style={td}>{value.age}</td>
                </tr>
                ))}
                </table>
            </div>
        );


        ReactDOM.render(el, dom);
    </script>
</body>
</html>
```

React.jsでmapの代わりにforEachは使えないのか

JSONデータにHTMLを埋め込みたいのですが、ベストプラクティスは何だと思いますか？
ご意見をお伺いしたいです。

自分の中では、
●ヒアドキュメントで埋め込む
●HTMLソースは外部HTMLファイルに記述しincludeする
辺りかなぁと思っています。

やりたい事は↓みたいな感じです。
```javascript
{
"tier": 1, // n(数値)
"html": "
<div>
    <h1>h1sample</h1>
    <p>texttext</p>
    <img src="sample.jpg">
</div>
"
},
{
"tier": 2,
"html": "
<div>
    <h1>h1sample2</h1>
    <p>texttext</p>
    <img src="sample.jpg">
</div>
"
},
{
"tier": 3,
"html": "
<div>
    <h1>h1sample3</h1>
    <p>texttext</p>
    <img src="sample.jpg">
</div>
"
}
```

ご教示いただけましたら幸いです。
どうぞよろしくお願いいたします。

JSONにHTMLを埋め込みたい

### 前提

Javascriptのオブジェクトには皆prototypeプロパティがあると思いますが、
prototypeプロパティは配列形式で格納されているように見えるのですが、
何故配列形式になっているのでしょうか？
prototypeプロパティは一つのオブジェクトに一つしかないのであれば、
配列である必要がないように思ったもので、どんなメリットがあるのか知りたいです。
お詳しい方、もしくはこんな予想、などでもご意見いただきたいです


### 該当のソースコード

Chromeの開発者ツールにて...
```
var foo = new Array(1)
console.log(foo)

出力結果:
[empty]length: 1
[[Prototype]]: Array(0)
```
```
var bar = new String('bar')
console.log(bar)

出力結果:
String {'bar'}
0: "b"
1: "a"
2: "r"
length: 3
[[Prototype]]: String
[[PrimitiveValue]]: "bar"

```

### 補足情報（FW/ツールのバージョンなど）

開眼Javascriptを読んでいてふと疑問に思ったもので...
何か困っていると言うわけではないのでJSにお詳しいたまたまお時間ある方よければ...



Javascriptのprototypeプロパティがなぜ配列形式になっているか知りたい

とあるtampermonkeyで実行できるユーザースクリプトを見たところ、
SPA(single page application)でのページ移動をdocument.bodyの比較で検知していました。
ソースは以下です。
```js
var currentBody;
setInterval(() => {
  if(currentBody != document.body) {
    currentBody = documemt.body;
    reInit();
  }
}, 1000);
```
しかし、document.bodyもオブジェクト。要素が追加されるとdocument.body.childrenの配列にも追加されcurrentBodyと不一致になるはずですが、なぜかtrueになり、ページを移動させるとfalseになりました。これの意味が分からず昼しか眠れません。どなたかdocument.bodyの比較について、もしくはオブジェクトについての比較をご存じの方は回答お願いします。

ちなみに該当のサイトは[ここ](https://osu.ppy.sh/)、ユーザースクリプトは[ここ](https://github.com/limjeck/osuplus/blob/master/osuplus.user.js#L586)です。

document.bodyの比較はどのような仕組みになっているのか。

## 質問内容

Javascript で、配列の添字として使用できるように、整数型の列挙子を定義したいのですがどのように書けばいいのでしょうか？
Typescript では enum 構文があるようですが、Javascript には enum 構文がないです。

以下の C++ の列挙子のようにキャスト不要で整数型として認識される列挙子を定義したいです。
よろしくおねがいします。

探しているもの
* 定数 (あとから変更することはない)
* 整数の値を表し、配列の添字として使用できる
* -1 始まりの連続した整数 (-1, 0, 1, 2, ...)
* ある名前空間以下に定数を定義したい (C++ でいうと、ある名前空間の中に定義して Zero ではなく、Number::Zero として定数を参照する)

```cpp
#include <iostream>
#include <vector>

struct Number
{
    enum Type
    {
        Null = -1,  // -1 を表す定数
        Zero,       //  0 を表す定数
        One,        //  1 を表す定数
        Two,        //  2 を表す定数
    };
};

int main()
{
    std::vector<std::string> array = {"a", "b", "c"};

    // 整数型として認識される列挙子
    std::cout << array[Number::Two] << std::endl; // c
    std::cout << std::boolalpha << (Number::Two == 2) << std::endl; // true
}
```

## 試したこと

調べたところ、Symbol を使ったサンプルが出てきたのですが、整数型とは認識されていないためか添字としては利用できないようでした。

```js
const Number = Object.freeze({
  Zero: Symbol(0),
  One: Symbol(1),
  Two: Symbol(2)
});

let array = ["a", "b", "c"];

console.log(array[Number.Two]);  // undefined
```

1つ1つ変数として定義していく方法も考えましたが、グローバル名前空間に定義されてしまうことと、50個ぐらい定数があり煩雑となるため、より簡潔な方法がありましたら教えて下さい。

```
const Zero = 0;
const One = 1;
const Two = 2;
```

## 環境

* ES 2019

ECMAScript