2022/07/03

2023/08/06

【初心者向け】Reactとは？使うとどういうことができるの？

JavaScriptを使用する際、よくセットで扱われるライブラリの一つが「React」です。

JavaScriptのフレームワークやライブラリの中でもトップレベルのシェアを誇っていますが、「なぜReactは人気なの？」と疑問を抱いている方も多いでしょう。

今回は、初心者の方に向けて、Reactとは何か、どういったことができるのかをわかりやすく解説していきます。

Reactとは？

ReactはJavaScriptのライブラリで、Meta（旧Facebook）社によって提供されています。

ライブラリとは、特定の機能の実装を手助けしてくれる便利技術のこと。端的な処理やコード量を簡略化でき、開発の負担を圧倒的に減少させられるというメリットがあります。

Reactも例にもれず、開発作業を効率化してくれる便利な技術です。具体的には、UI部品の設計・実装を大きく支援してくれるのが最大の利点だと言えます。

少し難しい言い方をしましたが、要するにHTMLの構造を追加したり、操作したりするのに長けているということです。

Reactの使用例

例えば、標準的なJavaScriptの機能を用いてHTMLの要素を追加するには、以下のようなコードを書く必要があります。

let table = document.createElement("table");
let tbody = document.createElement("tbody");
let tr = document.createElement("tr");
let th = document.createElement("th");
th.textContent = "hogehoge";
tr.appendChild(th);
tbody.appendChild(tr);
table.appendChild(tbody);

さて、これを実際に実行すると、どういったHTMLの構造になるかわかるでしょうか。非常に見にくいコードですが、実行してみると、以下のようなtable要素の構造を示していることがわかります。

出力できているので開発的にはうまくいっているものの、コードの内容は変数も多く、どこか一つ変更するだけでも大変そうですよね。

一方、同じような処理をするためにReactを使用すると…

class Table extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            text: "hogehoge"
        }
    }

    render(){
        return(
            <table>
                <tbody>
                    <tr>
                        <td>{this.state.text}</td>
                    </tr>
                </tbody>
            </table>
        )
    }
}

とてもメンテナンスしやすそうなコードに様変わりしましたね。

特に、HTML要素を追加するための処理が書かれているこの部分。

render(){
    return(
        <table>
            <tbody>
                <tr>
                    <td>{this.state.text}</td>
                </tr>
            </tbody>
        </table>
    )
}

通常のJavaScriptで書くコードとは違い、tableの構造を、まるでHTMLファイルに直接記述しているように、見やすく書かれています。このように、Reactを使えばJavaScriptのデータに直接HTMLタグの書式で定義できるため、直感的にHTML要素を作り上げられるのがポイントです。

この記事はあくまでも紹介記事なので、詳しい解説まではできませんが、視覚的にわかりやすいコードを書くことができるというメリットは以上の例からでも十分に理解してもらえたのではないでしょうか。

Reactで何ができる？

Reactを扱うと、以下の3つの項目が実現できるようになります。

仮想DOMによる軽量化
情報の変更, 更新を簡略化
コンポーネント内で処理を一元管理

各項目について、詳しく見ていきましょう。

仮想DOMによる軽量化

Reactにおいて、最大の特徴とも言えるのが”仮想DOM”の存在です。

仮想DOMの概念を理解するためにも、まずはDOMが一体何なのかを知っておく必要があります。

DOMとは、簡単に言えばHTML上のタグや、それに含まれている属性などのデータを、一つのオブジェクトとしてJavaScriptなどのプログラミング言語で扱えるようにする技術です。

DOMという概念が確立されているからこそ、JavaScriptからHTMLのidやclassを変更できたりするわけですね。

では、仮想DOMの仮想とは一体何を指しているのか。

そもそも、通常のJavaScriptで行われるDOMの処理は、DOMの情報を直接的に書き換えることによって成り立っています。

わかりにくいかもしれませんが、例えばdivタグのclass名を変更する処理を実行した場合は、HTMLファイルを編集してclass名を変更するようなイメージでclass名が変わるのです。

直接記述を書き換えるわけなので、当然ながら少しばかり処理が重たくなってしまうこともあります。

こういったDOMの在り方を、リアルDOMと呼びます。

