2018年10月23日Vueでフォーム・バインディングする全実例!(ダウンロード可)さてさて、もちろんクライアントさんのご希望もありますが、最近私のウェブ開発としてはサーバーサイドにLaravel、そしてクライアントサイドにはVue.js(jQueryも併用する場合あり)を使う形で固まってきた感があります。最近このブログでLaravelの記事を多く公開していますが、あまりVue.jsの記事も公開できていないことに気がついたため、今回は気持ちを初心に戻してVue.jsの基本中の基本、バインディングの実例をまとめることにしました。JavaScriptコードにはES6を使っています。合わせて読みたいVueのフォーム・バインディングとは??まずは、基本の基本。バインディングについての説明です。(もう知っている人は実例の項目まで読み飛ばしてください。逆に、Vue内の変数に変更がされたら、入力ボックスの内容が自動的に更新されるという具合に、二方向からの更新に行ってくれる便利機能です。以下のような入力ボックスとボタンの例を見てみましょう。この入力ボックスがtextという名前の変数とバインディング(ひも付け)されているとすると、と、このように入力ボックスの中身が変更になると同時に、Vueが管理しているtextの中身がカレーが大好物に更新されます。右にあるボタンをクリックするとtextの中身がハヤシライスもありだねに変更コードが実行されるとします。すると、入力ボックスにはtextとのバインディングがあるので、実際には入力をしてなくても、以下のように自動的に入力内容が更新されます。これがバインディングです。その昔は、いちいちイベントごとにデータの変更をしていましたが、VueやReact、angularなどはバインディングを使ってあらかじめルールを決めておくという発想になり、よりコード記述が少なくて済むようになりました。このバインディングを次の入力形式で見ていくことにしましょう。type=”radio”>)Vueでバインディングを使うには??Vueでフォーム・バインディングを使うには、v-modelという命令文を使います。テキストボックスの場合は以下のようになります。v-model="myText">そして、この場合myTextという名前のデータとバインディングするので以下のようにdata内にmyTextを設定しておく必要があります。}});これだけでバインディングの準備が完了します。このv-modelは、<input>であろうが<select>であろうが基本的に使い方は同じです。フォーム・バインディングの全実例テキストボックスまずは基本となるテキストボックスのバインディングです。});</script></body></html>コード内でやっていることは、テキストボックスにdataで設定されたtextBoxをバインディングし、ボタンがクリックされたらデータが書き換わるというものです。これを実行するとこうなります。ボタンをクリックすると、以下のように自動的に内容が書き換わります。ここで注意してほしいのが、「変数の中身」の部分です。冒頭でも説明したとおり、バインディングをしていると以下のように手動で入力ボックスを変更しても表示が変更になります。テキストエリアテキストエリアは、テキストボックスのバインディングとほぼ同じですが、改行されたデータを扱う部分が違っています。});</script></body></html>まず<textarea>〜</textarea>タグにtextAreaという名前のデータをバインディングし、ボタンのクリックイベントでchangeTextArea()を実行します。changeTextArea()内で変更するデータは\n、つまり改行コードが入っていることに注意してください。データ表示も<pre>〜</pre>タグを使って見た目が改行がされるようにしています。実際に表示をしてみるとこうなります。ボタンをクリックすると以下のように変更になります。テキストエリアの中身、さらに<pre></pre>タグ内で表示した中身は、改行された3行のテキストになっています。テキストエリアの中身を変更すると自動的にデータの中身も更新されます。セレクトボックスセレクトボックスのバインディングは、テキストボックスより少し複雑なコードになります。「赤」、つまり値は1なので、dataは以下のようになります。}},そして、<select>〜</select>にv-modelでselectBoxValueをバインディングします。なく、「1」「2」「3」のどれかとなりり、そのためchangeSelectBox()内での変更も「3」となっています)さらに、セレクトボックスの選択肢はv-forを使ってループさせています。}}</option>実行後は以下のようなHTMLになります。value="3">黄色</option>なお、今回の例でバインディングしているのはselectBoxValueなので中身を表示しても「1」「2」「3」など数値が表示されるだけです。いずれかを取得できるようにしています。}}こうすることで、以下のように記述すればここに色の情報を表示することができるわけです。}}では実際の表示がどうなるか見てみましょう。変数の中身として「赤」、そして初期値の「1」が表示されています。ボタンをクリックして変数の中身を「3」へ切り替えてみましょう。セレクトボックスも、変数の中身も変更になりました。セレクトボックスを手動で変更しても自動的に変数の内容が更新されます。チェックボックス(単体)単体のチェックボックスのバインディングはテキストボックスのようにシンプルに実装することができます。});</script></body></html>まず、v-modelでデータ変数のcheckBoxValueをバインディングし、ボタンをクリックしたらchangeCheckBox()を実行するようにしています。changeCheckBox()内ではボタンをクリックするごとにtrue/falseが切り替わるよう実装しています。}}で表示しています。初期値はfalseなのでチェックは入っていません。ボタンをクリックして値をtrueにしてみましょう。うまく切り替わりました。チェックボックス自体をクリックして変更しても変数の中身が更新されます。ちなみにVueでチェックボックスの値を変更したい場合は、以下のようにtrue-valueとfalse-valueを追加すればOKです。(この例の場合は、チェックされたら値がgoodに、チェックが外れたらbadになります)詳しくは、たった5秒!Vueのチェックボックスにvalueを設定する方法を参照してください。false-value="bad">チェックボックス(複数)複数回答ができるチェックボックスをバインディングする場合は以下のようにします。この選択肢をv-forを使ってチェックボックスを作成し、v-modelでcheckBoxValues(初期値は空の配列)をバインディングしています。)に変更するメソッドchangeCheckBoxes()を実行していて、さらにデータ表示は選択された教科の名前を取得するcheckBoxes()を使っています。実際に見てみましょう。初期値は何も指定していないので、チェックボックスも変数の中身も空になっています。ボタンをクリックして変数の中身を変更してみましょう。チェックされた内容が表示されました。チェックボックスを手動で変更しても自動で変数の中身が変わります。ラジオボタンラジオボタンのバインディングもセレクトボックスと似ていて少しだけ複雑になっています。});</script></body></html>まず、ラジオボタンの選択肢は以下の3つにしています。type="radio">を3つ用意し、v-modelで「1」「2」「3」の数値を管理するradioButtonValueをバインディングしています。そのため、changeRadioButton()の中でも変更するのは数値です。HTMLはこのようになります。value="3">クラシック</label>ちなみにここで大事なのがname="*****"の部分です。HTMLタグと同じくこの名前をそろえておかないと、別でつくったラジオボタンと同じグループになってしまうため、musicなどグループ名を指定をおきましょう。最後に変数の中身を表示する部分ですが、ここもセレクトボックスと同じく数値だけでなく、「ロック」「ポップ」「クラシック」も表示させるため、computed内に疑似変数を設定しています。実際に実行してみましょう。初期値は「1」なので、「ロック」が表示されています。ボタンをクリックしてみましょう。「3」のクラシックに切り替わりました。ラジオボタンを直接変更してもデータ変数は自動的に更新されます。Vueコンポーネントのバインディング例えば、以下のような時間を入力するVueコンポーネントv-timeで、時間と分がどちらも入力されたらバインディングを実行するにはどうすればいいかを見ていきます。コンポーネントを呼び出している側はこうなります。});</script></body></html>つまり、時と分2つの入力がそろったらその時間を表示する仕組みです。コンポーネントのコードを見てみましょう。}});やっていることは、時と分各入力ボックスに入力されたらonInput()が実行され、もし2つとも入力されていたら$emitでコンポーネントを呼び出した側に入力データを送信しています。inputイベントが実行されたらバインディングも実行されるので、以下のようにデータが更新されることになります。このテクニックを使えば、自分の好きなタイミングでイベントを起動することができるので、とてもフレキシブルなコンポーネントを作ることができるでしょう。v-modelのちょっと便利な機能lazyでバインディングのタイミングを遅らせる通常、Vueのバインディングはinputイベントで実行されるため、入力ボックスに文字が入力された時点でデータ変更されることになります。(日本語入力の場合は変換が終わった瞬間)これに対して、v-model.lazyはchangeイベント、つまり入力が終わって入力ボックスからフォーカスが外れた時点でデータ変更されることになります。以下のコードを使って違いを見てみましょう。});</script></body></html>以下のように通常バインディングの場合は、これまで見てきたとおり入力がされたらすぐにデータが反映されています。lazyを使った場合は入力しただけではデータ変更されることはありません。その後、入力ボックスからフォーカスが外れた瞬間に以下のようにデータが反映されることになります。通常<input>タグの入力で取得できるデータはString、つまり「文字列」型になります。時にはデータを数値として取得したい場合もあるでしょう。そんな場合はv-model.numberが便利です。以下のように通常バインディングと数値バインディングを実装したコードで比較してみましょう。});</script></body></html>やっていることは、入力されたらそのデータ型と中身を表示しているだけです。通常バインディングをみてみましょう。入力されたのは数値であるのに、取得されたデータは文字列、つまり"50"という判断になっています。type="number">なのに数値としては取得できていないという点です。v-model.numberを見てみましょう。今度はnumber型になりました。このように明示的に数値にする方法をしっておくと思わぬエラーを回避することができるでしょう。type="number">にはeという文字を入力できるということです。これは、1e+4(=10000)のような指数表記が存在するためですが、実はこれもクセ者で、以下のような入力にしてしまうと文字列型となってしまいます。(値はなくなります)そのため以下のようなデータ型のチェックをコード内に含めておく方が安全と言えるでしょう。入力された場合、xxxとなります。v-model.trim="trimText">なお、うれしいことに日本語の空白も除去してくれるので安心してください。開発者がIMEを使う言語の方というのがこの辺りにメリットとして出てくるのでしょうね。今回使ったファイルをダウンロード今回の説明で作成した全コードを以下からダウンロードすることができます。Vue.jsはcdnで利用しているので、ダウンロードしてブラウザで開くだけでコードを実行することができます。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。