Reactの特徴、理解してますか？～宣言的UIとは

Reactの最大の特徴として、「宣言的UI」という考え方があります。
この宣言的UIは、Reactの核となる哲学の一つであり、その開発体験とアプリケーションのパフォーマンスに大きく貢献しています。

では、この宣言的UIとは具体的に何を意味するのでしょうか？
この記事では、Reactの宣言的な性質について探求し、それがどのように開発者の作業を効率化し、より直感的なコードを書くことを可能にするのかを見ていきます。

命令的と宣言的の違い

Reactの宣言的UIを理解するにはまず、「命令的（Imperative）」と「宣言的（Declarative）」の違いを知る必要があります。

命令的UI

命令的UIでは、コードが「何をするか」だけでなく、「どのようにそれを達成するか」を記述します。
一連の手続きやステップを定義することで、目的の結果を得る方法です。
以下のコード例では、

要素の作成
テキストの設定
要素の追加
入力フィールドのクリア

を開発者が詳細に指定しています。

JSにフレームワークが存在する理由は、フロントエンドの規模が大きくなるにつれ、命令的UIが現実的ではなくなったためです。詳しくはこちらをご覧ください。

const addButton = document.getElementById('addItemButton');
const itemInput = document.getElementById('itemInput');
const itemList = document.getElementById('itemList');

addButton.addEventListener('click', function() {
    const newItemText = itemInput.value;

    if (newItemText !== '') {
        const newItem = document.createElement('li');
        newItem.textContent = newItemText;
        itemList.appendChild(newItem);
        itemInput.value = '';
    }
});

宣言的UI

宣言的UIでは、コードが「何を達成したいか」だけを記述し、「どのように」その結果が得られるかはフレームワークやライブラリに委ねられます。Reactは、この宣言的UIを採用しています。

開発者は最終的な目標を宣言し、その達成方法の詳細を気にする必要がありません。
Reactがその背後で必要なDOMの更新を効率的に行います。

宣言的UIの一例として、リストを表示するコンポーネントを考えてみましょう。
リストの状態を保持し、その配列をマップして各項目を表示するコンポーネントを定義します。リスト項目が追加や削除されると、単に配列を更新するだけで、ReactがUIの残りの部分を適切に更新します。

function ItemList() {
    const [items, setItems] = useState([]);
    const [newItemText, setNewItemText] = useState('');

    const handleAddItem = () => {
        if (newItemText !== '') {
            setItems([...items, newItemText]);
            setNewItemText(''); 
        }
    };

    const handleInputChange = (event) => {
        setNewItemText(event.target.value);
    };

    return (
        <div>
            <input
                type="text"
                value={newItemText}
                onChange={handleInputChange}
                placeholder="Add new item"
            />
            <button onClick={handleAddItem}>Add Item</button>
            <ul>
                // 開発者はリスト項目が追加された際や削除された際の具体的なDOM操作を一切気にする必要がない。
                {items.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    );
}

宣言的のメリット

インターフェースの可読性と保守性の向上
宣言的UIは、「何を達成したいか」に焦点を当てることで、コードの可読性を高めます。この明確さは、新しい開発者がコードベースに慣れる時間を短縮し、既存のコードの保守と理解を容易にします。
バグのリスク低減
「どのように」目的を達成するかを指定する必要がないため、副作用や予期せぬ状態変更のリスクが低減します。宣言的UIでは、フレームワークが最適な方法でUIを更新する責任を負います。
UIコンポーネントの再利用性と組み合わせやすさ
宣言的UIを使用すると、UIの断片をコンポーネントとして独立させることができます。これにより、これらのコンポーネントを異なるプロジェクトやアプリケーションの部分で再利用し、組み合わせることが容易になります。
効率的な状態管理と自動UI更新
状態の変化がUIにどのように反映されるかを明確にすることで、アプリケーションの状態管理が簡素化されます。状態が変化すると、フレームワークがUIを自動的に更新し、開発者は状態管理に集中できます。