🔰Ruby on Railsでカレンダーを作ってみる🔰
概要
ruby on railsを今後使うことになりそうなので、自学のためカレンダーを作ってみることにした。
カレンダーを作るまでの過程で学んだrubyの基本に関してもザっと書いていく。
(後でトピックごとに記事を分けるかも)
筆者のレベル
rubyもrailsも触ったことのない全くの初心者👶
PHPをずっと書いてた。
やったことざっくり流れ
- 環境構築(割愛)
- プロジェクト作成
- カレンダー作成用gemのインストール
※とりあえずカレンダーの表示までをゴールにする - Contollerの作成
- viewの作成
1.プロジェクト作成
まずはプロジェクトを作成。
# 新しいRailsアプリケーションを作成(必要なフォルダ・ファイルが自動で作成される)
rails new create-callendar
次のステップに進む前に...
次はbundleのインストールを行うわけだが、そもそもgemやbundlerとは??といったところを整理してから進みたいと思う。
(じゃないと後々つまりそうなので)
gemとは何か
そもそもまずgemに関しての理解がフワついてるので整理。
公式ドキュメントを参考にする限り、ruby向けのライブラリということらしい。
gemコマンドを使うことでライブラリのインストールや管理ができる。
bundlerとは何か
gemの依存関係とバージョンを管理するためのツール。
bundlerを使えばgemのバージョン切り替えも簡単にできる。
gemとbundler何が違うの??
調べてるとgem・bundlerどちらもgemを管理できるツールという点で同じように思える...のでさらに調べてみた。
-
gem
Rubyのバージョン毎に紐づくためPJごとの管理が不可。 -
bundler
PJごとに紐づく。
Gemfileにインストールしたいgemの内容を記載しておけば、記載されたgemを一括でプロジェクト内にインストールできる。
bundlerによってインストールされたgemとgemのバージョンはGemfile.lockに記載される。
(基本的にlockファイルを手動更新することは無い)
2.カレンダー作成用のgemをinstall
ざっっっくりgem,bundlerを理解したところで本来の目的であるカレンダー作りに戻る。
あらかじめbundlerがインストールされていることを確認する。
$ bundler -v
Bundler version 2.4.13
gemをインストールしたいので、Gemfileに下記を追記する。
# Use create_callendar
gem 'simple_calendar', '~> 2.0'
(Gemfileの記法がすごく気になるけど、これはまた別記事で触れてく)
追記したら、作成したPJのフォルダでbundle installを実行
bundle install
Fetching gem metadata from https://rubygems.org/..........
Resolving dependencies...
Using rake 13.0.6
Using date 3.3.3
Using bundler 2.4.13
Using concurrent-ruby 1.2.2
Using minitest 5.18.1
Using io-console 0.6.0
Using builder 3.2.4
Using erubi 1.12.0
Using racc 1.7.1
Using crass 1.0.6
Using rack 2.2.7
Using nio4r 2.5.9
Using websocket-extensions 0.1.5
Using marcel 1.0.2
Using mini_mime 1.1.2
Using timeout 0.4.0
Using public_suffix 5.0.1
Using bindex 0.8.1
Using msgpack 1.7.1
Using matrix 0.4.2
Using regexp_parser 2.8.1
Using method_source 1.0.0
Using thor 1.2.2
Using zeitwerk 2.6.8
Using rexml 3.2.5
Using rubyzip 2.3.2
Using websocket 1.2.9
Using sqlite3 1.6.3 (x64-mingw-ucrt)
Using net-protocol 0.2.1
Using i18n 1.14.1
Using tzinfo 2.0.6
Using nokogiri 1.15.2 (x64-mingw-ucrt)
Using rack-test 2.1.0
Using websocket-driver 0.7.5
Using addressable 2.8.4
Using bootsnap 1.16.0
Using reline 0.3.5
Using puma 5.6.6
Using selenium-webdriver 4.10.0
Using sprockets 4.2.0
Using activesupport 7.0.5.1
Using loofah 2.21.3
Using net-imap 0.3.6
Using net-pop 0.1.2
Using net-smtp 0.3.3
Using xpath 3.2.0
Using tzinfo-data 1.2023.3
Using irb 1.7.0
Using webdrivers 5.2.0
Using rails-dom-testing 2.0.3
Using rails-html-sanitizer 1.6.0
Using globalid 1.1.0
Using activemodel 7.0.5.1
Using mail 2.8.1
Using capybara 3.39.2
Using debug 1.8.0
Using actionview 7.0.5.1
Using activejob 7.0.5.1
Using activerecord 7.0.5.1
Using actionpack 7.0.5.1
Using jbuilder 2.11.5
Using actioncable 7.0.5.1
Using activestorage 7.0.5.1
Using actionmailer 7.0.5.1
Using railties 7.0.5.1
Using sprockets-rails 3.4.2
Using actionmailbox 7.0.5.1
Using actiontext 7.0.5.1
Using importmap-rails 1.2.1
Using stimulus-rails 1.2.1
Using turbo-rails 1.4.0
Using web-console 4.2.0
Using rails 7.0.5.1
Fetching simple_calendar 2.4.3
Installing simple_calendar 2.4.3
Bundle complete! 16 Gemfile dependencies, 74 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
無事インストールできたっぽい。
サーバを起動してみる
カレンダーを作る前にちょっとここでサーバを起動してみる。
# サーバを起動
rails s
すると...
bs_fetch:open_current_file:open (Errno::E-01)
といったエラーが出た...。
原因が分からず、調べてみたところ
1.onedriveが干渉してるかもしれないのでonedriveを停止する
2.require 'bootsnap/setup'をコメントアウトする
の2択で解決できそう。
1に関してはonedriveと同期していないので試さず、2を試したところ無事サーバは起動できた。
- bootsnapとは
rails起動時の処理速度を上げるためコンパイル結果をキャッシュするgem。
とりあえずサーバの起動もできたっぽいので、カレンダー作りにまた戻る。
3.Controllerを作る
rubyではコマンドを実行することで指定したディレクトリ以下にControllerを作ることができるらしい。
実行コマンド
# controllerの後に任意のコントローラ名を指定する
$ rails generate controller Callendar
create app/controllers/calendar_controller.rb
invoke erb
create app/views/calendar
invoke test_unit
create test/controllers/calendar_controller_test.rb
invoke helper
create app/helpers/calendar_helper.rb
invoke test_unit
これでcontrollerの作成完了！
4.viewを作る
今回はとりあえずカレンダーを表示させることをゴールに据えてるので、次にviewを作る。
(今後Model等は作成予定。)
viewsフォルダはPJ作成時に自動生成🅂されるので、任意の名称のファイルを作成する。
今回はsimple calendarを使うので、ファイルに以下を記述する。
<%= month_calendar do |date| %>
<%= date %>
<% end %>
サーバで表示を確認してみると...
css未適用の状態だが、日付を取得できてる！(便利)
今の状態では見づらいのでここからcssを適用していく。
# デフォルトのcssを読み込む
*= require simple_calendar
これで整形できているはず...!と確認してみると...。
なぜかエラーに...。
cannot load such file --sassc
吐かれてるエラーは上記の通りだが、なぜこのエラーが出ているのか分からない...。
同様の事象の解消法を載せている記事があったのでGemFileの該当箇所のコメントアウトを外し、bindle installを実行したら無事解消した。(sasscがインストール対象に含まれてなかったのが原因なのね)
参考にさせていただいた記事→rails 7.00における "cannot load such file --sassc"の解決法
改めて表示を確認してみると...?
無事cssが適用できてる！
今回はカレンダーの表示までがゴールだったので、ここまでとして次回以降機能を追加していく。
初めてrubyを触ってみての感想
まだ記法に慣れなかったり、自動生成されるファイルに書かれている内容が気になるので、追々調べてまとめていきたいと思う。
それと今回はsimple calendarを使って楽にカレンダーを表示させてしまったため、simpe calendarのソースを追ってrubyでカレンダー実装できるようになりたい...。
今回、全体の作成の流れはこちらの記事を参考にさせていただきました🙇♀️
→【初心者向け】Railsでメモ付きカレンダーを作ってみよう。SimpleCalendar
Discussion