2023/06/28に公開
2023/12/30
近年、モバイルアプリではSwiftUI、Flutter、WebアプリではReact、Vue.jsなどのフレームワークを利用した開発が多くなっています。これらのフレームワークを導入する際に、宣言的UIという言葉をよく目にしますが、一体どういう意味なのでしょうか。また、宣言的UIを取り入れた開発は具体的にどのようなコードなのでしょうか。
本記事はそういった疑問にお答えするような内容となっています。
ぜひ最後までお読みください。
宣言的UIとは、WebアプリやモバイルアプリのUIを実装する考え方の一つです。
完成形のUIのイメージに沿って、そのままに実装していきます。画面内の動的な箇所については、データを渡すことで画面を構築してくれる関数をベースに実装することができます。
宣言的UIフレームワークの一例をモバイルアプリとWebアプリに分けて紹介します。
宣言的UIとは何かについて説明してきましたが、まだイメージが湧いていない方も多くいると思います。
そこで、以下では例としてReactのサンプルコードと従来のJavaScriptのサンプルコードを紹介しています。
以下のReactのサンプルコードは、ユーザーがテキスト入力フィールドに文字列を入力すると、その入力を受け取り、それを表示する簡単なアプリケーションの例です。
サンプルコードでは、宣言的UIを実現するために動的部分をvalueという変数で定義しています。宣言的UIとは？の章で説明した通り、実際に画面に表示されるUIとマークアップの構成が一致しています。
import React, { useState } from 'react';
function SampleApp() {
const [value, setValue] = useState('');
const inputFunc = (e) => {
setValue(event.target.value)
}
return (
<div>
<input type='text' value={value} onChange={inputFunc} />
<p>入力された文字列は、「{value}」です。</p>
</div>
);
}
export default SampleApp;useStateフックを使用して、value という変数の状態を管理しています。この状態は、入力フィールドの値を保持しており、input要素のonChangeイベントに関連付けられたsetValueメソッドによって値が変更されます。
以下の命令的UIのサンプルコードは、上記と同様にテキスト入力フィールドに入力された文字列を、そのままフィールド下部に表示する簡単なアプリケーションです。
UIの更新ロジックはscriptタグ内に書いている通りで、HTML要素を直接操作しています。ページが読み込まれたときに、input要素の変更を監視し、その変更に応じて出力用のテキストを更新しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample App</title>
</head>
<body>
<div>
<input type='text' id='inputField'>
<p id='outputText'>入力された文字列は、「」です。</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const inputField = document.getElementById('inputField');
const outputText = document.getElementById('outputText');
inputField.addEventListener('input', function(event) {
const value = event.target.value;
outputText.textContent = '入力された文字列は、「' + value + '」です。';
});
});
</script>
</body>
</html>宣言的UIと比べて、命令的UIのコードは直感的に理解しづらいのが分かると思います。分かりづらい理由として、宣言的UIと違って命令的UIでは「どこが動的な部分なのか」、今回でいうとどの文字列が変化するのかが一目で分からない点があると思います。変化する場所が分からなければ、当然マークアップが最終的にどういった画面表示になるのかもイメージつきませんね。
つまり、宣言的UIの方が「完成形のUIのイメージに沿ってそのままに実装できる」ので扱いやすいと言えます。
実際のコードで比較した後に、改めて宣言的UIのフレームワークを利用するメリットを確認していきましょう。
いかがだったでしょうか。
記事内でも紹介していますが、宣言的UIフレームワークはモバイルアプリで使えるSwiftUI、FlutterやWebアプリで使えるReact、Vue.jsなど、近年多く登場しています。
実際にフレームワークを導入して、宣言的UIへの理解を深めましょう。
目次
