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

こんにちは、かとたくです。

今回はチャットアプリ「Chatspace」のデータベース設計〜Hamlの導入までを目標にやっていこうと思います！

前回、Githubに散々苦しめられましたが、今回もバリバリ使っていくので大変ですが、少しずつ慣れるように頑張っていきます。

3/25に学習したことは以下の通り。

・Chatspaceのデータベース設計
・Githubでプルリクエストを出して設計をメンターにレビュー
・Hamlの導入
データベース設計は実のところ2時間くらいで終わったのですが、Githubの使い方に悪戦苦闘しておりまして・・・、丸1日以上時間を費やす羽目になりました。
特に困ったのが、Githubのデスクトップの方にはマージできているのに、ブラウザの方ではマージできていないという現象。ネットで調べてもわからず、東京のメンターの人と通話してなんとか手探りでやりましたが、何となくプルしたらブラウザでも最新のソースコードが反映されるというよくわからないことがおきました。なんとか解決したので、これはこれでいいのかよくわかりませんが・・・？

そして、新たに「Haml」というGemも導入いたしました。「Haml」とは、HTMLよりも簡単に書くためのマークアップで、より少ない労力でHTMLを書くことができる代物です。まだ導入しただけなので、実際に書くのはまだ先ですが、プログラミングを勉強している方は参考程度に調べて見てはいかがでしょうか？
Haml公式ページ（英語なのでそこはご了承ください）→http://haml.info/

そして3/26に学習したことは以下の通り。
・Chatspaceの画面設計→HTML、CSSを書いてブラウザ上で表示

理想的なのは、設計書だけ渡されてそれに沿って書いていくのがいいのですが、そこまで自信がなかったぼくは、サンプルのChatspaceからソースを検証して、それを基にHTMLとCSSを書いていく方法をとりました。もちろん、コピペばかりだと頭になかなか入らないので、なぜそのタグを使用しているのかとか、どういう意図で書かれているのか理解しながら少しずつ進めて行きます。
（ブラウザのソースを見る際には右クリック→検証で確認することができます。知っている人も多いかな？）

最後に3/27に学習したことは以下の通り。
・Chatspaceの画面設計（続き）

午前中は私用で勉強できなかったので午後からのスタートでしたが、実のところ7割くらいは3/26の段階で完成しておりました。
あとは、細かいところを修正したり、TODOのしてわからなかったところをググりながら丁寧に作業していました。
特に難関だったのが、アイコンを導入する際に「font-awesome-rails」というgem（プラグインみたいなやつ）を導入したのですが、そのアイコンの色を変更することができなくて悩みました・・・。最終的にこのサイト（https://syncer.jp/how-to-use-fontawesome）を見つけて解決できたので、なんとか安心いたしました。また、今回はCSSファイルを入れ子構造で作っているため、なかなか慣れずにどこに括弧を入れたかわからなくなるので要注意ですね。

次回までに、画面設計を終えてChatspaceのコントローラーやモデルクラスをコーディングできるように頑張って行きます！

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

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