tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。VanillaJSそれぞれによる方法]以前の記事で「チェックボックスにチェックを入れたら、有効になるボタン」に関する内容をご紹介しました。上記の記事は、Vue.js2系統、Vuetify2系統についての内容でしたが今回は、その方法の「Vue.js3版」です。後半ではVue.jsに頼らず、素のJavaScriptで実現する方法もご紹介します。↑これら3つの方法について書いていきます。※また今回はボタンではなく「チェックボックスにチェックを入れたら、入力可能になるテキストフィールド」を題材に、それを作る方法について書いていきます。この記事を書いた際の環境は次のとおりです。参考までにご確認ください。)を使用することをお勧めします。[Vuetify3編]checkboxにcheckを入れたら入力可能になるテキストフィールドでは早速、「checkboxにcheckを入れたら入力可能になるテキストフィールド」の作り方、Vuetify3編です。このセクションは、Vuetify3のインストールが既に済んでいる前提です。Vuetify3の導入についてはこちらの記事をご覧ください。それではまずはhtml構造から書いていきます。class="pt-5">チェックを入れると入力可能です。結果的に「checkboxにcheckを入れたら入力可能になるテキストフィールド」が実現できるという事です。使用が推奨されています。続いてJavaScript部分です。}</script>↑とても簡潔です。関数内に用意しておくだけです。[Vue.js3編]checkboxにcheckを入れたら入力可能になるテキストフィールド上のセクションでは、Vuetify3を使った「checkboxにcheckを入れたら入力可能になるテキストフィールド」の作り方についてご紹介しました。同じことを実現する方法です。htmlから書いていきます。/></div>↑この様に、シンプルにcheckboxとテキストフィールドが並んでいるとします。紐づければ良かったわけですが、Vue.js3単体で実現する場合でも、大体似た様な仕組みで実現できます。異なるのは、「テキストフィールド側の属性の更新の仕方」です。2行目でcheckbox側にv-modelでデータを紐づけている部分は、Vuetifyの時と同じですね。3行目〜のテキストフィールド側は、disabled状態(入力できない状態)をデータ変数の変化によって更新させるため、Vuetifyの時とは少しだけ異なる記述となっています。よる分岐を書いています。次の結果を返してくれるので、これにより、Vuetify使用の場合と同じく「checkboxにcheckを入れたら入力可能になるテキストフィールド」が実現できる、というわけです。JavaScript側は、たとえば次の様に書きます。}</script>↑見てわかる通り、JavaScript側は、Vuetify使用時と同じ形で大丈夫ということですね。Vue.js3単体を使った「checkboxにcheckを入れたら入力可能になるテキストフィールド」の作り方についてご紹介しました。素のJavaScriptで同じことを実現する方法です。それではまずはhtmlから書いていきます。/></div>↑上のセクションと同様、この様にシンプルにcheckboxとテキストフィールドが並んでいるとします。(サンプルのため、styleは直書きしています。独自の要素はありません。これをどの様に制御すれば「checkboxにcheckを入れたら入力可能になるテキストフィールド」が実現できるでしょうか。一例ですが、次の様なアプローチをすることで、それを実現する事ができます。使ってcheckbox、テキストフィールド要素をそれぞれ取得して変数に格納しています。4〜10行目が、checkboxの変化を監視して、テキストフィールド要素の状態を更新している部分の記述になります。...(中略)として、changeイベントを監視します。状態をfalseにしたり、trueにしたり切り替えを行っている、というわけです。この様に、物にもよりますが、意外と簡潔な記述でVue.jsを使った場合と同じ様な結果を、素のJavaScriptでも実現する事が可能です。引き出しとして知っておけば、なにかと対応できる範囲が広がる、カバーできる範囲が広がるのでは、と感じているためです。↑これら3つの方法をご紹介しました。・素のJavaScriptによるアプローチ・Vue.jsによるアプローチ(なんらかのライブラリやフレームワークを用いた方法)その両方のアプローチ方法を知っておく事で、WebデザインにおけるUI制作のシーンにおいて、より深い理解を持った上でそれに臨む事ができると思います。この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。※この記事は内容の品質向上を目的に、随時更新を行う場合があります。