Ajax jQuery

今回はコメントの投稿と削除をAjax化する際に、 jQueryを使って実装しました。
しかし、jQuery自体あまり理解していなかったのでまとめていきます。

jQueryとは

jQueryとは、Javascriptのプログラミングでよく行われる定型的な処理を書きやすくしてくれる、オープンソースのライブラリです。 特に、HTMLやCSSの書き換え、イベントの設定やDOM操作や、Ajaxを得意としています。　　

DOM操作とは

JavaScriptで行う処理は、大きく分けて「入力」「加工」「出力」の3種類があります。
このうちの「出力」の中で、タグに囲まれたテキストや属性を書き換えたり、HTMLに要素を追加、削除するといった、HTMLやCSSを書き換える処理のことを「DOM操作」いいます。

jQueryの流れ

1.　イベントを設定したい要素を取得する
2.　取得した要素にイベントを設定する。

jQueryのプログラムは上記の順序で処理することがほとんどです。
1の処理では、$()メソッドとCSSのセレクタを使って簡単にできます。
2の処理では、jQueryのonメソッドを使用します。

1. イベントを設定したい要素を取得する

要素を取得するには$()メソッドを用います。
このメソッドは取得した要素を「jQueryオブジェクト」というjQuery独自のオブジェクトに変換してくれます。
取得した要素に対して、jQueryが提供するメソッドを使用することができます。

2. 取得した要素にイベントを設定する。

取得した要素にイベントをつけるため、jQueryが提供してくれているメソッドを用います。

$("tr#comment-<%= @comment.id %>").remove()

上記のコードは、コメントを消してくれるコードになります。
jQueryのメソッドが下記のページにまとめてあります。
Ajax | jQuery API Documentation

要素にid属性を付与する理由

<tr id="comment-<%= comment.id %>">

上記のようなコードを見て、なぜid属性を付与する必要があるのか気になり調べました。
サーバー側が、DOM要素としてどの要素が選択されて、Ajax通信が発生したのか知ることができないからです。
しかし、サーバーは要素のidを知っています。（user.idやpost.idのこと）
そこで、 DOM要素側にあらかじめid属性を付与し、判別できるようにします。
付与するid属性はHTMLの仕様としてのid属性です。
一般的には、HTMLのid属性に、タスクのidを含む文字列を指定します。