質問: 非同期通信による画面(特定の要素のみ)の更新しつつ、データベースの更新を行いたいと考えております。 (いいねボタンをクリックすると画面上の数字が+1されデータベースの値も更新されるといったイメージです。) 「非同期 データベース 更新 javascript」などでググってみるとjQueryでの実装方法がたくさん出てくるのですが、最近のトレンドとして当該機能を実装するためにjQueryを用いるのが一般的なのでしょうか。 ※「非同期処理 javascript」で調べてみると`fetch`,`promise`,`async/await`なども出てきてどれがマッチするのか分からずにおります。 ちなみに、以前、PHPとmysqlで投稿系のアプリを作成した際には`XMLHttpRequest`を利用して当該機能を実現することができました。 (jQueryについての知識がなく、一旦はJavascriptのみで試してみたかったため) よろしくお願いいたします。
回答: > > 以前、PHPとmysqlで投稿系のアプリ(略) > > > 基本的には同じ実装でできます。 「ページ更新処理」を俯瞰して考えるため、CodePen: ページ動的更新の流れ を作成してみました。 通信にかかる時間(要求/応答)や、DB更新にかかる時間差は生じてしまうので **非同期** になります。 > > jQueryを用いるのが一般的なのでしょうか > > > フロント側では DOM操作が伴いますので、クロスブラウザ&DOM操作&Ajaxがパッケージになったようなライブラリである「jQuery」を使う人が多いのだと思います。そういう意味では**一般的**かもしれません。 jQuery はコンパクトなコードで実装できる点は評価できますが、クロスブラウザ対応の目的で使う機会は減っていますので、pure javascript でDOM操作できる人にとっては、**必須とも言えない時代**になっていると思います。 > > fetch,promise,async/awaitなども出てきて > > > `XMLHttpRequest` がコールバックで実装するのに対して、**Promiseを利用したフロー制御**を使うと同期的なコードを書けるのが `fetch`(`promise`を返却する)になります。 `XMLHttpRequest` を理解されているのであれば、`Prmise` による**フロー制御**(`await` : Promiseの結果を待つ / `async` : Promiseを返却する関数を略記できる)を調査しても良いと思います(その上で、`fetch` で実装する)。