読み込み中...

JavaScriptのpropメソッドを使ってHTML要素のプロパティを操作する

JavaScriptのpropメソッドを使ってHTML要素のプロパティを操作する JS
この記事は約20分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●propメソッドとは？

jQueryは使ったことがあるけれど、素のJavaScriptはちょっと苦手意識があるという方も多いのではないでしょうか。

でも、大丈夫です。

今日は、そんな初心者の方でも分かりやすく、JavaScriptのpropメソッドについて解説していきます。

propメソッドは、HTML要素のプロパティを取得したり設定したりするのに使用されるJavaScriptのメソッドです。

Webアプリケーション開発の効率化を目指す上で、propメソッドを使いこなすことは非常に重要だと考えています。

○propメソッドの基本的な使い方

では早速、propメソッドの基本的な使い方について見ていきましょう。

propメソッドは、jQueryのメソッドとして提供されています。ただ、そうするとjQueryに依存してしまいますよね。

素のJavaScriptでpropメソッドを使うには、少しわかりにくい部分もあると思うので、丁寧に説明していきます。

propメソッドは、HTML要素のプロパティを取得する場合と設定する場合で、使い方が少し異なります。

プロパティを取得する場合は、引数にプロパティ名を指定するだけでOKです。

一方、プロパティを設定する場合は、第1引数にプロパティ名、第2引数に設定する値を指定します。

○propメソッドとattrメソッドの違い

ところで、皆さんは「propメソッドとattrメソッドの違いって何だろう？」と思ったことはありませんか？

経験則では、この2つのメソッドの違いを理解することが、JavaScriptのDOM操作をマスターする上で重要でしたね。

結構ややこしいですが、attrメソッドはHTML要素の属性を取得・設定するのに対し、propメソッドはJavaScriptのプロパティを取得・設定するという違いがあります。

属性とプロパティって、言葉は似ていますが、厳密には異なるものなんです。

例えば、チェックボックスの場合、checked属性はHTML上の属性ですが、checkedプロパティはJavaScriptから参照・変更できる状態を表します。

そのため、propメソッドを使ってcheckedプロパティを操作することで、チェックボックスの状態を動的に変更できるわけです。

○サンプルコード1：propメソッドで要素のプロパティを取得する

それでは実際に、propメソッドを使ってHTML要素のプロパティを取得するサンプルコードを見てみましょう。

// id属性が "my-checkbox" のチェックボックス要素を取得
const checkbox = document.getElementById("my-checkbox");

// チェックボックスのcheckedプロパティを取得
const isChecked = $(checkbox).prop("checked");

console.log(isChecked);

このコードでは、まずdocument.getElementByIdメソッドを使って、id属性が “my-checkbox” のチェックボックス要素を取得しています。

次に、そのチェックボックス要素に対してpropメソッドを呼び出し、引数に “checked” を指定することで、checkedプロパティの値を取得しています。

実行結果は、次のようになります。

true

もしチェックボックスがチェックされていれば、isCheckedにはtrueが格納され、チェックされていなければfalseが格納されます。

このように、propメソッドを使うことで、HTML要素のプロパティを簡単に取得できるのです。

●チェックボックスの状態を操作する

さて、先ほどはpropメソッドの基本的な使い方について解説しましたが、実際のWebアプリケーション開発では、もう少し複雑な操作が必要になることもありますよね。

そこで今度は、propメソッドを使ってチェックボックスの状態を操作する方法について、具体的なサンプルコードを交えながら説明していきます。

チェックボックスは、フォームの入力要素の中でも非常によく使われるものの1つです。

ユーザーがチェックボックスをクリックすることで、特定の選択肢を有効または無効にできるため、インタラクティブなUIを実現する上で欠かせない要素だと考えています。

○サンプルコード2：チェックボックスの状態を取得する

まずは、propメソッドを使ってチェックボックスの状態を取得するサンプルコードを見てみましょう。

