【使いやすいわ】3年間CSS生で書いてた人が初めてBootstrapを触ってみた感想

WEBデザイン3年間やってますが、自分でデザインできないゆひゃです。

今までCSSは自分でゴリゴリ書いてたのですが、今回は初めてBootstrapでデザインする機会があったので感想を書こうと思います。

使うことになった経緯

今Reactを習得中でして、勉強がてらファイル管理システムを開発しています。

いつもは、デザイン担当のたじにデザインカンプを作ってもらってからコーディングしているのですが、今回ただ自分で開発しているだけなので自分でコーディングするかーって思っていました。

そのときCSSフレームワークとJSのフレームワークの相性が良くて皆魅了されてるとの話を思い出したので使ってみました。

使ってみてよかったところ

ReactもBootstrapもまだまだ使用歴が浅いので、現時点で思っている良いところをピックアップします。

コンポーネントをしっかり意識された構築

Bootstrapは細かいコンポーネントに分けられていて、その組み合わせでデザインできる設計になっています。

コンポーネントにはさらに調節できるオプションが用意されています。

例えば、カードコンポーネントでは、カードのヘッダー、フッターやボディ、リストなどの小さいコンポーネントが用意されています。

このコンポーネントの中にも当然 別のコンポーネントを入れ子にすることができるのもカスタマイズ性が高くてよかったです。

Reactとの相性が良い

今Boostrapを使って開発しているのはファイル管理系のサイトなのですが、Reactを使ってプログラムを書いています。

React用のBootstrapであるReact-Bootstrapライブラリたるものが用意されているんですね。

例えば先ほどのカードのデザインだったら

import Card from 'react-bootstrap/Card'

function MyCard (props) {
  return (
    <Card>
      <Card.Header>{props.name}</Card.Header>
      <Card.Body>
        <Card.Img src={props.src} />
        <p>{props.description}</p>
      </Card.Body>
    </Card>
  )
}

export default MyCard

とこれだけでカードのコンポーネントを作ることができるのはとても楽でした。

APIとしてコンポーネントのプロパティが多く設定されているので、classNameプロパティが汚染されないのも良いと思いました。

わかりやすいUI

Bootstrapのデザインは、検索エンジンやブラウザの設定画面のような誰もが見やすいデザインです。

ボタンやフォームは誰が見ても「ボタン」「フォーム」と認識できることがデザインとしてやっぱり一番大事だと思います。ホバーアニメーションやアクティブアニメーションが最初からついているのもわかりやすくて助かります。

まとめ

今までいくつかWebサイトを公開してきましたが全てCSSファイルでゴリゴリしてきました。

BEM記法を使って書いていたので、コンポーネントを意識するコーディングには慣れていたのでBootstrapの記法に違和感なく使えました。

どのようなデザインにするかをコンポーネントを変えたり入れ子の位置を変えるだけで反映させられるので、まるでノーコードツールのようでした。これをローコードって言うんですか？

管理ページや社内向けサービスはデザインをこだわるというより、わかりやすく見やすいUIが求められるので、そういう機会には使っていこうと思いました。