ネットワークって。。。#40(アプリケーションプロトコル)

久しぶりのネットワークって。。。シリーズです。

今回はJavaScriptの話。

前回までにWebの基本要素であるURI、HTML、HTTPについて記載してきました。

この3要素だけでは、条件に応じて動的に素早く画面を変えたりする事が難しいです。

それを実現するのがJavascriptです。

 

f:id:thmat:20220130120311j:plain

JavaScriptは、HTMLに埋め込む事ができるプログラミング言語で、Webブラウザ上で動作します。

従来のJavaScript

従来、HTTPはWebブラウザからサーバにリクエストし、サーバは次に表示するHTMLページページ全体をWebブラウザに返すという仕組みでした。

なので、JavascriptWebブラウザのみで動作を完結していました。

主には、ページへの入力値のチェック(年齢欄に数字以外が入るとか)や、必須項目の未入力チェックなどに使用されていました。

 

Ajax(Asynchronous Javascript and XML

そんな中、ページレイアウトの変更はなくページの一部分だけサーバから情報を取得したいとしたニーズが増えてきました。

例えば、住所の入力で、郵便番号入れたら市区町村まで表示してくれるサイト、よくありますよね。

 

これって、従来のJavaScriptだけで実現しようとすると、HTML内に全国の市区町村(いくつあるか想像つきませんが。。。)の情報を持たせる必要があって、現実的じゃないんです。

 

郵便番号入れた瞬間に、サーバにこの郵便番号の市区町村までの住所くれってリクエストしてサーバから住所情報をもらう。。。

それを実現したのがAjaxです。

 

SPA(Single Page Application)

Ajaxが更に進化したのがSPAです。

Single Pageという事で、基本的には画面遷移せず1つのページで画面の各部品がJavaScriptでそれぞれサーバに問い合わせて情報を入手するというような仕組みで、サーバは従来のようにHTMLページを返すのではなく、Webブラウザに表示される各部品の情報を返します。

 

FacebookTwitter等がこの技術を使っています。

 

メジャーな開発フレームワークとして、AngularGoogleが開発)やReactFacebookが開発)があります。

AngularやReactは、TypeScriptという言語で開発し、ビルド時にJavaScriptに自動変換されるため、実質はJavaScriptで動作している事になります。

 

まとめ

  1. JavaScriptは、HTMLに埋め込む事ができるプログラミング言語で、Webブラウザ上で動作。
  2. 従来のJavascriptWebブラウザのみで動作を完結。
  3. Ajaxはページの一部分だけサーバから情報を取得。
  4. SPAはページの全ての部分をそれぞれでサーバから情報を取得。

 

今回は、以上になります。 

 

最後まで読んで頂き、ありがとうございました。

 

 

【参考書籍】

 

 

 

     

 

 

すまっとネット - にほんブログ村

にほんブログ村 教育ブログ プログラミング教育へ にほんブログ村 IT技術ブログ IT技術メモへ
PVアクセスランキング にほんブログ村
にほんブログ村

 
人気ブログランキングへ