小幡 知弘 
みなさんこんにちは。現在、新しく「post-gallery.com」というサービスを制作中の小幡です。
このサービスは個展やグループ展のお知らせとして送るダイレクトメール（以下DM）を投稿してもらうと誰でも鑑賞できるようになるというものです。
今回は「post-gallery.com」の中で実際に使っている、javascriptの一部を紹介したいと思い記事にすることにしました。
と言っても、本当に基本的なことを組み合わせただけなのですが。
ピックアップするのは、「サービスの利用規約を確認・同意のチェックボックスをクリックしてから、送信ボタンが押せるようになるスクリプト」です。
よくあるサービスを使う時に、利用規約を読んだ、確認したという事をユーザーが示すためのチェックボックスがあり、それにチェックを入れると利用するボタンがアクティブになり押すことができるようになるやつです。
実際の使用例
以下のような赤枠の箇所で使います。
上の例では、チェックボックスにチェックが入っていないので「投稿する」のボタンが非アクティブになっていますので、クリックしても何も起こりません。
これにチェックを入れると、ボタンの非アクティブが解除され、「投稿する」がクリックできるようになる、という仕組みです。
余談ですが、私は工芸や美術の世界から遠ざかってしまい、DMは一枚も来なくなった寂しさから、このサービスを作ることにしました。
今ではFacebookやtwitterでの告知が主体となっている人も少なくないと思いますし、Web展覧会が行われたりして、そもそもDMを作らなくなった人もいるかと思いますが、DM文化は滅亡してはいないと思います。学生時代に見た素晴らしいDMが懐かしいです。あの感動をもう一度、という訳です。
利用規約とチェックボックス
さて、上の画像の例のとおり、このサービスにはDM投稿フォームがあります。
そしてサービスの利用規約がありますので、規約に同意した人がDMを投稿できる仕組みを考えたいと思います。
もちろんjavascriptで制御しているだけですので、少し詳しい人が扱えばチェックボックスにチェックしなくても「投稿する」ことは可能なのですが、一般の人はそういったことはできないと思います。
また利用規約に反したＤＭは、同意にチェックを入れていたとしても削除する予定なので、あくまでもユーザーがサービスを利用する場合は利用規約を読まなければならない事には変わりありません。
ということで、利用規約とチェックボックスを用意します。そしてチェックされたら押せるようになる送信ボタンを用意します。
HTMLでformを用意する
やりたいことのformを表現すると、以下の様なHTMLのコードになります。
ちなみにCSRF対策などは割愛していますので、実際にPOSTのフォームを作成する際はセキュリティ対策を施すことをお薦めします。
<form>
<div>
<input type="checkbox" id="checkTermsOfService">
<label class="form-check-label" for="checkTermsOfService">
<a href="" target="_blank">利用規約</a>に同意する<span class="fw-bold text-danger">※必須</span>
</label>
</div>
<div>
<button id="buttonSubmit" type="submit" disabled>投稿する</button>
</div>
</form>4行目がチェックボックスです。javascriptで使用するためにidを付与しています。
5行目がラベルです。forは指定したidと同じ動作をラベルに持たせることができます。
6行目がチェックボックスの右側にくるラベルの文字列です。「利用規約」はリンクされており、利用規約を新しいタブで表示し、読めるようにしています。また「※必須」はbootstrapのcssを使用して太字と赤文字を適用しています。
10行目がボタンです。javascript用にidを付与し、末尾のdisabledで非アクティブ状態（ボタンが押せない状態）にしています。
ちなみに、disabledのオプションはボタンだけでなくテキストボックスなど、他の部品にも適用可能です。
disabledをjavascriptで制御する
そして上のHTMLコードのdisabledをjavascriptで制御することにします。
const checkBox = document.getElementById('checkTermsOfService');
const buttonSubmit = document.getElementById('buttonSubmit');
// チェックボックスにチェックがあれば、非アクティブを削除 => 押せる
checkBox.addEventListener('change', function(){
if (checkBox.checked){
buttonSubmit.disabled = false;
} else {
buttonSubmit.disabled = true;
}
});1行目、2行目はhtmlで付与したidを取得し変数に入れています。再宣言、再代入をしないためvarではなくconst。
お馴染みのgetElementByIdを使用していますが、もちろんquerySelectorでも構いません。
5行目でチェックボックスにイベントリスナーを付与しています。第１引数のイベントはchangeを指定していますので、チェックがある、なしの状態が変化した時に、第２引数の無名関数が実行されます。
今回はfunctionと明示的に無名関数を使用していますが、以下のように省略することも可能です。気を付けたいのは、functionと明示的な仕様の時のthisはcheckBoxを指しますが、以下の省略形の場合はwindowを指すので全く同じという訳ではないようです。
checkBox.addEventListener('change', () => {});6行目ではif文の条件分岐をさせています。
条件式の checkBox.checkedは、チェックボックスがチェックされていればtrueになります。チェックされていなければfalseです。
ここまでの流れを整理してみると、イベントリスナーでチェックボックスに変化があれば、if文の処理へと進み、チェックが入っていればif文の中身を実行するという流れです。
そして7行目のbuttonSubmit.disabled = false;によって送信ボタンのdisabled（非アクティブ要素）がfalseになります。これは「非アクティブにしていた要素がfalseによって消される」というイメージです。
また8行目からのelse文によってチェックボックスにチェックが無い場合は、disabledをtrueにするという処理が行われています。
以上で、タイトルに書いた通りの「利用規約のチェックボックスをクリックしてから送信ボタンが押せるようになるスクリプト」が出来上がりました。
三項演算子を使用する
とりあえず上のコードでやりたいことはできました。
イベントリスナーの中身のif文の条件分岐は、とても単純なので三項演算子を使ってスマートに表現してみます。4行分のコードが1行になりますし、同じ記述を無くすことができます。
三項演算子は慣れていないと読みにくいかもしれませんが、これを読んだり書いたりできるだけで、コーディングの見え方がグッと変わってくると思います。
三項演算子を使用すると以下のコードになります。
const checkBox = document.getElementById('checkTermsOfService');
const buttonSubmit = document.getElementById('buttonSubmit');
// チェックボックスにチェックがあれば、非アクティブを削除 => 押せる
checkBox.addEventListener('change', function(){
buttonSubmit.disabled = (checkBox.checked ? false : true);
});この三項演算子の記述方法はPHPの記述と似ていますね。
丸括弧の中の１つめが条件式、？の次が条件式がtrueの場合に返す値、：の次がfalseの場合に返す値のイメージです。
ちなみにPythonの場合の三項演算子は以下です。
buttonSubmit.disabled = false if checkBox.checked else trueまとめ
以上で 「利用規約のチェックボックスをクリックしてから送信ボタンが押せるようになるスクリプト」 の説明は以上です。最後まで読んで頂きありがとうございました。
改めてコード作成の流れをまとめると
- HTMLでformを作成
- javascriptでdisabledを操作するスクリプトを作成
やろうとしていた事は単純なものだったので、短いコードで実現できました。
この記事があなたのお役に立てていれば幸いです。
また、未経験からエンジニア転職を応援するDiscordサーバも作りました。こちらでは私が「教える事で学ぶ」を実践する場として考えて居ますので、なんでも気になることを質問して頂ければ幸いです。以下にリンクを貼っておきますので、お気軽にご参加ください。
あなたのご参加をお待ちしております。
それではまた次回、お会いできることを楽しみにしております。ありがとうございました。