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/15

高収入を目指してエンジニア・プログラマーになることは正しい選択か

こんにちは、フリーエンジニアのてぃすです。 今日お話する内容は、 高収入を目指してITエンジニア・プログラマーになることは正しい選択か というもの。 SNSやブログ、またはプログラミングスクールの謳い文句として「エンジニアになって年収○万を目指そう」などと行った言葉を見ることが最近増えてきました。 またそれに対して、「お金のためにエンジニアになることは間違っている」「実際はそんな稼げない」と行ったような意見も同様に飛び交っています。 僕の個人的な意見としては、高収入な職業につける資格や経験、環境にないので ...

続きを読む

エンジニア入門

2019/4/15

プログラミングの勉強はモチベーションだけでやると挫折する

こんにちは。フリーエンジニアのてぃすです。 最近は未経験からエンジニアを目指したり、エンジニアとしてのキャリアを向上させるために、プライベートでプログラミングを勉強をし始める人が増えてきています。 僕自身、プライベートの時間に未経験言語の勉強をしてキャリアアップした経験があるので、非常にいい傾向だと思っています。 しかしSNSやブログなどを眺めていると、 「この人モチベーションだけで勉強しているな」 という人を多く見かけます。 個人的な経験と人から聞いてきた話から、このようにモチベーションだけで勉強してい ...

続きを読む

エンジニア独立

2019/4/23

エンジニア派遣でキャリアを積んで高収入を目指す

エンジニアとして採用面談を受けたことのある人なら分かると思うのですが、面談の時に最も重要視されるポイントは業務経験です。 もちろん普段の個人学習や、技術への関心などでフォローできる面もありますが、一番見られるのはどんな技術を使って、どんな業務を行ってきたかという点なんですよね。 採用する側もプロダクトの正否を左右する立場として責任を負っているわけですから当然です。 そんな時、良質な職務経験をどのように積むことができるか、というのがポイントになってきます。 今回はキャリア構築のための、派遣エンジニアという選 ...

続きを読む

エンジニア独立

2019/5/29

エンジニア歴2年の僕がポテパンフリーランスの個人面談を受けてきた

特定派遣会社の正社員からフリーランスエンジニアを目指す活動の一環として、フリーランス初心者に特化したエージェントであるポテパンフリーランスの個人面談に行ってきましたので、その感想と特徴について書いていきます。 前提として僕はエンジニア暦2年半、化石のような超マイナーフレームワークでの開発経験しかないというちょっと残念なエンジニアです。 そんな僕でもフリーランスエンジニアとして活動できるという実感を今回の個人面談で得ることができました。 フリーランスという働き方に興味を持ってはいるが、具体的にどうすれば実現 ...

続きを読む

エンジニア入門

2019/4/25

絶対にエンジニアになりたい人にオススメするプログラミングスクール3選

こんにちは、フリーエンジニアのてぃすです。 最近はエンジニアの人手不足による給与向上や、自由度の高い働き方に魅力を感じてエンジニア・プログラマを目指す人が増えてきました。 僕の周囲にもプログラミングを始めたいという人が増えてきて、プログラミングスクールとかたくさんあるけどどれがいいの?という質問を受けることがあります。 せっかくなので実際に現場でWeb開発に携わる立場からプログラミングスクールについて比較しながら調べてみました。 そして実際にエンジニアとして働くために最も充実したサービスを提供しているプロ ...

続きを読む

-プログラミング
-,

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