質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2872閲覧

JavaScriptのmapメソッドの挙動について

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/06/01 08:38

編集2019/06/01 08:41

前提・実現したいこと

Reactチュートリアルの三目並べゲーム作成をやっていてJavaScriptのmapメソッドの動きが理解できず困っています。
下記コードのstep、moveに入る値がどの処理によって入っているのか教えてもらいたいです。
stepにもmoveにも値を代入した覚えがないので・・・
チュートリアルサイト 過去の着手の表示

該当のソースコード

javascript

1 const moves = history.map((step, move) =>{ 2 //ブレークポイントを張った行 3 const desc = move ? 4 'Go to move #' + move : 5 'Go to game start'; 6 return ( 7 <li> 8 <button 9 onClick={()=> this.jumpTo(move)} 10 > 11 {desc} 12 </button> 13 </li> 14 ) 15 });

###ソースコード全体

javascript

1import React from 'react'; 2import ReactDOM from 'react-dom'; 3import './index.css'; 4 5function Square(props){ 6 return ( 7 <button className="square" onClick={ props.onClick }> 8 {props.value} 9 </button> 10 ) 11} 12 13class Board extends React.Component { 14 renderSquare(i) { 15 return <Square 16 value={this.props.squares[i]} 17 onClick = {() => this.props.onClick(i)} 18 />; 19 } 20 21 render() { 22 return ( 23 <div> 24 <div className="board-row"> 25 {this.renderSquare(0)} 26 {this.renderSquare(1)} 27 {this.renderSquare(2)} 28 </div> 29 <div className="board-row"> 30 {this.renderSquare(3)} 31 {this.renderSquare(4)} 32 {this.renderSquare(5)} 33 </div> 34 <div className="board-row"> 35 {this.renderSquare(6)} 36 {this.renderSquare(7)} 37 {this.renderSquare(8)} 38 </div> 39 </div> 40 ); 41 } 42} 43 44class Game extends React.Component { 45 constructor(props){ 46 super(props); 47 this.state = { 48 history: [{ 49 squares: Array(9).fill(null), 50 } 51 ], 52 xIsNext: true, 53 }; 54 } 55 56 handleClick(i){ 57 const history = this.state.history; 58 const current = history[history.length -1]; 59 const squares = current.squares.slice(); 60 if(calculateWinner(squares) || squares[i]){ 61 return; 62 } 63 squares[i] = this.state.xIsNext ? 'X' : 'O'; 64 this.setState({ 65 history: history.concat([{ 66 squares: squares, 67 }]), 68 xIsNext: !this.state.xIsNext, 69 }) 70 } 71 72 render() { 73 const history = this.state.history; 74 const current = history[history.length -1] 75 const winner = calculateWinner(current.squares); 76 77 const moves = history.map((step, move) =>{ 78 const desc = move ? 79 'Go to move #' + move : 80 'Go to game start'; 81 return ( 82 <li> 83 <button 84 onClick={()=> this.jumpTo(move)} 85 > 86 {desc} 87 </button> 88 </li> 89 ) 90 }); 91 let status; 92 if(winner){ 93 status = 'Winner: ' + winner; 94 } 95 else{ 96 status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); 97 } 98 return ( 99 <div className="game"> 100 <div className="game-board"> 101 <Board 102 squares={current.squares} 103 onClick={(i) => this.handleClick(i)} 104 /> 105 </div> 106 <div className="game-info"> 107 <div>{status}</div> 108 <ol>{moves}</ol> 109 </div> 110 </div> 111 ); 112 } 113} 114 115// ======================================== 116 117ReactDOM.render( 118 <Game />, 119 document.getElementById('root') 120); 121 122function calculateWinner(squares) { 123 const lines = [ 124 [0, 1, 2], 125 [3, 4, 5], 126 [6, 7, 8], 127 [0, 3, 6], 128 [1, 4, 7], 129 [2, 5, 8], 130 [0, 4, 8], 131 [2, 4, 6], 132 ]; 133 for (let i = 0; i < lines.length; i++) { 134 const [a, b, c] = lines[i]; 135 if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { 136 return squares[a]; 137 } 138 } 139 return null; 140} 141

試したこと

ブレークポイントを張ってstepとmoveの内容を確認しました。
moveが0で
stepが {squares: Array(9)
でした。

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

node v10.15.3

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

map関数は配列の中身を一つずつ処理し、新しい配列を返す関数です。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

下記コードのstep、moveに入る値がどの処理によって入っているのか教えてもらいたいです。
stepにもmoveにも値を代入した覚えがないので・・・

historyオブジェクト(配列)のmapを実行する際、引数に関数を渡しています。
引数に渡された関数は、第一引数で呼び出し元配列の要素、第二引数でそのインデックス番号が渡されます。

ここでいうと
(step = history[0]のオブジェクト, move = 0)
(step = history[1]のオブジェクト, move = 1)
が順番に渡されてきます。

投稿2019/06/01 10:40

gentaro

総合スコア8949

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/06/01 11:06

>引数に渡された関数は、第一引数で呼び出し元配列の要素、第二引数でそのインデックス番号が渡されます。 これは知らなかったです。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問