ブックマークレットで始める業務改善⑨ CSSセレクターの練習問題

前回はこちら。

前回学習したCSSセレクターを使って、練習問題を解いてみましょう。なるべく簡潔で分かりやすいプログラムになるように工夫してみてください。

CSSセレクターの練習問題

問題①

以下の検索フォームで、以下のようにチェックを入れるブックマークレットを作ってください。

• ステータスは、3つのすべてにチェックを入れる。

• 都道府県は、近畿の6府県（滋賀、京都、大阪、兵庫、奈良、和歌山）にチェックを入れる。

受注データ検索2

解答は椅子の下です。

解答例：

javascript:(function(){
    document.querySelectorAll(".status-input input, [id^='kinki-']").forEach(function(e) {
    	e.checked = true;
    });
})();

問題②

問題①と同じ検索フォームで、以下のようにチェックを入れるブックマークレットを作ってください。

• ステータスは、3つのすべてにチェックを入れる。

• 都道府県は、近畿の6府県以外の全都道府県（つまり41都道県）にチェックを入れる。

解答は机の下です。

解答例：

javascript:(function(){
    document.querySelectorAll("input").forEach(function(e) {
    	e.checked = true;
    });
    document.querySelectorAll("[id^='kinki-']").forEach(function(e) {
    	e.checked = false;
    });
})();

よいプログラミングを目指して

問題①も問題②も、他にも同じ結果を出せる書き方があります。ブックマークレットを作るときは、

• 意図通りの動きをすること

はもちろんのこと、

1. 簡潔で、分かりやすいこと

2. 対象システムの変化にある程度耐えられること（少しくらいHTMLの構造が変わってもそのまま使い続けられること）

も意識しましょう。特に1. は大事です。1か月後に読み直したとき「これは何をやっていたんだっけ？」となってしまうことは良くあります。

---

次回はこちらです。

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

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

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