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/5/30

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

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

続きを読む

エンジニア独立

2019/4/15

ITエンジニアが市場価値を知りたければエージェントを活用すべき

どうも、フリーランスエンジニアのてぃすです。 企業に雇われないフリーランスという働き方。 ITエンジニアという自分の技術を商売道具とする職業は、フリーランスとの相性が抜群だったりします。 僕自身文系かつエンジニア歴2年半で独立しましたが、1年目から年収1000万を軽く超えることができました。 独立してこれまでで学んだことは、ITエンジニアがフリーランスとなり効率よく稼ぐには市場価値の把握がもっとも重要であるということです。 市場価値という超重要な要素 ITエンジニアという職業はいくら高い技術を持っていても ...

続きを読む

エンジニア独立

2019/4/25

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

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

続きを読む

エンジニア独立

2019/4/15

僕がITエンジニアとして独立しなかった場合の損失を計算してみた結果

どうも、フリーランスエンジニアのてぃすです。 僕はエンジニア歴が2年くらい経った頃に、月収が20万円を下回るような状態でした。 その後独立し、ほどなくして月収は100万円にまで到達しました。 実に5倍ほど収入が跳ね上がったことになります。 正直もう少し早く独立していればなぁと思っています。 今だからこそ考えられることですが、戦略さえしっかりしていれば、1年くらいは独立を早めることは可能だったと思うので。 こういう後悔というか振り返りをするたびに思うのですが、世の中僕以上に行動を遅らせることによる損失を食ら ...

続きを読む

エンジニア独立

2019/4/28

月80万円も目指せるフロントエンドエンジニアの魅力

どうも、フリーランスエンジニアのてぃすです。 ITエンジニアといえば、JavaやRubyを駆使するサーバーサイドエンジニアの方がイメージとして強いですよね。 ただWeb系で活躍するエンジニアには他にもフロントエンドエンジニアという働き方があります。 今日はこのフロントエンドエンジニアについて、 よくある誤解 どれくらい稼げるのか どうすればなれるのか 将来性 キャリアアップのコツ などの観点からお話していきます。 フロントエンドエンジニアとは フロントエンドエンジニアとは、簡単に言えばユーザーが操作する画 ...

続きを読む

-プログラミング
-,

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