20210210・11・12_アウトプット（オリジナルアプリ／チェックボックスの改善・習慣カウントのリファクタリング）
2/10 行ったこと 3時間15分
- オリジナルアプリ／チェックボタンの改善
👉9割進んだ！
2/11 行ったこと 7時間40分
- オリジナルアプリ／チェックボタンの改善・習慣カウント（コントローラー）の肥大化・リファクタリング
👉チェックボタン完成✨コントローラーの10行が1行になった！
2/12 行ったこと 4時間10分
- オリジナルアプリ／習慣カウント（ビュー）のリファクタリング
👉やっとできた！
新しい発見について
チェックボタンの改善
（左がアフター、右がビフォー）
当てづらさの原因として、５個習慣をカウントするビューについて、５つ分要素（別々のクラス名）を作成していたため。
その５つの要素をまとめて記述してcssが当たる場合と（要素共通の大きさ等）
:checked::beforeや:hoverのようなアクションを起こすときは別々に記載しないと上手く当たらない場合があった。フロントとサーバーサイド、どこで役割分担されているのかわからないが、ビューもあてやすくなるよう考えてサーバーサイドを実装できるようになりたいと感じた💦
リファクタリング
経緯
習慣カウントについて、非同期通信にしたかった。
しかし、JavaScriptで、
sendまでは実装できたもののopen以降の記述ができず。できなかった原因として、ビューにおいて要素ごとに
<%= "通算#{@user.where(count_1: 1).count}回" %>とデータベースからのデータの取り出しを行っており、それをどうJavaScriptへ記述していいかわからなかったため。そもそも、ビューにおいて、毎回DBから取り出しているのは良くないと感じていたため改善しようと思った。
2/11悩んだこと
改善しようと思ったものの苦慮↓😭 teratail.com
回答から学んだこと（コントローラー）
@counts = %w[count_].product(%w[1 2 3 4 5]).map(&:join).map do |clm| [clm, Habit.where(user_id: current_user.id, clm => 1).count] end.to_h
全体像として、重複している記述は、配列をハッシュを使い、まとめる。
%w記法を使って、配列やハッシュに伴う
[]``""を省略させ、可読性を上げる。.mapメソッドを使って、カレントユーザーかつ「１」のものを繰り返し処理でデータ検索&.countでカウント表示。.productメソッドを使って、左側にある要素を右側に適用させていくことが出来る。（今回で言えば、count_に、順番に1 2 3 4 5とあてていき、count_1,count_2...と展開できる）.joinメソッドを使用することによって、関連するテーブルの条件で検索できるようになる（今回で言えば、その後のwhereが使えるようになる）
Rails における内部結合、外部結合まとめ - Qiita
回答から学んだこと（ビュー）
ご指摘くださり、ビューに関しても、繰り返し文を使って改善したいと思った。
しかし、ハッシュの塊が50個くらいビューに出てきたり、カウントとリスタートが違うタイミングで繰り返しされたり、苦慮。
↓やっと、.valuesでバリューだけ表示できたと思ったらリスタートが繰り返しに・・😱
- each_with_indexを使うと、○番目なのかと、それに対応する要素を表示できると学んだ。
結果としては、今までの５分の１くらいの記述量でやっとかけた😭✨
<div class="rule_main" id="rule_main"> <% @counts.values.each do |val| %> <div class="rule1_content"> <div class="career_text" id="career_text"> <%= "通算"%> <br> <%= "#{val}回" %> </div> </div> <% end %> </div> <div class="restart"> <% @restarts.values.each do |i| %> <div class="restart_text" id="restart_text"> <%= "（restart#{i}回）" %> </div> <% end %> </div>
↓このような形になった✨
感想
Ray wow FMで聞いていた、やめ太郎さんのアットコーダーに対して「こんな短い行で書けるんだ」と感動した話の意味を実感した。カリキュラム、みんなが見やすいように書いてあった分、短縮記法のない世界でコードを書いていたんだということに気付けた。
html.erbが膨大になれば、それに伴ってcssも膨大になる。（繰り返し処理を使い、クラス名を一つにまとめて記述できれば、cssもシンプルになる）と感じた。奥深い😂winterboumさんのコメントを見て、やりたい！と思ったけれど最初は全然上手くいかなくて落ち込んだ。でも悔しい〜！と思ってまた金曜日に立ち向かったら表示できたので嬉しかった。eachメソッドはデータを繰り返し表示させるだけでなく、ビュー上の要素（かたまり）も繰り返し表示できることが勉強になった。
最近「生活上は、平凡な毎日」&「心は、出来ないことが出来るようになることを繰り返して成長を実感できていること」が一番幸せなのではないかと感じている。
他の人に比べたら毎日の成長がわずかかもしれないけれど、そんな自分を受け入れて、もっと極めていきたい！
覚書（12/29計画の見直し）
（１）やるべきこと （２）やりたいこと （３）やれること
（１）やるべきこと
- 卒業要件の完成
（２）やりたいこと
追加実装を学ぶためのミニアプリ作成
オリジナルアプリの作成
PHPの勉強
面白そうだから参加したい・見たい（済：やめ太郎さんのキータ表彰・yahooイベント）
読書
（３）やれること
メンタル：楽しみながら、ゲーム感覚でいく🎮😎
時間で区切り（達成すればよし）
- 1日 15分以上勉強する
追加実装のミニアプリを作り、引き出しを増やす
| 優先順位 | 内容（機能） | 締め切り | 達成度 |
|---|---|---|---|
| 1 | AWS S3 | 12/18 | 完了(フリマアプリ)に実装) |
| 2 | AWS EC2 | 12/24 | 完了(フリマアプリに実装) |
| 3 | ウィザード形式 | 12/27 | 完了 |
| 4 | SNS認証 | 12/28 | 完了 |
| 5 | 複数条件検索 | 12/29 | 完了 |
| 6 | タグ付 | 12/31 | 完了 |
| 7 | 画像プレビュー | 1/2 | 完了※フォーク |
| 8 | 複数枚写真OK | 1/4 | 完了※7に追加実装 |
| 9 | コメント機能(即時更新) | 1/8 | 完了 |
| 10 | クレカ登録 | 1/10 | 完了 |
| 11 | パンくず | 1/14 | 完了 |
| 12 | 日本語エラー | 1/18 | 完了 |
身に付ける力（直近）
PHP7
Docker
