エキスパート６週目、そして完成へ
どうも、アマツチです。今日も進捗報告させていただきます。
長かったエキスパートコースもようやく終わりを迎えようとしています。
そして嬉しいお知らせがあります。
chatspace完成！そして本番環境のデプロイに成功しました！
いええええええええええええええい！！！
最後の方のプルリクエスト3問が非同期通信、プルリクエスト、自動更新のためのjs実装が本当に鬼門でした。だってノーヒントな上にメンターさんがクソコード認定してしまうようなブログばっかりだったので。
この三つに関しては後輩のためにブログ書いたほうがいいのではと思ったので、時間が空き次第別の記事にあげることにします。
今回はどんなことができるようになったのか、ご覧ください。
まずは非同期通信。
https://i.gyazo.com/c102a3b290f9cec30224cb6ba8ccf332.mp4
プルリクエストでメンターさんに確認してもらうため、Gyazoでgifを取っています。無料枠で7秒なので収まるように工夫しましょう。
見ての通り、jsで非同期通信機能を追加したことにより画面を読み込まずにメッセージを追加することができるようになってます。追加したメッセージを元にどんどんHTMLを差し込んでるようなイメージです。
同時にDBにもデータを保存していますのでご安心を。
次にインクリメンタルサーチです。
https://i.gyazo.com/631208db75357d1c7b209fa21fbff091.mp4
サインアップが終わったユーザーを部分一致で一覧を表示できるようになりました。
検索結果を元にHTMLを生成、検索結果に変更がある際は生成した結果を一旦消去しています。要素名に気をつけてください、名前が一致していると意図しないところまで消えることがあります。カリキュラムでは検索結果とチャットメンバーが同じ名前なので油断していると自分を消去してしまいます。生成したHTMLでさらに追加、削除のコマンドも実行できるのが面白いところですね。慣れると結構楽しいです。
最後に非同期通信です。
https://gyazo.com/7e77e5f979bc1b43e8e173a85bcae49e
LINEをイメージするとわかりやすいと思うのですが、メンバーが新規メッセージを送っていたら、5秒おきに反映するように自動更新機能をつけています。
これは初めの非同期通信と似ているのですが、あくまであれはメッセージを送信した人のみの話です、HTML生成処理は使い回しつつ、他メンバーの画面の最新とDBのIDを比較し、足りない分を足していく必要があります。
これのヒントがなかなか見つからなかったので、できれば自分がヒントになるような記事を書いておきたいなと思います。
次週は最終課題に向けてラストスパートになると思います。みんなも完走目指して無理せず取り組めるようにしましょう。
ではまた。
