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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

1195閲覧

Ajaxの考え方について

yusukechief

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

2クリップ

投稿2017/10/17 09:17

初心者プログラマーです。最近webサービスのAPI化に挑戦しているのですが、Ajaxの考え方がよくわかっていません。わかるかがいれば、教えていただきたいです。

例えば、以下の例です
⓪{A:1, B:2, C:3, D:4, E:5}データがあり、Aが+1されると、BとCは+1される。D,Eは関係なし
①クライアント側からURLが叩かれる
②サーバー側から{A:1, B:2, C:3}データがクライアント側に受け渡され、ABCDEが表示される
③クライアント側でAに対して+1の入力がされる

この時ふた通りのやり方があると思います。
プランA:サーバー側で計算を全てさせる。
A-1:クライアント側でデータの変更を行わずに、サーバー側に変更伝える信号を送る
A-2:サーバー側で、A,B,Cのデータを変更し、クライアント側へ変更後のA,B,Cのデータのみを送る
A-3:クライアント側はデータを受け取り、A,B,Cのみデータを変更する
A-4:もしエラーが発生した場合は、A,B,Cを変更しない
この方法のメリットは、ロジックをサーバー側でのみ書けば良いということです。デメリットは、A-2でデータの送信をしないといけないところです。

プランB:クライアント側、サーバー側両方で計算させる。
B-1:クライアント側が保持するデータA,B,Cの変更を行う。
B-2:サーバー側に変更伝える信号を送る。
B-3:サーバー側で、A,B,Cのデータを変更し、クライアント側へsuccessメッセージのみを送信する
B-4:もしエラーが発生した場合は、A,B,Cのデータを変更前に戻す
この方法のメリットは、送信するデータを作成しなくて良いところです。デメリットは計算ロジックをクライアント側、サーバー側両方で書かなければいけないところです。

ここでは+1するといった簡単な処理の例を書きましたが、自分で実装しようとしているのはもっと複雑な処理です。データ数もABCD4つだけではなく、30近くあります。

一般的にはどちらが普通なのでしょうか?

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/10/17 09:25 編集

正しい用語を使ってください。ajax の話以前に、Web アプリと言うものがどういうものか理解していて、少なくとも正しい用語を使えないと、話が通じないと思います。
guest

回答1

0

ベストアンサー

ご質問の処理がAjax処理としてではなく、通常のPOST処理と考えられた場合はどうなると考えられるでしょうか。

データとして提示された{A:1, B:2, C:3, D:4, E:5}はデータベースに格納されているなどの永続化された値との認識です。
また、Aが+1されるとB、Cも+1されるというのは、この永続化されたデータの変更を意味していると推測します。
この処理が、画面の内容が変わるだけでバックエンドの値の変更が不要なのであれば、Ajaxでサーバと通信する必要もなく、JavaScript等で画面の表示(DOM)を書き換えるだけで問題ないはずであるからです。

上記を考えると、クライアント側(ブラウザ)で変更された値をAjax処理としてサーバに送信し、サーバからは変更に伴って関連するデータも含めて結果を返却し、画面の表示内容を更新するという"プランA"のパターンが一般的かと思います。

ただし、現在ではReactFirebaseを連携させたReactFireのように、クライアント側での変更内容をそのままバックエンドのデータベースに反映させるような動きをする、ある意味"プランB"のような動作をする実装も登場しています。
こちらも実際にはクライアント側からデータを送信していますので、変更通知のみを送っているというわけではありません。

投稿2017/10/17 16:45

編集2017/10/17 17:00
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yusukechief

2017/10/19 15:35

わかりやすい説明で大変助かりました。ReactではなくRubyOnRailsで実装しているので、プランAで一定見ます。ありがとうございました。
karamarimo

2017/10/19 18:36

ReactFireのQuick Startなどを読む限り、データベースの変更が state に反映される one-way binding と書いてあるので、クライアントでの変更が自動的にデータベースに反映されるわけではないのではないでしょうか。違ってたらすみません。
退会済みユーザー

退会済みユーザー

2017/10/19 20:41

karamarimoさんのご指摘はその通りかと思います。 実際の動きはデモでご確認頂ければと思いますが、stateの変更を同期するように作る必要があります。 https://reactfiretodoapp.firebaseapp.com ReactFire自体もコードを簡略化できるというライブラリですので、これを使わないと実現できないものではありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問