プログラミング入門1ヶ月目に知っておくべきSPA(Single Page Application)の基本

こんにちはMIYACHIN (@_38ch) です。

この記事では、SPA(Single Page Application) とは何か?従来のアプリケーションと比べて何が違うのかを中心にご紹介していきます。最後には、Pythonのフレームワーク”Flask”とVue.jsを使った簡易SPAチュートリアルを掲載しています。

目次

  1. SPA(Single Page Application) とは何か
  2. 従来のアプリと比較して何が違う?
  3. SPAを実現する技術
  4. 簡単なSPAを作ってみる

SPA(Single Page Application) とは何か

SPAとは簡単に言うと、画面遷移時にサーバーサイドからHTMLを返さず、必要なデータのみをAjax(非同期通信)で取得するので、よりスマホネイティブのような体験を提供できるアプリです。

ユーザーにとっては以下のようなメリットがあります。

  • 画面遷移が速くなる
  • 通信料が減る
  • 画面の一部のデータのみを更新できる

従来のアプリと比較して何が違う?

従来のアプリは、画面遷移をすると、遷移先のHTMLをサーバーサイドから取得するため、ロードに時間がかかります。

その一方、SPAでは、HTMLをすべてクライアントに持っており、サーバーサイドには必要なデータを取りに行くのみなので、従来のアプリと比較し、読み込みが速くなると言えます。

以下にその違いを図解してみました。

従来のアプリ構造

SPAの構造

最初のリクエストですべてのHTMLを返すので、初期ローディングが遅くなりうるというデメリットがありますが、それ以降は、JSONデータのみをサーバーサイドに取りに行くので、ページ読み込みは速くなります。

そしてそれはAjax通信(非同期通信)なので、ユーザーはその通信が完了するのを待つ必要がなく、読み込みが遅いと感じにくいと言えます。

  • ページ読み込み速度 → より速い
  • 実装難易度 → より難しい
  • 初回読み込み時間 → ややより遅い
  • ユーザー体験 → より良い

SPAを実現する技術

SPA向けのJavaScriptフレームワークはいくつかありますが、代表的なものは以下です。

  • Angular
  • Vue.js
  • React.js

Google Trendsで見ると、ここ数年はVue.jsが優勢、時点でAngular、ちょっと差があって、React.jsという結果になっています。

GitHubのスター数で比較してみると、Angular(45.4K)、Vue.js(128K)、React.js(122.5K)でAngularが最下位という結果です。

ちなみに開発元は、AngularがGoogle、React.jsがfacebook、Vue.jsがGoogleでAngular開発に携わっていたEvan Youです。

この3つのフレームワークのうちどれを採用するかは各社各様な感じがしています。

SPA開発経験があるエンジニアは少ないと言われているので、どれか1つでも触った経験があれば、転職に有利に働くかもしれません。

簡単なSPAを作ってみる

以前にQiitaにフロントエンドはVue、サーバーサイドはPython (Flask)でSPAを作る方法を記事にしたので、そちらを見ていただけると嬉しいです。

2018年末に書いた記事ですが、いまでも毎日1いいねくらいついているので、それなりにわかりやすくかけていると思います。

Vueの入門記事としてもいいと思うので、プログラミング初心者の方はぜひ。