BlazorでのWebアプリケーション開発手法１【C#】A15_Bootstrap

前回に引き続き、Counter画面を見ていきます。まず、前回の単方向データバインドのサンプルとして追加していたコードは今回は使わないため、いったん削除しておきます。

続いて、Counter.razorにもとから用意されているボタンの部分に注目します。

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

button という要素名の部分にカーソルを合わせると、IntelliSenseのツールチップが表示されます。ここには「button 要素はそのコンテンツによってラベル付けされるボタンを表します。」と説明されており、これはHTMLの標準的なボタン要素であることを示しています。

図1　Counter.razorのbutton要素（class=”btn btn-primary”）

図2　button要素にカーソルを合わせたときのツールチップ

次に class=”btn btn-primary” の部分について解説します。class属性で指定しているのは CSS クラス と呼ばれるもので、色や形といった見た目の定義に名前を付けてまとめておき、それを毎回書かずに共通で使い回せるようにする仕組みです。ここで定義されているクラスのおかげで、実行すると青いボタンとして表示されます。

図3　実行結果。btn-primaryクラスにより青いボタンとして表示される

このクラスがどこで定義されているのかを確認するため、ソリューションエクスプローラーの wwwroot フォルダーを開き、lib → bootstrap → css とたどっていくと、bootstrap.css（bootstrap.min.css）というファイルが見つかります。

図4　ソリューションエクスプローラー（wwwroot > lib > bootstrap）

このファイルの先頭部分を見ると、コメントとして Bootstrap のバージョン（v5.3.3）や著作権表示、MITライセンスであることが記載されており、あわせて getbootstrap.com へのURLも書かれています。

図5　bootstrap.min.cssファイル先頭のコメント（バージョン・ライセンス情報）

Blazorのプロジェクトには標準でこの Bootstrap が組み込まれており、ボタンやフォームなど、Webでよく使われる部品の見た目があらかじめ定義されています。実際に Bootstrap の公式サイトを開くと、「世界で最も利用されているHTML、CSS、JSのフレームワークです」と紹介されており、上部のメニューからドキュメントを参照できます。Forms のカテゴリを見ると、Form control や Select、Checks & radios など、フォームに関する部品が一覧になっています。

図6　Bootstrap公式サイトのドキュメントメニュー（Forms カテゴリ）

たとえば Form control のページを開くと、こういったおしゃれな入力エリアの実装方法が紹介されています。

図7　Formsドキュメント内のフォームコントロールのページ

クラスを指定した場合としない場合の違いを実際に確認するため、いま使っているボタンをコピーしてもう1つ用意し、コピーした方は class=”btn btn-primary” の部分を削除してみます。

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<button @onclick="IncrementCount">Click me</button>

この状態で実行すると、左側がクラスを指定した Bootstrap のボタン、右側が何も指定していない素のボタンとなり、見た目の違いがはっきりとわかります。

図8　classを指定したボタンと指定していないボタンのコード

図9　実行結果。左がBootstrapのボタン、右が素のボタン

続けて Bootstrap の「ボタン」のドキュメントページを見てみます。ボタンはフォームやダイアログなどのアクションに使えるカスタムボタンスタイルで、サイズや状態管理にも対応していると説明されています。

図10　Bootstrapドキュメント「ボタン」のページ

ページ内の「バリエーション」の項目には、Primary、Secondary、Success、Danger、Warning、Info、Light、Dark といった、あらかじめ用意されたボタンの種類とそれぞれのHTMLコードが掲載されています。先ほど使った btn-primary は、このうちの1つを指定していたということになります。

図11　ボタンのバリエーション一覧とHTMLコード

同様に Forms の Select のページを開くと、コンボボックスのサンプルとそのHTMLコードが掲載されています。

図12　Formsドキュメント「セレクト」のページ

<select class="form-select" aria-label="Default select example">

<option selected>Open this select menu</option>

<option value="1">One</option>

<option value="2">Two</option>

<option value="3">Three</option>

</select>

このコードをコピーして、Counter.razor の見出し（h1）の下に貼り付けます。

図13　セレクトのコードをCounter.razorに貼り付けた状態

実行すると、このようにおしゃれなコンボボックスと先ほどのボタンが並んで表示されます。

図14　実行結果。コンボボックスとボタンが表示された画面

このように、Bootstrap が用意している部品をそのまま使っていくことで、一から自分でデザインしなくても一般的でおしゃれな見た目のページを作ることができます。どう書けばいいかは、Bootstrap で検索し、公式サイトのドキュメントを開けば、ボタンやフォームなど各種サンプルを確認できます。

図15　「bootstrap」の検索結果からドキュメントサイトを開く

Forms の中の Checks & radios や Input group といった項目も、基本的には同じように公式サイトを見ながら書き方を確認していけば実装できます。具体的な使い方については後々のレクチャーで改めて扱っていく予定なので、今の段階では「だいたいこんな感じで Bootstrap のパーツを使って書いていくんだな」ということを覚えておいてください。

Bootstrap を使うメリットとしては、名前を付けてスタイルをまとめておくことで、ボタンなどの見た目を全体で統一できる点が挙げられます。もし後から色や形を変更したくなった場合も、クラスの定義元（bootstrap.css）を書き換えれば、それを使っている箇所すべてに一括で反映されます。逆に、色などをその場その場で個別に指定していくと、ページによってボタンの見た目がちぐはぐになったり、変更のたびに1つ1つ直していく必要が出てきたりして大変です。

また、Warning用のボタン、決定用のボタンといったように、色そのものではなく「用途」に応じて名前を付けておくのも Bootstrap の考え方の1つです。用途ごとの名前を使う側で共通して使っておけば、あとから見た目を変えたくなったときにも定義元を書き換えるだけで済みます。基本的には、こうした Bootstrap の部品を活用しながらデザインしていく、という進め方になります。