新刊ピックアップ

イマドキのWebアプリケーション「SPA(シングルページアプリケーション)」とは

この記事を読むのに必要な時間:およそ 1 分

HTMLやCSSと組み合わせて,⁠動き」のあるWebサイトを作るために欠かせないプログラミング言語「JavaScript⁠⁠。JavaScriptといえば,少ないコードで「動き」を実現できるライブラリとしてjQueryを利用するのが長らく定番でしたが,種類や位置づけのさまざまなフレームワークが多数登場し,ここ数年,混沌とした状況で時間が経過しました。sxzフレームワークの台頭も落ち着いてくるかと思いきや,依然として毎年さまざまなムーブメントが発生しており,初心者には大きな混乱のもとになっています。とはいえそうしたさまざまな技術が向かう先はある程度,方向性が見えています。その一つとして注目されているのが,Webアプリケーションであるシングルページアプリケーション(SPA)です。

SPAの時代

「SPA」とは,Single-page application(シングルページアプリケーション)の略です。定義には諸説ありますが,以下のようなものを「SPA」と呼ぶことができます。

  • ブラウザやブラウザレンダリングエンジン内で動作するWebアプリケーション
  • ブラウザで最初に開いたURLを起点にして,さまざまな画面遷移が提供されるが,基本的には最初に返されたHTML内でユーザインターフェースが完結
  • URLは,ページ内のユーザインターフェースの遷移でも逐次変化し,ブラウザの履歴で前の画面に遡さかのぼることが可能
  • ページに必要なデータはサーバからAPIなどの形を通じて,必要時に断片的に提供される

Web 2.0の時代にトレンドになった技術にAjaxがあります。Ajaxによって,画面遷移のない,たとえばGoogleマップのようなWebが実現できますが,Ajaxが静的なHTMLページの一部をリッチにしていたのに対して,ページ全体がダイナミックに変わり,画面遷移がサーバからのレスポンスに依存しないアプリケーションを「SPA」と呼ぶことができます。SPAを使ったアプリケーションとしては,前述のGoogleマップやSlackがその利用例として挙げられます。JavaScriptフレームワークとして最近人気のものにReact,Angular,Vue.js,React Nativeという4つのフレームワークがありますが,これらはいずれもSPAで使われる用途がメインのものばかりです(React,Angular,Vue.jsがWebアプリケーション構築のためのものであるのに対し,React NativeはiOS,Androidの両方に対応したネイティブアプリケーション構築を用途とするという違いがあります⁠⁠。

このたび刊行されたReact,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発はReact,Angular,Vue.js,React Nativeについて,Slackのようなサンプルのチャットアプリケーションを開発し,同じアプリを作りつつ,それぞれのフレームワークの違いを体験しながら学ぶことができるロゼッタストーンのような書籍です。最新のフロントエンド開発の世界をぜひ体験してみてください。

Slack

Slack