Vue.jsフレームワーク AT UIを使ってみた
こんにちは。まちいろの日高です。
Vue.jsやNuxt.jsでフロントサイドをガシガシ作っています。
フロントエンドエンジニア（仮）から（見習い）くらいにはレベルアップした感あります。
今回は、Vue.jsのフレームワーク AT UI を使ってお勉強してみました。
なぜAT UI？
element-uiがフレームワーク界ではメジャーなようです。
確かに日本語のドキュメントもめっちゃ多いですね。
AT UIは2017年6月にリリースされて比較的新しく、その分色使いやデザインが今時感あります。
私は管理サイト系のフロントよりかはエンドユーザー向けのフロントエンドを作ることが多いので、今時感デザインのAT UIを使ってみることにしました。
最初の挫折ポイント
日本語ドキュメントなさすぎﾜﾛﾀwwww
あと、これは他のフレームワークにも言えますが、日本語非対応すぎるw
英語嫌いすぎて理系に進んだ私としては結構萎えます。
あとnpm installしなくても使うだけならCDNで行けばいいのね。とうのもインストールしたあとで気づく…
環境構築苦手＋英語死んでるとこういうことになります。
とりあえずCDNで使ってみた
構造はさておき、どういうUIになるのかなーと思って色々コンポーネントを使ってみました。
おぉー。それっぽい。HTMLはこちら。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>AT-UI Example</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/at-ui-style/css/at.min.css">
<link rel="stylesheet" href="./style.css">
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/at-ui/dist/at.min.js"></script>
</head>
<body>
<div id="app">
<div class="l_form">
<at-steps :current='0' class="l_steps">
<at-step title="会員情報入力" description="会員情報をご入力ください"></at-step>
<at-step title="入力確認"></at-step>
<at-step title="仮登録完了"></at-step>
<at-step title="本登録完了"></at-step>
</at-steps>
<h4 class="m_h4">お客様情報のご入力</h4>
<div class="row at-row no-gutter flex-middle mb_30">
<div :class="`col-md-5`">お名前<at-tag color="error" class="ml_5">必須</at-tag></div>
<div :class="`col-md-19`">
<at-input size="large" placeholder="日高 聖子" v-model="name"></at-input>
</div>
</div>
<div class="row at-row no-gutter flex-middle mb_30">
<div :class="`col-md-5`">電話番号</div>
<div :class="`col-md-19`">
<at-input v-model="tel" placeholder="03-1234-5678" size="large">
<template slot="prepend">
<i class="icon icon-phone"></i>
</template>
</at-input>
</div>
</div>
<div class="row at-row no-gutter flex-middle mb_30">
<div :class="`col-md-5`">性別</div>
<div :class="`col-md-19`">
<at-radio-group v-model="sex" fill="#FF6464">
<at-radio-button label="woman">女性</at-radio-button>
<at-radio-button label="man">男性</at-radio-button>
</at-radio-group>
</div>
</div>
<div class="row at-row no-gutter flex-middle mb_30">
<div :class="`col-md-5`">生年月日</div>
<div :class="`col-md-19`">
<at-select v-model="year" size="large" style="width: 100px">
<at-option v-for="e in 10" :value="e">{{e}}</at-option>
</at-select>
年
<at-select v-model="month" size="large" style="width: 100px">
<at-option v-for="e in 12" :value="e">{{e}}</at-option>
</at-select>
月
<at-select v-model="day" size="large" style="width: 100px">
<at-option v-for="e in 31" :value="e">{{e}}</at-option>
</at-select>
日
</div>
</div>
<div class="row at-row no-gutter flex-middle mb_30">
<div :class="`col-md-5`">メールマガジン登録</div>
<div :class="`col-md-19`"><at-switch size="large" v-model="magazine"></at-switch></div>
</div>
<div class="row at-row no-gutter flex-middle mb_30">
<div :class="`col-md-5`">メールアドレス</div>
<div :class="`col-md-19`">
<at-input v-model="email" placeholder="aaa@gmail.com" size="large">
<template slot="prepend">
<i class="icon icon-mail"></i>
</template>
</at-input>
</div>
</div>
<div class="row at-row no-gutter flex-middle mb_30">
<div :class="`col-md-5`">パスワード<at-tag color="error" class="ml_5">必須</at-tag></div>
<div :class="`col-md-19`"><at-input size="large" placeholder="Large Size" v-model="password"></at-input></div>
</div>
<div class="row at-row no-gutter flex-middle mb_30">
<div :class="`col-md-5`">パスワード（確認用）<at-tag color="error" class="ml_5">必須</at-tag></div>
<div :class="`col-md-19`"><at-input size="large" placeholder="Large Size" v-model="password02"></at-input></div>
</div>
<div class="row at-row no-gutter flex-center">
<at-button @click="handleClick()" type="primary" size="large">会員登録</at-button>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
name:'',
tel:'',
sex:'woman',
year:1,
month:1,
day:1,
magazine:true,
email:'',
password:'',
password02:'',
tel:''
},
methods: {
handleClick () {
this.$Message.success('登録が完了しました')
}
}
})
</script>
</body>
</html>
Vue.jsをベースにしているので、v-modelやclassのバインドも利用できます。dataやmethodsの書き方も同じです。
レイアウトはflexboxをベースとしています。rowやcolと言うclassを使って表現できます。flexboxベースなので、上下中央寄せも簡単に実現できています。
いいなと思った点
スッキリしたデザイン
アイコンはFeatherを使っています。日頃Font Awesomeを使うことが多いのですが、Font Awesomeと比べて線が細く塗りがないのでスッキリしたデザインを実現できています。
アイコンだけでなく、inputエリアの枠線なども細く、全体を通してスッキリしたデザインとなっています。
色設定はPrimary、Success、Error、Warning、Infoが設定されています。上がelement uiのもの、下がAT UIのものです。よりハッキリした色味で設定されています。
バッジやタグなど細かいところまでコンポーネント化されてて嬉しい
サンプルでは「必須」の表記をat-tagで記載しています。アプリなどによくあるバッジもコンポーネントなのでとても使いやすいです。
Notification・Messageが簡単に設定できる
ボタンをクリックした後の表示についてNotificationやMessageが準備されています。onclickイベントで呼び出されるメソッド内でMessage本文、Notificationに表示するタイトル・メッセージを設定するだけで簡単に表現できます。
message()ではmessageコンポーネントを、notification()ではnotificationコンポーネントを呼び出します。タイプによって表示の色やアイコンが異なります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>AT-UI Example</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/at-ui-style/css/at.min.css">
<link rel="stylesheet" href="./style.css">
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/at-ui/dist/at.min.js"></script>
</head>
<body>
<div id="app">
<div class="l_form">
<h4 class="m_h4">Message</h4>
<div class="row at-row no-gutter flex-center">
<at-button type="success" @click="message('success')" size="large" class="ml_5">Success</at-button>
<at-button type="error" @click="message('error')" size="large" class="ml_5">Error</at-button>
<at-button type="warning" @click="message('warning')" size="large" class="ml_5">Warning</at-button>
<at-button type="info" @click="message('info')" size="large" class="ml_5">Info</at-button>
</div>
<h4 class="m_h4">Notification</h4>
<div class="row at-row no-gutter flex-center">
<at-button type="success" @click="notification('success')" size="large" class="ml_5">Success</at-button>
<at-button type="error" @click="notification('error')" size="large" class="ml_5">Error</at-button>
<at-button type="warning" @click="notification('warning')" size="large" class="ml_5">Warning</at-button>
<at-button type="info" @click="notification('info')" size="large" class="ml_5">Info</at-button>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
methods: {
message (type) {
if (type === 'info') {
this.$Message.info('infoボタンがクリックされたよ')
} else if (type === 'success') {
this.$Message.success('successボタンがクリックされたよ')
} else if (type === 'warning') {
this.$Message.warning('warning！！！！！！')
} else if (type === 'error') {
this.$Message.error('残念')
}
},
notification (type) {
this.$Notify({
title: 'Here is Title',
message: 'Here is Content~~~',
type: type
})
}
}
})
</script>
</body>
</html>
ここがイマイチかなと思った点
inputのバリデートが欲しい！
input typeのmailやtelが準備されていないので、全てinput textで記載しました。メールアドレスや電話番号のチェックはフレームワークでやって欲しいなぁ。
Datepickerはないのかな？？
日付入力で必要そうですが、公式ドキュメントには記載がなく…まだ作られていないのかもしれないです。
すまほ…
AT UIに限らずどのフレームワークもレスポンシブ対応は弱めなのでそこまで不満はないですが、できれば対応してもらえたら嬉しいです。
まとめ
Datepicker componentはどうしても欲しいし、element-uiと比較するとcomponent数で見劣りするかなとは思いますが、スッキリシンプルなデザインとソースコードで使いやすいと思います。
あまりにもコンポーネント化しすぎるとかえって修正面倒じゃね？と思っていましたが、単純にフロントを作る側だけ考えるとここまで詳細にコンポーネント化されていると全く考えずに手を動かすだけでOKということも学べました。反省。
基本的にフレームワークは管理系サイト構築に有効だと思うのですが、エンドユーザー向けにも自分でこういったコンポーネントを準備してプロジェクトを進められればなぁとも思いました。