結局BootStrapって何なのでしょうか？

Question

自身も使用しているものではあるのですが、正直よく分かってないです。
最初はwebデザインわからない人でも綺麗でモダンなサイトが作れるCSS、JSの集合体であるテンプレートってイメージだったのですが、調べているとどちらかというとそういう外面的テンプレートというよりは、レスポンシブなウェブページを気軽に実現できるものという気もしてきました。それに付随していわゆるグリッドレイアウト等の今風なデザインテンプレートを誰かが作っているだけという話な気がしました。

後、先ほどCSSとJSの集合体と書いたのですが、BootStrapってこれ以外に何か動いてたりするのでしょうか？
CSSとJSの集合体の割にはテンプレートを落としてくるとCSSやJS以外の見たことないような拡張子のファイルがくっ付いてきたり、　bootstrapをフレームワーク(railsや.NET MVC)等で使用する際プラグインとして最初にbootstrapをインストールしてたりするので。。。ただのCSSやJSなら普通にそれに対応するファイルへコピペすればいい話な気もします。。。宜しくお願い致します。

Comments

[bwz61366]

回答は十分出揃ってると思うんですが、何がわからなくて未解決の状態にされてるんですか？

Answer 1

前半は他の方が詳しく説明されているのでそれを読んでいただくとして、後半について説明しますね。

後、先ほどCSSとJSの集合体と書いたのですが、BootStrapってこれ以外に何か動いてたりするのでしょうか？

Bootstrapそのものは、CSSとJSで配布されるのですが、Bootstrap「を」作るために、いろいろなものを動かすのです。

CSSとJSの集合体の割にはテンプレートを落としてくるとCSSやJS以外の見たことないような拡張子のファイルがくっ付いてきたり、　bootstrapをフレームワーク(railsや.NET MVC)等で使用する際プラグインとして最初にbootstrapをインストールしてたりするので。。。ただのCSSやJSなら普通にそれに対応するファイルへコピペすればいい話な気もします。。。宜しくお願い致します。

この辺については、現代的なフロントエンド開発をもう少し広い視点で見て欲しいように思います。

「見たことないような拡張子のファイル」というのは、.scssや.map、あるいは.mdや.json、.yaml、.lock辺りも含むのかもしれませんが、それは前述の通り、Bootstrapの最終成果物として配布される.cssや.jsを作ったりデバッグしたりするために使われているものなのです。
Bootstrapとして配布されるCSSやJSは、いきなりそのものを手書きで書くものではありません。あくまでビルドツールによって生成するものです。また変更する場合にも、直接手を入れるものではないのです。なので、使い方によっては、コピペして終わり、というものではないのでした。

こういったことについては、詳しくは公式サイトの「Theming Bootstrap」や「Build tools」といったページが参考になるかもしれません。

（なお、Railsとかについてはまたちょっと別で、RailsとしてはBootstrap用のHTMLを生成する必要があるとか、インストールにRails(Ruby)側の事情があって自動化したいといった思惑によってライブラリ化しているところがあります。それはBootstrapとかフロントエンド開発側の事情とはちょっと違うものです。）

Answer 2

噛み砕いて説明しようとすると「Webページでよく使うパーツやレイアウトが簡単に実装できる素材セットを用意しときました。それらはレスポンシブ・デザインを前提として作られているので、レスポンシブ対応も簡単ですよ。」ってところでしょうか。
Bootstrapを導入することで、サンプルコードをコピペして編集するだけで、HTML初心者でも実装に手がかかるパーツやレイアウトをサクッと作れます。

必要なファイルを読み込むだけなので導入は簡単ですが、Bootstrapをベースに思い通りのデザインを実現しようとすると、BootstrapのCSSを理解した上でその差分を実装していくことになるので、それなりの技術は必要です。

CSSとJSの集合体と書いたのですが、BootStrapってこれ以外に何か動いてたりするのでしょうか？

そのまま使うだけならCSSとJSだけでいけますが、例えばSassが使えるなら、変数の値を変えることによって、色、余白、サイズ、角の形状等をカスタマイズできます。

Answer 3

本質の捉え方が間違っています。

CSS フレームワークのいちばん大事な機能は「ブラウザ間の仕様差異を気にせず記述することができるようにする」ことです。

「その上で」以下のような特徴があります。（v.4）

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

テンプレートは「Bootstrap の機能を使用して作られている」という表現が正しく、Bootstrap そのものを指すものではありません。
また、Bootstrap を使用するのに必須なファイル群は「(html)+CSS+JS」のみです。

これらの情報は、公式サイトに記述があります。
Bootstrap

質問の後半は何が聞きたいのかよく理解できませんでした。公式サイトを一読の上、再整理して更新することをオススメします。

Answer 4

Bootstrap 公式サイトで説明しているとおりです。
Bootstrap 公式サイト

翻訳
世界で最も普及しているフロントエンドコンポーネントライブラリを使用して、応答性の高いモバイル初のプロジェクトをWeb上に構築します。
ブートストラップは、HTML、CSS、およびJSで開発するためのオープンソースのツールキットです。Sass変数とミックスイン、応答性の高いグリッドシステム、豊富な組み込みコンポーネント、jQueryで構築された強力なプラグインを使用して、素早くアイデアのプロトタイプを作成したり、アプリケーション全体を構築できます。

Answer 5

レスポンシブなウェブページを気軽に実現できるものという気もしてきました

です。

フレームワークはBootStrapのようなCSSフレームワークに限らずPHPであってもJavaであっても何であっても、それ単体で何かが出来上がるわけではありません。
あくまでフレームワークは何かを作り上げるための基盤であり、世にあふれているテンプレートはそのフレームワークを基盤に作られたものであり、フレームワークそのものの実体を現すものではありません。
フレームワークが持つ機能ではなくテンプレート独自に組み込まれた指定や処理が必ずあります。

フレームワークの規則に則って作ればある程度のものが出来上がるだけであり、「作る」はあくまで使う人がしなければなりません。
確かに同じものを使えば似通ったものが出来上がるように見えるかもしれませんが、それは良く見れば「同じテンプレートを使っているから」ということが多いです。

フレームワークはあくまで部品の集合体であり、テンプレートはその部品を上手く（また行儀よく）配置したもの、という理解で良いと思います。

Answer 6

おっしゃる通りかと思います.
同じWebページを異なるデバイスから閲覧した場合でも, 少ないコード量で対応する(レスポンシブ対応する)為に必要です.
sassなどのcssメタ言語を使ってテーマ色をカスタマイズできるのですが, 結局の所CSS/JSファイルに書き出されます.
しかしアート面を凝ったものにしたい場合, bootstrapだけでは不十分かと思います.

アート面を凝る工数が割けない場合(プログラマだけでWebサイトを作る場合など), とりあえずbootstrapを使っておけばサイトのデザインは統一されそれっぽくなるので, これはこれで有意義と言えるのではないでしょうか.