Optional Chaining 演算子を初心者がわかるようにしたただのメモ

「箱の中身が空っぽでも、エラーを出してプログラムを爆発させないための『安全装置』→Optional Chaining 演算子
const str = null;
変数を用意するよ
nullは空っぽっていう意味で
strは空っぽ

// console.log(str.substring(1));

substring() は「文字の一部を切り取って！」という意味

// if (str !== null && str !== undefined) {

// console.log(str.substring(1));

// }

文字がnullかundefinedでも、文字を切り取ってね

console.log(str?.substring(1));

• もし str にちゃんと文字が入っていたら： そのまま substring(1) を実行する。

• もし str が空っぽ（null や undefined）だったら： エラーを出さずに、「あ、空っぽですね。じゃあ何もせずに undefined を返しておきます〜」と、スルーしてくれる。

つまり、空っぽでもスルーしてね
多分、空欄でアンケート出しても、スルーしてねみたいなのに使えそうー
仮説。

substring(1)とは
const str= ’Apple’
だったら
ppleから出ますよっていう意味で

Null合体演算子
let value = null;
valueという変数は空っぽ

// console.log(value ?? '既定値');
valueがnullかundefinedだったら、既定値と入れてね

value ??= '既定値';

console.log(value);

で、valueはnullなので、代わりに既定値を入れるよ

実行　→ 既定値

なるほど。めっちゃ使えそう。
私もよく空白にしちゃうもんね、、

ワタクシがよくわかっていないことをなくしてみようのコーナー
で、HTMLとJavaScriptとは？？

HTMLのみ
<button>クリック回数: 0</button>
つまりボタンを押すという箱のみ

JavaScriptを加えると
<button id="myButton">クリック回数: <span id="count">0</span></button>

<script>
// JavaScript（筋肉・脳）
let count = 0; // 数字を記憶する

// HTMLの中から「myButton」と「count」を探し出す
const button = document.getElementById('myButton');
const countSpan = document.getElementById('count');

// ボタンがクリックされた時の動きを指示する
button.addEventListener('click', () => {
count = count + 1; // 1. 数字を1増やす
countSpan.textContent = count; // 2. HTMLの数字部分を書き換える（面倒な作業）
});
</script>

つまり、HTMLは骨組みでしかない