// id属性が "my-checkbox" のチェックボックス要素を取得
const checkbox = document.getElementById("my-checkbox");

// チェックボックスのcheckedプロパティを取得
const isChecked = $(checkbox).prop("checked");

if (isChecked) {
  console.log("チェックボックスはチェックされています");
} else {
  console.log("チェックボックスはチェックされていません");
}

このコードでは、id属性が “my-checkbox” のチェックボックス要素を取得した後、propメソッドを使ってcheckedプロパティの値を取得しています。

そして、isCheckedの値に応じて、適切なメッセージをコンソールに出力しています。

実行結果は、次のようになります。

チェックボックスはチェックされています

もしチェックボックスがチェックされていない場合は、次のようなメッセージが出力されます。

チェックボックスはチェックされていません

この例だと、チェックボックスの状態に応じて、適切な処理を行うことができますね。

例えば、チェックボックスがチェックされている場合は、関連するフォームの入力欄を有効にし、チェックされていない場合は無効にするといった処理が考えられます。

○サンプルコード3：チェックボックスの状態を設定する

続いて、propメソッドを使ってチェックボックスの状態を設定するサンプルコードを見てみましょう。

// id属性が "my-checkbox" のチェックボックス要素を取得
const checkbox = document.getElementById("my-checkbox");

// チェックボックスのcheckedプロパティを設定
$(checkbox).prop("checked", true);

このコードでは、id属性が “my-checkbox” のチェックボックス要素を取得した後、propメソッドを使ってcheckedプロパティの値をtrueに設定しています。

これにより、チェックボックスがチェックされた状態になります。

逆に、checkedプロパティの値をfalseに設定すれば、チェックボックスのチェックが外れた状態になります。

// チェックボックスのcheckedプロパティを設定
$(checkbox).prop("checked", false);

このように、propメソッドを使えば、チェックボックスの状態を動的に設定できるのです。

これは、ユーザーの操作に応じてチェックボックスの状態を変更したい場合などに、非常に便利な機能だと思います。

○サンプルコード4：複数のチェックボックスの状態を一括で設定する

最後に、propメソッドを使って複数のチェックボックスの状態を一括で設定するサンプルコードを見てみましょう。

// name属性が "my-checkboxes" のチェックボックス要素を全て取得
const checkboxes = document.getElementsByName("my-checkboxes");

// 全てのチェックボックスのcheckedプロパティを設定
$(checkboxes).prop("checked", true);

このコードでは、name属性が “my-checkboxes” のチェックボックス要素を全て取得した後、propメソッドを使って、それらのcheckedプロパティの値を一括でtrueに設定しています。

これで、対象のチェックボックスが全てチェックされた状態になります。

逆に、checkedプロパティの値をfalseに設定すれば、全てのチェックボックスのチェックが外れた状態になります。

// 全てのチェックボックスのcheckedプロパティを設定
$(checkboxes).prop("checked", false);

このように、propメソッドを使えば、複数のチェックボックスの状態を一括で設定できるのです。

これは、フォームのリセットボタンを実装する際などに、非常に便利な機能だと考えています。

●disabled属性を操作する

さて、先ほどはチェックボックスの状態を操作する方法について解説しましたが、実際のWebアプリケーション開発では、チェックボックス以外の要素の状態を操作することも重要ですよね。

そこで今度は、propメソッドを使ってdisabled属性を操作する方法について、具体的なサンプルコードを交えながら説明していきます。

disabled属性は、フォームの入力要素を無効化するために使用されます。

例えば、ユーザーが特定の条件を満たしていない場合に、送信ボタンを無効化したいといったシーンで活躍します。

こうした動的なUIの実現には、JavaScriptとpropメソッドが欠かせないと考えています。

○サンプルコード5：disabled属性の状態を取得する

まずは、propメソッドを使ってdisabled属性の状態を取得するサンプルコードを見てみましょう。

// id属性が "my-button" のボタン要素を取得
const button = document.getElementById("my-button");

