プログラミング

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・ターミナル等についての詳しい説明は割愛します。 ご了承ください。

詳しく知りたい方は下記のリンクをご覧ください。
> 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での開発画面
▲ 上の画面が表示されれば成功です!

Buefy のインストール

いよいよBuefyのインストールです。
本記事執筆時の時点で、Buefyのバージョンは 0.6.6 です。バージョンは適宜、変更してください。
buefy-test ディレクトリ内の「package.json」のdevDependenciesの配列に次のコードを追加しましょう。
※編集するファイルは「package-lock.json」ではなく「package.json」です。ご注意を!

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

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

npm install

これでBuefyがインストールできたはずです。
次にBuefy - startの Usage を参考に Buefy を使えるようにしましょう。
下記のコードを「main.js」に貼り付けてください。

1
import Vue from 'vue'
2
import Buefy from 'buefy'
3
import 'buefy/lib/buefy.css'
4
Vue.use(Buefy)

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

1
import Vue from 'vue'
2
import Buefy from 'buefy'
3
import 'buefy/lib/buefy.css'
4
Vue.use(Buefy)
5
6
import App from './App'
7
8
…以下、略

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

▼ver.0.6.7

1
import Vue from 'vue';
2
import Buefy from 'buefy';
3
import 'buefy/**dist**/buefy.css'; //←**lib から dist に変更。**
4
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 です。

1
<template>
2
  <section>
3
4
    <b-collapse :open="false">
5
      <button class="button is-primary" slot="trigger">Click me!</button>
6
      <div class="notification">
7
        <div class="content">
8
          <h3>Subtitle</h3>
9
          <p>
10
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>
11
          Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. <br/>
12
          Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
13
          </p>
14
        </div>
15
      </div>
16
    </b-collapse>
17
18
  </section>
19
</template>

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

1
<div id="app">
2
  <img src="./assets/logo.png" />
3
  <HelloWorld/>
4
  <Collapse/> //← 追記
5
6
<script>
7
  import HelloWorld from './components/HelloWorld'
8
  import Collapse from './components/Collapse' //← 追記
9
10
  export default {
11
    name: 'App',
12
    components: {
13
      HelloWorld, //← **カンマを忘れずに!**
14
      Collapse //← 追記
15
    }
16
  }
17
</script>
18
19
// 以下略〜

何をやっているかというと…
Collapse という Vue コンポーネントを用意し、App に登録。
#app 配下で使えるように、components に記述しました。
App.vue」を編集し終えたら、保存しましょう。
これで「Collapse」を使えるようになりました。

下記のコマンドをターミナルに打って、開発画面を確認してみてください。

npm run dev

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

まとめ

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

--- 広告 ---

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

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

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