【SPA開発を始める方へ】SPAのメリットとフレームワークの比較

非エンジニアがWebアプリケーションを開発する上でたどる、学習の道筋をこのブログに残しております

本日は、クライアント側に画面表示の機能を持たせるSingle Page Applicationについて整理します

Web開発を始める方で、そもそもSPAを学習するかどうか迷っている方はこちらの記事を事前にご覧ください

シングルページアプリケーションとは、それまではサーバー側で行っていた画面処理をクライアント側で行うアプリケーションの設計方法。

一般的なWebアプリケーションとの違いは以前掲載した

クライアント側で画面処理を行い、データのみをサーバーから取得することで、データ通信量を下げることができ、アプリの動作スピードを上げることができる。

一つのウェブページ内の表示を変更することでアプリを動作させることからシングルページアプリケーションと呼ばれる。

ここではシングルページアプリケーションのメリットをもう少し明らかにしたい。

データ量が減るとはどういうことかを理解するには、Webアプリケーション画面をもう少し深く理解する必要がある

普通のWebアプリの画面は大きく3つの種類のファイルから構成される

一般的なアプリケーションではページを更新するたびにhtmlのタグなども一式サーバーから送付される

f:id:BusinessManBlogForBusinessMan:20200507144431p:plain

一方で、SPAだとユーザのブラウザでjavascriptがhtml,cssを書き換えられる。サーバーに保管されているデータにアクセスが必要なときだけ、サーバと通信するのでら送付されるので、アプリの動作スピードを上げることができる

f:id:BusinessManBlogForBusinessMan:20200507144522p:plain

javascriptで画面を書き換えるといっても簡単ではない。単に、文字を書き換えるだけならまだしも、アプリとして機能を作成しようとすると非常に難しくなる

全てを一からコーディングしようとするのは難しすぎるため、SPAを実現するコード集（ライブラリ／フレームワーク）が発明され、広く利用されている

このコード集（ライブラリ／フレームワーク）はオープンソースとして、誰でも利用できるようになっているため、積極的に活用することをおすすめする

現在、広く使われているのはAngular／React／Vueの3つです。特徴をまとめると以下になる。

Reactがバランスがよく、Vueが小規模なアプリ向け、Angularは大規模なアプリ向けといえる。

今回は以下2点を考慮し、Angularを利用してWebアプリケーションを開発していく

Angularを学習する上での前提知識を整理する

コンサルタントのアプリ開発