ume

bootstrapの導入〜初期設定まで

前書き

今プログラミングの教材使いながらruby on rails を学習しているのですが一人で1からアプリを作ろうとしたときに『どうやってこれ使うんだっけ?』と思うことが多いので、今回は私のように1からアプリを作ろうとしている方の参考になればと思い記事に残したいと思います。言語はrubyでgemとして導入してみます。

目次

①bootstrapの導入の仕方全体像.
githubの説明を読んでコマンドで導入〜初期設定までやってみよう.

①bootstrapの導入の仕方全体像.

手順1 githubでgemの使い方(導入の仕方〜実際の使い方まで)を見る.
手順2 コマンド操作でパソコンに導入.

githubの説明を読んでコマンドで導入〜初期設定までやってみよう.

github.com

Installation

Please see the appropriate guide for your environment of choice:

Ruby on Rails 4+ or other Sprockets environment.
Other Ruby frameworks not on Rails.

どうやらruby on railsに導入するときとrails 以外のrubyフレームワークで導入するときで導入のやり方が違うことがわかる。 今回はruby on railsに導入するときのやり方で導入してみます。 bootstrapの導入

Add bootstrap to your Gemfile:

gem 'bootstrap', '~> 5.2.2'

gemfileに上記を追加する.
gemfileのどこに書けばいいの?という疑問があると思います(私はありました)⇨どこにでも書いていいわけではなく 開発、テスト、本番環境でインストールさせたいgemはgroup分けされているdo.. end内のそれぞれの場所に、全ての環境でgemをインストールさせたければそれ以外の場所に書く.

group :development, :test do #開発とテスト環境

end
group :development do #開発環境

end
group :test do #テスト環境

end
group :production do #本番環境(添付画像にはありませんが)

end

上記以外の場所に書かれたgemは全体で使用可能なgemです.

このようにそれぞれの環境でgemのインストールを分ける目的は、 →本番環境で動かないという問題を減らすため。 アプリケーション開発する際3つの環境を用意し、開発、検証、運用させます。 それが上記で出てきた、開発環境、テスト環境、本番環境です。 開発環境(手元のパソコン)で作業しアプリケーションを作成し、 テスト環境は疑似本番環境で、本番のようにアプリケーションを動かします。(即本番の場に出すと問題があった際、利用者様に迷惑がかかるため) その後、本番環境に移して実際にアプリケーションを使います。 アプリを開発するときの場所、問題ないか確認する場所、本番の場所というイメージ。 話をbootstrapの導入後に戻します.

gemfileにgemを追加した後bundle installします.
``` bundle install

bootsrapの初期設定.  
まずapp/assets/stylesheets/application.css⇨app/assets/stylesheets/application.scssに名前を変更する.  
その後application.scss内に

@import "bootstrap";

を入力
最後にapp/assets/javascripts/application.js内に

// Bootstrap4 //= require jquery3 //= require popper //= require bootstrap-sprockets

と入力し保存する