- 目次
1．はじめに：昨今のフロントエンド開発とモダンフロントエンド技術を取り巻く状況
昨今、インターネットやWeb技術は日々の生活になくてはならないものとなっており、フロントエンド開発もシステム開発全体の中で重要な役割を担うようになっています。フロントエンド開発の様相も日進月歩で変化しており、たとえばTypeScriptやNode.jsといった新しい言語・ランタイムや、Reactを代表とするSPA（Single-Page Application）など、さまざまな新しい技術が活用されるようになっています（本記事では、そのような新しい技術を採用したフロントエンドの総称として「モダンフロントエンド」という言葉を使います）。モダンフロントエンド技術を採用することにより、従来よりも優れたUXの実現に加え、フロントエンドとバックエンドを分離した疎結合なアーキテクチャーや開発体制の実現など、いくつかの大きなメリットがあります。
このようなモダンフロントエンド技術ですが、近年公共や金融といった分野の大規模プロジェクトにおいても採用の流れが見られます。たとえば、公共情報システムで使用されるデジタル庁GCASガイド（※1）では、フロントエンドとバックエンドを分離する方針や、SPAを採用した構成例などが記載されています。また、Amazon Web Services（AWS）の金融リファレンスアーキテクチャ日本版（※2）においても、SPAを採用したWebアプリケーションの例が説明されています。
NTT DATAでも同様に、近年、モダンフロントエンド技術を採用する大規模プロジェクトが出てきている状況です。一方で、モダンフロントエンド技術を採用する場合、使用する技術スタックはもちろんのこと、アーキテクチャーをはじめとする設計など、開発のさまざまな箇所が従来のWebアプリケーションと比較して変わってきます。こうした差分を、初期段階から踏まえて開発を進めることが、特に大規模開発においては重要となります。
本記事では、モダンフロントエンドと従来のWebアプリケーションとの差分を踏まえて、モダンフロントエンド技術を採用するプロジェクトにおいて重要な勘所をご紹介します。
https://aws.amazon.com/jp/blogs/news/modern-application-architecture-publish/
2．従来のWebアプリケーションとの差分：アーキテクチャー観点
まず、システムのアーキテクチャー観点から差分を見ていきます。
従来のWebアプリケーションでは、フロントエンドとバックエンドが分離されておらず、モノリシックなアーキテクチャーになっているのに対して、モダンフロントエンド技術を採用しているシステムはフロントエンドとバックエンドが明確に分離される傾向があります。
また、モダンフロントエンドのアーキテクチャーに影響する大きな要素として、レンダリング処理をどこで行うか、という観点があります（ここで言う「レンダリング処理」とは、ブラウザーでの画面描画に必要なHTMLを生成する処理を意味しています）。レンダリング処理の方法にはさまざまな種類がありますが、大別すると、レンダリング処理をブラウザー側（クライアントサイド）で実行する方法（Client-Side Rendering、以下「CSR」と記載）と、サーバーサイドで実行する方法（Server-Side Rendering、以下「SSR」と記載）の2つがあり、後者のSSRは、サーバーサイド側でHTMLを生成してブラウザーに返却する点で、従来のWebアプリケーションに近い処理となります。以下の画像で、CSRとSSRの大まかなアーキテクチャーをご紹介します。
図1：CSRのアーキテクチャー概要
図2：SSRのアーキテクチャー概要
昨今名前がよく聞かれる「SPA」は、文脈によって定義が変わるものの、前者のCSRを想定していることが多いです。しかし、それだけでなく後者のSSRやそれらのハイブリッドなど、さまざまな選択肢の中で適切なアーキテクチャーや方式を決定することがモダンフロントエンド開発では最初のステップであり、重要な観点の1つとなります。
3．従来のWebアプリケーションとの差分：処理方式観点
アーキテクチャー観点だけでなく、アプリケーション処理方式の観点でも、従来のWebアプリケーションと差分があります。代表的な差分としては以下のようなものがあります。
- 1．UIコンポーネント単位で画面部品を分割・再利用する
Reactなどのライブラリに代表されるモダンフロントエンドでは、UIコンポーネントという単位で画面部品を分割し、複数の画面で再利用します。UIコンポーネントの例としては、ボタンやフォームなどの小さな部品だけでなく、ヘッダやフッタ、サイドメニューなどの比較的大きな部品など、さまざまなものが含まれます。 - 2．フロントエンド側での複雑な状態管理が必要となる
モダンフロントエンドのアプリケーションでは、単に画面状態（たとえば、ユーザーからフォームに入力されたデータ、選択されたメニューやタブの情報など）を管理するだけでなく、バックエンド側から取得したデータや、ユーザー情報などの複数ページで共通して利用されるデータなど、さまざまな状態を管理する必要があります。従来のWebアプリケーションでは、必要なデータをサーバー側で用意してHTMLに埋め込むのが基本的な処理でしたが、モダンフロントエンドではブラウザー側で前述したさまざまな状態を管理する必要があります。
このような差分を踏まえて、アプリケーションの処理やAP基盤などの適切な設計を行う必要があります。
4．大規模プロジェクトにおける勘所
ここまで、モダンフロントエンド技術の採用状況と、採用するに当たって認識すべき従来のWebアプリケーション開発との差分について説明しました。それを踏まえ、本章では、実際のプロジェクトにおける勘所について、簡単に解説します。
まず、プロジェクトの要件定義段階で、前述したようなレンダリング方式やシステム要件を踏まえ、適切なアーキテクチャーの選定を行います。以下は比較の一例ですが、さまざまな観点から比較することが必要であり、時には従来のアーキテクチャーのほうが適切な場合も出てきます。
※○、△、✕の評価はあくまで各観点での相対的な評価となります
図3：従来のWebアプリケーションとCSR/SSRとの比較（UX観点）
図4：従来のWebアプリケーションとCSR/SSRとの比較（UX以外のシステム特性観点）
図5：従来のWebアプリケーションとCSR/SSRとの比較（開発プロセス・体制などの観点）
また、後続の工程においても、「従来のWebアプリケーションとの差分：処理方式観点」の章で述べたような内容を踏まえながら、適切な設計・実装を行うことが重要です。一例としては以下のようなことを行います。
- 1．UIコンポーネント単位で画面部品を分割・再利用する
- 2．クライアント側で複雑な状態管理が必要になる
- 状態の分類と管理方針の検討
- URLパラメーターやLocation API、Web Storageなどを利用した、複数ページにまたがる状態の受け渡しの方針検討
そして、ここまで記載した内容はモダンフロントエンド特有の観点であり、従来のWebアプリケーション開発における観点も踏まえて開発を進める必要があります。
5．まとめ
本記事では、大規模プロジェクトにおけるモダンフロントエンド技術の採用状況を皮切りに、従来のWebアプリケーションとの差分を踏まえたうえで、開発を進めるに当たって重要な勘所を述べました。NTT DATAでは、大規模なモダンフロントエンド開発でも変わらない品質を担保するため、ノウハウ整備や標準化を進めています。
アプリケーション開発・管理についてはこちら：
https://www.nttdata.com/jp/ja/services/adm/