Uncaught TypeError: $(...).datepickerと表示される不具合などを修正する

修正点１

#application.html.erb

<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
   <script src="https://kit.fontawesome.com/65c7366224.js" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
</head>
<body>
  #省略
  
  #最下段
  <script type="text/javascript">
      $(document).ready(function () {
        $('.datepicker').datepicker({
          dateFormat: "yy-mm-dd"
        });

        $('.overlay').on('click', function () {
          // hide sidebar
          $('#sidebar').removeClass('active');
          // hide Overlay
          $('.overlay').removeClass('active');
        });

        $('#sidebarCollapse').on('click', function () {
          // open sidebar
          $('#sidebar').addClass('active');
          // fade in the Overlay
          $('.overlay').addClass('active');
        });
      });
    </script>
</body>

このように記述した際にブラウザでエラーが発生する。

Uncaught TypeError: $(...).datepicker is not a function
at HTMLDocument.<anonymous> (dashboard:365)
at e (jquery-3.4.1.slim.min.js:2)
at t (jquery-3.4.1.slim.min.js:2)

原因の仮説

datepickerはjQuery-UIの機能の一つである。jQuery-UIがloadされていないのではないか？

対処

Googleの Hosted LibrariesからjQuery-UIのスニペットをコピーし、application.html.erbのheadタグ最下段にペーストする。

結果

datepickerが使用可能になった。

考えたこと

CDNの仕組みとは?

修正点２

diaries#newの投稿日フォームに当日の日付をデフォルトで表示する。

(日付選択の手間を省くことができる。)

対処

以下の様に記述した。

$('.datepicker').datepicker({
  dateFormat: "yy-mm-dd",
  defaultDate: new Date()
}).datepicker("setDate", new Date());

結果

フォームに日付が自動で出力される様になった。

修正点3

Dashboards#indexで、投稿カードのコンディション部分の表示が崩れる。

divとulタグにスタイルを当てていたが、うまくいっていない。

Image from Gyazo

対処

tableを導入した。table要素にはmarginを設定できず、paddingを設定することでレイアウトを微調整した。

# layouts/_diaries.html.erb
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <tr>
      <th>疲労</th>
      <td>
        <ul class="list-group list-group-horizontal">
          <% conditions = condition_generator(diary.activity) %>
          <% conditions.each do |key, value| %>
            <%= content_tag(:li, key, class: "#{class_generator(value)}") %>
          <% end %>
        </ul>
      </td>
    </tr>
# 以下省略

/* style.css  */

/* conditions */
.conditions > table > tbody > tr > th {
  padding-right: 10px;
}

.conditions > table > tbody > tr > th, td {
  padding-bottom: 10px;
}

結果

いままで表示が崩れていたiphone6/7/8サイズの画面でも表示が崩れない様になった。

Image from Gyazo