Reactって何?初心者のためのビジュアル入門

2021/02/08 09:07

Linton Ye
デザイナーのためのReactインタラクティブガイド「LearnReact.design」の創設者
この記事は、著者の許可を得て配信しています。
https://learnreact.design/posts/what-is-react

はじめに

Reactは、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。

これがReactの正式な定義です。しかし、JavaScriptに詳しくない人であればどうでしょうか?もしあなたが開発者ではなかったら?それでもReactの意味を理解(習得)できるのでしょうか?

私の答えは「YES」です。それがこの記事を書いた理由です。Reactとは一体何なのか。なぜそんなに人気があるのか?Reactがあればどんな問題を解決できるのか?

この記事では初心者向けのReactの解説をしています。Reactを本格的に学び始める前に読んでおきたい記事だと思います。Reactの核となる考え方をわかりやすく説明しています(無駄話も🌴)。JavaScriptを使った経験がないって?問題ありません!HTMLの基本的な知識(HTMLタグのフォーマットなど)があれば、楽しみながら読んで頂けるはずです。

この記事は鳥瞰図的に書いていますが、ちゃんと双眼鏡も用意しています。なぜReactが特別なものであるかという理由の全体像を見るだけでなく、実際のReactコンポーネントを書くための実践的なお話もします。JSの知識は必要ありません。

覚えておいてほしいこと: Reactのコアな考え方を理解するのに、経験豊富な開発者である必要はありません!

それでは始めましょう。

Webに関する事

まずは、みなさんが何度も耳にしたことがある「DOM」についてです。

DOMとは?

お気に入りのWebサイトのアドレスをブラウザに入力すると、コンピュータは遠く離れた別のコンピュータ(一般的にはサーバと呼ばれる)と通信を始めます。通常は、あなたのコンピュータがいくつかの情報を要求するとサーバが応答します。

あなたのコンピュータ:ねぇ、このランダムサイト learnreact.designのいいところは?

サーバ:ちょっと待って。あなたのために何かを掴んでみます。ピーピー。

サーバのレスポンスの主な部分には、通常次の3つの項目が含まれています。それはHTML、CSS、JavaScriptです。

HTMLはWebページの内容を一覧にして、そのストラクチャーを説明します。見出しや段落の数は?ユーザーはどのような画像を見るべきか?このボタンとテキストボックスは同じボックスに含まれているか?などです。

こういった情報を使って、ブラウザは DOM と呼ばれるものを作成します!

ちょっと待って、DOM は ........ 木なのです。そう、木です。不思議なことに、コンピュータの中の多くのものが木のように見えるのです。この大好きな木にニックネームをつけてみましょうか.....そうだな、Domo はどうでしょう?

Domoは有名なアートスタジオ「Web Browser」でモデルとして働いています。彼の仕事は肖像画(ものすごい数の肖像画かもしれません)を描くアーティストの前でポーズをとることです。

実は、DOM というのは Document Object Model の略です。これは確かにモデルです。つまり、ドキュメント(Webページ)のモデルです。DOMはポーズをとります。ブラウザは肖像画を描きます。肖像画とは、私たちがWebページ上で見ているものです。具体的にはテキストボックス、段落、画像などです。開発者の仕事はディレクターのようなもので、DOMOに何を着て、どんなポーズをとるべきかを指示します。この指示が最終的にどのような肖像画になるかに影響します。

デスクトップブラウザを使用している場合、DOM がどのように見えているかを調べるには、このページを右クリックして「検査」を選択してください。Elements タブの意味が分かりますか?

DOM API

私たちはWebページをダイナミックでインタラクティブなものにしたいと考えることがあります。つまり、テキストをあちこちに追加したり削除したり、モーダルを表示したり、サーバから送られてくる新しいデータに基づいてチャートを更新したりと、コンテンツは時々刻々と変化します。

Webページの内容を変更するには、DOM を更新する必要があります。絵描きは、Domo が新しいポーズを取るまで、新しい肖像画を描くことができません。

どうやってDomoに新しいポーズを取らせるのでしょうか?

ただ話しかければいいだけです。 Domoは聞いてくれます。興味深いことに、Domo の耳には DOM API という名前が付いています。

DOM を操作するには、開発者はDOM APIと通信するJavaScript でコードを書き、Webページのコンテンツを更新します。

加速する複雑さ

Domo と直接通信することは、特にWebコンテンツがほとんど静的なものであった時代には、何年も前からWeb開発の標準的なアプローチでした。開発者は、少量の JavaScript コードを書くことで、静的なページの上にインタラクティブな機能を散りばめていました。

しかし、GmailやGoogle MapsのようなSPA(シングルページアプリケーション)の出現により、人々はより多くのことを期待し始めました。静的なWebページではなく、インタラクティブで高速、かつレスポンシブなWebアプリが求められています。

Webアプリを構築するために必要なコードは、ますます大規模かつ複雑になっています。多くの場合、多くのチームメンバーの協力が必要になります。

従来のアプローチは機能しなくなりました。常にDomoと直接通信するのは、混沌としていて非効率的になります。

Reactのコアな考え方

それではスーパーヒーロー「React」を紹介します。

Reactを使うと、開発者が直接Domoに話しかけることはなくなります。Reactは開発者とDomoの間のエージェントとして機能します。コミュニケーションを円滑にし、肖像画作成のプロセスを合理化してくれるのです。

