Ajax ASP.NET JavaScript jQuery Web Forms プログラミング

【 ASP.NET 】ASP.NET Web Forms における Ajax 開発について ( jQuery )

今回はタイトルの通り、ASP.NETにおけるAjax開発、jQueryを組み込む際のメリット・デメリット、その特徴について書いていきたいと思います。

また、それぞれの組み込み方法については別記事でまとめて解説していきたいと思います。

ASP.NET Web Forms

Ajaxとは

まずはじめに、Ajaxとは何かを簡単に解説したいと思います。

Ajaxとは、JavaScriptを使用したサーバとの非同期通信を行って、

サーバから受け取った結果をDOM(Document Object Model)等の技術を使用して、

Webページに反映する仕組みのことを指します。

上記のようなAjax技術を使用した非同期通信は、

サーバとの通信によってWebページの必要な箇所だけを動的に書き換えることで

ユーザがサーバとの通信処理を行なっている時もWebページでの操作を中断しないで済むことが利点となっています。

ちなみに、非同期通信の逆で、同期通信はユーザがサーバとの通信を行う際に

Webページ全体を再描画させる必要があるためユーザは操作を中断しなくてはならないようになっています。

ただし、JavaScriptはやや特殊な言語でサーバーサイドの言語に慣れた人からするとコードの記述に少し手間取るかと思います。

なのでJavaScriptのコーディングの手間を最小限に抑えるためにも、それを簡単にしてくれるライブラリが必要となってくると思います。


ASP.NETにおけるAjax技術

ASP.NETでAjaxの開発を簡単にしてくれるフレームワークまたはライブラリとして、

ASP.NET AJAXjQueryの二つの選択肢があるかと思います。

それぞれ二つの特徴、メリット・デメリットについて解説したいと思います。

ASP.NET AJAX


ASP.NET標準で提供されているAjaxのフレームワークでASP.NET AJAXというものがあります。

ASP.NET AJAXを使用することのメリット・デメリットとしては以下のようなことが挙げられると思います。

メリット

  • Ajax機能をコーディングレスで実装可能(定型的な機能のみ)
  • ASP.NETの知識のみで実装可能

✖️ デメリット

  • 定型外の機能ではコード量が増加
  • 外部ライブラリとの親和性が低い
  • トラフィックが大きい

ASP.NETの知識のみで実装可能で、定型的な機能はコードレスで記述できるメリットがありますが、

その反面、定型外だとコード量が増加してしまいがちで、外部ライブラリとの親和性が低く、トラフィックが大きくなってしまうというデメリットがあるかと思います。

また、Ajaxの実装は次に解説するjQueryの方が(他のライブラリも同様に)主流となっていることからも、

ASP.NET AJAXの機能を少し流用しつつもjQueryなどの便利なライブラリも使用していく必要があるかと思います。

jQuery


ASP.NET AJAXを使用しつつ、そのデメリットを補うためにもjQueryというJavaScriptライブラリを使用するのをオススメします。

jQueryは、JavaScriptライブラリの代表的なものの一つではありますが、

最近ではAngularやVue.jsなど(他にも多種ありますが)の普及が高く、少し技術選定のスタンダードからは外れてきてしまっているところもあるかもしれません。

ですが、ASP.NET Webフォームそのものがフロントサイドの開発はあまり重きを置いていないことを踏まえると

jQueryの性質上、手軽さやプラグイン機能の豊富さという点でjQueryを選択することが無難で最適だと思います。

jQueryの特徴としては以下のような点が挙げられるかと思います。

  • 簡単なコードでたくさんの機能を実装可能
  • クライアントサイドスクリプトのコーディングを総合的にサポート
  • 約32キロバイトの軽量サイズ
  • 主要なブラウザに対応(Microsoft Edge, Chrome, Firefox, Safari etc)
  • jQuery UI・jQueryプラグインという拡張ライブラリ


上記のような特徴の詳細についての解説は割愛します(別記事で解説するかもしれません)

そもそもASP.NETのWebフォームのテンプレートには、標準でjQueryが組み込まれていることからもjQueryの機能や実装方法の理解を深めることをオススメします。

ASP.NET おすすめ入門講座

3つのWebアプリケーションの開発を通して、ASP.NETについて基礎から学べるおすすめの入門講座がこちら☟

【入門者向け】ASP.NET MVCでWebアプリ開発のノウハウを学ぼう!

icon

おすすめ記事はコチラ

スマレジ テックファーム 1

スマレジ テックファーム で Webエンジニアとして勤めている tomoです。 今回は株式会社スマレジや私が所属している 「 スマレジ テックファーム 」についてPRしていきたいと思います。 スマレジ ...

2

FromBody 属性を使用して、 ASP.NET Core(.NET 6)のWebAPIでBodyパラメータのJSONを受け取る方法を解説します。 FromBody 属性 POSTやGETで呼び出さ ...

PC picture 3

ASP.NET Core(.NET 6)でCookie認証のタイムアウトを設定する方法を解説します。 Cookieの有効期限について Cookieには通常はタイムアウト(有効期限)を設定します。 基本 ...

4

ASP.NET Core(.NET 6)でクロスオリジンリクエスト ( CORS )を設定する方法を解説します。 簡単に クロスオリジンリクエスト ( CORS )とは何かについても少し解説したいと思 ...

-Ajax, ASP.NET, JavaScript, jQuery, Web Forms, プログラミング
-, ,