React（初心者）: チュートリアルである関数の場所を移動させると動かなくなる件

前提・実現したいこと

React公式チュートリアルである関数を宣言する際に宣言する場を指定されるが、その場所で宣言する意味はなになのか。（下に書きますが他の場所で宣言すると正常に動作しなくなりました）
こちら公式チュートリアルURLになります。
https://ja.reactjs.org/tutorial/tutorial.html#declaring-a-winner
問題部分見出しタイトル（公式サイトの右側に表示される見出し部分のタイトル）：ゲーム勝者の判定

発生している問題・エラーメッセージ

チュートリアルによると指定の関数（calculateWinner）を「ゲーム勝者の判定」チャプターで追加するのですが、チュートリアル内ではファイルの末尾に追加するように指示されます。しかし自分は関数の追加だから先頭に追加しても一緒と考え先頭に追加してみたところうまく動作しませんでした。そのあと、指示通りに末尾に追加するとうまく動作しました。なぜ先頭に追加したときはうまく動作しなかったのでしょうか？
初歩的ではありますがご教授下さい。
コードと問題の関数部分をいかに書いています。

該当のソースコード

まずは正しいいソースコードを記載します。この場合正常に動作します。
ファイル末尾に問題の関数が書いています。（コメントアウトしてます）

javascript:index.js
1import React from 'react';
2import ReactDOM from 'react-dom';
3import './index.css';
4
5
6  function Square(props) {
7    return (
8      <button className="square" 
9              onClick={props.onClick}>
10        {props.value}
11      </button>
12    )
13  }
14
15 
16  
17  class Board extends React.Component {
18      constructor(props) {
19          super(props);
20          this.state = {
21              squares: Array(9).fill(null),
22              xIsNext: true,
23          };
24      }
25
26      handleClick(i) {
27        const squares = this.state.squares.slice();
28        if (calculateWinner(squares) || squares[i]) {
29          return;
30        }
31        squares[i] = this.state.xIsNext ? 'X' : 'O';
32        this.setState({
33          squares: squares,
34          xIsNext: !this.state.xIsNext,
35        });
36      }
37
38      renderSquare(i) {
39        return (
40          <Square 
41              value={this.state.squares[i]}
42              onClick={() => this.handleClick(i)}    
43          />
44        );
45      }
46  
47    render() {
48      const winner = calculateWinner(this.state.squares);
49      let status;
50      if (winner) {
51        status = 'Winner: ' + winner;
52      } else {
53        status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
54      }
55  
56      return (
57        <div>
58          <div className="status">{status}</div>
59          <div className="board-row">
60            {this.renderSquare(0)}
61            {this.renderSquare(1)}
62            {this.renderSquare(2)}
63          </div>
64          <div className="board-row">
65            {this.renderSquare(3)}
66            {this.renderSquare(4)}
67            {this.renderSquare(5)}
68          </div>
69          <div className="board-row">
70            {this.renderSquare(6)}
71            {this.renderSquare(7)}
72            {this.renderSquare(8)}
73          </div>
74        </div>
75      );
76    }
77  }
78  
79  class Game extends React.Component {
80    render() {
81      return (
82        <div className="game">
83          <div className="game-board">
84            <Board />
85          </div>
86          <div className="game-info">
87            <div>{/* status */}</div>
88            <ol>{/* TODO */}</ol>
89          </div>
90        </div>
91      );
92    }
93  }
94  
95  // ========================================
96  
97  ReactDOM.render(
98    <Game />,
99    document.getElementById('root')
100  ); 
101  
102  // 問題の関数部分です。末尾に追加している場合です。
103  function calculateWinner(squares) {
104    const lines = [
105      [0, 1, 2],
106      [3, 4, 5],
107      [6, 7, 8],
108      [0, 3, 6],
109      [1, 4, 7],
110      [2, 5, 8],
111      [0, 4, 8],
112      [2, 4, 6],
113    ];
114    for (let i = 0; i < lines.length; i++) {
115      const [a, b, c] = lines[i];
116      if (squares[a] && squares[a] === squares[b] &&
117        squares[a] === squares[c]) {
118          return squares[a];
119        }
120    }
121    return null;
122  }
123

