2枚の画像を切り替えるチェックボックスをつくってみようさてさて、いかに開発を効率的にするかは第1に「いかに再利用できる部品を作っておくか」が大きく関わってきます。プログラマー(パソコン)の最大強みは「コピーができること」です。過去に作ったコードが再利用できるなら、(もちろん契約でしばられない限りですが)いつでもその作業をショートカットすることができるわけですね。Component」はまさにこの「再利用」に焦点をあてた機能で、一度作っておけば、いつでもHTMLタグのように使えます。そこで、今回のテーマは「2枚の画像を切り替えるチェックボックスをつくる」です。次のような切り替えです。いらすとやさんの画像を使わせていただいてます。^^ぜひプログラミング学習に役立ててくださいね。合わせて読みたいやりたいこと例えば、始めは次のような「バツマーク」の画像を表示しています。クリックされた場合は、OKの画像画像に切り替わります。一度クリックされたら、また元のバツマークに戻ります。falseのデータを持っていて、変更したらきちんと呼び出し側にもイベント通知します。通常のチェックボックスの画像切り替えバージョンですね。上の例なら「規約に同意する」部分に使うといいかもしれません。実際に開発をしていきましょう!Vueの基本形を作るまずはVueが使える環境を整えましょう。今回はcdnを使ってVue本体を読み込んでいます。Componentのv-image-checkboxタグを追加。acceptという名前の変数を作ってバインディングします。acceptにも伝わるという内容になっています。true-imageとfalse-imageは表示する2枚の画像へのURL(URI)です。そのため、この場合はimages/に2枚の画像をコピーしておいてください。実際にコンポーネントをつくっていきましょう。Componentをつくるできるだけ再利用しやすいように、コンポーネントは専用のファイルをつくって、そこへコードを書いていきます。v-image-checkbox.jsというファイルを作成してください。このファイルの中に次のようなコードを追加します。}});やっていることは次のとおりです。props<v-image-checkbox>タグに設定できるプロパティを定義しています。true-imageとfalse-imageは文字列で初期値は空白。valueは実際には指定していませんが、これはv-modelと連携することになっています。今回の例ではさっき指定したacceptの中身がここに入ってくることになります。そのため、初期値はfalseとしました。templatetemplate部分は実際に表示される場所になります。そのため、画像を<a>タグで囲んで@click.preventを使ってクリックイベントを追加しています。<img>タグの:srcにはimageUrlという変数には存在しないものを指定していますが、これはcomputedから呼び出せる擬似的な変数になっています。methodsonClick()は画像リンクがクリックされたときに実行されるメソッドです。この中身では、クリックするごとに変数"value"の値がtrueとfalseに切り替わります。(つまり、次のcomputedのimageUrlも自動的に切り替わります)computedここで設定したものは、擬似的な変数として利用することができるようになります。imageURL内でやっていることは、次のとおりです。URLで画像を表示するwatchここでは変数"value"の値が変化した場合に実行されるようにしています。実行する内容はイベントの通知です。falseが呼び出し元のacceptに伝わるわけです。テストしてみるではこのコンポーネントを読み込んで実際にテストしてみましょう。src="./js/v-image-checkbox.js"></script>ちなみに、よりtrueとfalseの切り替えが分かりやすいよう、次のようにコード少し足してみました。:disabled="!accept">送信する</button>つまり、acceptの中身がtrueならボタンはクリックできますが、falseならクリックはできないようdisabledを設定しています。実際に見ていきましょう。ページを表示した初期状態です。ボタンは無効になっています。続いて、画像をクリックしてみます。画像が自動的に切り替わり、ボタンも有効になりました。教材をダウンロードする今回開発したコード(コンポーネントを含む)教材を以下からダウンロードできます。再配布はできないので画像は変更してありますが、cdnを使ってvueを読み込んでいるのですぐ動作を確認することができます。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。