let のスコープについて

Question

現在Reactを勉強しています。
ただ、この質問はおそらくJSだと思います。

問題となるのは下記コードです。

/* toggle.js */

let showed = false
let button = document.getElementById('button')
let text = document.getElementById('text')
const controllDetails = () => {
    if (showed) {
        button.innerText = "Show details"
        text.innerText = ""
        showed = false
    } else {
        button.innerText = "Hide details"
        text.innerText = "Hello!"
        showed = true
    }
}

const root = document.getElementById('app');
const template = (
    <div>
        <h1>Visibility Toggle</h1>
        <button onClick={controllDetails} id="button">Show details</button>
        <h2 id="text"></h2>
    </div>
)

ReactDOM.render(template, root)

上記のようにかくと、

Uncaught TypeError: Cannot set property 'innerText' of null

というエラーが出ますが、

let showed = false
const controllDetails = () => {
    let button = document.getElementById('button')
    let text = document.getElementById('text')
    if (showed) {
        button.innerText = "Show details"
        text.innerText = ""
        showed = false
    } else {
        button.innerText = "Hide details"
        text.innerText = "Hello!"
        showed = true
    }
}

const root = document.getElementById('app');
const template = (
    <div>
        <h1>Visibility Toggle</h1>
        <button onClick={controllDetails} id="button">Show details</button>
        <h2 id="text"></h2>
    </div>
)

ReactDOM.render(template, root)

とすると、問題なく動きます。buttonとtextの位置を変えたことによって解決します。

質問：これはなぜこのような挙動になるのかがわかりません。。。。　letのスコープが関係しているのでしょうか。しかし、showdedは問題なく動きます。。。

何卒よろしくお願いします。

Answer 1

直接的な原因としては他の回答のとおりですが、そもそもの問題として、Reactで生成したHTML要素を外部から書き換えることは、Reactの動作を十分理解して、問題ないと判断できるごく僅かな事例を除けばやってはいけません（Reactが把握しているHTMLの状態と実際のHTMLの状態がずれるため、その後の差分更新が破綻してしまいます）。

Reactの表示制御は、Reactの内部で行うようにしましょう。

class Toggler extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      showed: false
    }
  }

  controllDetails = () => {
    // showedの状態を反転させる
    this.setState(({showed}) => ({showed: !showed}));
  }

  render() {
    return(
      <div>
        <h1>Visibility Toggle</h1>
        <button onClick={this.controllDetails}>
          {this.state.showed ? 'Hide' : 'Show'} details
        </button>
        <h2>{this.state.showed ? 'Hello!' : ''}</h2>
      </div>
    );
  }
}

ReactDOM.render(<Toggler />, root);

Comments

[miyabi_pudding]

横槍失礼します。
ですね。それをやってしまうと、そもそもフレームワークを使う意味さえ失われかねないかと思います。

Answer 2

React詳しくないので、おそらくですが、回答です。
（他のフレームワークは存じ上げおりまして、他のフレームワークと同様の動きだと思いますので）
スコープが原因ではなく、単純に実行タイミングです。
上記スクリプトを実行時は、
<button onClick={controllDetails} id="button">は、HTML要素として存在してないからです。
おそらく、テンプレートをHTML要素として実行する前のものなのでしょう。
よって、上記のbuttonには、nullが入っているでしょう。
なので、innerTextというプロパティは存在しない、とエラーがでるのかと思われます。

下記スクリプトは、
テンプレート内部で、クリックした時に実行されるメソッドのため、
その内部での実行時は、テンプレートがHTMLとして出力されている状態のため、当然、<button id="button">がHTMLとして存在しているという状態です。
よって、innerTextプロパティが存在するのです。

Comments

[tomoharu]

ご回答ありがとうございます！　なるほど了解しました。上記の方では、コードは基本的に上から処理されていくが、renderされる前に要素を取得しようとしているからエラーになるということですよね。

[miyabi_pudding]

そうです。
renderが、Reactの、テンプレートを反映することを指しているであれば、
それであっております！

[tomoharu]

了解しました。ありがとうございました！

Answer 3

let button = document.getElementById('button')の時点でページ上にid="button"の要素が無いだけでは。

Comments

[tomoharu]

迅速なご回答ありがとうございます！