チュートリアル：React の導入
「あなたが挑戦できる改良のアイデアを以下にリストアップしています。後ろの方ほど難易度が上がります」についての回答状況。
分かった問題
- 1. 履歴内のそれぞれの着手の位置を (col, row) というフォーマットで表示する。
- 2. 着手履歴のリスト中で現在選択されているアイテムを太字にする。
- 3. Board でマス目を並べる部分を、ハードコーディングではなく 2 つのループを使用するように書き換える。
考え中
- 4. 着手履歴のリストを昇順・降順いずれでも並べかえられるよう、トグルボタンを追加する。
- 5. どちらかが勝利した際に、勝利につながった 3 つのマス目をハイライトする。
- 6. どちらも勝利しなかった場合、結果が引き分けになったというメッセージを表示する。
暫定の答え
function Square(props) {
return (
<button classname="square" onclick="{props.onClick}">
{props.value}
</button>
);
}
class Board extends React.Component {
renderSquare(i) {
return (
<square key="{i}" onclick="{()" value="{this.props.squares[i]}"> this.props.onClick(i)}
/>
);
}
render() {
// 3. Board でマス目を並べる部分を、ハードコーディングではなく 2 つのループを使用するように書き換える。
const renderList = () => {
const listItems = [];
for (let i = 0; i < 3; i++) {
const listSubItems = [];
for (let j = 0; j < 3; j++) {
listSubItems.push(this.renderSquare(i * 3 + j));
}
listItems.push(<div classname="board-row" key="{i}">{listSubItems}</div>);
}
return listItems;
};
return <ul>{renderList()}</ul>;
}
}
class Game extends React.Component {
constructor(props) {
super(props);
this.state = {
history: [
{
squares: Array(9).fill(null),
position: null
}
],
stepNumber: 0,
xIsNext: true
};
}
handleClick(i) {
const history = this.state.history.slice(0, this.state.stepNumber + 1);
const current = history[history.length - 1];
const squares = current.squares.slice();
if (calculateWinner(squares) || squares[i]) {
return;
}
squares[i] = this.state.xIsNext ? "X" : "O";
this.setState({
history: history.concat([
{
squares: squares,
position: i
}
]),
stepNumber: history.length,
xIsNext: !this.state.xIsNext
});
}
jumpTo(step) {
this.setState({
stepNumber: step,
xIsNext: (step % 2) === 0
});
}
render() {
const history = this.state.history;
const current = history[this.state.stepNumber];
const winner = calculateWinner(current.squares);
// TODO
// 4. 着手履歴のリストを昇順・降順いずれでも並べかえられるよう、トグルボタンを追加する。
// 5. どちらかが勝利した際に、勝利につながった 3 つのマス目をハイライトする。
// 6. どちらも勝利しなかった場合、結果が引き分けになったというメッセージを表示する。
// let sortedHistory = [...history];
// sortedHistory.sort((a, b) => a.key > b.key)
const moves = history.map((step, move) => {
// 1. 履歴内のそれぞれの着手の位置を (col, row) というフォーマットで表示する。
const desc = move ?
'Go to move #' + move + '(' + Math.floor(history[move].position / 3) + ',' + history[move].position % 3 +')':
'Go to game start';
// 2. 着手履歴のリスト中で現在選択されているアイテムを太字にする。
const buttonStyle = (step == current) ? "bold" : "normal";
const fontColor = (step == current) ? "blue" : "black";
return (
<li key="{move}">
<button :="" buttonstyle="" color="" fontcolor="" onclick="{()"> this.jumpTo(move)}>
{desc}
</button>
</li>
);
});
let status;
if (winner) {
status = "Winner: " + winner;
} else {
status = "Next player: " + (this.state.xIsNext ? "X" : "O");
}
return (
<div classname="game">
<div classname="game-board">
<board onclick="{i" squares="{current.squares}"> this.handleClick(i)}
/>
</board></div>
<div classname="game-info">
<div>{status}</div>
<ol>{moves}</ol>
</div>
</div>
);
}
}
// ========================================
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<game>);
function calculateWinner(squares) {
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
return squares[a];
}
}
return null;
}
