TECH CAMPも4週目を終え、課題であるChat-space制作の実装もひとまず完了。
【学習内容】
・ユーザー管理機能実装
・グループ作成編集機能実装
・メッセージ送信機能実装
・テスト
・非同期通信機能実装
・インクリメンタルサーチ実装
・自動更新機能実装
ところで、プログラミング学習時に皆さんは音楽を聴きますか？集中力を高める為や、気分を上げる為に聴く方は多いでしょう。私はDREAM THEATERというアメリカのバンドが好きでよく聴いています。自分自身ギターを弾くのですが、このDREAM THEATERは高度な演奏力や音楽理論を駆使した楽曲の組み立て方が魅力的で、特に楽器演奏者にファンが多いようです。自分もそれに影響を受けて10代の頃は楽典やなんかで音楽理論をかなり勉強し、今でも曲を作っています。
実は5月に来日コンサートがある予定だったのですが、このご時世もちろん延期。しかも、行く予定だった福岡公演のみ中止という悲しい現実が‥。チケット払い戻ししました‥（良い席取れてたのに‥）。その反動で今週は学習中かなり聴きましたね。
・ユーザー管理機能実装
gemのdeviseを使用してのユーザー管理を実装。なかなかインストールうまくいかないなぁと思ったらコマンドに「device」って入力していました。要注意！
①deviseのインストール
②Userモデルを作成する
③deviseのビューファイルの追加
④サインアップ機能の追加
⑤ユーザー情報編集機能の追加
⑥ログアウト機能の追加
⑦フラッシュメッセージの表示機能の実装
・グループ作成編集機能実装
グループの新規登録画面で、グループ名と所属メンバーを入力して登録できる機能を実装。
①groupsコントローラーを作成（ルーティングの設定も合わせて実施）
②アイコンをクリックするとグループの新規登録画面へ移動するようリンクを設定
③groupモデルとgroup_userモデル（多対多のリレーションを組む為の中間モデル）を作成
④多対多のアソシエーションとバリデーションを設定
⑤ビューファイルにチェックボックス表示（collection_check_boxes）
⑥binding.pryにより送信されるデータを確認
⑦配列の保存を許可するためのストロングパラメータの設定
そして、グループの新規登録画面の実装とほぼ同じ手順でグループ編集機能を実装。
また、ビューを部分テンプレートを使用し整えます。
・メッセージ送信機能実装
ここらへんまでくるといよいよ完成形が見えてきて画像を投稿できた時は少し感動しました。この手順の中では⑧、⑨、⑩は全くのノーヒントで、力が試されます。基礎カリキュラムを見返したのと、検索でここは乗り切りました。
①Messageモデルを作成する
②ルーティングを設定する
③該当するアクションをコントローラに定義する
④画像送信の為のgem、Carrierwaveを導入
⑤メッセージ送信機能を実装する
⑥グループにメッセージを表示する
⑦サイドバーに最新のメッセージを表示する
⑧ヘッダーを修正しグループ名、メンバーが表示されるようにする
⑨グループ編集ページへのリンクを設置する
⑩グループ編集後のリダイレクト先を変更する
・テスト
Webアプリケーション作成のおいて重要なテストの概念、必要性、原則、書き方をRSpecを利用し学びました。まずは基礎的な書き方を学習、その後はfactory_botというgemを利用。そしてダミーのデータを作成するためのgem、Fakerの利用方法を学びました。
ひと通り学んだ後はChat-spaceで実施。factory_botでスッキリまとめられるかが課題ですね。
①単体テスト‥ひとつのプログラムのまとまりに関して、それ単体が正常に動くか確かめるテスト
②統合テスト‥複数のプログラムが連動して行われる処理が意図した通りに行われるかを確かめるテスト
・非同期通信機能実装
非同期通信機能とは、リクエスト後にレスポンスが帰ってきた際、ブラウザが再読み込みされること無く通信が行われる通信方法。Ajaxと呼ばれます。また、ここではJSONというデータ交換を行う為の記述形式を使用。
学習の流れとしては基礎カリキュラムで作成したアプリであるPictweetのコメント機能の非同期通信化を行いながら学び、その後Chat-spaceへ実装します。
Chat-space実装時にビューが崩れたのでclass名を確認し修正。ここらへんからうまくいかない時は検証ツールが大活躍です。
①APIを作成
②jQueryが使えるように設定し、jsファイルを作成する
③フォームが送信されたら、イベントが発火するようにする
④イベントが発火したときにAjaxを使用して、messages#createが動くようにする
⑤messages#createでメッセージを保存し、respond_toを使用してHTMLとJSONの場合で処理を分ける
⑥jbuilderを使用し、作成したメッセージをJSON形式で返す
⑦返ってきたJSONをdoneメソッドで受取り、HTMLを作成、それをメッセージ画面の一番下に追加する
⑧メッセージを送信したとき、メッセージ画面を最下部にスクロールするようにする
⑨連続で送信ボタンを押せるようにする
⑩非同期に失敗した場合の処理も準備する（エラー表示）
・インクリメンタルサーチ実装
インクリメンタルサーチとは、 検索したい単語をすべて入力した上で検索するのではなく、入力の度に即座に候補を表示させる機能。これ利用し、グループ作成または編集時においてリアルタイムでユーザー名を検索できるようにします。非同期通信実装と同様に、Pictweetを用いて基礎を学び、Chat-spaceへ実装します。
実装後エラー発生‥。結局はコントローラーの中のendの"d"が一ヶ所消えていただけでしたが、地味にタイムロス。
①ルーティングなどAPI側の準備をする
②テキストフィールドを作成する
③テキストフィールドに入力されるたびにイベントが発火するようにする
④イベント時に非同期通信できるようにする
⑤非同期通信の結果を得て、HTMLを作成、ビュー上に追加する
⑥エラー時の処理を行う（エラー表示）
・自動更新機能実装
現行では自分でメッセージを投稿した場合は非同期通信機能により画面に表示されますが、別のユーザーの投稿メッセージはリロードしなければ表示されません。そこで、この自動更新機能を実装し自動で画面が更新されるようにします。
①表示されているメッセージのidが確認出来るようにhamlにカスタムデータ属性として追加
②新規メッセージ確認用のアクションをWebAPIにて実装
③投稿内容をレスポンスできるようにする
④取得した投稿データを表示できるようにする
⑤7秒毎にリクエストするよう実装
⑥メッセージを取得したら画面がスクロールするようにする
⑦自動更新が必要ない画面では行わないようにする
実装後、自動で更新しない‥。ここから奮闘が始まりました。エラーが発生した時はエラー文から問題部分を特定していくのですが、このようにエラー文がないと難しいですね。何度もカリキュラムを見返し抜けている部分はないか確認しました。自動更新が機能しないので⑤、⑦あたりの実装に問題があると仮説を立て、setInterval()、matchメソッドの使い方を検索し調べました。また、全体的にも見返したので、最終的にはメンターに解決していただきましたが（setInterval()の記述位置が違うという単純ミスでした‥）ここの奮闘は勉強になりました。
そして無事LGTMを貰いとりあえず実装は完了。次回からはサーバーの学習へと駒を進めます。
https://github.com/Tomokazu-Kirihara/chat-space
ひとまずRailsでのアプリケーションの実装をやってみての感想ですが、個人的には作曲に近いなと思いました。作曲というのは言わばメソッド、ライブラリ、フレームワーク、gemの塊です。
わかりすい例で行くと、日本の音楽の世界にはカノン進行というものが存在します。パッヘルベルのカノンという曲のコード（和音）進行を使って作曲する手法で、これを使えば多くの人の耳に残る曲を作ることが出来ると言われています（「カノン進行 曲」で検索するとJPOPのヒット曲が沢山出てきます）。このように、こういうメソッドを使えば明るい曲/暗い曲になる、みんなが踊りたくなる曲/悲しい気持ちを表現した曲になる、といったものが無数に存在します。もちろん、それを知らなくても感覚で曲は作れますが、近道ではあります。
また、一番近いのはとりあえず何か作ってみることで覚えていくという点ですね。音楽理論もひたすら暗記していくよりもまずは1曲でも作ることから始めた方が良いです。プログラミングもまさにそうで、とりあえずアプリケーションを作っていくことが大事だなと感じました。