ブックマークレットで始める業務改善⑪ JavaScriptで要素を操作しよう

前回はこちら。

ここまで付いてこれたあなたはすごい！👏 ぜひ自分へのご褒美を買ってあげてください🍨

このシリーズはJavaScriptの入門にもなるように作ってあります。プログラミングの面白さを少しでも感じてもらえると嬉しいです。

ブックマークレットのプログラムの基本は、

1. Webページ上の操作したい要素（入力フォームなど）を捕まえて、

2. その要素に対してやりたいことをやる！

です。前回までで、1.に関連する様々なテクニックを学びました。今回は2.に関して、捕まえてきた要素を操作する方法を学びます。

今回もサンプルプログラムはこのフォームで動くように作ってあります。デベロッパーツールのコンソールで動かしてみてください。

既出の操作方法

value と innerText

どちらも、webページ上に表示されている文字列を調べたり、書き換えたりするのに使えます。

• value は、<input> などのvalue属性を持つ要素に対して使います。属性ですので、< >の中の話です

• innerText は、<div>～～</div>や<p>～～</p>などの、開始タグと終了タグで挟まれた文字列（~~の部分）に対して使います。したがって< >の外の話です

この二つは混乱しがちです。<input> や <textarea> では value、それ以外の< >の外の文字列は innerText と考えればおよそ大丈夫と思います。

/* valueを使って文字列を入力する。 */
document.querySelector("#min-amount").value = 10000;

/* valueを使って文字列を調べる。 */
const min_amount = document.querySelector("#min-amount").value;
alert("最小金額には" + min_amount + "と入力されています。");

/* innerTextを使って文字列を調べる。<a>～～</a>の～～の部分。 */
alert("ボタン名： " + document.querySelector("a.button").innerText);

/* innerTextを使って文字列を変える。 */
document.querySelector("a.button").innerText = "Search";
alert("ボタン名： " + document.querySelector("a.button").innerText);

checked

ラジオボタンやチェックボックスのチェックを入れたり外したりできます。"= true"とすればチェックが入りますし、"= false"とすればチェックが外れます。

チェックが入っているのか入っていないのかを判定することもできます。trueはイエス（真）、falseはノー（偽）を意味しており、そのままif文の条件に使うことができます。

下記のプログラムを、北海道にチェックを入れた状態と外した状態のそれぞれで動かしてみてください。

if (document.querySelector("#hokkaido").checked) {
    alert("北海道にチェックが入っています。");
} else {
    alert("北海道にチェックが入っていません。");
}

click( )

ボタンを押します。後でお話ししますが、click( ) よりも focus( ) を使った方が良いケースがあります。

document.querySelector("#submit-button").click();

新しい操作方法

style.display

要素を非表示にできます。使わない項目がたくさんあって邪魔なときなどに活用できます。

/* エリアを非表示にする。 */
const div_area = document.querySelector("#hokkaido").parentNode.parentNode;
div_area.style.display = "none";

/* エリアを再表示する。 ※ 表示が少し崩れます */
div_area.style.display = "";

なお、 style という単語が入っている通り、style.～～ で要素の見た目を変えることができます。例えば以下のプログラムは文字を大きくします。小さくて読みにくい・書きにくい部分を大きくしてあげれば親切ですね。

 document.querySelector("#min-amount").style.fontSize = "30px"

style の後に続けられるスタイルの種類（CSS）は種類がたくさんあります。調べてみてください。

focus( )

要素にフォーカスを当てる（選択状態にする）ことができます。例えば、更新ボタンを押す前に目視で確認したいとき、そのボタンにフォーカスを当てておけば、確認後にEnterキーですぐにボタンを押すことができます。

以下のサンプルプログラムは、コンソールで動かすと何が起きたか分かりにくいので、ブックマークレットにして動かしてみてください。動かした直後に、Enterキーを押すと、メッセージが表示されるはずです。

javascript:(function(){
    document.querySelector("#submit-button").focus();
})();

検索ボタンと違って、登録ボタンや更新ボタンはシステムのデータを書き換えてしまうため、より慎重に操作すべきです。ブックマークレットは対象システムのバージョンアップなどで思わぬ動きをする可能性があるため、登録ボタンや更新ボタンでは、基本的には click( ) ではなく focus( ) を使うことをお勧めします。

replace( ) と replaceAll( )

文字列の一部を、別の文字列で置き換えることができます。replace( ) の場合は、置換対象の文字列が何回も登場していたとしても、置き換えられるのは最初のひとつだけです。replaceAll( ) ならすべてを置き換えます。下のプログラムを一行ずつコンソールで動かしてみてください。

const str = 'Star Moon Star Sun Earth Star';
str.replace('Star', '★');
str.replaceAll('Star', '★');

Excelのリストをフォームにコピペすると、各項目の間にはスペースが入ります。システムによっては、スペースではなくカンマ（,）で区切らないとエラーになります。なんて意地悪なのでしょう😱

そんなときは replaceAll( ) の出番です！ 以下のようにすれば、空白をカンマに置き換えられます。
※ 便宜上、#min-amountの欄を使っています。空白で区切った数字や文字を書き込んだ上で、コンソールで動かしてみてください。

const str = document.querySelector("#min-amount").value;
document.querySelector("#min-amount").value = str.replaceAll(" ", ",");

※ replaceAll( ) は比較的新しい関数のため、古いブラウザーだと動かないかもしれません。その場合は replace( ) と「正規表現」を使います。必要に応じて調べてみてください。

今回のまとめ

このページには無い関数なども、もちろんたくさんあります。あなたがやりたいことに対して、このページの顔ぶれでは不十分なときは、使えそうな関数などが無いか調べてみましょう。GoogleやChatGPTなどが力になってくれます。

ここまででJavaScriptの基礎編は終わりとします。次回はまた練習問題をやりましょう💪

---

次回はこちらです。

このシリーズのすべての記事は、こちらのマガジンにまとめています。

ブックマークレットで始める業務改善｜シド・ブックマーカー｜note

🐶スキしていただけると励みになります！