Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説

Bootstrap 5の作業環境の構築方法、依存関係のインストール手順、ページやコンポーネントの実装、jQueryを使用せずにシンプルなJavaScript(バニラJS)でコンポーネントを実装する方法などを紹介します。

Bootstrap 5の作業環境の構築方法、バニラJavaScriptを使用した実装方法を解説

Bootstrap 5 tutorial: learn how to get started without jQuery
by @zolidev

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

1ヵ月ほど前に、Bootstrap 5 alphaがついにリリースされました。
最も重要な変更点は、依存関係としてのjQueryが削除され、IE10とIE11のサポートが終了、HTMLとCSSの改善です。

変更点の詳細は、以前の記事をご覧ください。
参考: Bootstrap 5 alphaがついにリリース!注目すべき新機能

Bootstrap 5 alphaがついにリリース

Bootstrap 5はまだalpha版で、本番環境で使用することはリスクを伴う可能性がありますが、フレームワークの新しいバージョンで作業を始めることは良いアイデアです。最も重要なことは、jQueryに慣れている場合、この変更によりデフォルトでバニラJavaScriptの使用を検討しなければならないことです。

このチュートリアルでは、Bootstrap 5のSassとGulpを使用した作業環境の設定方法、簡単なブログページの作成方法、バニラJavaScriptを使用したフレームワークの使用方法を解説したいと思います。

  • 構築ツール: Sass、Gulp 4、BrowserSyncを使用してBootstrap 5の作業環境を用意する。
  • 新しいマークアップで簡単なブログページを作成する。
  • 新しいSass変数ファイルので、カラー、サイズ、フォントを変更する。
  • jQueryの代わりにバニラJavaScriptを使用する。
  • 新しいユーティリティ API の説明。

Bootstrap 5の作業環境を用意する方法

CDN経由でスタイルシートとスクリプトを外部ファイルとして利用することで、Bootstrap 5をすぐに使用できますが、Bootstrap 5のすべての機能を利用するにはSassを使用することをお勧めします。

Bootstrap、Sass、Gulp、BrowerSyncをどのようにセットアップするかのチュートリアルを書いたので、より詳細なプロセスのウォークスルーが必要な場合は、下記のガイドをご覧ください。
参考: How to set up Gulp 4, Bootstrap, Sass and BrowserSync for a simple workflow

前提条件

  • Node
    Node.jsがインストールされており、ターミナルからアクセスできることを確認してください。
  • Gulp
    Nodeを正常にインストールした後、GulpのCLIもインストールしてください。

Nodeをインストールしたら、ターミナルで次のコマンドを実行して、Gulp CLIをグローバルにインストールします。

この記事のフォルダ構造は下記の通りです。
※themesbergは自由に名前を変更できます。

Githubからこれらのファイルを取得することもできます。

npm依存関係のインストール

npm経由で、Gulp、BrowserSync、Gulp Sass、Bootstrap 5 alphaを依存関係としてインストールします。
下記のコマンドを実行して、ローカルのpackage.jsonファイルを作成します。

プロジェクトに名前や説明をつけるように求められます。詳細のほとんどはオプションで、後で入力することもできます。
プロセスが終了すると、新しいpackage.jsonファイルが作成されます。

その後、以下のコマンドを実行して、依存関係をインストールします。

最後に、以下のコマンドを実行して最新版のBootstrap 5をインストールします。

注意: このコマンドでBootstrap 5がインストールされなかった場合(安定したデフォルトバージョンになった場合に起こります)、公式のnpmバージョンの管理ページにアクセスし、パッケージマネージャーからインストールしてください。

Sassファイルをコンパイルするためのgulpfileを作成し、BrowserSync経由でローカルサーバーを作成

まず、package.jsonが配置されているプロジェクトのルートフォルダにローカルのgulpfile.jsを作成する必要があります。次に下記のコードをファイルに追加します。

ファイルの最初の部分は、前のステップでnpm経由でインストールした依存関係を含めるものです。次はserveと呼ばれる最初のGulpコマンドです。これは基本的にはapp/フォルダ内のファイルに基づいて新しいローカルサーバーを起動し、*.scss*.htmlファイルのappフォルダ内の変更(コードを書くときに行うファイル保存)を監視します。

2つ目のコマンドはsassと呼ばれるもので、app/scss/フォルダ内のすべての*.scssファイル(Sassファイル)を取得し、それらをthemesberg.cssと呼ばれる単一のCSSファイルにコンパイルします。これをHTMLテンプレートに含めることになります。

