Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

自己紹介

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

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

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

iotlt
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください! 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com
https://iotlt.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away