はじめに
CSSフレームワークといえばBootstrapを思い浮かべる方が多いと思いますが、「クラス名が長い」「デザインがいかにもBootstrapっぽくなる」といった悩みを抱えたことはないでしょうか。UIkitはそうした課題に対して、軽量さとモジュール性を軸にした答えを持つフロントエンドフレームワークです。
グリッドやボタンといった基本パーツから、アコーディオンやモーダル、スライダーといったインタラクティブなコンポーネントまで100種類以上を備えながら、必要な機能だけを読み込んで軽量に保てるのが特徴です。
とはいえ、読むより触った方が早いと思います。ボタンの見た目切り替えとUIkitの通知APIを組み合わせたサンプルを用意したので、先に挙動を見たい方はこちらからどうぞ。
UIkitとは
UIkitは、YOOtheme社が開発しているオープンソースのフロントエンドフレームワークです。2013年の初出以来メンテナンスが続いており、GitHubで18,500以上のスターを獲得しています。バージョン3系ではjQuery依存が排除され、素のJavaScriptだけで動作するようになりました。
主な特徴
- モジュール設計 - グリッドやボタンなどのコアパーツから、モーダルやスライダーなどのJSコンポーネントまで機能単位で分かれており、必要な部分だけを読み込める
- 豊富なコンポーネント数 - グリッド、ナビゲーション、フォーム、モーダル、通知、スライダーなど100種類以上を標準搭載
- HTML属性ベースの初期化 -
uk-accordionやuk-modalのような属性をタグに付けるだけで、JavaScriptを書かずにコンポーネントが動く - 柔軟なテーマカスタマイズ - LESSベースのソースが公開されており、Sassほど一般的ではないものの変数を上書きするだけで見た目を調整できる
インストール
npmでインストールする場合は次のとおりです。
npm install uikit
yarnを使う場合は次のとおりです。
yarn add uikit
手早く試したいだけであれば、CDN経由でCSSとJSを読み込むだけでも使えます。UIkitのアイコンを使う場合は、コア（uikit.min.js）の後にuikit-icons.min.jsを読み込みます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.25.21/dist/css/uikit.min.css">
<script src="https://cdn.jsdelivr.net/npm/uikit@3.25.21/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.25.21/dist/js/uikit-icons.min.js"></script>
UIkitのサンプルを動かす
下のサンプルは、UIkitのuk-buttonクラスによる見た目切り替えと、JavaScript APIのUIkit.notification()を組み合わせたものです。ボタンを押すと自分自身の色クラス（uk-button-primary / uk-button-danger）が入れ替わると同時に、画面右上にUIkitの通知が表示されます。
<button id="toggleBtn" class="uk-button uk-button-primary">状態を切り替える</button>
<script>
UIkit.notification({
message: '通知メッセージ',
status: 'success',
pos: 'top-right',
timeout: 2000
})
</script>
実際に動かせるものが下です。ボタンを何度か押して、色と通知の内容が連動する様子を確認してみてください。
ボタンのクラス名をuk-button-primaryとuk-button-dangerで切り替えているだけなのに、色もラベルも一括で変わることが分かります。UIkit.notification()は呼び出すだけで通知要素の生成・表示・自動消去までを担ってくれるため、トースト通知を自前でDOM操作する必要がありません。statusをwarningやprimaryに変えると、通知の色味も合わせて変化します。
基本的な使い方
UIkitのグリッドはuk-gridクラスを親要素に付け、子要素に列幅クラス（uk-width-1-2など）を指定するだけで組めます。カードにはuk-card系のクラスを重ねます。
<div class="uk-grid" uk-grid>
<div class="uk-width-1-2@m">
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">カードタイトル</h3>
<p>uk-cardクラスだけで枠線と余白が整った見た目になります。</p>
</div>
</div>
<div class="uk-width-1-2@m">
<div class="uk-card uk-card-primary uk-card-body">
<h3 class="uk-card-title">プライマリカード</h3>
<p>uk-card-primaryのようにバリエーションを付けられます。</p>
</div>
</div>
</div>
uk-width-1-2@mの@mはブレークポイント接尾辞で、「medium以上の画面幅では1/2」という意味になります。接尾辞を外したuk-width-1-2はすべての画面幅で適用され、@s（small）・@l（large）・@xlと組み合わせてレスポンシブな幅指定ができます。グリッドの子要素にuk-grid属性（class="uk-grid"とは別に付ける）を追加すると、UIkitがJavaScriptで高さ揃えなどの補助動作も自動で行ってくれます。
実践的なユースケース
アコーディオンでFAQを折りたたむ
FAQページのように、見出しをクリックしたときだけ本文を表示したい場面ではuk-accordionが使えます。<ul>にuk-accordion属性を付けるだけで、内部の<li>が開閉可能な項目として振る舞います。
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#">質問1</a>
<div class="uk-accordion-content">
<p>回答1のテキストです。</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">質問2</a>
<div class="uk-accordion-content">
<p>回答2のテキストです。</p>
</div>
</li>
</ul>
実際に動かせるサンプルです。項目タイトルをクリックすると開閉し、multiple: trueを指定しているため複数項目を同時に開いた状態にできます。
uk-accordionにJavaScriptの初期化コードを一切書いていない点がポイントです。multiple: trueのオプションを外すと、1項目を開いたときに他の項目が自動的に閉じる通常のアコーディオン挙動に変わります。
モーダルで入力内容を確認する
フォームの入力内容を送信前に確認させたい場面では、uk-modalを使ったモーダルダイアログが便利です。開閉のトリガーはuk-toggle属性、モーダル自体はbeforeshowイベントで開く直前の処理をフックできます。
<button class="uk-button uk-button-default" uk-toggle="target: #confirm-modal">
確認する
</button>
<div id="confirm-modal" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<p id="modal-content"></p>
</div>
</div>
実際に動かせるサンプルです。テキストを入力してから「確認する」ボタンを押すと、その内容がモーダル内に反映されます。
memo欄を空にしてから「確認する」を押すと、モーダル側にも「（未入力です）」が表示されます。モーダルの開閉自体はuk-toggleとuk-modal-closeが担っており、自前で書いたのはbeforeshowイベントで入力値を読み取る処理だけです。UIkitのコンポーネントは開閉のたびにbeforeshow / show / shown / beforehide / hide / hiddenという一連のカスタムイベントをDOM要素上に発火するため、任意のタイミングにフックできます。
スライダーでカード一覧を横スクロールさせる
商品一覧やお知らせのように横方向にたくさんの要素を並べたいときは、uk-sliderが使えます。uk-slider-itemsを付けたリストの子要素が1枚のスライドとして扱われ、ドラッグやボタンで送れるようになります。
<div uk-slider>
<div class="uk-position-relative">
<ul class="uk-slider-items uk-child-width-1-3@s uk-grid">
<li><div class="uk-card uk-card-default uk-card-body">1</div></li>
<li><div class="uk-card uk-card-default uk-card-body">2</div></li>
</ul>
<a class="uk-position-center-left" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>
実際に動かせるサンプルです。左右の矢印ボタンでスライドを送るほか、カード自体をドラッグしても切り替わります。
uk-child-width-1-3@sは「small以上の画面幅では子要素を1/3幅で並べる」という指定で、これも先ほどのグリッドと同じブレークポイント接尾辞のルールに従っています。矢印のクリックだけでなくドラッグ操作にも対応しているのは、uk-sliderがタッチ・マウス両方のジェスチャーを内部で処理しているためです。
まとめ
UIkitは、jQuery非依存で軽量に動作しながら、グリッドからアコーディオン・モーダル・スライダーまでをuk-接頭辞のクラスと属性だけで組み立てられるCSSフレームワークです。JavaScriptを書かずに動くコンポーネントが多い一方、beforeshowのようなカスタムイベントでフックすれば、フォーム入力と連動させるような凝った挙動も無理なく実装できます。
Bootstrapに慣れている方であれば、グリッドやカードといった概念は共通しているためすぐに読み替えられるはずです。まずは今回のサンプルを書き換えながら、手元のプロジェクトに置き換えられそうな箇所を探してみてください。