🎉
SPAを初心者でもわかるように説明してみた
前述
SPA流行ってるって言われてるけど(2024年時点)
プログラミング初心者過ぎてわからない人に
なるべくわかりやすく説明します。
※私自身も現在一年目の為違う点ありましたら
コメントいただけると助かります。
(一年目だからこそ初心者の目線で書ける所もあると思っています)
前提知識
前提知識としてWEBページは
データの置き場所(DB)からほしいデータを取得して画面に表示する流れなのを
ざっくりとイメージしてください。
こんな感じ。 雑ですみません。。。
一言でいうと
一言でいうとSPAは画面の切り替わりがすごく早いWEBアプリのことです。
概要説明
初心者向けなのでざっくりとした説明をします。
(詳しく知りたい方は他の方の記事参照ください)
画面の切り替わりが早くするためには
システム側の処理をどれだけブラウザ側にやらせるかにつきます。
(表現が雑ですみません。。。)
それを実現する為にSPAは以下の特徴を持っています。
①一回目に全ページの概要(DBデータ以外の)データを取得する
⇒一回目のページ長くなると思うけどシステムがやってたことをブラウザが代わりに
やってくれるから意外と長くならない
②二回目以降はページの全データを取得しない(変更された箇所のみ)
⇒詳しくは仮想DOMで調べてください。
③システムの裏側(バックエンド)の処理が減る
⇒画面の表示や切り替えをしなくてよくなった
簡単に図解です。
SPAを実現する為のフレームワークは
Reactというものがあり記事を書いているので
良かったら見てください。
まとめ
上記の三つのおかげで画面が早く切り替わるようになります。
Discussion