序章

近年、フロントエンド技術はWebやモバイルアプリ、デスクトップアプリと多岐にわたって著しく進化しています。本記事ではその中でもWebフロントエンドに焦点を当て、技術的な進化や注目されているトピックについて解説します。

最初にMPAからSPA、SSRへの技術的な進化について解説します。また、宣言的UIや仮想DOMといった近年注目されているフロントエンドの技術についても紹介します。

さらに、Webデザインのトレンドについても取り上げます。スキューモーフィズムからフラットデザイン、Material Designといったデザインの変遷をそれぞれの特徴を踏まえて解説します。

Webフロントエンドの技術トレンド

★フロントエンドアーキテクチャの変遷 ―MPAからSPA・SSRへ―
近年のWebアプリケーションは、フロントエンドでどのような技術を使用しているのでしょうか？まずはWebアプリケーションのアーキテクチャに着目して解説します。

従来のアプリケーションでは、サーバー側でHTMLを生成してクライアントに返却するMPA（Multi Page Application）が主流でした。しかしMPAでは、画面内の更新内容が少ない場合でもページ遷移の度にサーバーから画面全体のHTMLを取得するため、パフォーマンスが最適とは言えない場合があります。

これを解決するために登場したアプローチのひとつがSPA（Single Page Application）です。SPAでは、初期リクエスト時にほぼ空のHTMLとページの処理を指示するJavaScriptをクライアントに返却します。そして、このJavaScriptを使用してクライアント側でHTMLを書き換えることで、ページ内の変更が必要な箇所のみを更新します。SPAのアプリケーションを開発する際には、ReactやVue.jsといったJavaScriptのライブラリやフレームワークが広く用いられます。

SSR（Server-Side Rendering）は、SPAを改良したアーキテクチャです。先ほど説明したように、SPAでは最初にほぼコンテンツを含まないHTMLが返却されます。そのため、JavaScriptが実行されるまでコンテンツが表示されず、初期表示が遅延します。SSRでは、初期表示のHTMLを事前にサーバー側でレンダリングしてから返却することにより、初期表示の遅延を改善します。SSRをサポートするフレームワークとしては、ReactをベースとしたNext.js、Vue.jsをベースとしたNuxtが挙げられます。

★宣言的UIと仮想DOM
SPAが普及し、現在広く使用されるようになったReactやVue.jsですが、これらにはどのような特徴があるのでしょうか？まずは「宣言的UI」について紹介します。

宣言的UIとは、実現したいUIが「どうあるべきか」を指定することで、ライブラリやフレームワークによって、データやUIなどの状態の変更に応じて自動でDOMツリーを更新する方法です。

宣言的UIと対になるアプローチとして命令的UIがあります。命令的UIでは、JavaScriptやjQueryからDOMツリーを手続的に操作して、「どうやって」UIを実現するかを指定します。手続的な操作を自動的にやってくれる宣言的UIの方が、UIの構造をシンプルに記述することが可能です。

宣言的UIでは、状態（ユーザー入力やデータの変更など）に応じてDOMツリーが更新されます。しかし、状態変更に応じて一からDOMツリーを新しく構築してしまうとパフォーマンスが低下します。そこで、状態変更前のDOMツリーを確認し、指定したUIからの更新部分（差分）を検出して差分のみ更新するようにします。

ReactやVue.jsでは、この差分を検出するために、仮想DOMと呼ばれる概念を用いたアルゴリズムを使用します。仮想DOMとは、メモリ内に保持されたDOMの仮想表現（軽量なJavaScriptのオブジェクト）です。状態に変更が生じた際はまず仮想DOMを更新し、更新前の仮想DOMと更新後の仮想DOMの差分を取得します。この差分を実際のDOMツリーへと反映させることで、UIの更新を効率的に実現できます。

ReactやVue.jsでは仮想DOMを用いて差分検出を行い、実際のDOMツリーを更新しています。しかし仮想DOMを使用する場合でも、その構築や差分検出に一定の計算時間がかかります。そこで近年では、仮想DOMを使用しないSvelteやSolidといったフレームワークが注目されています。これらのフレームワークでは、DOMを直接操作するために最適化されたJavaScriptのコードをコンパイル時に生成することで、仮想DOMを介さずにDOMを更新します。

Webデザインの変遷

★スキューモーフィズムとフラットデザイン
私たちが普段目にしているアプリケーションのデザインは、時代の流れとともに変化しています。スマートフォンの黎明期では、現実世界の形状を模倣してデザインをする「スキューモーフィズム」が主流でした。スキューモーフィズムは、ユーザーが馴染みのないものを慣れ親しんだものに似せて見せるデザインです。メリットは、デジタルになじみがないユーザーであっても直観的に操作ができる点です。例えばスキューモーフィズムでは、カメラアプリのアイコンはリアルなレンズを模してデザインされていました。

しかし、スキューモーフィズムでは細部までこだわったグラフィックを作成するため、デザインに大きな負担がかかってしまいます。また、スキューモーフィズムは画面サイズに対して固定的なビジュアルなため、デバイスごとに異なるデザインを設計する必要があり、レスポンシブデザインへの対応が困難でした。

そこで、よりシンプルで柔軟性の高い手法として「フラットデザイン」が登場しました。フラットデザインは、装飾を最低限に抑え、立体感を取り除いたフラットなスタイルが特徴のデザインです。色彩には限られた配色が使用されており、シャドウやグラデーション、テクスチャなどの要素が排除されています。シンプルなデザインであるため、レスポンシブデザインへの対応が容易であり、ページの読み込み速度も向上しました。

