※当サイトの記事には、広告・プロモーションが含まれます。

jQuery 4.xで遂にIE 10以前のサポートを終了するそうな。Ajaxについても整理してみる

www.publickey1.jp

⇧ 何と言うか、コストの観点からしたら、オンプレミスで構築した方がよい場合もあるからして、全てをクラウドありきで考えられても困るんだが...

特に円安、クラウドサービスの値上げ、とかある中で、本当にクラウドの方が低コストと言えるのか甚だ疑問なんだが...

Microsoftなんかは、

news.microsoft.com

日本マイクロソフト株式会社は、2024 年 4 月 1 日から、法人向けソフトウエアおよびクラウドサービスの価格を改定します。新価格は、日本円の為替変動に伴い、いずれも 20% の引き上げとなり、2024 年 4 月以降に適用されます。

https://news.microsoft.com/ja-jp/2023/12/06/231206-information/

⇧ 白れっと20%値上げしてますし…

jQuery 4.xで遂にIE 10以前のサポートを終了するそうな。Ajaxについても整理してみる

何やら、

news.mynavi.jp

JavaScriptライブラリ「jQuery」の公式ブログは現地時間2月6日、「jQuery 4.0.0」ベータ版のリリースを発表した。「jQuery 4.0.0」ベータ版では古いブラウザやAPI、機能のサポート終了などによりパッケージ容量をスリム化するほか、古くから問題となっていたフォーカス系イベント処理順序を確定し、新規にバイナリデータ型とセキュリティ仕様「Trusted Types」などをサポートしている。

IE 10以前のサポートを終了する「jQuery」4.0.0ベータ版 | TECH+(テックプラス)

IE 10以前のサポートを終了する他、古いブラウザ関連コード、複数の非推奨のAPI、自動JSONPプロモーションなど不用な機能を削除することでパッケージ容量を削減。jQueryプロトタイプArrayメソッド「push」「sort」「splice」などは、例えば$elems.push( elem )が[].push.call( $elems, elem )のように配列関数へと切り替えられている。

IE 10以前のサポートを終了する「jQuery」4.0.0ベータ版 | TECH+(テックプラス)

⇧ とのこと。というか、IE11はサポート継続という感じなんかね?

まぁ、確かに、社内システムなんかで、IEを使ってるようなこともありそうですからな...

お医者さんの使ってるPCがWindows XPとか普通に見かけますしな、システムの都合上なのかもしらんけど...

話が脱線しましたが、

github.com

jQueryGitHubを覗いてみた感じでは、活発に活動している感じですな。

jQueryAjaxを実現する時に、シンプルにコーディングできるというのが便利だったのだけど、

www.air-h.jp

blog.capilano-fw.com

anteku.jp

⇧ 上記サイト様にありますように、Fetch APIが導入されたことで、jQueryを使わなくてもAjaxのような非同期処理のリクエストがシンプルに記述できるようになったと。

Ajaxはと言うと、

Ajax(エイジャックスアジャックス)は、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法であるXMLHttpRequestHTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、通信結果に応じてダイナミックHTML (DHTML) で動的にページの一部を書き換えるというアプローチを取る

 

Ajax - Wikipedia

 

Ajax は『Asynchronous JavaScript And XML』の略で、2005年2月18日に米国のインフォメーションアーキテクトであるジェシー・ギャレットにより名付けられた。

Ajax - Wikipedia

⇧ とありますと。

で、Fetch APIはと言うと、

developer.mozilla.org

フェッチ API

フェッチ API は(ネットワーク越しの通信を含む)リソース取得のためのインターフェイスを提供しています。 XMLHttpRequest と似たものではありますが、より強力で柔軟な操作が可能です。

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

概念と利用方法

フェッチでは、 Request および Response オブジェクト(およびネットワークリクエストに関わるその他のもの)の汎用的な定義が提供されています。これにより、サービスワーカー、キャッシュ API、リクエストやレスポンスを処理または変更するその他の類似のもの、またはプログラム的にレスポンスを生成する (つまり、コンピュータプログラムまたはパーソナルプログラミング命令を使用する) 必要があるあらゆる種類の利用法など、将来的に必要とされるあらゆる場所で使用できるようになります。

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

jQuery との違い

fetch は主に 3 つの点で jQuery.ajax() と異なります。

  • fetch() から返されたプロミスは、レスポンスが HTTP 404 や 500 であっても、 HTTP エラーステータスで拒否されません。代わりに、正常に解決され (ok ステータスが false に設定されます)、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。
  • fetch() は credentials の初期化オプションを(include に)設定しない限り、オリジンをまたいだ Cookie を送信しません
    • 2018 年 4 月、に仕様の既定の認証情報ポリシーが 'same-origin' に変更され、古いネイティブの fetch が Firefox 61.0b13, Safari 12, Chrome 68 のバージョンのブラウザーで更新されました。
    • これらのブラウザーより古いバージョンをターゲットにしている場合は、 Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに 'same-origin' を初期化オプション に設定した認証情報を必ず含めてください。

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

⇧ う~む、jQueryとの違いが分かり辛いな...

「フェッチ API」と「jQuery」を2つ横並びにして対比表のような形にしてくれた方が比べ易いんだけどな。

By the way、JavaScriptフレームワークのReactとか使っている場合に、「React Query」というライブラリがあるのですが、

qiita.com

React Queryがデータフェッチライブラリでないことは、実際にコードを見ればすぐにわかります。下の画像によると、queryFnではaxiosが使用されています。なぜでしょう。

React Queryはデータフェッチライブラリではない。非同期の状態管理ライブラリだ。 #React - Qiita

これがReact Queryがデータフェッチを責務としていないことの証拠です。
React Queryはどのようにデータが取得されるかに関心がありません。 唯一関心があるのは、queryFnにPromiseが返却されることだけです。そのため、データフェッチにはaxiosを用いてもfetchを用いても問題はありません。

React Queryはデータフェッチライブラリではない。非同期の状態管理ライブラリだ。 #React - Qiita

⇧ HTTP clientとしては、「fetch API」か「axios」が利用されてるそうな。

そして、

iwb.jp

redaxiosとは

axiosと互換のあるJavaScriptライブラリ。

ネイティブのfetch() を使用して作られているため、800バイトの超軽量サイズになっている。

axiosよりファイルサイズが10分の1以下のredaxiosを使うべし | iwb.jp

axiosの場合はIE11をサポートしているので、redaxiosより10倍以上もファイルサイズが大きくなっている。

axiosよりファイルサイズが10分の1以下のredaxiosを使うべし | iwb.jp

⇧「axios」を軽量化した、「redaxios」なるライブラリもあるそうな。

話が脱線しましたが、「fetch API」が導入されたことで、外部のライブラリを導入しなくても、素のJavaScriptAjaxのような非同期処理のリクエストの実装がシンプルに行えるようになったということですかね。

外部ライブラリを使うにしろ、使わないにしろ、ドキュメントが整備してくれていれば、利用する側としては文句は無いのだけど、まぁ、その期待は悉く裏切られるのだけどね...

だから、stackoverflowとかの記事に頼らざるを得ないわけなんだけど、

qiita.com

news.mynavi.jp

⇧ stackoverflowで提案されているソースコード脆弱性が混入しているケースもあると。

www.publickey1.jp

⇧ このあたりで、解消してくれるんかね?

毎度モヤモヤ感が半端ない...

今回はこのへんで。