PF作成：６日目

昨日は夜遅くて作業日誌が書けなかったので、振り返りもかねて朝書く。

## 進捗　チャレンジ
- 管理者の神社、仏閣ページを作成。ここからいろいろ新しいことに挑戦。
- seedを使用して地方、都道府県データをすべて保存した。
- enumを使用したセレクトボックス作成
- セレクトボックスの中身のenmuを日本語化
- 能動的なセレクトボックス

## 学習
-今回admin側とuser側が存在するサイトを作成しようと考えていて、TOPページが全く同じなのでnamespaceを使用しないで、普通に作成してしまったがnamespaceは必要だった。理由としてはadmin側から閲覧しているのかuser側から閲覧しているのか判別するためらしいが、いまいち理解しきれていない。なので現状はとりあえずadminやuserなどで管理する場合は必要という考え方にしておく。（参照：https://qiita.com/ryosuketter/items/9240d8c2561b5989f049）
- 外部キーにもバリデーションが必要か？結果いらない。アソシエーションを組むとバリデーションが自動的にされるらしい。
- t.references :カラム名, null: false, foreign_key: true<br>マイグレーションファイル外部キーカラムで使用するこのコードの書き方についてもう少し詳しく調べた。<br>t.references :カラム名,で外部キーを自動で生成してくれる。null: false,はここでは詳細を記述することはしないが空制約。foreign_key: trueが外部キー制約について示している。この外部キー制約が分かりそうでわからなかったので調べた。<br>参照資料２つ<br>URL:https://qiita.com/ryouzi/items/2682e7e8a86fd2b1ae47<br>URL:https://qiita.com/kamillle/items/5ca2db470f199c1bc3ef
- seedを使用してデータベースにすべて保存した。アソシエーションを最初に結ばないと地方と都道府県をペアとして保存しようとしているので保存されない。
- 配列も一緒にseedに記述する。
- 実際のseedの中身。
- ```ruby:qiita.rb
    #地方と都道府県のペア配列
    area_prefectures = [
      ["北海道地方", ["北海道"]],
      ["東北地方", ["青森県", "岩手県", "宮城県", "秋田県", "山形県", "福島県"]],
      ["関東信越地方", ["茨城県", "栃木県", "群馬県", "埼玉県", "千葉県", "東京都", "神奈川県", "新潟県", "山梨県", "長野県"]],
      ["北陸東海地方", ["富山県", "石川県", "福井県", "岐阜県", "静岡県", "愛知県", "三重県"]],
      ["近畿地方", ["滋賀県", "京都府", "大阪府", "兵庫県", "奈良県"]],
      ["中国地方", ["和歌山県", "鳥取県", "島根県", "岡山県", "広島県", "山口県"]],
      ["四国地方", ["徳島県", "香川県", "愛媛県", "高知県"]],
      ["九州地方", ["福岡県", "佐賀県", "長崎県", "熊本県", "大分県", "宮崎県", "鹿児島県"]],
      ["沖縄地方", ["沖縄県"]]
    ]

    #h配列からデータ取得、地方と都道府県のペア組んで保存
    area_prefectures.each do |area_prefecture|
      # area_prefecture配列から地方名と都道府県名のペアを取得
      area_name = area_prefecture[0]
      # 地方レコードを作成し、データベースに保存する
      area = Area.create!(name: area_name)
      # 都道府県名の配列を取得
      prefecture_names = area_prefecture[1]
      # 各都道府県名を処理
      prefecture_names.each do |prefecture_name|
        # 都道府県レコードを作成し、対応する地方に紐付けてデータベースに保存する
        area.prefectures.create!(name: prefecture_name)
      end
    end
    ```
