Rails6にUIkitを導入する手順

Rails6にUIkitを導入する手順

September 26, 2020

短い内容になりますが、覚書として導入手順をまとめておきます。

UIkit とは #

A lightweight and modular front-end framework for developing fast and powerful web interfaces.

UIkit（公式ページより）

…だそうです。という雑な紹介だと怒られそうなので補足すると、UIkit は CSS フレームワークです。要するに Bootstrap と同じ括りです。

Bootstrap との比較ですが、使ってみて感じた違いは以下の３点です。なお、UIkit は Version 3.5.7、Bootstrap は Version 4.5 で比較しています。

  • UIkit はアイコンが同梱されている。Bootstrap にはアイコンが含まれていない。
  • UIkit は jQuery を必要としない。Bootstrap には jQuery が必要。
  • UIkit は自己主張しないデザイン。Bootstrap ははっきりしたデザイン。

なお、もうじきリリースされる Bootstrap Version5 では、jQuery が必要なくなり、かつアイコンが同梱されます。そのため、その点の違いはなくなりますね。

その他、グリッドレイアウトの組み方などにも違いはあると思いますが（というかレイアウトの組み方の違いってかなり大きな違いだと思いますが）、私は CSS フレームワークを使ってレイアウトを組むことはしておらず、あくまでもワンポイントデザイン集的な使い方をしているため、そこは比較しません。

あとは、Bootstrap の場合は日本語でもドキュメントが提供されているというのが強みですね。UIkit の場合は英語と格闘することになりますが、そもそもコピペで利用できる内容なので、文章を読み込む必要はそれほど生じませんけれど。

ちなみに私が UIkit を使用したのは、アイコンが同梱されていたからという理由だけです。わざわざ Font Awesome のアイコンを使わなくても、最初からアイコンが同梱された CSS フレームワークを使った方がより手軽でいいなーと思っただけです。

またデザインに関する違いからは、なんとなくその思想が読み取れます。Bootstrap の場合はユニバーサルデザイン（例えば障害のある方でも使いやすいなど、誰もが使いやすいデザイン）がかなり意識されているような気がします。ドキュメントの中でも、そのような内容に度々言及しています。そのため、Bootstrap はわりとはっきりしてわかりやすいデザインになっているのかなと。対して、UIkit の場合は控えめなデザインで、あまり自己主張せずサイトに溶け込むようなデザインになっています。

UIkit 導入手順 #

前置きが長くなりましたが、ここから導入手順です。といってもすぐに終わります。

最初に貼っておきますと下記が UIkit の公式ページです。ただ、ひとまず読まなくて大丈夫です。

https://getuikit.com/

では、さっそくインストールしましょう。Yarn でインストールします。

yarn add uikit

なお UIkit の説明の中で書きましたが、jQuery は不要です。

次に CSS の読み込み設定をします。

app/assets/stylesheets/application.scss （css にしている場合は scss に変えてください）に、下記を追加してください。

@import 'uikit/dist/css/uikit'; // UIkitの適用

次に、Javascript とアイコンの読み込み設定をします。

app/javascript/packs/application.js に、下記を追加してください。

import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);

短いですが、以上で終わりです。

UIkit が利用できる状態となっているか確認しましょう。

適当なビューページに以下を記載してください。

<!-- クローズボタン付きアラートの表示 -->
<div uk-alert>
  <a class="uk-alert-close" uk-close></a>
</div>

<!-- アイコンの表示 -->
<span uk-icon="heart"></span>

上記では、クローズボタン付きアラート（https://getuikit.com/docs/alert#close-button ）と、アイコン（https://getuikit.com/docs/icon）を表示させています。

両者が無事に表示されたら、クローズボタンでアラートが閉じることを確認しましょう。

これで、CSS、JS、アイコンがすべて読み込めていることが確認できました。

以上 #

短いですが、以上で終わりです。お読みいただきありがとうございました。