// ボタンのdisabled属性の状態を取得
const isDisabled = $(button).prop("disabled");

if (isDisabled) {
  console.log("ボタンは無効化されています");
} else {
  console.log("ボタンは有効です");
}

このコードでは、id属性が “my-button” のボタン要素を取得した後、propメソッドを使ってdisabled属性の状態を取得しています。

そして、isDisabledの値に応じて、適切なメッセージをコンソールに出力しています。

実行結果は、次のようになります。

ボタンは無効化されています

もしボタンが有効な状態であれば、次のようなメッセージが出力されます。

ボタンは有効です

この例だと、ボタンの状態に応じて、適切な処理を行うことができますね。

例えば、ボタンが無効化されている場合は、ユーザーにその理由を説明するメッセージを表示するといった処理が考えられます。

○サンプルコード6：disabled属性の状態を設定する

続いて、propメソッドを使ってdisabled属性の状態を設定するサンプルコードを見てみましょう。

// id属性が "my-button" のボタン要素を取得
const button = document.getElementById("my-button");

// ボタンのdisabled属性を設定
$(button).prop("disabled", true);

このコードでは、id属性が “my-button” のボタン要素を取得した後、propメソッドを使ってdisabled属性の状態をtrueに設定しています。

これにより、ボタンが無効化された状態になります。

逆に、disabled属性の状態をfalseに設定すれば、ボタンが有効な状態になります。

// ボタンのdisabled属性を設定
$(button).prop("disabled", false);

このように、propメソッドを使えば、ボタンの状態を動的に切り替えられるのです。

これは、フォームの入力内容に応じてボタンの状態を変更したい場合などに、非常に便利な機能だと思います。

○サンプルコード7：複数の要素のdisabled属性を一括で設定する

最後に、propメソッドを使って複数の要素のdisabled属性を一括で設定するサンプルコードを見てみましょう。

// class属性が "my-input" の入力要素を全て取得
const inputs = document.getElementsByClassName("my-input");

// 全ての入力要素のdisabled属性を設定
$(inputs).prop("disabled", true);

このコードでは、class属性が “my-input” の入力要素を全て取得した後、propメソッドを使って、それらのdisabled属性の状態を一括でtrueに設定しています。

これで、対象の入力要素が全て無効化された状態になります。

逆に、disabled属性の状態をfalseに設定すれば、全ての入力要素が有効な状態になります。

// 全ての入力要素のdisabled属性を設定
$(inputs).prop("disabled", false);

このように、propメソッドを使えば、複数の要素の状態を一括で切り替えられるのです。

これは、フォームのロック機能を実装する際などに、非常に便利な機能だと考えています。

●よくあるエラーと対処法

さて、ここまでpropメソッドの基本的な使い方やチェックボックスやdisabled属性の操作方法について解説してきましたが、実際にコーディングしていると、思わぬエラーに遭遇することがありますよね。

せっかくpropメソッドを使いこなせるようになっても、エラーが発生してしまっては元も子もありません。

そこで、ここからはpropメソッドを使っていて遭遇しがちなエラーとその対処法について、具体的なサンプルコードを交えながら説明していきます。

エラーに立ち向かう勇気と知識を身につけることで、より高品質なWebアプリケーションを開発できるようになるはずです。

○prop()メソッドが効かない場合の対処法

まずは、prop()メソッドが効かない場合の対処法について見ていきましょう。

prop()メソッドを使っているのに、期待した結果が得られないという経験は、誰しもあるのではないでしょうか。

例えば、次のようなコードを書いたのに、チェックボックスの状態が変わらないという状況に遭遇したとします。

// id属性が "my-checkbox" のチェックボックス要素を取得
const checkbox = document.getElementById("my-checkbox");

// チェックボックスのcheckedプロパティを設定
$(checkbox).prop("checked", true);

こんな時は、次のような点を確認してみてください。

  1. 要素が正しく取得できているか
  2. プロパティ名が正しいか
  3. jQueryが正しく読み込まれているか