一方で仮想DOMは、リアルDOMと違い、DOMのデータを仮想的にページ上に描画しています。

リアルDOMがHTMLファイルに直接情報を書き込んでいるイメージであるならば、こちらは直接情報を書き込むのではなく、間接的にHTML構造のデータをブラウザに渡し、それをあたかもHTML上の要素であるかのように見せているわけです。

主体はただのJavaScript上のデータなので、データの中身を変更すれば、DOMの情報を自由自在に変更することができます。リアルDOMの在り方はそのままに、中身をデータとして保持しているイメージですね。

つまり、データを操作するだけで情報を変更させられるため、より軽量な処理を実現することができるということです。

情報の変更, 更新を簡略化

前述のとおり、Reactは仮想DOMを用いることで、DOMの情報をデータとして取り扱うことを可能としています。実は、冒頭で示したコードにも、それを証明する箇所があります。

この部分です。

this.state = {
    text: "hogehoge"
}

// ・・・・・・

<td>{this.state.text}</td>

この状態でDOM要素を描画すると、td要素の中に「hogehoge」という文字列が追加された状態で表示されます。すなわち、this.stateという値の中で定義したデータを表示しているというわけですね。

このthis.state.textの値を、以下のように「hoge2」などに変更すると、仮想DOM内に入れ込んでいるデータが更新され、「hogehoge」から「hoge2」に文字列の値が変更されるのです。

// setState()はstateの値を
// 追加・変更する関数
this.setState({
    text: "hoge2"
});

こういった処理をJavaScriptで行おうとすると、以下のような形でDOM操作を行う必要があります。

JavaScriptのDOM操作

let td = document.querySelector("td");
td.textContent = "hoge2";

今回に関しては文字列1つを変更するだけなので簡単に書けるものの、変更する内容が膨大になればなるほど、通常のDOM操作の記述ではコード量が増えてくるのです。

stateの説明は長くなってしまうので、ここではあまり深くまでは解説しませんが、俗にいうDOM操作をするよりも処理を簡略化できるのは大きな魅力でしょう。

コンポーネント内で処理を一元管理

Reactは、コンポーネントで処理を管理できるのも特徴です。コンポーネントは部品という意味の用語で、Reactの場合はUI部品を定義するためのオブジェクトを指します。

サンプルコードでは、

class Table extends React.Component{
    // ここに処理を記述
}

この部分でコンポーネントの定義を行っているわけです。コンポーネントという呼び方をしていますが、基本的にはJavaScriptの「class」と実態は変わりません。

constructorを用いてオブジェクト内の値を定義することもできれば、独自関数などの定義も当然ながら可能です。

UI部品の処理を一つのオブジェクトにまとめて記述できるので、Reactで作られたJavaScriptプログラムはメンテナンス性が高く、高品質になりやすい傾向にあります。

Reactの将来性

Reactをはじめ、一時トレンドになった技術も、その後の状況によっては一過性の技術になってしまう可能性は否定できません。

トレンドの技術ばかり学習する方は多いですが、数年後に需要が維持されている保証はどこにもないため、トレンドばかり学んでいると、学習した内容が数年後には一切価値のないものになってしまう恐れがあるのです。

ではReactの将来性はどうかというと、結論としてはReactには将来性があると言えます。

React自体が完成度の高いライブラリであり、スマートなUI部品の管理手法として、今後はjQueryと同等もしくはそれ以上の定番ライブラリになっていくでしょう。

また、Reactの技術を応用して設計された、React-Nativeというアプリケーション開発用のフレームワークも、現在急速に需要が高まっています。当然ながら、Reactライブラリもそれにつられて高いシェアが維持されると予想できるのです。

高い頻度でアップデートが繰り返されているのも特徴的で、ユーザの声をいち早く反映し、機能をより最適なものへと昇華させています。

このことから、現在よりも高いレベルのライブラリが将来的に提供され始める可能性が非常に高いのも、Reactの将来性を物語っている要素だと言えます。

まとめ

Reactは現在需要が高まっているJavaScriptライブラリであり、React-Nativeと合わせて今後はさらに需要が急増していくことが予想されます。

JavaScriptを勉強中、あるいはワンステップ上の技術習得を検討している方は、Reactを積極的に学び、開発に利用してみるのがおすすめです。