More than 3 years have passed since last update.

SPAって何？

Posted at 2021-04-03

Reactを勉強しててSPAという言葉よく聞くようになり、なんとなくの理解だった為改めて文字に起こしてアウトプットしていきたいと思います！

一番下に参考にした記事を載せておきます！

#SPAってなに？
SPAとはSingle Page Application（シングルページアプリケーション）のことです。
簡潔にまとめると、必要な部分だけ更新して、必要ないところはそのままの表示にすることです！

今までのwebアプリケーションの仕組みは、何かアクション（クリックなど）をすると、
①サーバーにリクエスト
②サーバー側でHTMLを生成
③②で生成されたHTMLを受け取り、ブラウザで描画する
流れでした。

従来の仕組みだと不要なデータまで更新される為、表示するまでに時間がかかっていました。

###そこでSPAの登場！！
①ユーザーがアクションを起こす
②①のアクションに必要なものだけをサーバーにリクエスト
③帰ってきたデータをJSで処理してHTMLで表示する
流れに変わりました！

SPAの仕組みを利用することでユーザーのサービス利用時間が長くなる=購入確率などが高くなる=会社の売り上げに貢献！！←少し飛躍しすぎました。。。

だから今SPAへの温度感が非常に高まってるとか。。。

#その他メリット
他のメリットデメリットについては他記事でも乗ってるので興味のある方はそちらを参考にしてみてください！
ここではざっくり説明していきます

###①よりリットなweb表現ができる
ReactやVue.jsなどのライブラリやフレームワークが誕生したことによって、簡単に様々な物が実装可能なり、いろんなUIを表現することができるようになりました！

###②ネイティブアプリの代用ができる
ここに関しては自分自身が体験してない為、あまり実感が湧きませんがSPAを導入することで
ネイティブアプリで実装されてたことがSPAでも表現することが可能とのことです！！←いずれここも体験してみたいです！

#最後に
どうやらSPAは何かを実装する上でデファクトスタンダードそう。これからもSPAを意識しながら学習に取り組んでいきたいと思います！！