最後に、gulp.task('default', gulp.series('serve'));でローカルサーバーを起動し、Sassファイルの変更を監視し、コマンドラインでgulpを記述するだけでコンパイルできるようにします。これがdefaultの意味です。

BootstrapのSassファイルをワークフローに含める

次に、メインのapp/フォルダ内にscss/フォルダを作成し、themesberg.scssという新しいファイルを作成します。作成したら、以下のコードを記述します。

これが何をするかというと、node_modules/フォルダにあるBootstrapのSassファイルをインクルードします。これにより、カラー、サイズ、スペースなどのデフォルトの変数値を上書きできるようになります。

app/フォルダ内にindex.htmlファイルを新規作成し、下記のHTMLをコピペしてみてください。

全体をテストするには、gulpfile.jsがあるフォルダ(つまりルートフォルダ)にあるターミナルでgulpを実行します。新規タブがブラウザにポップアップされ、http://localhost:3000/というURLで2つのボタンが表示されます。

期待通りに表示されなかった場合は、npm経由ですべての依存関係をダウンロードしなおし、フォルダとファイルの構造が同じであることを確認してください。

ボタンのテキストをThemesbergに変更してみてください。ファイルを保存してブラウザに戻ると、ブラウザをリロードしなくても変更されたことが分かります。
すごいですね! 時間の節約になります。
これからは手動でリロードする手間が省けます🥳

新しいマークアップで簡単なブログページを作成する

ここまでは大丈夫ですか? Bootstrap 5からSassファイルをコンパイルし、コードを記述するとすぐに変更が反映されるローカルサーバーを作成するための作業環境を構築することに成功しました。

今までの作業は2つボタンを表示するためだけのものではありません。この作業環境で、Bootstrap 5のコンポーネントを使用して、ナビゲーションバー、カードのリスト、ページネーション、フッタを備えたページを作成します。

ナビゲーションバーの実装

Bootstrap 5にはすべてのコンポーネントに実装方法を解説したドキュメントが用意されています。ナビゲーションバーのドキュメントに掲載されているコードを利用して実装してみましょう。

メインのコンテンツ、カードとサイドバー

メインのコンテンツ部分を実装します。最初の要素はコンテナで、2つの子要素(カードセクションとサイドバー)を作ります。<nav>要素の直後に下記のHTMLを記述します。

簡単でしょ? でもこれだけだと寂しいので、最初のカードに.mb-4のユーティリティclassを追加して、カード間に適切なスペースを与えてみてください。

たくさんのカードが必要な場合はどうなるでしょうか?
あまりにも多くのカードを表示するとページのロード時間が長くなってしまいます。ページに表示するカードの数を制限し、ページネーションを実装してみましょう。

メインのコンテンツばかりを実装したので、サイドバーはスカスカです。サイドバーに、ニュースレーターにサインアップするためのセクションを実装してみます。
サイドバー内に下記のコードを加えます。

もちろん、このセクションはサイドバーの1つのアイテムに過ぎません。関連記事やソーシャルメディアや注目記事などのセクションを追加することもできます。

Bootstrap 5のSass変数を使用してプロジェクトをカスタマイズする

見た目は良いですが、これはBootstrapのデフォルトのスタイルとカラーです。少し個性的にしてみましょう。Bootstrap 5の変数を使用すると簡単にカスタマイズができます、Sassの真の力が発揮されるところです。プライマリーカラーをお気に入りのカラーに変更してみます。

まずは、scss/フォルダ内に_variables.scssファイルを新規作成し、このファイルにthemesberg.scssファイルをインポートします。

あとは、_variables.scssに変数を追加するだけです。デフォルトではブルーの$primary変数のカラーを上書きします。

これはたった1つの変数にすぎません。他の変数をどのように見つければよいと思いますか? その答えは簡単です。node_modules/フォルダからbootstrapフォルダ内の_variables.scssファイルを探すだけです。

ファイルのフルパスは、node_modules/bootstrap/scss/_variables.scssです。基本的には、このファイルから任意の変数を取得し、それをローカルの_variables.scssファイルに上書きすることで、プロジェクトのスタイルを簡単に変更できます。
便利ですね!

jQueryの代わりにバニラJavaScriptを使用する

公式のドキュメントによると、Bootstrap 5でjQueryを引き続き使用できますが、バニラJavaScriptを使用することが推奨されています。依存関係を含まないことでロード時間を節約し、プロジェクトをより高速で無駄のないものにすることができます。document.querySelectorは、$セレクタの代わりとして問題なく動作します。

