20210126・27・28_アウトプット（オリジナルアプリ「励ましの部分」）
1/26行ったこと 2時間40分
1/25の復習（アウトプット）…1時間15分
オリジナルアプリ（励ましの部分）…1時間25分
👉上手く行かない😣
1/27行ったこと 40分
- 商品購入機能の実装（追加実装アプリ）
1/28行ったこと 7時間40分
オリジナルアプリ（励ましの部分）…8時間15分
👉「セルフコンパッション」ページについて、８割程度、機能ができた✨アウトプット…35分
新しい発見
1/26で詰まっていたところ
（１）binding.pryで拾えないのはJavaScriptにおけるレスポンス（ XHR.response.●●;）の●●部分がタイポしていたからだった
（２）「悩み」「励まし」が別コントローラー、別モデルの場合で、同一のビュー（「悩み」コントローラーのindexに全てが集約されたビュー）において「励まし」のindexをrenderで読み込みさせることは出来る
（３）しかし、同一ビュー内にsubmitが二つあり、それぞれを押した時に別々に保存させようとすると、renderさせていた「励まし」の方が、ストロングパラメーターで上手く運ぶことが出来ず、nilになってしまう・・。 （つまり、ビューとは別のコントローラーにおいてcreateアクションが実行できなかった）
（４）さらには「悩み」の部分が、「励まし」のビューに引きずられて、右に表示されてしまう。（リロードすると左に行く）
勉強になったこと（上記（３）の部分）
ただただ
binding.pryを挿入すると、「204エラー」（リクエストは出来てるけど返すビューないよ）となってしまう。しかし、この記事のおかげで
save!とさせることによってデバック出来ることが勉強になった。
save!にしたらエラーが422エラーに変化した。「返すビューないよ」から「render２つあって、そもそもデータ上手く送れてないよ」と原因がわかった。でも、直せなかった。「悩み」と「励まし」のコントローラーに
and returnを入れてみたり、JavaScriptのrenderを複数で運ぼうとしたりしたけど別のエラーになってしまったりして解消せず。悔しい。
1/27商品購入機能の実装
夫が体調を崩してしまった。
時間をかけずに出来る追加アプリを少しだけ学んだ。
1/28行ったこと・勉強になったこと
先に説明すると今日は４つできた。
前提を疑い始めた
enumを使って「悩み」「励まし」をラジオボタンで選択してDBへ保存できるようにした保存したデータを元に、値を取り出して、一覧表示（
eachメソッド）出来るようになった非同期通信で、条件分岐出来るところまで出来た
以下からは、詳細説明。
設計の前提を疑い始めた
そもそも、
submitを２つにすることに、こだわる必要があるのか？と思い始めた。一つのビューにおいて「悩み」と「励まし」を呟くことが出来て、会話調にしたいのが完成形である。
日頃使っているラインが「呟き」に対し、「一つのsubmit」なので、２人分なら２人分と思っていた。ボタン一つでも、「悩み」・「励まし」を指定してから投稿すれば、一つのボタンで済むのではないか。
空のカラムがないように出来るのであれば、コントローラーやモデルを別に作る必要がない。
「悩み」か「励まし」かによって、
if文を使って、表示させればいいのではないか？と思った。
それでやり直してみよう！【enum`を使って「悩み」「励まし」をラジオボタンで選択してDBへ保存できるようにした】
radioボタンの実装にあたり、
enum（イーナム）を初めて知った。今回で言えば「悩み」「励まし」に番号を割り当てて、integer型で実装できる方法。
データベースに、「悩み」：「０」、「励まし」：「１」と保存することができる。
enum（イーナム）の実装
マイグレーションファイル
モデル
コントローラー
ビュー
の４つを修正する必要があると理解。
| 直す箇所 | 行う内容 |
|---|---|
| マイグレーションファイル | ●t.integer :message_type, default: 0を追加する。 |
| モデル | ●enum message_type: { trouble: 0, encouragement: 1 }を追加する。●カラム名に対して、悩みは「0」、励ましは「１」にした。 |
| コントローラー | ●permitにカラム追加する。 |
| ビュー | ●上記を設定することによって:troubleと:encouragementが使えるようになる。 |
ビューはこんな感じ！
（省略）
<%= f.label :trouble, "悩みをつぶやく"%>
<%= f.radio_button :message_type, :trouble %>
<%= f.label :encouragement, "励ましの言葉をかける" %>
<%= f.radio_button :message_type, :encouragement %>
（省略）
データベースに保存できるラジオボタンがやっと出来た😂↓
参考にした記事
イーナムを実装するのに、一番時間がかかった😂いろんな記事をみて出来る方法を探った。
- ↓一番初めに見つけてマイグレーションファイルを参考にした
[Rails]ユーザー情報にenumを使った実装 | LaptrinhX
- ↓インスタンスの中身を確認しやすい記事
↓Hamlを使わなくてもradioボタンにはidがつくことがこの記事のおかげでわかった
【保存したデータを元に、値を取り出して、一覧表示（eachメソッド）したい】
<% if trouble.trouble? %>というようなenumを実装したことによるメソッドで値を取り出すことが出来た。昨日までずっと出来なかった左右に出現させるビューが出来た！！！
↓いつもわかりやすいピカわかさんに助けてもらった pikawaka.com
【非同期通信で、条件分岐出来るようにしたい】
JavaScriptで「悩み」のラジオボタンの時は左側にいくブロックを、「励まし」のラジオボタンの時は右側にいくブロックを、表示させたい。
しかし、if文で、ラジオボタンを選択したらいいのかわからなかった。
結論、テラテイルで質問して、そこから得た回答と、ネットで見つけた方法を組み合わせてできた。
選択するのに
querySelectorが使えることと、idを指定するには#を使うことが勉強になった。
今日できたところ
- やっとここまでできたー！！あとは、JavaScriptが読み込まれるタイミングや反映方法を実装できれば機能ができそうなところまできた。嬉しい。
また明日、
●非同期通信で上手く表示できるようにする
●ビューを整える
を行おうと思っている！
感想
夫についてすぐに病院にいけたおかげでお薬をもらえて改善した。本当によかった。
ここ半年近く、プログラマーになりたい夢を応援してくれて、ほとんど家事をやってくれていたことを改めて感じた。本当にありがとう。
急遽業務の引継ぎなどで会社に迷惑をかけてしまったけれど、サポートしてくれた。困ってしまった時に力になってくれる先輩に恵まれてて幸せだと思った。スクールの面談もリスケすることになったけれど温かく調整してくれて助かった。
セルフコンパッションの機能も諦めそうになっていたけれど、あと少しのところまで進めることができて嬉しかった。
自分も体調崩さないように早めに寝よう！
覚書（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
