【7週目】未経験からTECH::EXPERTでプログラミングやってみた
非同期メッセージ機能完成
先週に引き続きメッセージ機能の実装です。
先週ツイートした時は高速Ctrl+Rで非同期に見せるという高度な技を使用していたので、今週は非同期通信を中心に実装しました。
そういえばちゃんと非同期で実装しました！画像も選択した時点で自動的に送られるようにしてます。これで高速Ctrl+Rとはお別れ😢
— 金子幸三郎@未経験エンジニア (@Kosaburo_Kaneko) 2018年6月14日
チームメンバーがヘッダーその他諸々を作ってくれたのでだいぶ形になってきた🔥 pic.twitter.com/sxycLUTTQ2
メンバーがヘッダー、サイドバー、フッターを作ってくれていたので、renderでメッセージ画面を表示するようにしてます。見た目的にはほぼ完成したと言ってもいいんじゃないですかね。
勘違い
メッセージ機能自体を非同期化するのはカリキュラムでもやったことがあったのですんなりいったんですが、マッチしたユーザーの一覧の最新のメッセージを非同期更新するところでハマりました。
ハマったというか、勘違いしていてフロントのフレームワーク等がないと実装できないと思ってました。
ビューファイルはざっくりこういう構造になってました。マッチしたユーザーの一覧とメッセージエリアは部分テンプレートで切り出していた格好です。
それで非同期でメッセージを更新しようとすると以下のようになります。
ここまではOKです。
ここから_matched_usersの最新メッセージを更新しようとする場合、何を思ったか以下のように一度コントローラーを通さないとできないと思ってました。
そもそも_message_areaで更新された最新メッセージの値を逆流させてコントローラーまで届くのか…？ というところでつまずき、半分諦めてプルリク出そうかと思ってました。
と思ってたんですが、電車乗ってる時に勘違いに気付きました。上記のように考えてた原因はjQueryがそれぞれのビューに紐づいていると考えてたからなんですね。例えば、あるjQueryが記載されたファイルは_message_areaしか操作できない、といったように制限されてるとなぜか勘違いしてました。多分疲れてました。
実際は以下のように更新できました。
いやーなんで勘違いしてたんだろう…部分テンプレートだからアクセスできないっていう風に考えてたっぽいんだけど…
無事実装完了したのでプルリク出してメンターさんからLGTMをもらったのでmasterブランチにマージしました。
ポイント機能
次はポイント機能を実装します。
どういう機能かというと、お金をポイントに交換することができてそのポイントで「いいね」を買ったり、メッセージ付き「いいね」を送れたりします。
その根幹となるポイント機能ですが、実際の決済機能は実装しません。ダミーのカード番号や有効期限が入力されていればポイントが購入できるようにします。
pairs_point from Kosaburo Kaneko on Vimeo.
今週はとりあえずビューだけを完成させました。ここのビューではモーダルが使われていてそこに結構時間使っちゃったんですが、それは別の記事にしようと思ってます。
ポイントを購入したらDBが更新されるバックエンドの動きを実装できれば完成…ですが毎回そんなすんなり行くことはないので、油断しないようにします。
終わり
いやほんとビュー作るのって時間がかかるんですよね…
時間かかるし、いくら時間かけても終わりがないし、いくら時間かけても機能自体は実装されないんですよね。フロントに注力しすぎて時間と労力かけた割には全然進んでないみたいな状況に陥る気持ちはわかるような気がします。
なのでフロントをある程度実装したらまず機能を作ることを先にやるように意識してます。それで全体の枠ができてそれでもフロントを修整したかったらするようにすればまあ進まないってことはないかなと思います。
