【Rails6】FullCalendar(v5)の導入 #JavaScript

FullCalendarを導入しようとしたところ、バージョン違いに気づかず手こずってしまいました。
無事に導入できたので、記念に「カレンダーを表示するまで」をまとめてみたいと思います！

環境

ruby 2.6.5
rails 6.0.0
FullCalendar v5.3.1

導入方法の違い

さくっとカレンダーを作れる便利なプラグインで有名なFullCalendar。
これまでrailsでFullCalendarを導入する場合には、
gem 'jquery-rails'
gem 'fullcalendar-rails'
gem 'momentjs-rails'
のgem３点セットを導入するのがお決まりだったようですが、
FullCalendarのバージョンアップにより、jqueryとmomentjsが不要になった模様です。

さらに、RailsもRails6からデフォルトでwebpackという仕組みを使用するようになりました。
これまでjavascriptファイル関連の格納先は
app>assets>javascript　でしたが、
app>javascript　に変更になっています。
webpackを使うためのgem webpackerはデフォルトでrails newした時に入っています。

というわけで、この２つの変更点を押さえて、公式サイトを参考にgemではなく、yarnで入れていきます。

（１）インストール

rails newから、新しいアプリケーションを立ち上げたところです。
ターミナルでyarn addとして必要なファイルをインストールします。

yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

この@fullcalendar/coreは必ず必要なファイルです。
@fullcalendar/daygridは1ヶ月カレンダーの表示用です。
１週間カレンダーや、時間軸のあるカレンダーを使いたい場合は、それぞれ対応したプラグインをインストールします。
@fullcalendar/interactionは、カレンダー上の予定をクリックして何かイベントを起こしたり、カレンダー上の予定をドラッグして別の日にちに移動したり等、操作したい時に使用します。

今回の記事では上記の３つにしてみましたが、
どんなカレンダーにしたいかによって、インストールするファイルが変わると思うので、詳しくは公式サイトのプラグイン一覧から探してみてください。
・公式（プラグイン一覧） https://fullcalendar.io/docs/plugin-index
プラグイン一覧の右側にあるyarnの各遷移先から、yarn addのコマンドを確認できます。
複数のプラグインを同時にインストールしたいときは、上記のように半角スペースを入れて列挙すればOKでした。

（２）読み込み

インストールしたファイルを読み込んでいきます。

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

//ここまでは自動で生成された記述。
//以下を追加

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

document.addEventListener('turbolinks:load', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin, interactionPlugin ]
  });

  calendar.render();
});

公式サイトでは'turbolinks:load'の部分が'DOMContentLoaded'となっています。
どちらでも表示はされましたが、いろいろ操作していくことを踏まえて
'turbolinks:load'に変更してみました。

（３）Viewの準備

例としてeventsコントローラーという名前で作っていくことにしてみます。
ターミナルで以下を実行した後に、ルーティングの設定をしてviewにカレンダーを設置します。

rails g controller events index

config/routes.rb

Rails.application.routes.draw do
  root to: "events#index"
  resources :events 
end

app/controllers/events_controller.rb

class EventsController < ApplicationController
  def index
  end
end

app/views/events/index.html.erb

<h1>Events#index</h1>
<p>Find me in app/views/events/index.html.erb</p>
<%# ここまでは自動で生成された記述。通常は不要。 %>
<%# 以下にカレンダーの描画部分を追加 %>
<div id='calendar'></div>

サーバーを立ち上げたら……表示されました！

（４）ファイルを整える

とりあえず表示はされましたが、
カレンダー操作に関するjavascriptの記述が多くなることが予想されるので、ファイルを切り出します。

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
//以下を追加
require("../calendar")
//以下にあったimport以下の記述を削除

app/javascript/calendar.js

//新規ファイルを作成してjavascriptフォルダに格納。calendar.jsと命名してみました。
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

document.addEventListener('turbolinks:load', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin, interactionPlugin ]
  });

  calendar.render();
});

（５）あとは好きな感じにカスタマイズ！

FullCalendarのプラグインでBootstrapやmoment.jsを入れることもできます。
カレンダーのタイトル部分の変更や、月/週表示の変更、予定を入れる方法等々、
カスタマイズについては紹介してくださっているサイトをたくさんみかけたので、
そちらを参考にしながら私もこれからカスタマイズしてみます！

まとめ

以上、rails6でのFullCalendar v5の導入（表示まで）でした。

Ruby on Railsの学習を始めて約1ヶ月半の初学者ですが、
このカレンダー導入に取り組んだおかげでアップデート情報のチェックは重要ということを実感しました。
あと記事を書くにあたりMarkdownの勉強になりました。
もし記事内容に誤りがありましたら、優しく教えていただけたら嬉しいです。
お読みいただきありがとうございました！

参考

FullCalendar公式:
https://fullcalendar.io/
GoRails lesson#292 How to use Javascript via Webpacker in Rails 6:
https://gorails.com/episodes/webpacker-javascript-in-rails-6