特に、要素の取得ミスはよくある原因の1つです。

id属性やclass属性を間違えていないか、再度確認してみましょう。

また、jQueryを使っている場合は、jQueryライブラリが正しく読み込まれているかどうかも重要なポイントです。

これらの点を確認して、問題があれば修正することで、多くの場合はprop()メソッドが効かない問題を解決できるはずです。

○disabled属性の切り替えが効かない場合の対処法

次に、disabled属性の切り替えが効かない場合の対処法を見ていきましょう。

次のようなコードを書いたのに、ボタンの状態が変わらないという状況に遭遇したとします。

// id属性が "my-button" のボタン要素を取得
const button = document.getElementById("my-button");

// ボタンのdisabled属性を設定
$(button).prop("disabled", false);

こんな時は、次のような点を確認してみてください。

  1. 要素が正しく取得できているか
  2. disabled属性が正しく設定されているか
  3. CSSでpointer-eventsプロパティが設定されていないか

特に、CSSのpointer-eventsプロパティが設定されている場合、JavaScriptでdisabled属性を操作しても、見た目上の変化がないことがあります。

この場合は、CSSの設定を見直す必要があります。

これらの点を確認して、問題があれば修正することで、多くの場合はdisabled属性の切り替えが効かない問題を解決できるはずです。

○checked属性の判定が正しく行われない場合の対処法

最後に、checked属性の判定が正しく行われない場合の対処法を見ていきましょう。

次のようなコードを書いたのに、期待した結果が得られないという状況に遭遇したとします。

// id属性が "my-checkbox" のチェックボックス要素を取得
const checkbox = document.getElementById("my-checkbox");

// チェックボックスのcheckedプロパティを取得
const isChecked = $(checkbox).prop("checked");

if (isChecked === true) {
  console.log("チェックボックスはチェックされています");
} else {
  console.log("チェックボックスはチェックされていません");
}

こんな時は、次のような点を確認してみてください。

  1. 比較演算子が正しいか
  2. チェックボックスの初期状態が想定通りか

特に、比較演算子の使い方には注意が必要です。

上記の例では、厳密等価演算子（===）を使っていますが、状況によっては等価演算子（==）を使った方がよいこともあります。

また、チェックボックスの初期状態が想定通りでない場合、正しい判定結果が得られないこともあります。

HTMLでchecked属性を設定していないのに、JavaScriptでcheckedプロパティがtrueになっているといった状況です。

●propメソッドの応用例

さて、ここまでpropメソッドの基本的な使い方から、チェックボックスやdisabled属性の操作、よくあるエラーの対処法まで幅広く解説してきましたが、皆さんはもう自信を持ってpropメソッドを使いこなせるようになったのではないでしょうか。

でも、propメソッドの活用方法はこれだけではありません。

より実践的なWebアプリケーション開発では、propメソッドをさらに応用することで、より効率的で使いやすいUIを実現できます。

そこで、ここからはpropメソッドのさらなる応用例について、具体的なサンプルコードを交えながら解説していきます。

実際のプロジェクトでも活かせるテクニックを身につけることで、JavaScriptのDOM操作に自信を持てるようになるはずです。

○サンプルコード8：選択された<option>要素の値を取得する

まずは、<select>要素で選択された<option>要素の値を取得する方法を見ていきましょう。

これは、フォームの入力値を処理する際などに非常に役立つテクニックです。

// id属性が "my-select" の<select>要素を取得
const select = document.getElementById("my-select");

// 選択された<option>要素の値を取得
const selectedValue = $(select).val();

console.log(selectedValue);

このコードでは、id属性が “my-select” の<select>要素を取得した後、jQueryのval()メソッドを使って、選択された要素の値を取得しています。

実行結果は、次のようになります。

ユーザーが選択した値

このように、val()メソッドを使えば、選択された要素の値を簡単に取得できるのです。

ただし、val()メソッドはjQueryの機能なので、素のJavaScriptでは別の方法を使う必要があります。

