TIS ENGINEER NOTE

27才文系出身フリーランスエンジニアのブログ

プログラミング

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がない場合は新規作成しましょう。

この例では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を以下の通り記述すれば動くはずです。

まとめ

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

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

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

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

よく読まれている記事

エンジニア入門

2018/8/22

現役プログラマがオススメするプログラミングスクール3選

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

続きを読む

エンジニア独立

2018/9/16

レガシーな技術を扱っていたSES正社員がモダンな技術を扱うフリーエンジニアになるまでにやったこと

こんにちは。フリーエンジニアのてぃすです。 僕は独立する前、SESの正社員として非常に歴史の長いプロジェクトに常駐で参加していました。 Javaを使ったシステムなのですが、他のJavaエンジニアに聞いても「なにそれ」と言われてしまうような非常にマニアックなフレームワークを最新から数年遅れのバージョンで扱っていました。 自動テスト?クラウドサーバー?なにそれ?的な非常にレガシーかつ面白みのない状況に嫌気と不安を感じて独立を志したわけです。 で、この時のような僕と同じような状況で悩んでいる人ってのをエンジニア ...

続きを読む

office

エンジニア独立

2018/1/2

エンジニア歴2年の僕がレバテックフリーランスでフリーランスを目指してみた

正社員エンジニアからフリーランスエンジニアへの方向転換の一環として、業界最大手であるレバテックフリーランスの個人面談に出向いてきたので、その感想を書いていこうと思います。 フリーランスというと知識・経験・人脈を兼ね備えたスーパーエンジニアしかなれない存在だと思っている人も少なくありません。 しかし最近では今回紹介するレバテックフリーランスや以前の記事で紹介したギークスジョブなどといったエージェントを利用すれば、僕のように経験の浅いエンジニアでも十分に目指せる働き方となっています。 この記事が現在働いている ...

続きを読む

エンジニア入門

2018/7/29

エンジニアにとっての理想的な職場とは

こんにちは、フリーランスエンジニアのてぃすです。 この記事を読んでくださっているということはITエンジニアかと思いますが、皆さんエンジニアとして働くならどんな環境で働きたいですか? スーツ勤務が嫌、言われたことをモクモクとこなすのが好き、など人によって理想として掲げる働き方って大きく異なります。 僕はこれまでエンジニアとして、SES企業やノリノリのベンチャー企業、起業したてのスタートアップ企業における業務を経験してきました。 今回は僕の経験や周囲のエンジニアから聞いた話を交えて、エンジニアにとっての働き方 ...

続きを読む

エンジニア入門

2018/8/19

プログラミングスクールって実際のところどうなの?

こんにちは、フリーエンジニアのてぃすです。 プログラミングスクール、今や広告やSNSでも頻繁に目にするこのワード。 初心者がプログラミングを始めるなら通うべき 独学でも十分だから必要ない プログラミングスクールに通ってもプログラマになれない などなど賛否両論飛び交っていますが、今日は現役エンジニアの視点からプログラミングスクールのメリット・デメリット、そしてエンジニアを目指す上での有力な選択肢となるかについてお話していきます。 プログラミングスクールとは何か その名前の通り、プログラミングを学ぶための学校 ...

続きを読む

-プログラミング
-,

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