AIはPython一択だけど、WebはJavascript一択です。
WebAssenblyで、RustやGo言語を使うこともできますが、結果的にはJavascript的に処理することになるので、JSはWebの登竜門と言ってもいいでしょう。
JSは単なるプログラミングじゃなく、
Ajaxなども含めたイベント処理、
View部分のHTMLタグなどのエレメント処理からユーザー操作処理、
HTTPを基準にしたネットワーク層における色々なお作法、
そして、ブラウザにおけるAPI操作・・・
などなどこれらをクリアしないとなかなか今時のWebシステム（ホームページからWebサービスまで）を構築するのが難しいでしょう。
そんな中、エレメント操作でのちょっとした書き方のコツを知っておくことで、結構手軽で便利に短くコードを書くことができるので、今日はその技の一部をご紹介。
1. エレメントを取得して、クラスをつける時の陥りやすいワナと回避策
ページ内の特定要素は、jQueryから昇格機能搭載された、"querySelector()"を使うことで簡単に行えます。
// ボタンclassを取得するサンプル
const elm = document.querySelector(".button")
elm.setAttribute("data-active", "true")
上記のサンプルは、class="button"の要素を取得して、data-activeをセットするだけの処理ですが、
この処理の場合、ページ内に.buttonというクラスが存在しない場合は、
思いっきりエラーが発生します。
JSはエラーが発生すると、それ以降の処理が停止してしまうため、絶対にエラーを出さないようにちゃんとプログラミングしなければいけません。
改善の書き方
document.querySelector(".button")?.setAttribute("data-active", "true")
1行で書いてますが、上記の2行と全く同じ処理をする上、エレメント（要素）が存在しない場合でも、エラーで処理が停止することはありません。
ポイント解説
document.querySelector(".button")?.setAttribute("data-active", "true")
"?" がポイントで、三項演算子のさらに短縮系だという風に理解しましょう。
?の左側に当たる、querySelector()区で取得した要素に、sertAttribute()区で、値をセットするというシンプルな構造ですが、
"?"があることで、エレメントがない場合は、その右側の処理をすっ飛ばしてくれるという安全安定運用ができる優れ処理です。
元のコードをif文を使ってお作法通りに書くとすると、以下のようになります。
const elm = document.querySelector(".button")
if(elm){
elm.setAttribute("data-active", "true")
}
これを１行でシンプルに書けるのは、なかなかのコードレベルですね。
逆にこの書き方を知らないと、他人が書いたこのコードを理解できずに困ってしまうかもしれません。
2. classList + 論理演算子で存在可否をスマートに処理
上記の別パターンとしての存在チェックを紹介します。
document.querySelector(".button") && document.querySelector(".button").classList.add("is-active")
「存在したら処理する」という条件を論理演算子で表現したサンプルです。
querySelector()がnullの場合、右側は評価されない
if文を書かずに済むため、UI制御コードが読みやすくなる
古いブラウザ互換を気にする場合にも使える書き方
if文で書くと以下と同じ意味になります。
const elm = document.querySelector(".button")
if(elm){
elm.classList.add("is-active")
}
短く書ける分、DOM操作が多い画面ほど効いてくる技です。
3. querySelectorAll × forEach で「無い前提」を捨てる
「要素が無いかもしれない」という発想自体を消す書き方もあります。
document.querySelectorAll(".button").forEach(elm => {
elm.setAttribute("data-active", "true")
})
querySelectorAll()は、存在しなくても空配列を返すので空配列の場合、forEachは何もせず終了することができます。
存在チェックが不要になるため、分岐ロジックが消えるんですね。
複数要素対応が最初からできるのもメリットです。
この書き方の発想ポイントは、「1個あるか？」ではなく「0〜n個ある」という点です。
エラーを防ぐのではなく、エラー構造を作らない、UI部品が増減する設計と相性が良いです。
要素の有無に関わらず、複数の要素の属性やプロパティを一括処理するときに使える技ですね。
あとがき
DOM操作は、Javascriptの基本、ページ内でトリッキーな表現をしたい時ほど、今回紹介した要素操作を駆使して質のいいコードを書く必要があります。
ちなみに、質の良いコードって何かというと、読みやすくて修正や機能追加がやりやすいコードのことですね。
質の良いコードを見ても理解できないなんてことがないように、今日もプログラミングに勤しみましょう！
0 件のコメント:
コメントを投稿