必要なものはこれだけ！ Vuepack だけで簡易アプリを作ってみた
みなさん、Vue.js は使っていますか？
Web サイトに一部だけ取り入れることが可能だったり、学習コストが低かったりという点で、JavaScript フレームワークの中では比較的とっつきやすいものだと思います。
とは言いながらも、まだまだ試してみるのに及び腰、または「Vue で何をどこまで実装できるものなのかイメージが湧かない」という方もいらっしゃるかもしれません。
そこで今回は、「Vuepack」という、 Web サイトをご紹介し、実際に Vue のコンポーネントを使った簡単なアプリを作成してみたいと思います。
Vuepack とは
Vuepack とは、本サイトに載っている Vue コンポーネントの中から好きなコンポーネントを選択してダウンロードすると、それらをひとつの JavaScript ファイルにまとめてダウンロードできるというものです。
Vuepack に載っている Vue コンポーネントの一覧はサイトを見れば分かりますが、UI に関するものやフォームチェック、ドラッグアンドドロップなどいろいろなジャンルのコンポーネントを選択することができます。
今回はこの中で、「 vue 」「 vue-form 」「 vs-notify 」を使って、簡単なアプリを作成したいと思います。
※完成イメージ
Name と Email を登録する画面です。
「vue-form」によって、 Name は必須項目の入力チェックが、 Email には必須項目チェックとともに Email の形式チェックを行っています。
Name に文字列が入力されると、「Success!」と表示されます。
Name, Email ともに正しく入力し、「Submit」ボタンを押下します。
すると、入力した内容が下部に表示され、右上に登録完了の旨の通知が表示されます。
※通知の表示は「vs-notify」によって実現しています。
コンポーネントの選択〜実装
ではさっそくコンポーネントの選択から始めましょう！
vuepack.js のダウンロード
「vue」「vue-form」「vs-notify」の3つにチェックを入れます。
この状態で約97KB と、非常に軽量です。
「 Download 」ボタン押下で、 vuepack.js をダウンロードします。
vuepack.js の読み込み、諸々のコーディング
HTML 側で vuepack.js と、下でご紹介する index.js を読み込んで、入力チェックのメッセージの色を CSS で設定するだけで完成です。
まずは、index.html です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuepackを使った簡易アプリ</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="app">
<h2 class="message">{{ message }}</h2>
<vue-form :state="formstate" @submit.prevent="onSubmit">
<validate tag="label">
<span>Name *</span>
<input v-model="model.name" required name="name" />
<field-messages name="name">
<div class="fine">Success!</div>
<div class="warning" slot="required">Name is a required field</div>
</field-messages>
</validate>
<validate tag="label">
<span>Email</span>
<input v-model="model.email" name="email" type="email" required />
<field-messages name="email">
<div class="warning" slot="required">Email is a required field</div>
<div class="warning" slot="email">Email is not valid</div>
</field-messages>
</validate>
<button type="submit">Submit</button>
</vue-form>
<pre>{{ registered }}</pre>
<vs-notify group="alert"></vs-notify>
</div>
<script src="script/vuepack.js"></script>
<script src="script/index.js"></script>
</body>
</html>
ベースはほぼ vue-form のサンプルを使用しているので何も難しいことはしていません。
また、Vue 本体は vuepack.js に含まれているので、CDN で別途読み込む必要はありません。
続いて以下が index.js です。
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vuepack!',
formstate: {},
registered: [],
model: {
name: '',
email: 'invalid-email'
}
},
methods: {
onSubmit: function () {
if(this.formstate.$invalid) {
return;
}else{
app.$data.registered.push({"name": app.$data.model.name, "email": app.$data.model.email});
app.$data.model.name = '';
app.$data.model.email = 'invalid-email';
this.$notify("alert", "registered！");
return;
}
}
}
})
「入力チェック」と「通知」をするにもかかわらず記述量がとても少ないです。「vue-form」と「vs-notify」の恩恵を強く受けています。
また、Vue 本体と同様、各コンポーネントは全て vuepack.js に含まれているので、import したりだとか Vue.use したりなど各コンポーネントを使うための設定をする必要がありません。
これで完成です！
Vuepack を使ってみて
いかがでしたでしょうか？
vue, vue-form, vs-notify 入りの vuepack.js を使って、簡単なアプリを作成してみました。
使ってみて便利だと思ったのが、やはりコンポーネントが全て vuepack.js に固められているので、改めて import や Vue.use などをする必要がないことです。
素早くモックを作成するといった用途にはぴったりなのではないでしょうか？
また、Vue のコンポーネントがこれだけ出てきているということを Vuepack を通して発見することができ、Vue.js コミュニティが拡大していっていることを感じました。
とても簡単なので、みなさんも試してみてはいかがでしょうか？
記事を検索
-
お問い合わせ
SiTest の導入検討や
他社ツールとの違い・比較について
弊社のプロフェッショナルが
喜んでサポートいたします。 -
コンサルティング
ヒートマップの活用、ABテストの実施や
フォームの改善でお困りの方は、
弊社のプロフェッショナルが
コンサルティングいたします。
今すぐお気軽にご相談ください。
今すぐお気軽に
ご相談ください。
（平日 10:00~19:00）
今すぐお気軽に
ご相談ください。
0120-315-465
（平日 10:00~19:00）
グラッドキューブは
「ISMS認証」を取得しています。
認証範囲：
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業
「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。