今までjQueryを使用していたツールチップやモーダルをどのようにバニラJavaScriptで実装するか、Bootstrap 5での実装方法を見てみましょう。

バニラJavaScriptによるBootstrap 5のツールチップの実装

記事を読んだ後に、コミュニティに参加したい人のために、ソーシャルメディアへのリンクをサイドバーに追加してみます。下記のHTMLで、ボタンにカーソルを合わせるとツールチップが表示されるようにします。

しかし、これだけではツールチップは機能しません。JavaScriptを少しだけ記述して、ツールチップを機能させましょう。

jsフォルダ内にthemesberg.jsファイルを作成し、下記のコードを記述しました。このファイルも必ずindex.htmlに外部ファイルとして含めてください。

このJavaScriptは、data-toggle="tooltip"属性を持つページ上のすべての要素を取得し、それらのすべてを初期化します。また、tooltipList変数に利用可能な要素の完全なリストも表示されます。

バニラJavaScriptによるBootstrap 5のモーダルの実装

Bootstrap 5でモーダルの使用法を紹介するために、モーダル・トグルによるアカウント登録機能を実装します。最初は、ナビゲーションバーの検索要素の後にボタンを追加します。

次に、bodyタグ内の最後に、下記のモーダルを記述します。

これでHTMLは完了したので、ボタンがクリックされた時にモーダルが表示されるように、themesberg.jsファイルに下記のコードを追加します。

Bootstrap 5のモーダルオブジェクトを作成し、ボタンがクリックされるとモーダルに切り替わります。

もちろん、これらはデータ属性を使用して実装することもできますが、この方法ではJavaScriptのコードの中でモーダルをオブジェクトとして使用することができ、プログラムでの操作が非常に簡単になります。
参考: <dialog>要素で、ダイアログ ボックスを実装する方法と注意点

Bootstrap 5の新しいユーティリティAPI

Bootstrap 5の新しいユーティリティAPIは、ユーティリティファーストのフロントエンド開発、特にTailwind CSSの採用が拡大していることに対応するものです。
参考: Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる

新しいユーティリティAPIはカスタムユーティリティクラスを簡単に作成して、不透明度、幅、カラー、サイズ、スペースなどのプロパティを簡単に変更して利用できます。さらに素晴らしいのは、いくつかのパラメーターを受け取ると、自動的にCSSのクラスを生成することです。scssフォルダ内に_utilities.scssというファイルを作成し、themesberg.scssファイルにインポートして、次のコードを追加するだけです。

これにより、下記のCSSが生成されます。

何が起こったのかを見てみましょう。
まず最初に、コードのopacityの部分は、クラスの最初の部分が持つ名前を設定します(すなわち、.name-value)。次に、クラスの実際のプロパティ(この場合はopacityですが、box-shadowwidthheightなども)を定義してから、実際の値を定義します。

この場合では、opacityの値として0-100の範囲の4つの値を追加しました。1つ目の値はクラス名で使われるもので、2つ目の値はopacityプロパティに使われる実際の値になることに注意してください。

もう1つ別の例を見てましょう。
responsive: trueフラグを加えると、すべてのユーティリティクラスのレスポンシブクラス (sm, md, lg) を生成します。

これにより、下記のCSSが生成されます。

かなり便利ですよね!
これらは実装する際に作業を容易するために使用できるユーティリティAPIの機能の一部です。さらに詳しい情報は、公式のドキュメントをご覧ください。

これにてチュートリアルは、終了です。
Gulp 4、Sass、BroeserSyncを使用して作業用の開発環境を構築する方法を学び、ブログページを作成し、Bootstrap 5でバニラJavaScriptの使用例を学び、新しいユーティリティAPIの機能を学びました。
ここで紹介したファイルは、Bootstrap 5 tutorial -GitHubにリポジトリを作成しました。気に入ってくれた人は、スターをお願いします⭐️

Bootstrap 5対応のUIキット

最後に、Themebergで1年以上取り組んできたUIキットを紹介します。
Bootstrap 5対応で、1,000以上のコンポーネント、50以上のセクション、35のサンプルページ、さらにはユーザーダッシュボードまでも含んだUIキットです。

Pixel Pro Bootstrap 5 UI Kit

Pixel Pro Bootstrap 5 UI Kitデモページ

このUIキットは、Bootstrap 4.5と5 alphaの両方で利用でき、素晴らしいユーザーインターフェースやWebサイトを構築する際に、時間、エネルギー、お金を節約するのに役立ちます。最先端のデザイン原則、アクセシビリティとコードの品質を使用して作成されています。

sponsors

top of page

©2020 coliss