質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.93%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 222

T.Takeda

score 21

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2020/07/09 17:47

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

    キャンセル

  • T.Takeda

    2020/07/09 17:54

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

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

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

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

    キャンセル

  • T.Takeda

    2020/07/09 17:59

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

    キャンセル

回答 3

checkベストアンサー

+1

以前、PHPとmysqlで投稿系のアプリ(略)

基本的には同じ実装でできます。
「ページ更新処理」を俯瞰して考えるため、CodePen: ページ動的更新の流れ を作成してみました。
通信にかかる時間(要求/応答)や、DB更新にかかる時間差は生じてしまうので 非同期 になります。

jQueryを用いるのが一般的なのでしょうか

フロント側では DOM操作が伴いますので、クロスブラウザ&DOM操作&Ajaxがパッケージになったようなライブラリである「jQuery」を使う人が多いのだと思います。そういう意味では一般的かもしれません。

jQuery はコンパクトなコードで実装できる点は評価できますが、クロスブラウザ対応の目的で使う機会は減っていますので、pure javascript でDOM操作できる人にとっては、必須とも言えない時代になっていると思います。

fetch,promise,async/awaitなども出てきて

XMLHttpRequest がコールバックで実装するのに対して、Promiseを利用したフロー制御を使うと同期的なコードを書けるのが fetchpromiseを返却する)になります。

XMLHttpRequest を理解されているのであれば、Prmise によるフロー制御(await : Promiseの結果を待つ / async : Promiseを返却する関数を略記できる)を調査しても良いと思います(その上で、fetch で実装する)。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/10 06:01

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

    キャンセル

0

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

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

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/10 05:55

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

    キャンセル

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/10 05:57

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る