「DIVE INTO CODE」学習記録 20日目
こんにちは。
20日目。Ajaxでブログにコメント機能を実装する。
学習内容
【高度な機能実装】
- Ajaxとは
- 非同期通信について
- Ajaxを使ったコメント機能の実装
- respond_toメソッドによるリクエストに応じた処理分岐
- js.erbのビュー作成
- 友達つながり機能（フォロー機能）の実装
- 1つのテーブルを2つに見立てて実装する多対多アソシエーション
- 1対1のメッセージ機能実装
- ワイヤーフレーム（外観）とテーブル設計（内観）に分けての要件定義
- validates_uniqueness_ofメソッド
- 外部キー制約（foreign_key:）
- scopeメソッドの定義
- strftimeメソッド
感想
Ajaxをかじってみました。
Ajaxは通信技術の一つ。
通常はHTMLがレスポンスとして返却されるのに対し、
Javascriptがレスポンスとして返却される。
JavaScriptはブラウザ上で処理が行えるため、
非同期通信で画面の一部だけを更新する事ができる。
まあとにかくレスポンスでJavaScriptを使う事ができる通信技術って事だよな。
これを使えばリッチなUIができるそうだ。
まあ実際に実装してみないとどういうことかわからんので、カリキュラムに沿って勉強。
最初はブログアプリにAjaxでコメント機能実装。
とりあえず仕組みと実装方法を書いてある通りやると、
コメント欄とコメント一覧が確かに通信せずとも表示される。
ただ、よくわかってないです。
非同期通信だと、どのタイミングでDBにパラメータが保存されてるのか。
表示のタイミングと保存のタイミングが多分違うのかな。
HTTPメソッドを介してないってことだよな、
今までのやつは必ずHTTM返してルーターからコントローラっていう明確なラインが理解できてたけど。そもそもMVCとかとは話が違うんだろうな。とか。
とりあえず実装できるようにすることに精一杯で、イマイチ掴めず。
難易度また上がってますわ。
メンターに聞こう。
次、友達つながり機能（フォロー機能）の実装。
まず、アソシエーションの応用的な手法を用いるので、Ajaxより前にそっちの理解が必要。
1つのテーブルを2つの別のテーブルに見立てて、多対多のアソシエーションを作る。
今回でいえば、usersテーブル。
userを「Follower」と「Followed」2つの違うテーブルに見立てて「relationship」中間テーブルを作成し、アソシエーションを行う。
理解はできるんだけど、とにかくコード上でややこしい。
「Follower」と「Followed」がどっちがどっちかわからなくなるのは俺だけなんだろうか。
has_many :active_relationships, foreign_key: ‘follower_id’, class_name: ‘Relationship’, dependent: :destroy
has_many :passive_relationships, foreign_key: ‘followed_id’, class_name: ‘Relationship’, dependent: :destroy
has_many :following, through: :active_relationships, source: :followed
has_many :followers, through: :passive_relationships, source: :follower
この4つが、userモデルにコーディングするアソシエーションの記述です。
following、followed、followers、follower、・・・
ややこしくないですか？どっちがどっちか。
DBからパラメータ引っ張ってくるコーディングをしようと思うと、どっちがどっちか毎回確認しないといけなくて。
ツイッターやってないから、フォローとフォロワーどっちがどっちか瞬時にわからないんですかね。
ややこしさの原因は、もう一つあります。
子テーブルの名前を定義上、本来のテーブル名と別の名前で定義している点です。
今回で行ったら、本来の小テーブル名は「relationships」。
これを定義上「active_relationships」と「passive_relationships」の2つに名前を変えてます。
「User」と「Relationship」のモデルクラス間で2つのアソシエーションを定義しないといけないわけですから、そりゃ名前一緒じゃ無理なわけですけど。
このアソシエーションと、さっきやったAjaxのコーディングを合わせてするのはしんどいですわ。
最後は、1対1のメッセージ機能実装。
さらに難しいです。
まあこれもやっぱりテキスト見ながら同じようにコード書けば実装はできてしまうんですけど。
コピペすれば正直なんとなくの理解でも機能実装できるのが、プログラミングのいい所でもあり怖い所でもあるなと。
ただ、機能実装について要件定義の流れから教えてくれているのが助かります。
外観にしてもテーブルにしても、機能実装前の設計について今まであまり考える機会がなかったので、今回の「1対1のメッセージ機能」を作る場合の要件定義を、1から流れに沿って教えてくれたのは非常に勉強になりました。
とりあえず実装しただけので、見た目はなおざりですが、ちらっと載せます。
１、一対一のメッセージ機能画面
特定のユーザーに対し一対一でメッセージが送信できます。
２、ユーザー一覧画面の追加
アカウントを持っている全てのユーザー一覧画面です。
メッセージボタンとフォローボタンの追加しております。
フォロー・ファロワー一覧もマイページに実装しております。
３、ブログ詳細画面にコメント機能追加
ブログの一覧画面です。
コメントを入力してボタンを押すと、
上にjsでコメントが表示されます。
応用きかすだけの理解は到底できてませんが、次回はとりあえず次のカリキュラム進みます。
以上ありがとうございました。