リロードしなくても画面とデータベースを更新可能にする方法が知りたい

Question

非同期通信による画面（特定の要素のみ）の更新しつつ、データベースの更新を行いたいと考えております。
（いいねボタンをクリックすると画面上の数字が+1されデータベースの値も更新されるといったイメージです。）
「非同期 データベース 更新 javascript」などでググってみるとjQueryでの実装方法がたくさん出てくるのですが、最近のトレンドとして当該機能を実装するためにjQueryを用いるのが一般的なのでしょうか。
※「非同期処理 javascript」で調べてみるとfetch,promise,async/awaitなども出てきてどれがマッチするのか分からずにおります。

ちなみに、以前、PHPとmysqlで投稿系のアプリを作成した際にはXMLHttpRequestを利用して当該機能を実現することができました。
（jQueryについての知識がなく、一旦はJavascriptのみで試してみたかったため）

よろしくお願いいたします。

Comments

[Lhankor_Mhy]

「非同期通信はどうやってすればいいのか？」という質問と読みましたが、合っていますか？

[T.Takeda]

質問の内容がわかりずらくすみません。

非同期通信（Ajax？）を実装するにあたり、できるだけモダンな方法を知りたいです。

以下の記事にある方法が一般的な実装方法なのでしょうか。
https://qiita.com/zakiyamaaaaa/items/bdda422db2ccbaea60d9

アドバイスよろしくお願いいたします。

[T.Takeda]

補足ですが、今、Laravelで記事投稿アプリを開発しており、実装したいと思っている機能としては、1画面上に入力フォームと記事一覧があり、投稿ボタンをクリックするとリロードせずに一覧へ追加＆データベースに保存されるようにしたいと考えております。

Answer 1

以前、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 で実装する）。

Comments

[T.Takeda]

ご回答ありがとうございます。
fetchでの実装方法を学習してみてチャレンジしてみたいと思います！

Answer 2

ブラウザベースの場合、たぶん、fetchをawait演算子をつけて使うのが、雰囲気的にはモダンだと思います。ただ、IE11では動作しません。

↓これは、私が以前書いた、「小説家になろう」の小説テキストデータを全ページZIPしてダウンロードするブックマークレットですが、上記の方法で書いてあります。参考になるかわかりませんが……

「小説家になろう」一括ダウンロード（IE系非対応） - Hatena::Let

Comments

[T.Takeda]

ご回答ありがとうございます。
オススメいただいた`fetch`での非同期通信の方法を学習してみたいと思います。

Answer 3

簡単な回答ですみません。

行いたいのは非同期「処理」ではなく非同期「通信」であると理解しました。

※「非同期処理 javascript」で調べてみるとfetch,promise,async/awaitなども出てきてどれがマッチするのか分からずにおります。

fetchが非同期「通信」
promise, async/awaitは非同期「処理」
の仕組みだと思います。

僕はXMLHttpRequestをより使いやすくした新しいものがfetchであると理解してます。

「非同期 データベース 更新 javascript」などでググってみるとjQueryでの実装方法がたくさん出てくるのですが、最近のトレンドとして当該機能を実装するためにjQueryを用いるのが一般的なのでしょうか。

(以下あまり詳しくないです。詳しい方いらっしゃいましたらご指摘・補足下さい。)
開発環境・状況によるのではないかと思います。
React・Vue等のフレームワークを利用する場合はそのフレームワークに非同期通信のための仕組みも含まれているようなのでそれを使うことになるのだと思います。

javaやphp等で非同期通信の仕組みがないフレームワークを利用する場合はfetchやjQuery
ブラウザやブラウザのバージョン等の制限の関係でfetchが使えない場合もありそうなので、そういう場合はjQueryかXMLHttpRequestしか選択肢がないのかもしれません。

Comments

[T.Takeda]

ご回答ありがとうございます。
非同期処理と非同期通信の棲み分けができておりませんでした。おっしゃる通り、私が実装したいのは通信の方でした。
一旦はfetchの方向で進めつつ、各フレームワークに用意されている仕組みについても調べてみたいと思います。