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

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

今回はチャットアプリ「Chatspace」の画面設計の続きからやっていきます！

とりあえず画面デザインの完成をいち早く終えて次のステップに移りたいところです！
他にもやることはいっぱいあるので・・・。

3/28にやったことは以下の通り。

・Chatspaceの画面設計（前回の続き）

とりあえず、最低限の部分は完成したのでGithubでコミット→プッシュ→プルリクエストを送ってソースレビューをしてもらいましたが、かなり辛辣な言葉が返ってきました・・・。
まず反省しなければいけない点としては、サンプルのHTMLの要素名をそのまま使ってしまったこと、そしてCSSをブラウザの要素から検出してほぼそのまま書いてしまったことです。早く終わらせるという意味ではアリですが、ここでの学習はあくまで「自走できる」エンジニアの育成なので、力が身につかないと判断されたのだと思います。実際に自分で考えているというより、調べてそのまま書いただけという自覚はあったので・・・。なので、ソースレビューで指摘された事項を直してまた翌日ソースレビューをいただくことにします。
あと、ソースレビューの時に知ったのですが、アンパサンドという手法を使うとCSSがよりシンプルに書くことができるみたいです。例えばsampleという親要素があったとして、子要素にsample_textとあるとすると、sampleの部分を「&」に置き換えができるというものです。Qiitaにも掲載されているので、気になったら是非読んでみましょう。（Qiita アンパサンドの使い方について→https://qiita.com/noqua/items/adc24c28c13e9b74d3ad）

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

・Chatspaceの画面設計（続き、修正）

前半はほとんど進捗がない状態でかなり辛かったですね・・・。修正事項が多すぎてどこから手をつけたらいいのか全くわからない状態でした。それでも一つずつきちんと消化して夜にはなんとかGithubでコミット→プッシュ→プルリクエストまではできました。

特に困ったのがlink_toタグをHamlでの書き方には手を焼きました・・・。HTMLからHamlに変換する方法（→https://qiita.com/yuki-n/items/f922160e4aa48e42be7e）
があったのですが、SyntaxError（基本的には文法関係のエラー）の連発でなかなか苦労しました。最終的にはインデントがおかしかったというかなりイージーな解決法でしたが、そこまでたどり着くのに何時間もかかってしまいましたね。
なにはともあれ、無事に画面設計のベースは完成いたしました。

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

・Chatspaceのユーザー管理画面、グループ作成、メッセージ送信機能の実装

なんとなくベースはGemでdeviseを導入したり、なんだかんだでベースはできあがったのですが、Routing Errorのせいでなかなかうまくいきませんでした・・・。テストコードを書くこともやらないといけないので同時進行で進めて行きたいと思います。

そして3/31に学習したことは以下の通り。
・単体テストの基礎的な概要
・コントローラークラスのテスト

品質管理において重要なテストをやるときがきました。基本的には人力で画面を操作するのではなく、テスト用のソースコードを書いてそれをターミナル上で実行してエラーを検出するという感じです。RspecというRubyのテストに特化した言語があり、モデルやコントローラー1つに対して1つのテストコードを書くのが基本です。
Javaなどの他の言語でも同様だと思いますが、テストコードを書くときに重要なコツをまとめていきます。
①各exampleで期待する値は1つにする
②期待する結果をわかりやすく表示させる
③起きてほしい事象とそうでない事象を両方記述する
④境界値（文字数制限とか）を確認する
⑤可読性の高いソースコードを書く

他にもいっぱいあると思いますが、だいたいこんな感じかなと思います。駆け出しのエンジニアの人や勉強している人はぜひ参考にしてみてください。

今回は以上になります！特に画面設計が完成したのはかなり安心しました・・・。他にもテストコードの作成やChatspaceの機能を充実させるといったこともしなければいけないのでかなり大変ですが頑張ります。

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

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