⭐️WebページのHTMLに動きを付けたい時に必要なツールとして「Bootstrap Jquery Font-Awesome」がある!
gemとは?
└Rubyのパッケージのこと。
└パッケージを管理するパッケージ管理システムの名前のこと。
bootstrapとは?
└WEB画面を作るときに便利なCSSフレームワークのこと! Bootstrapを使うと、簡単におしゃれでスマホ対応済み(レスポンシブ)の画面を作ることができます。
[導入の手順]:
①gemfile内にbootstrapを追加する(gem 'bootstrap', '~> 4.3.1’)←(※バージョン指定があれば以下のように追加する。)
②Scssファイルに@importを追加する(@improt “bootstrap”;)
参考文献:https://school.runteq.jp/v2/curriculums/rails_basic/chapters/3/point
font-awesomeとは?
└Web上にはさまざまなアイコンを無料で用意してくれている便利ツール
[導入の手順]:
①gemfileに内にfont-awesomeを追加する(gem 'font-awesome-sass’)
②Scssファイルに@importを追加する(@import "font-awesome-sprockets"; @import "font-awesome";)
└ここまで設定できたら、ビューファイルにアイコンを表示させるコマンドを入力すればfont-awesomeが反映される!!
参考文献:https://qiita.com/koki_73/items/fa6d31a3b54a84d19dc
jqueryとは?
└javaScriptを便利にしてくれる道具=簡単にサイトに動きや反応を追加できるツール
[導入の手順]:
①gemfile内にjqueryを追加する(gem 'jquery-rails')
②application.jsに追加する
//= require jquery
//= require jquery_ujs
└後は、HTMLファイルを編集すればjqueryが適応されている!
アセットパイプラインとは?
└JavaScriptやCSSのアセットを最小化 (minify: スペースや改行を詰めるなど) または圧縮して連結するためのフレームワークのこと。
アセットパイプライン=表示ファイルの間隔をうまく調節してくれるフレームワークのこと!
マニフェストファイルとは?
└どのCSSファイルやJavascriptファイルを呼び出すかを記載したファイルのこと。
application.html.erb
<%= stylesheet_link_tag 'application', media: 'all' %> ←CSSは「application.css」から呼び出す
<%= javascript_include_tag 'application' %> ←javascriptは「application.js」から呼び出す
マニフェストファイルは、/assets/stylesheets配下と/assets/javascripts配下にありますので、
/assets/stylesheets/application.cssと/assets/javascripts/application.jsがマニフェストファイルということになります。
application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require rails-ujs
//= require activestorage
//= require_tree .
└表示させたいテンプレートファイルを追記していけば、ビューファイルで反映されるようになる。