スポンサーリンク

JavaScript map

履歴表示

※Reactを学習したい人は「Reactチュートリアル」で学習してみてください。このブログはこのチュートリアルで感じたことや自分のメモを記述していきます。

タイムトラベル機能実装のためコンポーネントBoardからGameへクリック情報などを移動した。次は履歴情報を表示する。Gameのrenderメソッドを次のように変更する。

map命令

ここで注目したいのは6行目から始まるmap命令だ。

JavaScriptのmap命令は配列を1件ずつ処理しながら新たな配列を作成する命令だ。またまたReactではなくJavaScriptのお勉強になるが、今風の命令らしく面白そうなので少々深堀してみる。

次のコードで動作を確認する。

3行目のconsole.logの結果

6行目のconsole.logの結果

今回はこのmapを利用して履歴の数だけ <li&gtタグを作成している。

今まではfor文などで実現してきたが、これが今風の書き方?なのかもしれない。気のせいか記述するのが楽に感じだ。

keyタグ

Reactは高速描画を実現するためHTMLの変更を検知する必要がある。このため <li&gtタグに見慣れないkey属性が記述されている。

動的にリストを作成する場合にはReactが変更を検知しやすいように、key属性に<li&gtタグ毎にユニークな値を設定しなければいけない。

ここから推測するとkey属性を適切に設定しなければ、リスト内容が変更されない不具合が発生すると思われる。このような不具合は作成側からすると見落としがちになり、やっかいなものだ。

実行する

コンポーネントGameのrenderメソッドを書き換え実行する。

無事に履歴が表示された。さぁ次に進もう!

前へ<ーーー>つづく

タイトルとURLをコピーしました