BulmaとVue.jsでできたUIコンポーネント「Buefy」【紹介とチュートリアル】

BulmaとVue.jsのUIコンポーネント「Buefy」

Buefyいいよ!Buefy!

Bulma + Vue.js = Buefy

今回はUIコンポーネント「Buefy」を紹介します。

Buefyとは、BulmaとVue.jsを組み合わせたUIコンポーネントです。
MITライセンスで、オープンソースとして公開されています。

UIコンポーネントと聞くと扱いが難しそうなイメージがありますが、Buefyはとてもシンプル!
レイアウトはBulma、サイトの動きはVue.jsがそれぞれ担っており、少ないコード量で、レスポンシブかつキレイなサイトを作ることができます!

Buefyの特徴

Buefyの一番の特徴は、とにかくシンプルで軽い!ことでしょう。

BulmaもVue.jsも、BootstrapやAngularのようなコテコテなフレームワークと異なり、非常にシンプルに作られています。このシンプル性をそのまま継承したのが、Buefyです。

リッチなアニメーション等はないものの、WebサイトやWebアプリを構築するのに必要なUIコンポーネントをそろえており、複雑な設定なしに、すぐに使うことができます。

また、学習コストも少なく、プロダクトを作りたい時にパッと導入できるのも嬉しいところ。

Buefyを使ってみよう!

※今回はvue-cliを使ったBuefy導入までの簡単なチュートリアルを紹介します。
node.js・vue-cli・ターミナル等についての詳しい説明は割愛します。
ご了承くださいm(_ _)m。

詳しく知りたい方は下記のリンクをご覧ください。
> node.js
> Vue.js – cli
> Vue.jsをvue-cliを使ってシンプルにはじめてみる

vue-cliのインストール

では、さっそくチュートリアルをはじめていきましょう。
まずvue-cliを使って、プロジェクトを作ります。

node.jsをインストールしていない方は、先にnode.jsのインストールをしてください。
> node.js

既にnode.jsをインストールしている方は、vue-cliをインストールしましょう。
ターミナルに下記のコマンドを入力してください。

npm install -g vue-cli

vue-cliのインストールが終わりましたら、プロジェクトを作りましょう。
ターミナルに下記のコマンドを入力してください。

vue init webpack buefy-test

なんかいろいろ聞かれますが、全て’y’でOKです。
ES-Lintだけ面倒なので、’n’にした方が良いかもしれませんね。

これでプロジェクトが作成されました。
次に下記のコマンドを順にターミナルに打つことで、ローカルサーバーが立ち上がり、開発画面を表示させることができます。
コマンドを打ち終わったら、ブラウザで http://localhost:8080/ のURLにアクセスしてみましょう。

cd buefy-test
npm run dev
vue-cliでの開発画面

vue-cliでの開発画面。上の画面が表示されれば成功です!

Buefyのインストール

いよいよBuefyのインストールです。
本記事執筆時の時点で、Buefyのバージョンは0.6.6です。バージョンは適宜、変更してください。

buefy-testディレクトリ内の「package.json」のdevDependenciesの配列に次のコードを追加しましょう。
※編集するファイルは「package-lock.json」ではなく「package.json」です。ご注意を!

"devDependencies": {
    "autoprefixer": "^7.1.2",
    …(略)…
    "webpack-merge": "^4.1.0", // ←カンマを忘れずに!
    "buefy": "^0.6.6" // ←追加コード
  },

保存したら次のコマンドをターミナルに打ちましょう。
ローカルサーバーが立ち上がったままでしたら、一旦停止(Macならcontrolキー + Cでローカルサーバー停止)して、下記のコマンドを打つようにします。

npm install

これでBuefyがインストールできたはずです。

次にBuefy – startのUsageを参考にBuefyを使えるようにしましょう。
下記のコードを「main.js」に貼り付けてください。

import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/lib/buefy.css'
Vue.use(Buefy)

なお、import Vue from ‘vue’ は元から記述されていますので、下記のように記述位置を調整すればうまくいくと思います。

import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/lib/buefy.css'
Vue.use(Buefy)

import App from './App'

…以下、略

 

※2018/9/7時点でバージョンアップが行われ、ver.0.6.7が公開されました。これに伴い、buefy.cssのパスが変更されたようです。
ver.0.6.7を使いたい方は、buefy.cssのパスにご注意ください。

▼ver.0.6.7___

import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css'; //←libからdistに変更。
 Vue.use(Buefy);

 

追加したら、再度ターミナルで下記のコマンドを打ちましょう。

npm run dev

見た目はあまり変わっていないですが、これでBuefyを使う準備が整いました!

Buefyインストール後の開発画面

Buefyインストール後の開発画面。文字周りがちょっと変わっていますね。

Buefyのコンポーネントを使ってみよう

さて、Buefyが使えるようになったところで、せっかくなのでUIコンポーネントの「Collapse」を表示させて見ましょう。

> Buefy – Collapse

まず、buefy-test/src/components/配下に「Collapse.vue」というファイルを作ります。
同階層にある「HelloWorld.vue」をコピーして名前を変更してもOKです。
そしてBuefy – Collapseのコードをコピーして、「Collapse.vue」に貼り付けます。
下記からコピーしてもOKです。

<template>
  <section>

    <b-collapse :open="false">
      <button class="button is-primary" slot="trigger">Click me!</button>
      <div class="notification">
        <div class="content">
          <h3>Subtitle</h3>
          <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>
          Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. <br/>
          Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
          </p>
        </div>
      </div>
    </b-collapse>

  </section>
</template>

今度は「App.vue」を編集しましょう。
App.vue」を開き、下記のように変更してください。

<div id="app">
  <img src="./assets/logo.png" />
  <HelloWorld/>
  <Collapse/> //← 追記

<script>
  import HelloWorld from './components/HelloWorld'
  import Collapse from './components/Collapse' //← 追記

  export default {
    name: 'App',
    components: {
      HelloWorld, //← カンマを忘れずに!
      Collapse //← 追記
    }
  }
</script>

// 以下略〜

何をやっているかというと…
CollapseというVueコンポーネントを用意し、Appに登録。
#app配下で使えるように、componentsに記述しました。

App.vue」を編集し終えたら、保存しましょう。
これで「Collapse」を使えるようになりました。
下記のコマンドをターミナルに打って、開発画面を確認してみてください。

npm run dev
Collapseを追加した画面

Collapseが表示されました!


以上、vue-cliBuefyを使えるようにするまでのチュートリアルでした。
みなさん、いかがでしたでしょうか。

まとめ

この記事のまとめ
・Bulma・Vue.jsのいいとこ取りのUIコンポーネント「Buefy
Buefyはシンプルで軽量なので、WebサイトにもWebアプリにも使える!
Buefyは学習コストが低く、Bulma・Vue.jsを知っていればすぐに使える!

Buefyには、今回紹介したCollapse以外にも豊富なコンポーネントが用意されています!
みなさんも、ぜひBuefyを使ってみてください。

Adobe XDでBuefyのUIキットを製作しました!

Adobe XDでBuefyのUIキットを製作しましたよ!

Buefy-UIキットの外観

Buefy-UIキットの外観

無料で配布しますので、気になる方はぜひ使ってみてください!
Adobe XDでBuefyのUIキットを作りました!【無料配布】の記事からダウンロード可能です。(※ダウンロード前に必ず注意事項をご一読ください。