bootstrap【JSライブラリ1日1個】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べる、第3弾です。

① ライブラリに関するドキュメントを最初から最後まで読む

② 実際に使ってみる or 使い方を調べる

③ ライブラリを3行で説明する

本日は、bootstrapのドキュメントを読んで実際に業務で使っているところを調べました。

上司や先輩たちからたくさんのフィードバックをいただけてとても勉強になって感謝しかないです...！！😭 昨日からブログに追記するようにしました！！

いい職場すぎて感謝しかないです。。。

ドキュメント

今回読んだドキュメントはこちらです。

github.com

実際に使ってみる

それでは早速ローカルで簡単に動かしてみましょう！
簡単にとか格好つけてますが、いつもRailsでサクサクやっていたので結構ハマりました笑

今回はこちらのモーダルを表示させてみたいと思います。

getbootstrap.com

今回はnpmを使います。

mkdir bootstrap //適当にbootstrapのディレクトリを作る
cd bootstrap
npm install bootstrap@4.0.0-beta
npm install jquery
npm install popper.js --save

これで準備完了です。
あとは、index.htmlを作成して、bootstrapとjqueryとpopper.jsを読み込み、モーダルのコンポーネントを貼り付けます。（ブログでコード上手く貼れなかったのでスクショですみません...）

f:id:kattyan53:20191211075245p:plain

f:id:kattyan53:20191211075414p:plain

ボタンを押したらモーダルが表示されました。

f:id:kattyan53:20191211075427p:plain

わからなかったところ

会社のpackage-lock.jsonにはjQueryとpopper.jsは読み込まれてないのに、ローカルで試すときはこれを導入しないと動きませんでした。

何か別のライブラリが代わりにやってくれているのでしょうか？😭

あと今日もう少し時間があったらモーダルのJSのコード読みたいと思います！

github.com

3行でまとめる

bootstrapを導入すると、

- 簡単にモーダルなどの綺麗なコンポーネントが使えるようになる

- CSSなども使えるようになる

（今日も2行...許してください）

フィードバック

参考となる記事とともに、今回もたくさんのフィードバックをいただきました...！！！

ありがとうございます！！

- なぜjQueryとpopper.jsが読み込まれていないのに動作するのかというと、reactstrapというライブラリを使用しているから。これはbootstrapのCSSしか使わない。

Adding Bootstrap

Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:
npm install --save bootstrap
npm install --save reactstrap react react-dom
https://reactstrap.github.io/

↑ boostrapのCSSは含まれていないから、使いたかったらインストールしてねって書いてある！