More than 3 years have passed since last update.

【学習メモ】tempusdominus turbolink form_with fields_for cron migration

Last updated at 2020-05-25Posted at 2020-05-22

#0.目次
1.本日の学習内容
2.次週までの学習内容

#1.本日の学習内容

###①ナビゲーションバーが実行されないエラーの解決
【実現したいこと】
ナビゲーションバー（ハンバーガーメニュー）でボタンをクリックして、メニューを開いたり閉じたりができる状態にすること

【起こったこと・試したこと】
画面遷移すると、一度開くと閉じられなくなってしまった。

【原因】
teratailの似た質問から、turbolinkが邪魔している？

【解決策】

部分のturbolinkを消去したところ、解決。

app/views/layouts/application.html

※本当はerbだがわかりやすいようhtmlで閉じている
  <head>
    <title>Testapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all'%>
    <%= javascript_include_tag 'application' %>
  </head>

※参照：元々のナビゲーションバー

app/views/layouts/application.html

※本当はerbだがわかりやすいようhtmlで閉じている
<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">TTManager</a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="#">ホーム</a>
          <a class="nav-item nav-link" href="#">リマインダー設定</a>
          <a class="nav-item nav-link" href="#">レポートを見る</a>

###②フォームをクリックしてもカレンダーが表示されないエラーの解決

【実現したいこと】
Bootstrap4で、フォームにカレンダーを表示させて日付をクリックし、フォームに表示させる

【起こったこと・試したこと】
**「tempusdominus-bootstrap-4」**を実装し、カレンダーのマークは表示はされるが実行できなかった

以下は下記3つを実装

app/assets/stylesheets/application.scss

@import "tempusdominus-bootstrap-4.css";

app/assets/javascripts/application.js

//= require moment
//= require moment/ja.js
//= require tempusdominus-bootstrap-4.js

app/views/layouts/application.html

※本当はerbだがわかりやすいようhtmlで閉じている
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

【調査方法】
デベロッパーツールのConsole・Sourcesで確認。
※既に修正済で、別のエラーが出ていますがみているものはこれです

【調査結果・原因】
tempusdominus実行する前にjQueryを導入する必要があるため、導入してね
→jQueryがインストールされていなかったことが原因

【解決策】
https://www.sejuku.net/blog/57790
を参考にjQueryをGemifile、app/assets/javascripts/application.js、app/assets/stylesheets/application.scssに追記

gem 'jquery-rails'

app/assets/javascripts/application.js

//= require moment
//= require moment/ja.js
//= require jquery #ここを追記
//= require jquery_ujs #ここを追記
//= require tempusdominus-bootstrap-4.js

###③1つの画面（URL）で複数のテーブルのカラムをDBに格納させる方法
【実現したいこと】
複数の親・子関係のテーブルのDBに格納するフォーム入力事項について、どうやってそれぞれ正しいテーブルに正しいカラムを格納したら良いか？

【起こったこと・試したこと】
「= fields_for」があるらしいが、どうやって使えば良いのか調べても理解仕切れず、質問。slimで実装はしていたが、、、

= form_with model:record, local:true do |f|
= f.submit

【解決策】
下記が基本

1.Model,DBの状態を確認し、ちゃんと反映されているか確認する（rails db:migrate:statusなど）
2.モデルで、親子関係・リレーションが正しいか確認する
→複数形をつけるのは、今見ているマイグレーションファイルから見て、
複数の関係性があるから（逆を言えば、単一の関係であれば、単数形にすること）

user.rb

has_many :records

task.rb

has_many :records

3.コントローラを確認し、「.build」を活用しながら実装

controller.rb

  def new
    @record = Record.new　#newメソッドでインスタンス変数#record入れ込む
    output = @record.outputs.build　#入れ込んだ#recordと結合させるために「.（モデル）.build」を入れ込む
    practice = @record.practices.build　#上記と同じ要領で
    task = @record.tasks.build　#上記と同じ要領で
  end
※recordモデルは、ooutput,practice,taskモデルとは親・子関係

4.viewを実装

new.html.slim

= form_with model:@record, url: records_path, method: :post local:true do |f|
 = f.fields_for :output
  .form-group
   = f.text_field :output_name, class: 'form-control mb-4', id: 'output_name'
[中略]
= f.submit 'この内容で登録する', new_record_path, class: 'btn btn-primary'

※f.submitは1番下じゃなくてもOK。ちゃんと「form_with」と「f.submit」の関係性ができていればOK
※コードはこれから実装

###④マイグレーションの注意事項
【状況】
モデルに新しくカラムを追加して、db:migrateしたら、「既にできています」と表示された

【原因】
マイグレートは、テーブルを作成するために実行するもの（マイグレーションファイルは、その実行内容を示したファイル）であって、モデルに変更を加えただけでは反映されない！！

【解決策】
①db:reset
DBの内容を全てリセットし、もう一度マイグレーションする処理

②変更用のマイグレーションファイルを作成すること
・UPしている状態を、DOWNにするためのマイグレーションの処理
・変更用のマイグレーションファイルを別途作成
※ここ理解が弱いので調べて追記予定

###⑤その他
・デベロッパーツールのエラーの「$」は「jQuery」を指す
・リマインダーメールの実装について
→Web上で動くものではない（＝クライアントの操作によるトリガーがない）ため、サーバー（インフラ）でプログラムを実行させる必要あり！つまり、最後の実装
→方法の1つが、cron
・日付のみ示すデータ型：date

#2.次週までの学習内容

▼マイグレーションのUP、DOWNさせる事例・対応方法のインプット・実践
▼マイグレーションの変更方法のインプット・実践（Rails速習に載ってる？user_idをTaskテーブルに追加だったかな）
▼AWSのudemy動画学習
▼レポート表示のJS実装
▼Bootstrapのpadding設定の事例・方法のインプット・実践
▼cronのインプット

##参照
【BOOTSTRAP4でフォーム入力の際にカレンダーから日付入力する方法】
https://its-office.jp/blog/bootstrap/2019/02/18/bs4calendar.html
【bootstrapのNavbarのハンバーガーメニューが閉じない[原因はTurbolinks]】
https://qiita.com/kota-shidara/items/964f9fe92a467cd28583
【【Rails】turbolinksを無効化する】
https://qiita.com/kota-shidara/items/964f9fe92a467cd28583
【accepts_nested_attributes_forで親子孫関係のレコードを同時作成する方法【実装例・rspecあり】】
https://shinmedia20.com/rails-relation-create
【【Rails】form_withの使い方を徹底解説！】
https://pikawaka.com/rails/form_with
【Rails Ambassador】
https://rails-ambassador.herokuapp.com/tips/FormWithHelper
【fields_forの上手な使い方】
https://qiita.com/kouuuki/items/5daf2b5f34273d8457f7
【fields_forを使った子モデルへの複数レコード保存【cocoonが便利】】
https://www.y-hakopro.com/entry/2019/08/03/234126
【cronの設定 - プログラムを指定した時間に定期的に自動的に実行する方法】
https://memorva.jp/memo/linux/cron.php
【5.5. 日付/時刻データ型　※DB：Postgresql】
https://www.postgresql.jp/document/7.3/user/datatype-datetime.html

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up