○サンプルコード9：読み取り専用の<input>要素を作成する

次に、読み取り専用の<input>要素を作成する方法を見ていきましょう。

これは、ユーザーに入力させたくない値を表示する際などに便利なテクニックです。

// id属性が "my-input" の<input>要素を取得
const input = document.getElementById("my-input");

// <input>要素を読み取り専用にする
$(input).prop("readonly", true);

このコードでは、id属性が “my-input” の<input>要素を取得した後、propメソッドを使って、readonlyプロパティをtrueに設定しています。

これにより、<input>要素が読み取り専用になります。

逆に、readonlyプロパティをfalseに設定すれば、<input>要素を編集可能な状態に戻すこともできます。

// <input>要素を編集可能にする
$(input).prop("readonly", false);

このように、propメソッドを使えば、<input>要素の読み取り専用状態を動的に切り替えられるのです。

これは、ユーザーの操作に応じて入力欄の状態を変更したい場合などに、非常に便利な機能だと思います。

○サンプルコード10：要素のクラスを動的に設定する

続いて、要素のクラスを動的に設定する方法を見ていきましょう。

これは、要素の見た目を状況に応じて変化させる際などに役立つテクニックです。

// id属性が "my-element" の要素を取得
const element = document.getElementById("my-element");

// 要素にクラスを追加
$(element).prop("class", "active");

このコードでは、id属性が “my-element” の要素を取得した後、propメソッドを使って、classプロパティに “active” を設定しています。

これにより、要素に “active” クラスが追加されます。

逆に、要素からクラスを削除したい場合は、classプロパティから対象のクラス名を取り除けばOKです。

// 要素からクラスを削除
$(element).prop("class", "");

このように、propメソッドを使えば、要素のクラスを動的に設定できるのです。

これは、ボタンのアクティブ状態を表現したり、入力欄のバリデーション結果を視覚的に示したりする際に、非常に便利な機能だと考えています。

○サンプルコード11：ラジオボタンの選択状態を取得・設定する

最後に、ラジオボタンの選択状態を取得・設定する方法を見ていきましょう。

これは、ユーザーの選択に応じて処理を切り替える際などに欠かせないテクニックです。

// name属性が "my-radio" のラジオボタン要素を全て取得
const radios = document.getElementsByName("my-radio");

// 選択されているラジオボタンの値を取得
const checkedValue = $(radios).filter(":checked").val();

console.log(checkedValue);

このコードでは、name属性が “my-radio” のラジオボタン要素を全て取得した後、jQueryのfilter()メソッドを使って、:checkedセレクターに一致する要素（つまり、選択されているラジオボタン）を抽出しています。

そして、val()メソッドで、その値を取得しています。

実行結果は、次のようになります。

選択されているラジオボタンの値

逆に、特定のラジオボタンを選択状態にしたい場合は、次のようにpropメソッドを使います。

// 値が "値2" のラジオボタンを選択状態にする
$(radios).filter("[value='値2']").prop("checked", true);

このコードでは、filter()メソッドで、value属性が “値2” のラジオボタンを抽出した後、propメソッドを使って、checkedプロパティをtrueに設定しています。

これにより、該当するラジオボタンが選択状態になります。

まとめ

さて、今回はJavaScriptのpropメソッドについて、基本的な使い方から応用例まで幅広く解説してきました。

propメソッドを使いこなすことで、Webアプリケーションの開発効率を大幅に向上させられることが分かったのではないでしょうか。

特に、チェックボックスやラジオボタンの状態を動的に操作したり、要素の属性や見た目を状況に応じて変化させたりといった、インタラクティブなUIを実現するためには、propメソッドが非常に重要な役割を果たします。

最後になりましたが、propメソッドを使いこなせるようになることで、クライアントや上司から高い評価を得られるようになるはずです。

ぜひ、JavaScriptのプロフェッショナルを目指して、日々の開発に励んでみてください。