フリーランスエンジニアを目指してプログラミングスクール「TECH：EXPERT」に通ってみた（応用学習編）（20日目&21日目&22日目&23日目）

こんにちは、かとたくです。
今回はブログアプリの作成も終わったので、チャットアプリ「Chatspace」の機能実装に移っていきたいと思います！

実装するのは、メッセージを送信した時の非同期通信（いわゆるAjax化というやつ）と、検索したときに自動で表示される「インクリメンタルサーチ」、メッセージの自動更新機能の3つです！

JQueryやJavascriptをフル活用しながらなのでかなり大変ですが、スケジュールも過密状態なので頑張ります。

まず4/10にやったことは以下の通り。

・Chatspaceの非同期通信の実装

カリキュラムの内容を参考に作成していましたが、まあ難しい・・・。メンターの人や他の受講生の方にも聞きまくりましたがなかなか理解するのが大変です。素人からしたらそんな機能いる？って言われそうですが、割とあると便利ですし、リロードする時間もなくなるのでサクサク動かせるのでオススメです。

翌日4/11にやったことは以下の通り

・Chatspaceの非同期通信の実装
・Chatspaceのインクリメンタルサーチの導入
・案件紹介

1日で非同期通信を終わらせることができました。かなり周りのサポートのおかげではありますが本当に感謝です。最終課題でもゴリゴリに使っていくと思うのでしっかり復習してやっていこうと思います！
あと、インクリメンタルサーチですが、これもなかなか曲者というか難しいですね。あるとものすごく便利な機能なのですが、作るのは初めてなのでとにかく大変です。スケジュールがギリギリですが必死に頑張っていきましょう。
夜には以前とは別の会社との案件の面談があるのでこの日の作業は終了いたしました。

4/12にやったことは以下の通り。
・Chatspaceのインクリメンタルサーチの実装

基本的には実装ができたのでプルリクエストを送り、ソースレビューをもらいましたが、かなり修正点が多かったです。特にラベルをクリックした時にテキストフィールドにカーソルを当てるという指摘はサンプルを操作して初めて気がついたので、そこにはかなり苦しめられました・・・。
lavelタグにid属性、inputタグにfor属性を指定し、そこの名前を合致させるとできるみたいです。hamlだとややこしくてわかりにくいですが、HTMLならサイトはあるので、よかったら探してみてください。

4/13にやったことは以下の通り。
・Chatspaceのインクリメンタルサーチ の実装
・Chatspaceのメッセージの自動更新機能

1日半という超突貫工事でしたが、インクリメンタルサーチ の実装は完了しました。人に質問をひたすらしまくる荒技で申し訳なさもありますが、なんとか完成できてよかったです。
しかし、最後の実装となるメッセージの自動更新機能がかなり曲者で、今まで作ったhamlファイルやコントローラー、JSファイルも触るので慎重に進めております。今のところ完成形が見えていないのでなかなかに辛いです。

それなりに機能が充実してきたので、アプリの完成も近づいてきたかなと思います。
完成して本番環境にデプロイしたらリンクも貼って読者の人に触っていただけたら嬉しいです。

最後までご購読していただき、ありがとうございました！

また次回も読んでいただけると幸いです！！