Railsアプリのフロント側の実装では、開発用フレームワークにBootstrapを利用しています。

最近は当たり前のようにBootstrapを利用していますが、開発し始めた頃はどういったフレームワークなのかさっぱり分からない状態でした。

今回は、このBootstrapについて情報を整理しておこうかと思います。

Bootstrapとは

フロントエンド向けのWeb開発フレームワーク(CSSフレームワーク)です。

Bootstrapで既に定義されているデザイン・枠組みを簡単に利用することができます。

メリットとしては以下のようなものがあります。

  • HTMLタグのclass属性に指定するだけなので簡単。
  • CSSでデザインを定義する時間を短縮できる。
  • あまりデザインの知識がなくとも、それなりに見た目が良いページを実装することができる。

導入方法

今回はwebpackerを利用した方法を解説したいと思うので、yarn(パッケージ管理ツール)で必要なライブラリをインストールします。

コンソールで以下のコマンドを実行し、必要なライブラリ群をインストールします。

$ yarn add jquery bootstrap popper.js

popper.jsはBootstrapの一部の機能を利用するために必要なライブラリとなるので、一緒にインストールを行います。

次にwebpackerの設定ファイルを変更するため、以下のコードを追加します。

// config/webpack/environment.js

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

次に、BootstrapをインポートするためにCSSファイルに以下のコードを追加します。

// app/javascript/stylesheets/application.scss

@import 'bootstrap';

最後に、Bootstrapと先ほどのCSSを読み込みたいので、application.jsに以下のコードを追加します。

// app/javascript/packs/application.js

require('bootstrap/dist/js/bootstrap.js')

require('../stylesheets/application')

以上で、Bootstrapを利用する準備が整いました。

利用方法

基本的には、HTMLのclass属性に利用したいコンポーネントを指定して利用します。

例えばナビゲーションを表示させたい場合はNavsというコンポーネントを利用します。

親要素に「nav」、子要素に「nav-item」をそれぞれのclass属性に指定します。

例えば、Railsのテンプレートに以下のようなコードを記述するとバビゲーションが表示されると思います(Slimを利用しています)。

/ ナビゲーション
.nav
  / 一つ目の項目
  .nav-item= link_to 'リンク1', URL, class: 'nav-link'
  / 二つ目の項目
  .nav-item= link_to 'リンク2', URL, class: 'nav-link disabled'

公式のドキュメントに詳しい使い方やサンプルが記載されているので、そちらもご覧いただくと良いかと思います。

投稿者: TWEI

趣味はプログラミング。 以前は仕事でプログラミングをやっていました。現在はWebエンジニアを目指して勉強中。 勉強で得た知識などをブログで発信していく予定です。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA