SPA(シングルページアプリケーション)という言葉がweb上で使われるようになってから随分と月日が経ちました。
登場した頃は実際にプロダクトで使用されることは稀でしたが、最近になり、多くのwebサービスやwebアプリでSPAが使われるようになりました。
そして、働くエンジニアにとって重要な転職や派遣・フリーランス案件の募集要項に、「SPA構築の経験」という条件も含まれるようになってきています。
本日は、業務でSPA構築を経験しているフロントエンドエンジニアのわたしが、SPAについてメリットとデメリットを踏まえて解説します！
SPA(シングルページアプリケーション)とは？
そもそもSPA(シングルページアプリケーション)とは
「1つのwebページによって、1つのアプリを構築しようという考え方」
のことを指します。
従来のwebアプリケーションは
- ユーザーがアクションを起こす
- サーバーに通信
- サーバー側でHTMLを生成
- サーバーからHTMLを受け取る
- HTMLを描写
というフローが一般的でした。
しかし、SPAでは
- ユーザーがアクションを起こす
- そのアクションに必要なデータだけをサーバーに要求
- 返ってきたデータ(JSON等)をjsで処理
- 差分を描写
というフローが行われます。
快適なユーザーエクスペリエンスを提供するために、大きな課題となっていた通信。
最小限のデータ転送でアプリケーションが動く仕組みをSPAが提供することで、その課題を解決しています。
すごく簡単に説明を付け加えると、今までは、ページを更新する度に既に表示されているヘッダーやフッターの情報もHTMLとして再度サーバーから取得していました。しかし、SPAでは、更新したい部分だけをサーバーに要求するため、データ転送量を抑えることが出来ます。
また、ヘッダーやフッターなどの更新しない部分は表示したまま、更新したい部分だけを更新するため、ユーザー側は待たされている感覚がなくなり、ユーザーの満足度につながります。
SPAが注目されるようになった背景
SPAに注目が集まる前に、リッチなwebページを作る方法はFlashが主流でした。
しかし、Adobe社が怒らせてはいけない人(ジョブズ)を怒らせて、iphoneでFlashが使えなくなってしまったため、jsやHTML5でリッチな表現をするためにSPAに注目が集まったと個人的には考えています笑
実際に使われている現場
実際にSPA構築しているエンジニアから見ると、現状SPAの8割近くは管理システムなどの裏側のシステムに使われているイメージあります。
というのも、最近は解決されていますが、今まではSPAはSEO上あまりよろしくないという問題や、最新の技術を大勢の人にみられるサービスに使いづらいという背景があったからです。
しかし、今はSPAに関する課題も解決されてきていて、SPA関連のドキュメントも豊富になってきたので、非常に多くのwebアプリケーションがSPAで構築されるようになっていくのではないか？とおもっています。
SPAのメリット
SPAのメリットを働く人間の目線も踏まえて解説します
- リッチなweb表現が可能になる
- ネイティブアプリに近い挙動を作れる
- お給料が増える
リッチなweb表現が可能になる
本来のブラウザではなし得なかったリッチな表現をweb上で実装できるようになりました。
先程説明したように、ページ遷移時に必要な部分だけを更新するという仕組みは、高速なページ遷移を実現するだけではなく、ユーザーエクスペリエンスの向上に大きく影響を与えます。
ネイティブアプリに近い挙動が作れる
ネイティブアプリに近い挙動をSPAで再現できるようになってきています。
React Nativeなどの技術を利用すれば、js,HTML5,CSSでiOSやAndroidのアプリを作ることも可能になりました。
お給料が増える
働くエンジニアにとって大事なお給料。
SPAが広まってきたとはいえ、まだ開発者の数は多くありません。
そういった背景もあり、SPA構築が可能なフロントエンドエンジニアは、お給料が高めに設定されやすいです。
SPAのデメリット
メリットがあれば、デメリットもあります。
- 開発者が少ない
- 初期ページ読み込みが遅い
- 費用対効果を見極める必要がある
開発者が少ない
絶対的な開発者が少ないので、SPA導入するためのリソース確保が大変です。
初期ページ読み込みが遅い
SPAではモジュールをたくさん読み込まなければならないため、初期ページのロードが非常に長くなります。
費用対効果を見極める必要がある
SPA構築をすると、初期構築だけではなく、改修・運用にも普通のwebアプリケーションに比べて工数がかかります。
SPAを覚えるメリットはたくさんある
とやかく言わずSPAを作ってみましょう！
SPAを作る際には
- ReactやVueなどのフレームワーク
- jsでデータ処理をしやすいようにNode.jsによるサーバーサイド構築
- API設計
- HTTP通信に関する知識
- フロント側でロジックを解決するためのjavascript
など多くの知識を勉強することができます。(他の技術選択をすれば、他の知識も勉強可能)
これらの知識はエンジニアとして生きていくために必須の技術ですので、是非SPA構築を通して、体験してみてください！
