jQueryに依存しないBootstrap「Native JavaScript for Bootstrap」

2016年12月 4日

Webサイト構築、特にレスポンシブWebサイトを作るときにBootstrapを使うというのが、選択肢の一つとして出てくることが多いですよね。BootstrapはTwitter社が開発したCSSフレームワークで、効率的にレスポンシブなWebサイトのコードを書くことができます。またデザインテンプレートが購入できるマーケットプレースも増えてきて、ささっとWebサイトを作ろうと思ったときには、とても便利だと思います。

しかし、Bootstrapで気になるところを上げるとしたら、jQueryに依存しているという点があります。

jQueryは、代表的なJavaScriptのフレームワークの一つです。便利で効率良くJavaScriptを取り入れることができるのが魅力ですが、jQueryはWebサイトの表示を重くするという弱点があります。特に、jQueryを使い出すと、少ないコードでアニメーションを加えられたりしますし、またプラグインを使うと、数十行(あるいは数行)でWebサイトにさまざまな効果を加えることができます。そうするとjQueryに加えて、プラグインファイルを読み込んだり、処理に関してもどんどん重くなってしまうのです。

そのために、Web開発者の中では、jQueryに依存するということを理由にBootstrapを敬遠しているという方もいます。

と、前振りが長くなってしまいましたが、ここで本日ご紹介したいのが、「Native JavaScript for Bootstrap」というものです。こちらは、Bootstrapの機能をできる限りそのままにしながらも、JavaScriptが必要な機能の部分を、jQueryを使わずに、ネイティブなJavaScriptを使えるように変更しようというプロジェクトです。この「Native JavaScript for Bootstrap」を使えば、開発者としては、これまで通りの感覚でBootstrapを使いながらも、jQueryの重さを取り除いたようなWebサイトを作ることができるのです。

使い方は簡単です。

Bootstrapの場合には、

このような基本ファイルの読み込みが必要になります。

一方で、Native JavaScript for Bootstrapの場合には、

という記述になります。CSSファイルに関しては変更はなく、JS関連で、jQueryの読み込みを削除し、Bootstrapのオリジナルのファイルをbootstrap-native.min.jsに変更するだけです。そのほかの記述に関しては、基本的に大きな変更はありません。

詳細は、Native JavaScript for BootstrapのExamplesのセクションを見ていただけると良いかと思います。英語のドキュメントですが、コードとデモの動きだけでも感覚は掴めると思いますので、ぜひチェックしてみてください。

また、そもそもBootstrap自体を勉強したい！という方に向けては、12月26日に「Bootstrap基礎講座」を開催予定ですので、ぜひご参加ください。

本ブログは、日本初Web専門スクールのインターネット・アカデミーの講師が運営するWebメディアです。スクールの情報はもちろん、最新のWebデザイン・プログラミング・Webマーケティングについて役立つ情報をご紹介しています。