常連

###質問概要
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を埋め込みたい

# 聞きたいこと
カッコの数が一致するように正規表現を書きたいです。
`[ソード]`については問題ないのですが、`[]`が入れ子になった場合うまく動作しません。

例えば`[ソード[炎属性]`という出力が得られていますが、`[ソード[炎属性]]`という出力が欲しいです。
最後のカッコを意識するような正規表現はどのように書けばよいでしょうか？

# ソースコード
**main.js**
```javascript
// 無駄な文字列が入っているところから武器名を取り出すプログラム
// aaa, bbb, ccc はダミーの文字列。
let strs = [
  'aaa[ソード]bbb',
  'aaaaa[ソード[炎属性]]bbbb',
  'aaa[ソード][ツインソード]',
  'aaa[ソード[炎属性]]bbb[ツインソード]ccc',
  'aaa[ソード[炎属性]][ツインソード][ソード[水属性]]ccc'
]
let myRegexp = new RegExp(/[.*?]/g)
let match = null

while ((match = myRegexp.exec(strs)) !== null) {
  let itemName = match[0]
  console.log(itemName)
}
```

# 実行結果
```
$ node main.js
[ソード]
[ソード[炎属性]
[ソード]
[ツインソード]
[ソード[炎属性]
[ツインソード]
[ソード[炎属性]
[ツインソード]
[ソード[水属性]
```

# 求めている実行結果
```
$ node main.js
[ソード]
[ソード[炎属性]]
[ソード]
[ツインソード]
[ソード[炎属性]]
[ツインソード]
[ソード[炎属性]]
[ツインソード]
[ソード[水属性]]
```

# 環境
```
$ node --version
v8.9.1
```

# 参考
[MDN - RegExp.prototype.exec()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec)

括弧の数を考慮した正規表現について

###前提・実現したいこと
javascriptを使ってランキングの順位を表示する仕組みを実装したい。

**■前提条件**
データベースはニフティのmBaasのデータストアを使用

**■参考**
[ニフティ公式ドキュメント(基本的な使い方)](http://mb.cloud.nifty.com/doc/current/datastore/basic_usage_ios.html)
[ニフティ公式ドキュメント（ランキングを作る）](http://mb.cloud.nifty.com/doc/current/datastore/ranking_ios.html)

DBに名前とスコアなどを登録していき、それをランキングとして表示したい。

DBへの登録は公式APIを使って実装しており、
スコア順にソートしてデータを抽出することは可能です。

###発生している問題

当初、HTMLで出力する際のループ処理を行うときに、配列のインデックスを使って、
順位の番号を書き出そうとしていましたが、その場合だと同点のときの同率順位の時に、
順位の表記がおかしくなってしまいます。

例）
10点 1人
9点 2人
8点 3人
7点 1人 などの時に、

1位 ○○○○さん
2位 XXXXさん
2位 △△△△さん
4位 ●●●●●さん
4位 ▲▲▲▲▲さん
4位 ■■■■■さん
といった表示を行いたいです。




ニフティのデータストアでは、SQLを使ってデータの登録ができないので、PHPなどで集計を行ってからデータを登録するのは難しいと思うので、
下記のようなデータをAPIで引っ張ってきて、データを加工して表示を行おうかと思っております。


```json
[
  {score:10,name:○○○○},
  {score:8,name:●●●●●},
  {score:9,name:XXXX},
  {score:8,name:▲▲▲▲▲},
  {score:9,name:△△△△},
  {score:8,name:■■■■■}
]
```

###補足情報(言語/FW/ツール等のバージョンなど)
フロントエンドはReact+reduxで実装を行っております。

---

javascriptでどういったアルゴリズムでデータを加工すればよいかわからなかったため、お教えいただけると幸いです。

javascriptを使ってランキングの順位を表示する仕組みを実装したい。

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

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

## 質問内容

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