BootstrapやFont Awesomeなどの仕組み

Question

BootstrapやFont Awesomeなどクラスをちょこっと書き足すだけで見た目を設定してくれますが、あれはどういう仕組みなのでしょうか？

私の知っているAPIなどはリクエストをしてレスポンスされたJSONをパースして好きなように組み替える流れですが、BootstrapやFont Awesomeなどは大量のcssなどを読み込んでおいて、javascriptでif文を走らせたりして描画している感じでしょうか？

私がふとやりたいなと思っているのが、
例えば、あるhtmlのクラス名をつけていればそこにカラフルな棒グラフを出すようなAPI？？を作りたいのですが,どうすれば良いでしょうか？
(画像ではなく、ぬるぬる動かせるような株価のグラフのイメージで、データ自体はこちらが持っているけど,相手が希望する場所[サイト上]に表示させてあげたい)

あなたが希望している仕組みはこのような方法じゃないか？
Bootstrapの仕組みはこんな感じだけど、あなたの想像しているのはこっちのやり方だ など教えていただければ嬉しいです。よろしくお願いします。

Answer 1

BootstrapやFont Awesomeなどは大量のcssなどを読み込んでおいて、javascriptでif文を走らせたりして描画している感じでしょうか？

基本的には、Bootstrapはすべて大量のCSSに書き付けてあります。FontAwesomeは使い方によって出し方が変わります。

Comments

[maisumakun]

Bootstrap 4.3のCSSは、スペースなどを削って詰めても150キロバイト以上あります。

[kipipipi]

お礼が遅れていまい、大変失礼しました。
Bootstrapは大量のcssで対応させているということでスッキリ致しました。
Awesomeの別の使い方によって出し方が変わるとはどういうことでしょうか？
Bootstrap同様に大量のcssだけではないということでしょうか？？

お返事が遅れたにも関わらず重ねての質問、大変図々しいのですが教えて頂けると幸いです。
よろしくお願いします。

[maisumakun]

JavaScriptでsvgを直接描画する、という流れもあります。

https://fontawesome.com/how-to-use/javascript-api/setup/getting-started

[kipipipi]

お返事が再度遅れてしまい大変申し訳ありません。
相手にcssやJavaScriptを大量に読み込ませることで描画しているということだと理解しました。
私の未熟な腕ではまだそのようなコードは作れそうにない為、他の方法を探したいと思います。
ありがとうございました。