次に僕が勝手に先頭に関数を追加したソースコードを記載します。
先頭部分に問題の関数部分があります（コメントアウトしています）。

javascript:index.js
1import React from 'react';
2import ReactDOM from 'react-dom';
3import './index.css';
4
5
6  function Square(props) {
7    return (
8      <button className="square" 
9              onClick={props.onClick}>
10        {props.value}
11      </button>
12    )
13  }
14
15  // 問題の関数部分です。先頭に追加している場合です。
16  function calculateWinner(squares) {
17    const lines = [
18      [0, 1, 2],
19      [3, 4, 5],
20      [6, 7, 8],
21      [0, 3, 6],
22      [1, 4, 7],
23      [2, 5, 8],
24      [0, 4, 8],
25      [2, 4, 6],
26    ];
27    for (let i = 0; i < lines.length; i++) {
28      const [a, b, c] = lines[i];
29      if (squares[a] && squares[a] === squares[b] &&
30        squares[a] === squares[c]) {
31          return squares[a];
32        }
33    }
34    return null;
35  }
36
37 
38  
39  class Board extends React.Component {
40      constructor(props) {
41          super(props);
42          this.state = {
43              squares: Array(9).fill(null),
44              xIsNext: true,
45          };
46      }
47
48      handleClick(i) {
49        const squares = this.state.squares.slice();
50        if (calculateWinner(squares) || squares[i]) {
51          return;
52        }
53        squares[i] = this.state.xIsNext ? 'X' : 'O';
54        this.setState({
55          squares: squares,
56          xIsNext: !this.state.xIsNext,
57        });
58      }
59
60      renderSquare(i) {
61        return (
62          <Square 
63              value={this.state.squares[i]}
64              onClick={() => this.handleClick(i)}    
65          />
66        );
67      }
68  
69    render() {
70      const winner = calculateWinner(this.state.squares);
71      let status;
72      if (winner) {
73        status = 'Winner: ' + winner;
74      } else {
75        status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
76      }
77  
78      return (
79        <div>
80          <div className="status">{status}</div>
81          <div className="board-row">
82            {this.renderSquare(0)}
83            {this.renderSquare(1)}
84            {this.renderSquare(2)}
85          </div>
86          <div className="board-row">
87            {this.renderSquare(3)}
88            {this.renderSquare(4)}
89            {this.renderSquare(5)}
90          </div>
91          <div className="board-row">
92            {this.renderSquare(6)}
93            {this.renderSquare(7)}
94            {this.renderSquare(8)}
95          </div>
96        </div>
97      );
98    }
99  }
100  
101  class Game extends React.Component {
102    render() {
103      return (
104        <div className="game">
105          <div className="game-board">
106            <Board />
107          </div>
108          <div className="game-info">
109            <div>{/* status */}</div>
110            <ol>{/* TODO */}</ol>
111          </div>
112        </div>
113      );
114    }
115  }
116  
117  // ========================================
118  
119  ReactDOM.render(
120    <Game />,
121    document.getElementById('root')
122  ); 
123  
124
125

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

ES6使用になります。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

当方の手元では、calculateWinnerを先頭に移動しても、問題なく動くことを確認できました。その確認の手順を、以下にて回答します。

ご質問に、

こちら公式チュートリアルURLになります。
https://ja.reactjs.org/tutorial/tutorial.html#declaring-a-winner

とありますが、そのURLのページの一番下の まとめ のセクションに、　

最終的な結果は、ここで確認することができます：最終結果

とあって、最終結果のリンク先にいくと、CodePenに作成されたサンプル

https://codepen.io/gaearon/pen/gWWZgR?editors=0010

が表示されると思います。このcodepenをFork して、かつ、関数calculateWinner を一番上に移動したコードが以下

https://codepen.io/jun68ykt/pen/NWGwoVV?editors=0010

ですが、特に問題なく動きます。

ご確認いただきたい点としては、ubeiさんのお手元にあるコードで、calculateWinnerをカット＆ペーストで移動しようとしたかもしれませんが、その際に移動元の範囲を選択するとき } が足りなくて、その結果、ペーストしたときに、コード全体として { と } の対応がとれなくなっている、ということはありませんか？

以上、参考になれば幸いです。

投稿2020/05/04 10:35

編集2020/05/05 00:38