React で条件によって表示を変えるには？
記事IT・テクノロジー
React で条件によって表示を変えるには？
React で変数の値（状態）によって表示内容を変える方法を紹介しています。React の場合は、HTML に相当する JSX の記述が Typescript (Javascript)の一部なので、Typescript(Javascript)の書き方を使って表示を切り替えます！
React は全てプログラム！
Vue の場合には、HTML の記述の部分にもプログラム的な要素を書けるようにして「_v-if_」を使って表示の切り替えをおこなっていました。 React の場合には、HTML に相当する部分（JSX）は Typescript（Javascript）の一部なので、表示の切り替えには、Typescript（Javascript）を使って切り替えます。
Typescript(Javascript)の「xxx ? OOOO : _XXXX_」を使って切り替えます。 この記述は、「_xxx_」が真（true）の場合は、「_OOOO_」、「_xxx_」が偽（false）の場合には、「_XXXX_」という処理を行う場合に使います。 今回は、この「_OOOO_」と「_XXXX_」の部分に HTML に相当する JSX の記述を入れて利用します。
以下が Typescript を利用した実装例です。
import React, { useState } from "react";
import "./styles/step6.css";
export default function Step6(): JSX.Element {
const [awesome, setAwesome]: [
boolean,
React.Dispatch<React.SetStateAction<boolean>>
] = useState(true as boolean);
return (
<React.Fragment>
<div className="step6">
<button className="btn btn-primary" onClick={() => toggle()}>
Toggle
</button>
{awesome ? <h1>React is awesome!</h1> : <h1>Oh no 😢</h1>}
</div>
</React.Fragment>
);
function toggle(): void {
setAwesome(!awesome);
}
}
変数「_awesome_」が「_true_」の場合は、「React is awesome!」を、「_false_」の場合には、「Oh no 😢」を表示するようになっています。
React の基本コンセプト
このあたりで、React の基本コンセプトを紹介しておきます。 上にも書いてありますが、React は、基本的に全て Typescirpt(Javascript)で記述するというのがコンセプトです。
表示に利用している、HTML に相当する部分（JSX）は、Typescript（Javascript）のオブジェクトになっているというのが、実は React のコンセプトの基本です。 こうすることで、全ての記述を Typescript（Javascript）で書く事が可能になっています。（CSS は別に管理する形です）
一方で Vue は、見かけ上は、表示の部分（HTML)とプログラムの部分（Typescript/Javascript）、さらに CSS を分けて記述するという方法を取っています。
このコンセプトの違いが書き方の違いに影響しています。本来の HTML には、「プログラム的な書き方」はできないないので、Vue の場合には、プログラム的な要素を書けるようにしています。一方で、React の場合は、HTML に相当する部分（JSX）をオブジェクトとして扱って、プログラムの部分は Typescript(Javascript)に任せるという方法を取っています。
したがって、React の場合の HTML に相当する部分（JSX)自体には、プログラム的な要素はありません。そういう意味では、本来の HTML に近い形と言えます。
React と Vue の学習のやり方の違いとは？
では、学習する際のポイントはというと、React を学習する際は、Typescript（Javascript）の書き方をきちんと理解している必要性が大きくなります。 理由は簡単で、実装には、Typescript（Javascript）の機能を駆使して書く必要があるからです。また、HTML に相当する部分（JSX）でも、Typescript（Javascript）で予約されている単語は利用できないので、JSX 特有の書き方が必要になります。例えば、「_class_」を「_className_」と記述するのが一つの例です。
その他にも、ボタンをクリックしたイベントの処理で関数を呼び出す際も、
onClick={() => toggle()}
のようにアロー関数を使って呼び出す必要があったり、表示の部分も HTML の表示情報（JSX）を意図的に返すように書くなど、Vue に比べると Typescript(Javascript)に関してはより深い理解度が必要になると言えます。さらに、「部品」を「_class_」を使って、Typescript(Javascript)のオブジェクトとして扱う場合には、オブジェクト指向プログラミング（Object Oriented Programming:OOP）の知識も求められます。
そういう意味で初心者の学習コストが高いと言われています。
一方で Vue の場合には、HTML、Typescript(Javascript)、CSS をそれぞれ別々に扱う形になっています。Typescript(Javascript)の部分は少し特殊な書き方をしますが、この部分は理解するというよりは、「このように書く」と覚えるような感じの部分が大きいので、React の場合に比べると、初心者にも入りやすいと言われています。
HTML に関しては、「プログラム的な要素」が必要になる部分が本来の HTML と違いますが、この部分は「慣れ」の部分が大きくなっています。
個人的な見解になりますが、Vue の場合は、HTML・Javascript・CSS を勉強しながら学んでも、比較的問題なしで学習を進められる場合が多いように思います。一方で、React の場合には、Typescript(Javascript)をある程度使いこなせない場合には、つまずいてしまう場合が多くなるように思います。そうした意味で、初心者の方には、Vue を学習しながら、HTML/Javascript/CSS を並行して学ぶ方をお勧めしています。
ある程度慣れてくると、個人的には、React の方が便利なので、今回はあらためて React による実装を紹介しています。これも、一通り Vue を学習した後で React を学習すると、初めから React を学習するよりは、理解しやすいのではと思います。
React と Vue の使い分け
機能的にはどちらも、同じような機能を提供しているので、どちらか一つを使いこなせれば Web 開発を行う事ができます。
個人的には、開発の内容によって使い分けています。 基本的に、ある程度の規模以上の開発の場合には、React を Typescript と組み合わせて開発をおこなっています。この方が、モジュール（部品）間のインターフェースのチェックをより厳密に行ってくれるので、コードの品質や管理を考えた場合に有利だからです。さらに、開発後にトラブル対応や機能の追加、改善などの際にコードを読み為す際に、型の宣言をきちんと行っている場合、開発から時間が経っている場合でも読み直すのが簡単になる点も有利な点です。また、全てのコードが Typescript(Javascript)になっているので、別のプロジェクトで一部を流用する際も個人的には扱い易いと思います。
一方で、Vue の方は、シンプルな開発の場合には、利用する場合が多くなっています。一つのファイルで CSS を含めた記述ができますし、HTML ファイルに直接埋め込んで使う場合でも、シンプルです。
いずれにしても、どちらが良いと言い切る程の差はないので、実際に両方使える方は実際に使ってみた上で決めるのが良いと思います。
そういう意味では、最初はどちらか一つを選んで「使いこなせる」というのが大きなポイントです。
この React で Vue のチュートリアルと同じ機能を実装する例は、比較する意味で余り時間も取られずに便利だと思いますので、興味のある方は ぜひ Vue と React の両方を体験してみてください。
まとめ
今回は、React で条件によって表示する内容を変える例を紹介しました。 React の場合は、全ての記述が Typescript(Javascript)のプログラムになっているので、切り替えは基本的にプログラムで行います。
ある程度、Typescript(Javascript)を使いこなしている場合には、とてもシンプルに記述する事が可能です。
React を使いこなすには、Vue の場合に比べて、Typescript(Javascript)の細かい部分の理解も必要になってきます。そういう意味では、Vue に比べると若干上級者向けと言われています。したがって、全体の学習計画も、Vue の場合とは少し違ってきます。
