アプリ開発 技術ブログ

SPA(シングルページアプリケーション)

更新日:

技術サイトを見ていると、SPAってよく出てきますよね?
どうやらJavaScriptを使って、
Facebookみたいなページが作れるらしい、
でもあんまり具体的な使用例が出てこない。
そんな感じの理解でした。

私はSPA(シングルページアプリケーション)を、
オライリーの「シングルページWebアプリケーション」で学びました。
結果、SPAについて深く理解することができたので、
ここでまとめておきます。

SPAとは?メリットや従来のWebサイトとの違い

SPAのメリット

  • 従来のWebサイト 遅い
  • SPAのWebサイト 速い

ユーザを困惑させ苦しませるのではなく、驚かせ喜びをもたらす極めて迅速な応答性の高いエクスペリエンスを提供できる。

まずSPAについて記述しているサイトで見るのが、「速くなる」ってことですよね。

でもその「速くなる」というのがいまいちピンとこない。じゃないですか?

そもそも従来の(今の)Webサイトって遅いの?普通じゃないの?それ以外あるん?って感じしませんか?

SPAとは?

SPAのイメージは、デスクトップアプリをWebに乗せたものです。

SPAでもページ遷移はします。もちろん。ただ、そのページ遷移っていうのが、従来とは違うというのがSPAです。

どう違うかというと、従来のWebサイトは、次ページのリンクを押すと、次ページのHTML(JSやCSSも)がまるっと読み込まれますよね?

それに対して、SPAは次ページのリンクを押すと、画面の中の部分部分だけが読み込まれる。その結果、画面遷移したように見えます。

画面遷移を従来のWebサイトの画面遷移とは考えない方がいいですね。

従来のSPA

SPAとして、次の技術を想像してもらうのが最もわかりやすいです。

  • Javaアプレット
  • Flash/Flex

これらがSPAです。こう言われるとピンときますね。あ、なんだ、Javaアプレットのことか。アプリのことね。って感じです。

従来のJavaScriptって、HTMLページにちょっと動きをつける程度、もしくはAjaxするためのもので、Javaアプレットみたいなアプリを作るものではありませんでしたよね?

それがようやくJavaScriptでもJavaアプレットみたいないわゆる、「アプリ」を作れるようになりましたよ。ってことですね。

JavaアプレットやFlash/Flexに比べてJavaScriptを使うと、

  • プラグインが不要 ユーザーはプラグインをインストールしなくてよい
  • メモリ消費が少ない アプレットとかFlashは確かに重いイメージありますよね
  • HTMLベースなので滑らかな見た目
  • Webブラウザで動く ユーザーは環境構築しなくてよい
  • デプロイが容易 HTTPサーバーにアップすればよいだけ

というメリットがあります。

ビジネスロジックがクライアント側に実装される

DB サーバ クライアント
従来 CRUD 認証認可
バリデーション
ビジネスロジックJS
HTML生成
HTMLレンダリング
装飾的JS
SPA CRUD 認証認可
バリデーション
HTMLレンダリング
装飾的JS
ビジネスロジックJS
HTML生成

業務システムのエンジニアなら大好物が業務ロジック(ビジネスロジック)ではないでしょうか?

Javaでごりごろ書いていた業務ロジックが、SPAではJavaScriptでクライアント側に書くことになります。

SPAのユーザーにとってのメリット

  • SPAはデスクトップアプリケーションのようにレンダリングする
    • 変更する必要のある部品のみ再描画できる
    • 従来のWebサイトはページ全体を再描画する
    • 結果、速い
  • SPAはデスクトップアプリのように応答する
    • 作業データ(入力中のデータ)をできるだけクライアント側で処理する。
    • サーバレスポンスを待つ必要がないので速い
  • SPAはデスクトップアプリのように状態を通知する
  • SPAはWebサイトのようにどこからでもアクセスできる
    • スマホ、タブレット、PC問わず。
  • SPAはアプリのバージョンアップが簡単
    • ユーザにインストールやアップデートしてもらう必要はない
    • ブラウザをリロードすればよいだけ
  • SPAはクロスプラットフォームである
    • HTML5に対応したブラウザであれば動作する。
    • WindowsでもMacでもLinuxでもiOSでもAndroidでも動く。

 

【転職のプロが薦める】Web系自社開発のための転職エージェントランキング!

 転職満足度は『「いかに自分の希望にあう、条件のよい」企業から内定が出たか』で決まります。そのため、Web系企業に転職するときのエージェントを選ぶポイントは、「Web系企業の求人」をいくつ持っているかに尽きます。なので、総合大手よりも、Web系企業の求人を多くもつIT専門転職エージェントがオススメです。

ギークリー

  • Web系企業の求人数は9000以上とダントツに多い。
  • 「リクナビNEXTエージェントNetwork」にて、「紹介求人案件満足度部門」「カウンセリング・対応満足度部門」で1位獲得!
  • 「営業が強い」という口コミが多いが、その分熱心に求人を提案してくれる。
  • 無料相談のWEB登録は、履歴書・職務経歴書不要で、たった60秒で超簡単
  • 無料相談は東京・神奈川・埼玉・千葉で勤務できるエンジニアが対象。

レバテックキャリア

  • Web系企業の求人数が4000以上と豊富
  • 「GOOD AGENT AWARD」で「2018年金賞」受賞!
  • 転職業界の人間同士の会話でも、ITといえばレバテックとまず挙がる。
  • 無料相談のWEB登録は、履歴書・職務経歴書不要で、たった60秒で超簡単
  • 無料相談は東京、千葉、埼玉、神奈川、大阪、兵庫、京都、福岡で勤務できるエンジニアが対象。

ワークポート

  • 求人数は2000以上と上2社より少ないが、古くからIT専門として有名。
  • 「GOOD AGENT RANKING」で「転職決定人数部門」第1位獲得!
  • 無料相談のWEB登録は、履歴書・職務経歴書不要で、たった60秒で超簡単

-アプリ開発, 技術ブログ

Copyright© SIerからWeb系自社開発に転職!失敗して感じたたった1つの後悔 , 2019 All Rights Reserved.