89739


### 実現したいこと

TypeScriptで、HTML要素を取得して操作したい

### 発生している問題・エラーメッセージ

[code]

    代入式の左辺には、省略可能なプロパティ アクセスを指定できません。
    
[/code]

### 該当のソースコード

[code]

    const pref = document.getElementById("prefectures");
    pref?.textContent = "hello world";
    
[/code]

### 試したこと

特になし

### 補足情報（FW/ツールのバージョンなど）

typescript:4.7.4  
tsc:4.6.4  
esnext


CC BY-SA 4.0
2022-07-03T12:24:13.777
89738
2022-07-03T13:14:01.693
2022-07-03T13:08:37.900
3054
53242
question
javascript typescript dom
HTML要素の textContent に `?.` 演算子で代入できない


### `?.` の意図と問題

`pref`
に付いている「`?.`」は[オプショナルチェーン](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining)という演算子です。質問のコードでの意図は、

  * [`getElementById`](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById) は `null` を返す可能性がある
  * よって `pref` は `null` である可能性がある
  * `null` のプロパティに通常の方法(`.` など)でアクセスしてしまうとエラー（例外）になる
  * エラーを避けるため、`?.` を使おう

といった所だと思われます。しかし、これには問題があり、`?.` 演算子を代入式の代入される側（左辺）で使うことはできません。その理由は、`?.` 演算子が
`undefined` を返すかも知れず、それにより `undefined` に代入することになっては困るからでしょう。

### 対策: `pref` が `null` では無いことが確認された箇所で作業する

現象としては、TypsScript の型チェックが起り得るエラーを事前に発見してくれた、という事です。ですから対策としては、その起り得る状況(`pref`
が `null` である)を実行時にチェックすることが考えられます。

`if` 内で `pref` を触る例:

[code]

    const pref = document.getElementById("prefectures")
    // ここで `pref` の型は 「HTMLElement | null」
    // つまり、`null` の可能性がある
    
    if (pref !== null) {
        // このブロックでは `pref` は `null` で無いことが確認済み
        // 型は HTMLElement となっている
        pref.textContent = "hello world";
    } else {
        // `null` であった場合の何らかの処理
        throw "ID `prefectures` を持つ要素が見付かりません"
    }
    
[/code]

例外を発生させ早期脱出する例:

[code]

    const pref = document.getElementById("prefectures")
    // ここで `pref` の型は 「HTMLElement | null」
    // つまり、`null` の可能性がある
    
    if (pref === null) {
        throw "ID `prefectures` を持つ要素が見付かりません"
    }
    // これ以降に処理が進む場合は、`pref` が `null` で無いことが確認済みとなる
    // 型は HTMLElement となっている
    
    pref.textContent = "hello world"
    
    
[/code]

こういった処理を「[型ガード](https://typescript-jp.gitbook.io/deep-dive/type-
system/typeguard)」と呼ぶことがあります。


CC BY-SA 4.0
2022-07-03T13:05:48.257
89739
2022-07-03T13:14:01.693
2022-07-03T13:14:01.693
3054
3054
89738
answer