React は JavaScript のコードで構成されています。ほとんどの場合、DOM API と直接連携する必要がなくなるように作られています。その代わりに、私たちはよりシンプルなコードを書き、React はフードの下で DOM との通信を処理します。

React は、どんどん複雑化するWeb開発に打ち勝つためのものすごい力を持っています。

  • コンポーネント
  • 宣言的UI
  • リアクティブ DOM アップデート

これらの用語に恐怖を感じても、屈してはいけません。冒頭で約束したように、簡単な英語と説明で分かりやすく説明いたします。私を信じてください!そんなに難しいことではありません!

ちょっと続きを読んでください!

コンポーネント

コンポーネントはReactのフラッグシップ機能です。コアとなる考え方は、「divide-and-conquer(分割統治)」というシンプルな戦略に基づいています。ある問題を一度に把握するのが難しい場合は、もっと小さな問題に分割し、1つずつ解決していき、その結果を組み合わせていくということです。

Reactでアプリを構築する作業は、ほとんどすべてがコンポーネントを使った作業になります。アプリをコンポーネントに分解し、仕事に最適なコンポーネントを見つけ、別のコンポーネントと組み合わせ、既存のコンポーネントから新しいコンポーネントを作成します。

最近では、FramerやFigmaなどのデザインツールにもコンポーネントがあります(Sketchのシンボルも)。後者の方がよりフレキシブルで強力であることを除けば、Reactのコンポーネントとよく似ています。実際、デザインツールにおけるコンポーネントのインスピレーションは、ソフトウェア工学におけるコンポーネントから直接得たものです。一度コンポーネントを作成すると、そのコンポーネントの複数のインスタンスを作成することができます。それを使って他のコンポーネントを構築することができます。コンポーネントを変更すると、そのコンポーネントを含むすべてのものが自動的に更新されます。

Reactのコンポーネントには次の2つの重要な特性があります。

1.コンポーネントはコンポーザブルで、再利用するために作られています。他のコンポーネントと一緒に新しいコンポーネントを作ることができます。
2. コンポーネントはお互いに独立しています。ある場所でコードを変更しても、他のパーツが壊れることはありません。

抽象的な内容だと思うかもしれませんが、心配しないでくださいね! 近いうちにいくつか例を出して、これらのプロパティについて詳しく説明します。

宣言的UI

命令的 VS 宣言的

DOM API と直接連携する場合、どの要素を適切なタイミングと順序で変更するかを指定しなければなりません。これは、Domo に頭、腕、足をどんなポーズにするか、肖像画ごとに段階的に説明するのと同じです。

ちぇっ、面倒くさそうだし、失敗しそうだなと思った方も多いのでは。ポーズの取り方ではなく、Domoにどうして欲しいかを伝えればいいのではないでしょうか?実際、これはまさにReactでUIを構築する方法です。開発者は欲しいものの簡単なスケッチを描きます。ReactはそれをDomoに教えてどういうポーズを取ればいいかを説明します。

私たちが構築しているアプリはダイナミックなので、Domoに素早くポーズを変えてほしい時もよくあります。たくさんのスケッチを描き、それを山のように積んでReactに渡します。React はこれらのスケッチを積み重ねて、パラパラ漫画のようにめくります。ダイナミックなUIが実現するのです!

技術用語では、コードがどのようにして欲しいかを定義している場合は命令的であり、何をしたいかを定義している場合は宣言的です。DOM API と直接連携する従来の方法は命令的で、React のやり方は宣言的です。

命令的プログラミングは、コンピュータが原始的であった時代に生まれました。どこに数字を格納するか、どのように乗算するかなど、詳細に指示しなければなりませんでした。しかし、これでは手に負えなくなり、人々は問題の定義を詳細な命令に変換するスマートなソフトウェアを書きました。そういった流れで宣言型プログラミングが誕生しました。

仮想DOM

開発者の仕事を楽にするだけでなく、Reactでの宣言型プログラミングはパフォーマンスの最適化にもつながります。

Reactが事前にすべてのスケッチを持っていれば、それらを整理して重複した分を取り除き、Domoと絵描きができるだけ作業を少なくできるようにすることができます。

これらのスケッチは仮想DOMと呼ばれています。仮想DOMの操作は、DOMよりもはるかに高速です。開発者はDOMを直接管理するのではなく、ほぼ想DOMを使って作業します。Reactは、遅いDOMを管理するという大変な作業を処理します。

リアクティブなDOMのアップデート

同じポーズの異なるバリエーションを表現するために、スケッチの中にプレースホルダを残しておくことができたとしたら、最高じゃないでしょうか。そうすれば、誰かが違う帽子をかぶったドーモの肖像画を要求してきても、Reactに再度伝える必要はありません。ただ座っているだけで、React に変更してもらうことができます。

この仕組みがReactの名前の由来になっているのです。React で構築された UI はリアクティブです。これは、基礎となるデータの変更に DOM が "反応(リアクト)" しているように見えるということです。つまり、データを追跡する必要はありません。DOM をいつ更新するかのタイミングも心配する必要はありません。自動的に(Reactによって)更新されるだけです。リアクティブUIという考え方は、UI開発を大幅に簡素化したのです。

appstore
googleplay
会員登録

会員登録して、もっと便利に利用しよう

  • 1.

    記事をストックできる
    気になる記事をピックして、いつでも読み返すことができます。
  • 2.

    新着ニュースをカスタマイズできます
    好きなニュースフィードをフォローすると、新着ニュースが受け取れます。