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才でフリーランスになった感想

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

続きを見る

よく読まれている記事

エンジニア独立

2019/4/28

収入を上げたいWebエンジニアが学習するべき技術

どうも、フリーランスエンジニアのてぃすです。 エンジニアの収入は技術に比例して上がるわけではない。というのはこのブログでよく言っていることです。 しかし技術と収入の因果関係はもちろん0ではありません。 そこで今回はITエンジニアとして働いていく上で収入アップに繋がる可能性の高い技術をピックアップして紹介していきます。 今やっている仕事で収入に限界を感じている 新しい技術を学びたいけど何を学ぶのが効率がいいのか知りたい というエンジニアは要チェックです。 技術によって収入が上がる要因 まず収入が上がる技術と ...

続きを読む

エンジニア独立

2019/4/15

フリーランスエンジニアになって大変だったこと・苦労したこと

どうも、フリーランスエンジニアのてぃすです。 このブログでは基本的にITエンジニアの独立を勧めることが多いですが、今日はちょっと視点を変えて、フリーランスエンジニアとして活動する上で、苦労することに視点を当ててお話していこうと思います。 世間ではフリーランスをもてはやす声、それに対する反論などが飛び交っていますが、多くの意見が「フリーランス」という一括りにしたもので、実情を捉えていないものがほとんどであると感じています。 この記事では実際に僕がフリーランスエンジニアとして活動してきた中でリアルに体験してき ...

続きを読む

エンジニア独立

2019/5/29

エンジニアの強い味方、フリーランスエージェントとは?

このブログで度々登場する単語であるフリーランスエージェント。 これまで正社員として企業に所属してきたエンジニアにとっては馴染みのない単語だと思います。 なんとなく案件を紹介してくれるサービスだろう。 食べログの飲食店が案件に変わったようなものだろう。 派遣の意識高い系なのだろう。 くらいの印象の方もいらっしゃるかも知れません。 そこで今回はエンジニアにとって、フリーランスエージェントとは何者なのか、利用することによってどんなメリットがあるのかについて説明していこうと思います。 理屈はいいからどのエージェン ...

続きを読む

エンジニア入門

2018/8/19

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

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

続きを読む

エンジニア独立

2018/2/18

Webサービス・Webアプリケーションを作って公開するまでの流れ

エンジニアとして活動していくに際して、自分で作成し公開している制作物があるというのは非常に強力なアピールポイントとなります。 もちろんクオリティが高いに越したことはありませんが、自分で作成し公開までを行なったというだけでもかなりの評価を得られます。 これからエンジニアになりたい エンジニアとしてのキャリアアップ・キャリアチェンジを望んでいる という人には大変オススメのプロセスです。 実際僕もRailsを未経験の状態から勉強していた際の仕上げとして作成&公開したWebアプリケーションのおかげであっさ ...

続きを読む

-プログラミング
-,

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