React.jsでループするには。

自己紹介

じゅんじゅんというニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪の新2回生です👍 (2016.7.18現在)

よくstart up系イベントに行くので、大阪らへんの方は会いましょう！

では、早速。

ループ

僕自身、普段はjQuery、Vue.js、Angular.js、Riot.js、Reactなどを使っています。

その中でも、JavaScriptの配列をループで回して要素に当て込んで行きたい時ありますよね。

例えば、vue.jsなら

<ul id="app">
  <li v-for="item in items">{{item.text}}</li>
</ul>

new Vue({
  el: "#app",
  data: {
    items: [
      { text: "1" },
      { text: "2" }
    ]
  }
});

みたいなやつですね。

Angularだとどうなるでしょうか。

<ul>
  <li ng-repeat="item in items">{{item.text}}</li>
</ul>

$scope.items = [
   { text: "1" },
   { text: "2" }
 ];

こんな感じにVueにはv-forなど、angularにはng-repeatがありますね。

では、 Reactはどうでしょうか。

React.jsのJSXで条件分岐・繰り返しを記述する

こんな記事を見つけました。

他の記事をあさってみても、Reactに関してはこのループが存在しないようです。

※ あるぞボケ！って方いたらコメントしてください。。

Reactでループするには。

先ほどの記事のように、htmlを記述している場所に直接mapなどを使って描く方法があります。

Reactでは{...}の中であればJavaScriptとして認識されるようで

その中に関数を仕込みループさせる方法です。

<ul>
  {this.state.datas.map((data) => {
    return <li>{data.text}</li>;
  })}
</ul>

この方法とは別にStack over flowにもよく載っていて、Reactの開発元であるFacebook社の書き方を見てみると

render: function(){
  var list = [];

  var data = [
    { text: "1" },
    { text: "2" }
  ];

  for(var i in data){
    list.push(<li>{data[i].text}</li>);
  }

  return(
    <ul>
      {list}
    </ul>
  );
}

forなどで、先に配列に要素を追加しておいて、表示部分はその配列だけ書いとくパターンです。

fluxにおいても、後者の書き方をしていました。

facebook/flux

どちらがいいとかはないですが、参考ほどに。