しかし、フラットデザインもいくつかの問題を抱えています。ひとつは、フラットなスタイルであるため、ボタンなどのクリック可能な要素と他の要素が区別しにくくユーザビリティが低下する点です。また、シンプルであるがゆえに他のアプリケーションと似た外観となってしまい、ブランドとしての独自性を表現することが難しいという問題もありました。

★Material Designの登場
フラットデザインのシンプルさを維持しつつ、ユーザー体験の向上を目指して誕生したのが「Material Design」です。Material Designは2014年にGoogleによって提唱されたデザインシステムであり、物理的な世界での光の反射や影の表現からインスピレーションを得ています。Material Designでは影や奥行き、アニメーションによる動きが導入されており、フラットデザインと比較して直観的な操作が可能です。

Material Designは何度かアップデートされており、現在の最新バージョンは2021年に発表されたMaterial 3です。Material 3ではアップデートに伴ってカスタマイズ性が強化されており、ブランドカラーなどの独自性を取り入れやすいように進化しました。当初のMaterial Designは主にスマートフォン向けに設計されていました。しかし現在ではタブレットやノートPC、デスクトップなどにも対応しており、多様なインターフェースにて統一感のあるUIを設計可能です。Material Designは、ReactのMUI（Material UI）やVue.jsのVuetifyといったライブラリに採用されており、Web開発において手軽に導入することが可能です。

Material 3では、Material Designに従った基本的なデザイン原則が公開されています。これには、レイアウトの設計方法やタイポグラフィ、アクセシビリティ、カラーの使用方法などが含まれています。カラーについては、Material Theme Builderという公式のツールを使用することで、独自のテーマ配色を簡単に作成することができます。

また、UIコンポーネントを確認することも可能です。例えばボタンやダイアログ、アプリケーションバーといったさまざまなコンポーネントについて、それぞれの仕様や使用方法が詳しく解説されています。さらに、開発者向けにFlutterやAndroid、Webでのソースコードも提供されています。

アプリケーションのデザインは常に進化し続けています。近年では、ぼかしと透明度の調節によってガラスのような質感を表現するグラスモーフィズム、粘土のような柔らかい立体感のあるクレイモーフィズムといった新たなスタイルが登場しています。時代のニーズに合わせたユーザー体験を提供するために、デザインスタイルの変化から目が離せません。

iPLAssのMDC（Material Design Components）とは？

弊社では、ローコード開発プラットフォームiPLAss Ver.4.0を2024年10月にリリースしました。iPLAss Ver4.0ではノーコード・ローコードによる自動生成画面をVue.jsで開発し、最新のMaterial DesignであるMaterial 3を採用したMDC（Material Design Components）を提供しています。

MDCのいくつかの画面・機能について紹介します。ここでは、iPLAssで開発したサンプルEC管理サイトを例として解説します。

★検索結果画面
EC管理サイトにおける商品エンティティの検索結果画面です。検索結果の表示形式は、カード形式・テーブル形式の2つから選択可能です。

カード形式（左側: PC画面、右側: スマートフォン画面）

★詳細・編集画面
EC管理サイトにおける各商品の詳細・編集画面です。詳細・編集画面の表示形式は、ダイアログ形式・2ペイン形式の2つから選択可能です。2ペイン形式（スマホなどウィンドウ幅が狭いデバイスは非対応）では、左ペインで検索結果の一覧を確認でき、右ペインにて選択項目の確認・編集が可能です。

テーブル形式×2ペイン形式（PC画面）

★カレンダー表示
MDCでは、登録した日付データをカレンダー形式で表示することが可能です。

左側: PC画面、右側: スマートフォン画面

★ダークテーマ
MDCはダークテーマに対応しています。テーマは右上のユーザーメニューにて簡単に切り替えられます。ダークテーマでは目の疲れを軽減できる可能性があり、暗い作業環境での画面の視認性を向上させることが可能です。また有機ELを搭載したディスプレイでは、バッテリー消費の節約も期待できます。

左側: PC画面、右側: スマートフォン画面

まとめ

Webアプリケーションにおいてフロントエンドのアーキテクチャは、MPAからSPA、SSRへと進化しており、選択肢が増加しています。開発者はそれぞれのアーキテクチャの特徴を理解し、自らが開発したいアプリケーションに適した技術を選択することが必要です。ReactやVue.jsなどでは、仮想DOMを活用することで宣言的UIを実現していることを解説しました。

Webデザインでは、ユーザー体験の向上を目指して、スキューモーフィズムからフラットデザイン、Material Designとトレンドが変遷してきました。Material Designは、フラットデザインのシンプルさを基調としながらも、影や奥行き、アニメーションの導入により直観的な操作が可能です。さらに最新のMaterial 3ではデザインのカスタマイズ性が強化されており、ブランドやユーザーの個性を反映しやすいようにアップデートされています。

弊社のiPLAss Ver.4.0では、ノーコード・ローコードでの自動生成画面にて、Material 3を採用したMDC（Material Design Components）を提供します。MDCはレスポンシブデザインであり、PCやモバイルなどの様々なデバイスに対応しています。またダークテーマにも対応しており、操作性と視認性の両方に優れた画面を実現しています。

当サイトでは、ノーコード開発ツールやローコード開発プラットフォームを利用し、業務システムの開発を効率化したいエンジニアの方や、会員サイト構築などの新規事業の目的を達成したい方へ、ダウンロード資料をご用意しております。ぜひ資料をご覧いただき、ご活用ください。