はじめに
Reactについて今までは感覚的に使い方を覚えてきましたが、一度基礎から見直して理解を深めようと思いました。
今回はその備忘録です。
Reactとは？
Meta（旧Facebook）によって開発されたオープンソースのフロントエンドJavaScriptライブラリで、2013年にオープンソースとして公開されました。Reactにはいくつかの特徴があります。
1. コンポーネントベース
コンポーネントベースのアーキテクチャにより、小さな部品（コンポーネント）を組み合わせることで複雑なUIを構築、管理することができます。
2. 仮想DOM
通常のDOM（Document Object Model）を操作する場合、処理が遅いため、大量に更新する際はパフォーマンスが落ちてしまいます。Reactでは、通常のDOMをコピーした仮のDOMを使用し、差分検出によって変更のあった箇所だけを更新することでレンダリングを高速化し、効率的にUIの更新ができます。
3. 宣言的なUI
「UIをどう操作するか」ではなく、「状態に基づいて、どのようなUIを表示するか」を宣言的に記述することで、状態が変わる際にUIの更新が自動的に処理されます。宣言的な記述によってコードが直観的に理解しやすくなり、コードの可読性や保守性に繋がります。下記はその一例です。
import React, { useState } from 'react';
function Sample() {
const [showText, setShowText] = useState(false);
return (
<div>
<button onClick={() => setShowText(true)}>表示する</button>
{showText && <p>こんにちは！</p>}
</div>
);
}
export default Sample;
JSX(Javascript XML)について
Reactのコンポーネントを記述する際、ほとんどの場合JSXで書かれています。JSXはJavaScriptの拡張構文で、JavaScriptのファイル内でHTMLのような構文が書けるようにするものです。下記のコードのように、JavaScriptのコードの中でタグを直接書くことができます。
const text = <h1>Hello World!</h1>
また、中括弧{}を使用することで、JavaScriptの式を埋め込んで動的に生成することができます。
const name = '田中';
const text = <p>こんにちは、{name}さん</p>;
JSXはブラウザで実行されないので、実行前にBabelなどのトランスコンパイラを利用して通常のJavaScriptに変換しています。
const text = <h1>Hello World!</h1>
上記のコードがトランスコンパイラで通常のJavaScriptに変換されると、下記のコードになります。
const text = React.createElement("h1", null, "Hello World!");
JSXはReactの宣言的な記述に大きく関わっており、コードの可読性、保守性などに貢献していることが分かります。
まとめ
Reactについて振り返りましたが、感覚的に理解していた部分が思っているより多かったと気付くことができました。現在のフロントエンド開発ではReactを使用して開発することが多いので、感覚的に理解している部分を減らしていきたいです。
参考資料
採用拡大中！
アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドのエンジニアを募集しています！
少しでも興味ある方は、カジュアル面談からでもぜひお気軽にお話ししましょう！
お問い合わせはこちらから↓
https://official.assisteng.co.jp/contact/