- 更新日: 2022年05月31日
- 公開日: 2020年11月21日
【初心者向け】Vue.jsを使ってみよう〜入力フォーム編〜
「バリデーション機能がある入力フォームを簡単に作りたい」
「Vue.jsを使いたいけど、難しそう」
こんな風に感じているプログラミング初心者もいるのではないでしょうか。そこで今回はVue.jsを使って、簡単にバリデーション機能を持った入力フォームの作成方法を解説していきます。
環境構築やコードについて詳しく解説していきますので、ぜひ参考にしてみてください。
完成形を確認しよう
Vueを使ってバリデーション機能がついた入力フォームを作成していきます。まずは下図を見て完成のイメージを確認しましょう。
『バリデーション』とは、フォームの入力値があらかじめ設定していた条件に合っているかチェックすることです。
この記事に沿って進めていくことで、バリデーション機能がある入力フォームが完成するので、最後まで頑張りましょう！
Vue.jsの開発環境を準備しよう
それでは実際にVue.jsを使うための開発環境を準備していきます。
必要なフォルダを作成しよう
まずは『VueForm』という名前のフォルダを作成してください。作成する場所はPCのデスクトップなど好きな場所で構いません。
次にエディタで作成したフォルダを開いてみましょう。今回はVisual Studio Code（以下VScode）を使用します。
もしVscodeのインストールがまだの方は公式サイトからインストールしてください。Vscodeでフォルダを開けたら、index.htmlとscript.jsフォルダを作成します。
作成できたらindex.htmlファイルを開き、下記コードを貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VueForm</title>
</head>
<body>
<h1>Hello!!</h1>
<div id="app"></div>
</body>
</html>
vscodeのindex.htmlファイルをブラウザにドラッグ&ドロップすると、「Hello!!」と書かれたWebページを表示できます。もし上記方法でできない場合は、index.htmlファイルをダブルクリックすることで同じように表示可能です。
動作確認ができたら下記コードは今後不要になるので削除しておいてください。
<h1>Hello!!</h1>
Vue Devtoolsを導入しよう
次にVue Devtools（以下Devtools）を導入していきます。DevtoolsはVueで開発する際に非常に便利なツールで、デバッグ（エラーを修正すること）や動作確認が可能です。
下記の記事で導入方法を紹介していますので、ぜひ参考にしてみてください。
HTMLで雛形を作ろう
それではここから実際にコードを書いて、入力フォームを作成していきます。まずはindex.htmlファイルを開いて下記コードを貼り付けてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VueForm</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>v-modelの練習</h2>
<div id="app">
<!-- 名前フォーム -->
<div class="form-name">
<p>名前</p>
<input type="text" name="name" placeholder="名前を入力してください" v-model="name">
</div>
<!-- 電話番号フォーム -->
<div class="form-phone">
<p>電話番号</p>
<input type="text" name="phone" placeholder="電話番号を入力してください" v-model="phone">
</div>
<!-- Eメールアドレス -->
<div class="form-email">
<p>Eメール</p>
<input type="text" name="email" placeholder="Emailを入力してください" v-model="email">
</div>
</div>
<div>
<button disabled>送信する</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="script/script.js"></script>
</body>
</html>
コードを貼り付けられたら、画面を確認してみましょう。index.htmlのファイルをブラウザにドラッグ＆ドロップすれば確認できます。
CSSでデザインを整えよう
続いて先程作成した入力フォームのデザインをcssで整えます。style.cssのファイルを開き、下記コードを貼り付けてください。
.container{
text-align:center;
}
#app{
text-align:center;
}
.form-name,.form-phone,.form-email{
width:80%;
margin:0 auto;
padding:15px 0;
margin-bottom:30px;
background-color:whitesmoke;
}
input{
padding:5px 10px;
min-width:250px;
}
.error-name,.error-phone,.error-email{
color:red;
font-weight:bold;
text-align:center;
}
button{
width:80%;
background-color: teal;
color:white;
padding:20px 0;
border:none;
border-radius:10px;
cursor:pointer;
margin-bottom: 50px;
}
ここまでで下図のようなフォームが完成します。
HTMLでエラーメッセージを表示を追加しよう
HTMLとCSSでフォームの雛形が完成しました。この状態ではまだエラーメッセージの部分がないので、index.htmlに追記します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VueForm</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>v-modelの練習</h2>
<div id="app">
<!-- 名前フォーム -->
<div class="form-name">
<p>名前</p>
<!-- エラーメッセージを追加 -->
<p class="error-name">5文字以上で入力してください</p>
<input type="text" name="name" placeholder="名前を入力してください" v-model="name">
</div>
<!-- 電話番号フォーム -->
<div class="form-phone">
<p>電話番号</p>
<!-- エラーメッセージを追加 -->
<p class="error-phone">8文字以上で入力してください</p>
<input type="text" name="phone" placeholder="電話番号を入力してください" v-model="phone">
</div>
<!-- Eメールアドレス -->
<div class="form-email">
<p>Eメール</p>
<!-- エラーメッセージを追加 -->
<p class="error-email">メールアドレスの形式で入力してください</p>
<input type="text" name="email" placeholder="Emailを入力してください" v-model="email">
</div>
</div>
<div>
<button disabled>送信する</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="script/script.js"></script>
</body>
</html>
タグ部分を追加すると、赤色のエラーメッセージが表示されるようになりました。ただこの状態では入力値に限らず、メッセージが表示されるので次の項目で修正します。
Vueでバリデーション機能を追加しよう
この項目ではフォームの入力値によってエラーメッセージを表示できるように、Vueのコードを書いていきます。
それではscript.jsファイル内に下記コードを貼り付けてみましょう。
new Vue({
el: '#app',
data() {
return {
name: '',
phone: '',
email: ''
}
},
computed: {
isInValidName() {
return this.name.length < 5
},
isInValidPhone() {
return this.phone.length < 8
},
isInValidEmail() {
const regex = new RegExp(/^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i)
return !regex.test(this.email);
}
},
})
これでフォームにバリデーション機能が追加されているはずです。試しに名前のフォームに5文字以上入力してみましょう。
５文字以下の場合
下画像のように赤いエラーメッセージが消えれば成功です。
5文字以上の場合
elプロパティの中身を見てみよう
Vueには役割の異なる『プロパティ』が存在します。その中でも重要なのが、『elプロパティ』です。
elプロパティはVueの効果をどのHTMLの要素に反映させるか指定することが可能です。今回はHTMLのidがappという要素にVueの効果を適用しています。
仮にVueのコードを書いたはいいけど、効果が反映されない場合は、elプロパティでHTMLの要素と紐付けができているか確認するのが良いでしょう。
dataプロパティの中身を見てみよう
『dataプロパティ』について見ていきましょう。
dataプロパティはVueで扱うデータを入れておく場所で、HTMLファイルから読み込んで画面に表示させることが可能です。
またdataプロパティ内で定義した値が変わると、画面にすぐに反映されるようになっています。
下記コードでは名前、電話番号、Eメールの初期値を設定しています。初期値は「””」の部分となっており、今回は空欄にしておきました。
例えば名前の初期値を設定したい時は、name:’テスト’のように好きな文字を入れてあげればOKです。
data() {
return {
name: '',
phone: '',
email: ''
}
},
computedプロパティの中身を見てみよう
次にcomputedプロパティに関して見ていきましょう。computedは『算出プロパティ』と呼ばれ、関数を定義できる場所です。
例えば下記コードの「isInValidName」という関数は、名前の入力値が5文字以下であるか見分ける役割になっています。この関数をHTML側で書くことで使用可能です。
computed: {
isInValidName() {
return this.name.length < 5
},
同様に「isinValidPhone」も電話番号の入力値が8文字以下であるか見分ける関数です。
最後にEmailの「isInValidEmail」関数では、『正規表現（せいきひょうげん）』を使って、メールアドレスの形式でない入力値を判別できるようになっています。
また関数は『キャメルケース』で書くのが基本です。キャメルケースとはPHPやJavascriptで使われていて、単語の先頭を大文字にするという書き方を指します。
＼Webサイト担当者としてのスキルが身に付く／
まとめ
ここまでVue.jsを使って入力フォームを作成してきました。jQueryで入力フォームを作成した経験がある方は、Vueの方が簡単に感じたのではないでしょうか？
このようにVue.jsを使ったことがない方でも、短期間で習得できるようになっているので、ぜひ積極的に使用してみてくださいね！
- この記事を書いた人
- ヤマモト
