konakona-engineers diary

新米エンジニアのプログラミングブログ

JavaScript & rails 既読機能をつける方法

今日も朝6時から勉強して、いい感じです。

 

 

目次


■非同期通信のデータの流れ

■エンドポイント

■queryパラメーターとpathパラメーターの理解

jsonとは?

 

 

非同期通信のデータの流れ


非同期通信は、HTMLではなくデータを返す

 

HTML

↓ ブラウザ上で既読にしたい要素をクリック

JS

↓ イベントハンドラーが働きコントローラーへデータを渡す

コントローラー

↓ DBの内容を既読に書き換え、そのデータを取得しJSへ返す

JS

↓ 返されたデータをもとに任意の値をHTMLへ反映

HTML

↓ 反映された情報をもとにCSSを適応

既読

 

※JS=JavaSprict

 ※イベントハンドラー=イベントが発生した時に行われる処理のこと。

例えば、「クリックした時に、既読マークがつく」「マウスカーソルを乗せた時に要素の色が変化する」など「XXXした時に○○○になる」と行った処理のことを指します。

 

 

エンドポイント


エンドポイントとは、Ajaxでやりとりする際の、データ返却アクションを実行するためのURL

Ajaxとは、JSを使用して非同期通信を行う処理のプログラム手法のこと

 

Ajaxでやりとりするためには、railsでレスポンスをユーザーへ返す時にHTMLではなくjsonなどのデータ形式で返却する必要があります。

そのデータを取得する時にアクセスするためのURLがエンドポイントです。

エンドポイントには「 メモのid 」と言うパラメーターを渡す必要があります。

理由は、「 どのメモを既読にしたのか 」を判別するためです。

メモのパラメーターを設定する方法は2つあり、

「 queryパラメーター 」と「 pathパラメーター 」と言う

 

 

 

queryパラメーターとpathパラメーター


queryパラメーターとは、「 例1 http://sample.jp/?animal=panda 」のように「?」以降に情報があるパラメーターです。

「?」以降の構造は、?<変数名>=<値>となっている

例1のURLでparams[:name]とすると、pandaが戻り値となります。

 

pathパラメーターとは、「 http://samples.jp/tweets/1 」のように指定するパラメーターのことです。

pathパラメーターで指定するのは「 リソースを識別する場合 」です。

 

※リソースとは?

リソースは「 WEB上で名前を持ったあらゆる情報 」のことです。

例えば、「 WEB上に挙げた写真データ 」「 富士山頂の天気予報データ 」など。

このようにリソースに該当するデータは、WEB上に数えられないほど存在します。

その数えられないほどのリソースを探し出すために必要なものがURLです。

 

 

 

jsonとは


 jsonとはコンピューター上でデータのやり取りをする際の、形式の一つでjson以外にも

CSVXMLなどがある

 

なぜjsonを使うのか?

理由は、JSとの相性がいいからです。

 

 

 

 

以上