宣言的UIとは？ #React

React、Angular、Vue.js、Flutterなどの開発が多くなっています。
それらフレームワークを利用した開発を行うためには、必ず「宣言的UI」という言葉をよく目にします。
でも「宣言的なUI」って何だ？、と思ったままにしている方もいるかと思いますので、「宣言的なUI」について簡単に書いていきたいと思います。

「UI」とは

まず「UI」という言葉についてですが、これは難しくないですね。
「User Interface」の略、つまり、システムの利用者から見た見た目や入力、主に画面のことですね。

宣言的UIってそんなにいい？

そもそも、UI部分はテストがしにくく、JavaScriptのロジックとUIが絡み合っていたり、
サーバーサイドのviewとスクリプトが絡み合ったりしていて、UIに関するロジックと純粋なUI部分を絡めなければテストをすることができないことがほとんどです。

そこで切り離してもっとテストしやすく、ロジックをスマートにできないかというHumble Objectパターンというソフトウェアのデザインパターンが考えだされ、宣言的UIも生まれました。
Humbleとは「控えめ」という意味で、テストしにくいロジックとテストしやすいロジックを分離し、テストにくいロジックが控えめになるよう分割すべきというものです。

宣言的UIを簡単に説明すると、UIが「こんな感じで表示されるよ」と宣言（定義）することで、「最終的に実現したいこと」を記述するアプローチです。
本来は、UI部分のロジックを読み解かないとどのように画面が表示されるのかイメージできないが、ロジックを読み解くことなく直感的に画面に表示されるイメージを持てることが宣言的UIの特徴の一つです。
このように画面の最終的に表示されるイメージができる状態であれば、従来まで画面に組み込まれてきたロジック部分が分離され、その部分だけをテストすることや、ロジックの可読性も向上していいことばかりですね。

「宣言的」とは

前述で宣言的UIとは何かを簡単に説明いたしましたが、まだちょっと分かりづらい思います。

そこで、実際のコードを見てみましょう。
宣言的UIを採用しているフレームワークは色々ありますが、ここではReactで書いたコードを見てみます。
カレンダーを表示するサンプルコードです。

Reactでのサンプルコード

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

function MyApp() {
  const [value, onChange] = useState(new Date());

  return (
    <div>
      <Calendar onChange={onChange} value={value} />
    </div>
  );
}

export default MyApp;

これと同じような事を、従来のUI（命令的UI）でコードを書いてみると以下のようになります。
ここでは、JavaScriptで書いたコードを見てみます。
同様に、カレンダーを表示するサンプルコードです。

JavaScriptでのサンプルコード

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href='fullcalendar/main.css' rel='stylesheet' />
    <script src='fullcalendar/main.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

ここで、カレンダーを描画しているコードに注目してみます。

宣言的UI（React）の部分をピックアップします。

  return (
    <div>
      <Calendar onChange={onChange} value={value} />
    </div>
  );

宣言されたコードから、どのようなものがUIに表示されるかすぐにイメージできますよね。
これが宣言的UIの力です。

さて、次は従来のUIである命令的UI（JavaScript）の部分をピックアップしてみます。

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

命令的UIで書かれたコードだと、ロジックを読み解かなければ、どのように画面に表示されるかをイメージすることは困難です。
また、ロジックと表示が切り離せず絡み合っているため、ロジックの部分だけをテストすることや、表示以外の処理がどのような処理があるのかもわかりにくくなってしまっています。

あらためて、宣言的はわかりやすい

宣言的UIが「最終的に実現したいこと」を記述するアプローチであることが、これらでも分かって頂けたのではないでしょうか。
「宣言的」によってUIコードを 「UIのイメージをそのままに実装」 しています。

一方、「従来のUI」では、 「UIのイメージを命令順に実行して実装」 しています。

「宣言的UI」で実装されたコードの方が、直感的で分かりやすいですね。

まとめ

React、Angular、Vue.js、Knockout.js、Next.jsなどといったWEBシステム開発における宣言的UIなフレームワークもあれば、モバイル開発（iOS/Android）における宣言的UIなフレームワークであるFlutter、JetpackCompose、SwiftUIなどもあります。

エスプリフォートは、トレンドである宣言的UIによる開発を当たり前に行っています。
今回は宣言的UIのご紹介でしたが、他にも多くのアーキテクチャを取り入れた実績もありますので、今後も色々とご紹介していきたいと思います。