以前、『JavaScriptにおける「$（ドルマーク）」の意味と使い方』で、ドルマークの利用シーンについてまとめましたが、本ページでは「?」はてなマーク（クエスチョンマーク）についてJavaScript内でどのように使われるのかシーン別でまとめておきます。
はてなマークとかドルマークとか見ると一瞬焦る時期もありました。
私知ってるわよ、文章で疑問形のとき使う記号よね。
JavaScriptにおいて「?」クエスチョンを使うシーンは４つに分けられます。
- 文字列内での利用
- 三項演算子（? … : …）
- オプショナルチェーン（?.）
- Null 合体演算子（??）
文字「?」としての使用
これは特に説明は必要ありませんが文字として「?」を使う場合に見かけます。なんてことはない文字列の一部です。
const questionText = 'これは文字列ですか？全角でも半角でもおなじですか?';三項演算子（? … : …）の一部
三項演算子で「?」は用いられます。値を評価して真（true）のときと偽（false）の時で値や計算式を変えるときに使いますね。ただ、あまり多用すると逆に可読性が落ちたり、初心者と共同作業する場合に障壁になりうるので好みが分かれる構文ではあります。（慣れると分かりやすいんですけどね）
let score = 75;
let result = score > 60 ? '合格' : '不合格';
console.log(result); // 出力: 合格三項演算子については『JavaScriptの三項演算子が分かりにくくて発狂するかたへ～三項演算子とはなにか、覚え方とメリットは何か』でより深く説明していますので併せてご覧ください。
オプショナルチェーン（?.）での利用
こちらは脱初/中級の内容になるかな、と思います。オプショナルチェーンで「?」と「.（ドット/ピリオド）」を連結して記述するときにクエスチョンが出てきます。例えば次のような記述です。
const person = {
name: "山田",
address: {
city: "東京"
}
};
let city = person.address?.city;
console.log(city); // 出力: 東京オプショナルチェイニング (?.) は、プロパティが存在しない可能性があるオブジェクトに対して安全にアクセスするための方法です。もしプロパティが存在しなければ、undefinedを返します。
実はこの書き方、非常に有効で積極的に使用していきたいところです。可読性の向上とエラーハンドリングの効率の両方がアップします。代表的な利用シーンとしてはDOM要素の有無でJavaScriptのエラーを発生させないようにする場面でしょうか。
document.addEventListener('DOMContentLoaded', function() {
// オプショナルチェーンを使用してbutton要素を取得
const button = document.getElementById('myButton')?.textContent;
// button要素が存在しない場合、textContentの取得はundefinedを返す
// ※オプショナルチェーンを利用してない場合、かつ要素がない場合にはJavaScriptのエラーで処理が中断されます
console.log('Button text:', button);
// オプショナルチェーンを使用して、存在しない要素のプロパティに安全にアクセス
const nonExistent = document.getElementById('nonExistentElement')?.textContent || 'Element not found';
console.log(nonExistent);
// オプショナルチェーンを使用してイベントリスナーを安全に追加
document.getElementById('myButton')?.addEventListener('click', () => {
console.log('Button was clicked!');
});
});Null 合体演算子（??）での利用
Null 合体演算子 （??）（参考：mdn web docs）は左側のオペランドがnullまたはundefinedの場合にのみ右側のオペランドを評価します。どういうことかというと、左辺がnullまたはundefinedの時には右の値を返し、それ以外の場合に左の値を返します。例を見た方が早いので次をご覧ください。
let input = null;
let defaultValue = "未設定";
let value = input ?? defaultValue; // ← Null 合体演算子の利用
console.log(value); // 出力: 未設定サンプルコードでは変数inputをnullに指定しlet value = input ?? defaultValue;でinputがnull（もしくはundefined）かどうかを判別し、nullだったので「未設定」という文字列をvalueに代入する処理を行っています。
もしinputがnullではない時には、inputの値をvalueに代入します。
let input = "設定したよ！";
let defaultValue = "未設定";
let value = input ?? defaultValue; // ← Null 合体演算子の利用
console.log(value); // 出力: 設定したよ！難しそうですが、一回理解してしまえば可動性が飛躍的に向上しますね。
はてなマークは効率的！
JavaScriptにおいて「?」を使う場面は上記の4つに大分されます。プログラミングの習得で大事な点の１つには「文法や意味を体系的に整理しておく」ことが挙げられるかと思います。
「?」ってどういう意味だったっけ？「!」ってどういう意味だったっけ？と感じたら、それぞれ４パターンの利用に分けられるということをまずは覚えておくとパニックにならずに学習することが出来ます。
もしまた迷ったらこの記事を思い出して見返してみてください。反復しているうちに文法には必ず強くなります。
４パターンだけ頭に入れておけばすぐ対応できますね
