TIS ENGINEER NOTE

ITエンジニアのためのキャリア向上ノウハウブログ

プログラミング

Bootstrap4をダウンロードして導入しようとしてつまずいたところ

更新日:

訳あってRailsアプリにBootstrap4をgemを使わずに導入することとなりました。

とりあえずダウンロードして配置すればいいんだろ?と思い着手したところ、依存ライブラリの部分などで想像以上に手こずったのでその時の対応内容について書いていきます。

sassは利用できる前提で話していきます。

Bootstrap4のバージョンはBootstrap v4.0.0-betaです。

Bootstrap4ダウンロード

https://getbootstrap.com/docs/4.0/getting-started/download/

上のURLからSource filesをダウンロードします。Compiledの方でもいいのかもしれませんが、特に試していません。

scssファイルの配置

ダウンロードして解凍してできたディレクトリ内のscssディレクトリの中身をstylesheet配置ディレクトリに置きます。この時に読み込む順番によっては変数が無いよと怒られるので、Railsの場合はapplication.scssを以下のように記述しましょう。application.scssがない場合は新規作成しましょう。

@import "bootstrap/_functions.scss";
@import "bootstrap/_variables.scss";
@import "bootstrap/mixins/*";
@import "bootstrap/*";

/*
 *= require_tree .
 */

この例ではapp/assets/stylesheets配下にbootstrapというディレクトリを作成し、ダウンロードファイルを配置しています。

javascriptファイルの配置

ここで大いに時間を取られました。自身の未熟さを恥じるばかりです。

Bootstrapのjavascript

まずはダウンロードして解答してできたディレクトリの中のdist/jsの中のbootstrap.min.jsをapp/assets/javascripts配下におきます。

jQueryのjavascript

Bootstrapを動かすにはjQueryが必要ですので、導入してない場合、ダウンロードして配置しましょう。

https://jquery.com/download/

上記リンク先ページの一番上の方にあるDownload the compressed, production jQuery 3.2.1からソースをダウンロードして、同じくapp/assets/javascripts配下に配置しましょう。

Popper.js

Bootstrap4から追加されたらしい依存ライブラリであるPopper.jsを用意する必要があります。

これもダウンロードしてきて配置します。

https://github.com/FezVrasta/popper.js/releases

上記リンク先からダウンロードしましょう。

ダウンロード・解答してできたディレクトリのdist/umd配下のpopper.min.js/popper-utils.min.jsをapp/assets/javascriptsに配置します。

umd配下にあるjsファイル以外を使うと、Babel等のコンパイラを導入していない場合、文法の関係で怒られます。具体的にはexportが使用されているソースだと動きません。

application.jsの記述

あとは順番を指定して読み込ませるようapplication.jsを以下の通り記述すれば動くはずです。

//= require popper-utils.min.js
//= require popper.min.js
//= require jquery-3.2.1.min.js
//= require bootstrap.min.js
//= require rails-ujs
//= require_tree .

まとめ

改めてgemのありがたさを痛感いたしました。いつもありがとうgem。

もし今回紹介した手順で動かない場合、Twitterまたはお問い合わせからクレーム入れてくれれば、できる範囲で回答させていただきます。

またこの手順はもっと楽にできるよーなどあれば教えていただけると喜びます。

今回の記事がどなたかのお役に立てば幸いです。

オススメ記事
文系出身エンジニアが26才でフリーランスになった感想

こんにちは。フリーランスエンジニアのてぃすです。 フリーランスエンジニアということは、つまりエンジニアとして独立しているということになり、すごい敷居が高い印象を持っている人が多いです。 けど僕は文系大 ...

続きを見る

よく読まれている記事

エンジニア入門

2018/8/19

プログラミング初心者に贈る挫折しない為の3つの心構え

こんにちは、フリーエンジニアのてぃすです。 最近では未経験者からプログラマー・エンジニアへの転身を志しプログラミングを学習を始めている人が増えていますね。 しかし理解出来ない部分が出てきたり、モチベーションを保てずに学習途中で挫折していまうという話も多く耳に入ってきます。 そこで今回は文系出身から職業プログラマーへ進んだ僕が、挫折しないプログラミング学習の進め方・心構えについてお話していこうと思います。 目的が具体的にイメージできる教材を使用する プログラミングの学習を始めて間もないときに、 変数に値を代 ...

続きを読む

エンジニア入門

2018/1/21

プログラミング言語としてのJavaについて

こんにちは、フリーランスエンジニアのてぃすです。 エンジニア・プログラマは年収1000万を現実的に目指せる職業として最近特に注目を集めている職業です。 今いる業界の将来性に不安を感じ脱出してきた人たちも、どんどんエンジニア・プログラマという働き方に集結しています。 ある程度エンジニア・プログラマという職業について調べていると、どのプログラミング言語を習得すればいいのか、という疑問が出てくるタイミングがあると思います。 どのプログラミング言語を選べばいいか、という疑問について調べてみると最近ではJava・R ...

続きを読む

エンジニア独立

2019/4/15

エンジニアがリモートワークをして感動したお話

こんにちは。フリーランスエンジニアのてぃすです。 僕はエンジニアとして活動する中で、メインで参加しているプロジェクト以外にもフルリモートでもう1つのプロジェクトにも参加しています。 今日は実際にリモートワークってどんなもんなのかについてお話していこうと思います。 前置き リモートワークの話題については各種メディア、ブログやSNSでも度々盛り上がっています。 通勤時間の短縮になる 通勤で使う体力を仕事にまわすことができる 家庭の事情などで外で働けない人も活躍することができる などのポジティブな捉え方もあれば ...

続きを読む

エンジニア入門

2019/4/23

DMM WEBCAMP(旧:WEBCAMP PRO) - エンジニアとして働きたい人のためのプログラミングスクール

最近のプログラミングスクールは、就業サポート・業務で役立つ教育を掲げているところがかなり多くなってきました。というかこの2つを満たしていないスクールはもはや存在価値が薄くなってきています。 今回はその2本の柱を高いクオリティで実現している DMM WEBCAMP(旧:WEBCAMP PRO)について、現役プログラマの目線から紹介していこうと思います。 このDMM WEBCAMPは総合的に見て、本気でエンジニアを目指そうとする人にとって最有力候補と言えるレベルで非常に優秀なプログラミングスクールです。この根 ...

続きを読む

エンジニア独立

2019/4/25

【正社員並みの保証】安心フリーランスエージェント・Midworksを徹底分析

こんにちは、フリーエンジニアのてぃすです。 今やフリーランスエンジニアという働き方もだいぶカジュアルになってきています。僕自身 文系大学卒 大したキャリアもコネもない という一般的には心もとない状態から独立しましたが、正社員時代と比べて収入も5倍ほどになり、リモート中心で非常にストレスのない毎日を過ごせています。 先日エンジニアの集まりに参加して、そこにもフリーランスエンジニアが何人かいたのですが、その人たちの多くからMidworksというエージェントを使っているという話を聞きました。 気になって調べてみ ...

続きを読む

-プログラミング
-,

Copyright© TIS ENGINEER NOTE , 2019 All Rights Reserved Powered by AFFINGER5.