SPAを学んでみた。

SPAとは
単一のWebページでアプリケーションを構成する設計構造の名称。１枚のHTMLページに対してJavascriptが動的に変更を加えながら画面の描写を行う。

これを初めて読んだとき、何を言っているかまったくわからなかった。

もうちょっと調べた。

【今まで】
コンテンツの切り替えにはページ全体を読み込む必要がある。
①アクション
②サーバにリクエスト
③サーバがHTMLを生成しブラウザに返す（レスポンス）
④HTMLに反映

【SPA】
都度都度ページ全体を更新する必要がなく、部分的な更新が行える。
①アクション
②必要な部分のデータのみサーバに要求
③データをJavascriptで処理
④処理HTMLに反映

やっとなんとなくわかってきた。ここまで細かくすると、何が分かっていないのかが見えた。

ファイルとは

コンピュータの世界には、書類と箱がある。

書類（ファイル・プログラム）：いろいろ書ける。
箱（フォルダ・ディレクトリ）：書類や箱を入れる

これは、分かりやすい。

ページとは

一つのページは４つのファイルから成り立っている

①内容が書いてあるファイル
⇨HTMLファイル
②見た目が書いてあるファイル
⇨CSSファイル
③絵が描いてあるファイル
④動作が書いてあるファイル
⇨Javascriptファイル

URLとは

ホームページの住所。おいてある場所とかファイル名を示す情報。

Ex.)　http://wa3.i-3-i.info/extension/index.html
「wa3.i-3-i.info」という名前のコンピュータの中にある、
「extension」というディレクトリの中にある
「index.html」というファイル

これもわかりやすい。

Webブラウザとは

google chromeやYahoo!などがあるが、これはホームページを見るときに使うソフトのことである。

ここまで学ぶと、SPAについての理解が深まった。

最後にSPAを正しく分析するための方法を２つ学んだ

①SSR
サーバサイドでフロント側の処理を行う。

②Prerendering
サーバの中にブラウザを用意してURLをなげたらレンダリング結果が返ってくる。

レンダリング？
Webブラウザが受けっとったHTMLファイルの見た目をルールに沿って整えて表示すること

ここまで学んだら、あとは実践。

Google AnalyticsやSEOの対策を駆使して、SPAを活用していく。

参考：「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典