- enumを使用したセレクトボックスのやり方。<br>form_withヘルパーでできる。記述方法は<%= form.select :カラム名, モデル名.複数形カラム名_i18n.invert, { prompt: "選択してください" }, { class: "form-control" } %><br>これで可能。ここに上記のコードにもある。_i18n.invertでenumのセレクトボックス日本語化が可能。
簡易的に説明すると、rails cでコマンドをカラム名, モデル名.複数形カラム名_i18nで調べるとkey（左）とvalue(右）がわかる。keyが表示されるものでvalueがデータとして送信されるもの。今回はそれを逆にすれば日本語化ができたので、反転させるコードinvertで日本語化に成功した。ちなみに_i18nはenmu日本語化のコマンド。詳しいことは別サイトで。<br>参照したURL:http://rubistance.blog5.fc2.com/blog-entry-6.html
- form.selectを使用するときは機能とHTML要素に{ }をつけてあげないとブートストラップが反映されない
### 能動的なセレクトボックス（JavaScript）
- ここが昨日の部分で一番難しくいまだに理解できていない、能動的なセレクトボックス。JavaScript使用しての方法。<br>作業日誌として一応書いておくが、全くもって理解していないので後日整理しようと思っている。
- 今回やりたかったことは地方を選択したら都道府県も自動的に絞られてセレクトボックスの中身が変わるというもの。（データベースにすでにデータは保持されている状態）
- ```ruby:qiita.rb
    <div class="form-group">
        <%= form.label :地方 %>
        <%= form.select :area_id, Area.all.collect { |area| [area.name, area.id] }, { prompt: "地方を選択してください" }, { class: "form-control", id: "area-select" } %>
      </div>

      <div class="form-group">
        <%= form.label :都道府県 %>
        <%= form.select :prefecture_id, options_for_select([]), { prompt: "都道府県を選択してください" }, { class: "form-control", id: "prefecture-select" } %>
      </div>
```
セレクトボックスの記述はこうなった。JavaScriptの方は
```ruby:qiita.rb
<script>
const areaSelect = document.getElementById('area-select');
  const prefectureSelect = document.getElementById('prefecture-select');
  const prefecturesByArea = JSON.parse('<%== Prefecture.includes(:area).map{|o| { id: o.id, name: o.name, area_id: o.area.id } }.to_json %>');

  function updatePrefectureOptions() {
    const selectedArea = areaSelect.value;
    const prefectures = prefecturesByArea.filter((o)=> o.area_id == selectedArea);

    // 都道府県のセレクトボックスを更新します
    prefectureSelect.innerHTML = '<option value="">都道府県を選択してください</option>';
    prefectures.forEach(function(prefecture) {
      prefectureSelect.innerHTML += `<option value="${prefecture.id}">${prefecture.name}</option>`;
    });
  }

  // 地方が変更されたときに都道府県のセレクトボックスを更新します
  areaSelect.addEventListener('change', function() {
    updatePrefectureOptions();
  });
  </script>
```
全くわからないので後で整理するが、今のところはこう。解説もできない。ただ少しだけわかったことがあるので書こうと思う。
JavaScriptを使用する場合Viewに書くのは推奨されないと思っていたので、JavaScriptファイルにコーディングをしていたが、まだ理解できていない段階でそれは難しいしエラーが起こりやすいそう。なので最初はviewにコーディングしてもいいらしい。JavaScriptファイルにコーディングするとなるとRubyのコードが使えない。しかし能動的なセレクトボックスを使用するためには<%== Prefecture.includes(:area).map{|o| { id: o.id, name: o.name, area_id: o.area.id } }.to_json %>この記述が結構大事で、これをJavaScript用に変更するのが難しいかららしい。本当にこのくらいしかわからない。

## ヒント
いろいろわからないことが多くて調べていたら今後ヒントになりそうなURLがあったのでここに残していこう。
- 簡易的な日本地図でクリックすると関連した地方に遷移できる仕組みを作るため。<br>https://kinocolog.com/pref_select/
- フラッシュメッセージ<br>https://zenn.dev/keyproducts/articles/e65c375818e36d
- バリデーションの種類<br>https://pikawaka.com/rails/validation
- データベースのデータ型について<br>https://qiita.com/jackie0922youhei/items/472ae8a35455475b3de8
- 日付の入力フォーム（年月日）<br>https://qiita.com/___fff_/items/ad5ce5d2a0090d8c6b6c<br>これが無理そうだったらセレクトボックスに変更。
- ログインできないエラー。リダイレクト処理が繰り返し行われている。これはどうやらルーティングコードの記述する順番が悪いらしい。私が実際に出たエラーではなくて解決もできてないので実際どうなるかわからないが順番を見直すを直ることが多いらしい。


## 今日の予定
- 画像投稿機能を追加
- 投稿できないエラー（寺社ステータスあたりのenumでエラーが起きてそう？）を解決
- ログアウトボタンを簡易的に作成
- userの御朱印投稿機能作成準備


機能はアプリケーションのメインに入り始めて最初の関門で１３：00から質問できたということもありいろいろ学びはしたが、一度整理をしないと理解しきれていな部分があると思う。特に能動的なセレクトボックス。なので今日の予定として実装を進めながらもどこから整理する時間を取ろうと考えている。にしても昨日寝たのが遅いからめっちゃ眠い。