こんにちは、財前です。
この記事では、Webのフロントエンド開発の主流になりつつあるReactとは何なのかについて説明していきます。
自分は約３年前から仕事やプライベートでReactを使い始めたのですが、Reactを使い始めたばかりの頃は、基本的な仕組みを理解していないがために、躓くことが多くありました。
そんな昔の自分に向けて、そしてこれからReactを使って開発をしていく方々に向けて、そもそもReactとは何なのかを、できるだけ噛み砕いて分かりやすく説明していければと思います。
一言で言うと、Reactとは
一言で言うとReactは、
JavaScriptだけでWebサイトの画面を作る仕組み
です。
これがどういうことかを理解するには、まず、Reactを使わない場合のWebサイト作成について知っておく必要があります。
Reactを使わない場合のWebサイト作成
Reactなどを使わず、普通にWebサイトの画面を作る際は、HTML・CSS・JavaScriptという３つの言語が使われることは、知っている方も多いと思います。
簡単に説明すると、以下のようなものです。
（もう既に知っている方は、読み飛ばしてください）
HTML
HTMLは、Webサイトの画面の見た目を表す、最も基本的な言語です。
どういった構造で、どんな要素を画面に表示するのかを記載します。
もう少しHTMLに関して知りたい方は、以下の過去記事を読んでみてください：
CSS
上記のHTMLさえあれば、基本的にはWebサイトの画面は作れます。
しかし、HTMLだけで作られたサイトの画面は、色味のない、何だか味気ない画面になるでしょう。
CSSという言語は、HTMLで作成された画面にスタイルを追加する言語です。
文字に色を付けたり、ボタンを丸くしたり、背景画像を付けたりすることもできます。
CSSで素敵なデザインを記述することで、オシャレで使いやすい画面を作ることができます。
JavaScript
さて、上記の２つの言語があれば、基本的にはWebサイトの画面を作ることができます。
HTMLで画面に配置する要素の種類や、基本的な配置を記述して、CSSで細かいレイアウトやデザインを決めていきます。
ただ、上記の２つの言語は、プログラミング言語ではありません。
HTMLはマークアップ言語などと呼ばれます。
なぜHTMLやCSSがプログラミング言語ではないのかと言うと、「処理を記述する」ための言語ではないからです。
少しややこしい話になってしまいますが、HTMLやCSSは、あくまで画面の見え方を記述しただけの言語であり、コンピューターが実行する処理を順番に記述しているわけではありません。
その為、たとえば、「画面から入力された日付が、本日の日付よりも前の日付であれば、エラーメッセージを表示する」というような複雑なことを行いたい場合、HTMLとCSSだけで実現することはできません。
こういったことを記述するためには、コンピューターに行わせる複雑な処理を記述するための「プログラミング言語」が必要になります。
Webの画面上（Webブラウザ上）で動かせるプログラミング言語としては、一般的に、JavaScriptというプログラミング言語が用いられます。
Webサーバーが、ユーザーの端末内のWebブラウザに対して、HTMLを送信しますが、それと同時にJavaScriptというプログラムを送信することで、より複雑な処理を行わせることができるのです。
JavaScriptのことをもう少し知りたい方は、以下の過去記事を少し読んでみてください：
Reactは何をやっているか
さて、HTML・CSS・JavaScriptについておさらいをしたところで、Reactが何をやっているのかということに関して説明していきたいと思います。
基本的には、HTML・CSS・JavaScriptという３つの言語をWebブラウザは扱えるわけですが、この３つの中で、最も複雑な処理を記述できるのは、どの言語でしょうか。
おそらく多くの人が、JavaScriptと答えるでしょう。
また、ブラウザが扱えるHTML・CSS・JavaScriptの中では、JavaScriptが唯一のプログラミング言語です。
日頃から様々なプログラムを書いているプログラマーの人達にとっては、この３つの言語の中では、プログラミング言語であるJavaScriptが、最もなじみがあって、直感的に処理を記述できる言語と言えると思います。
（少なくとも僕はそうです…）
そんな背景もあって、HTMLやCSSは、あまり融通が利かない、思うように処理を記述することが難しい場合が多い言語だったりします。
（オリジナルの処理を自由に書くというよりも、あらかじめ仕様として用意された処理しかできないようなイメージです…）
というわけで、
「JavaScriptだけでWebサイトの画面が作れたら、超素晴らしいのになぁ～～～！」
という思いが出てくるわけですが、
そんなプログラマーたちの夢をかなえてくれるのが、
React等のフロントエンドフレームワークです。
通常のWebサイト作成ではHTMLやCSSを書いて実装していた部分も含めて、「全部JavaScriptで書いてしまえ！」ということができます。
実は結局のところ、React自身も、JavaScriptで書かれたプログラムに過ぎません。
そのため、実はReactを使わなくても、Reactと同等のことを自力で実現することも、理論上はできます。
（大変なので、基本的には自力で実装する必要性はありませんが…）
なぜHTMLなどをほとんど用いずに、JavaScriptだけでWebサイトを作れるのかと言うと、JavaScript自体の機能として、
- HTMLの要素（DOMと呼びます）を生成する
- HTML要素（DOM）のスタイルを変更する
という機能が用意されているからです。
つまり、私たちが今までHTMLやCSSとして記述していた命令は、JavaScriptとして書くこともできるのです。
ただ、大きなWebサイト全体を、一からJavaScriptだけで作ろうとすると、膨大なJavaScriptのプログラムを書く必要があります。
その為、一からJavaScriptを記述しなくても済むように、基本的な仕組みをあらかじめJavaScriptで書いてくれてある。そんなJavaScriptプログラムの塊が、Reactです。
JSXとは
さて、ReactでWebサイトを作ろうとすると、必ずJSXという構文に出会うと思います。
自分は以前、この記事でここまで説明してきたような基本的なことの理解が浅い状態でこのJSXと出会い、とても苦戦した記憶があります…笑
JSXは、一見すると、HTMLのような構文です。
JSXがどんなものか見たことがない方は、以下のReact公式ページを少し覗いてみてください：
JavaScript内に、HTMLが埋め込まれているような、奇妙な記述が確認できると思います 笑
「なんだよ！結局HTML書くのかよ！」
と思われた方、
違うんです。
そうじゃないんです。
僕も昔思いました…
「え？？ こんな偽物のHTMLみたいな構文書くんだったら、最初から普通のHTML書いた方が早くない？？」
と…
ただ、このHTMLみたいな構文、
HTMLのように見えて、HTMLじゃないんです…
HTMLじゃないなら、何なの？
というと、
しいて言うなら、
これはJavaScriptです。
先程、JavaScriptの機能として、
- HTMLの要素（DOMと呼びます）を生成する
- HTML要素（DOM）のスタイルを変更する
というものがある、と言うことをお話ししましたね。
実はこのHTMLモドキのような構文が、「HTMLの要素を生成する」というJavaScriptの構文に、事前に変換されるのです。
ちょっと複雑ですが、このHTMLモドキのJSXという構文は、そのままではWebブラウザ上で処理することはできません。
Webブラウザに送信するより前に、事前にJavaScriptに変換が行われるのです。
（Reactの勉強をしていると、Babelというものを聞いたことがあるかもしれませんが、このBabelというのが、変換を行います。）
つまり、このJSXという構文を書いておけば、
- JavaScriptがHTML要素を生成したり
- JavaScriptがスタイルを変更したり
といった処理を、簡単に書くことができるのです。
つまり、Webサイトの画面を描画するための全ての処理を、HTMLやCSSを記述せずに、JavaScriptだけで表現することができるようになるのです。
ただ、JSXに慣れないうちは、
「これの何がうれしいの？普通にHTMLとかCSS書けば良くない？」と思われるかもしません。
ただ、慣れてくると、とても使いやすく、もう後戻りはできなくなります…
Reactを使うメリット
普通にHTML・CSSを記述するのに比べて、Reactを使うメリットは以下のようなものがあると思います。
JavaScriptでしか記述できない処理を含めた「コンポーネント」を作れる
Reactでは、「コンポーネント」という単位で、画面上に表示するための部品を作ることができます。
このコンポーネントは、本来であればHTML・CSS・JavaScriptの３つをフルに使わなければ表現できないような機能を持たせることができます。
たとえば、「JavaScriptでしか表現できない複雑な入力チェック機能を持った、入力欄」のようなものも、コンポーネントとして作成し、Webサイト内の複数の場所で使いまわすことができます。
本来であれば、HTMLで入力欄を記述し、CSSにスタイル情報を書き、JavaScriptでしか書けない入力チェックはJavaScriptで書く…
というように、複数の言語を使って、複数個所に分散させて記述する必要がありました。
ただ、Reactコンポーネントというものを記述すると、全てを、JavaScriptの世界の中で、１か所にまとめて書くことができます。
画面上の１つの部品に関する記述は、１か所にまとめて書いてあった方が、人間の直感に合っていて、プログラムが整理しやすくなると思います。
（HTMLとCSSとJavaScriptがバラバラに書いてあると、それぞれの関連性を追うのがとても大変です…）
その他にも、Reactを使うことには多くのメリットがあります。
この記事内では深くは触れませんが、たとえば以下のようなメリットがあります：
- Reactの「仮想DOM」という仕組みにより、DOMが更新される頻度を最低限に抑え、パフォーマンス向上が見込める
- ReactでStateを管理することにより、コンポーネントの状態に応じた挙動を記述しやすくなる
- 必ずReact経由でDOMを操作することにより、特定のDOM要素に影響を与える箇所が特定しやすい（複数個所からgetElementById等をされて、処理が複雑化する心配がない）
上記のようなことは、Reactで開発を進めていくうちに感じていくことかと思います。
まずは、そもそもReactとは何なのかということをざっくり分かって頂くことによって、今後の開発がしやすくなれば良いと考えています。
この記事が、Reactを使い始めたばかりの方々のお役に立てば幸いです。
最後まで読んで下さり、ありがとうございました！
コメント