React.jsに触れよう

Reactとは何かを知る

いきなりですが、

<li></li>を１０００個作成してください。

このような時、今のあなたはどのように記述するでしょうか？

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    ...
</ul>

このように1000個作成するのは流石に骨が折れますよね... しかも、本当に1000個作成できているかをもう一度数え直しますか？ なんだか機械ができそうな単純なことを自分でやるって、大変だし、そもそもエンジニアっぽくないですよね... 機械ができそうなことは、全て機械に任せるべきで、私たちはなるべくやることを減らすべきです。 しかし、HTMLでは↑の記述しかすることができません... どうすれば良いでしょう？ ここで、やりたいことを整理してみます。

<li></li>を1000個生成する

これをパソコンに対して命令できるプログラムを書くことができれば、うまくいきそうです！ これはさまざまな方法で達成できるのですが、今回は「React」を紹介したいと思います。 一度、「React」で書いた例を見てみましょう。

<ul>
    {Array(1000)
       .fill(null)
       .map((_) => (
          <li></li>
     ))}
</ul>

これだけです。 どうですか？とても簡潔に書くことができているし、確認も一瞬ですね！ 「React」は、世界中の強腕エンジニアからも愛されています。「React」が本格的に描けるようになれば、あなたのエンジニアとしてのレベルは間違いなく上がります。 「React」を学ぶモチベーションが湧いてきましたか？ それでは、次回から実際に学んでいきましょう！