JavaScript関連のことを調べてみた2022年05月27日

TypeError: Cannot read properties of undefined (reading ‘***’)エラーを解決してみた

## 背景

業務ではまったエラーです。
個人的には、`TypeError: Cannot read properties of undefined (reading ‘***’)`というエラーは自分のような経験の浅い人にとっては原因を見つけづらいエラーの一つだと思い、今回記事にまとめました。
*コードはフェイクですので少しわかりづらいかも。

原因から考えると解決方法は複数ありそうですが、一つの参考になれば嬉しいです。

## 前提(今回のストーリー)

例えばユーザー登録されたユーザーが複数いて、admin権限を持つユーザーが一人だけという内容の以下のデータがあり、このデータをAPIで取得しているとする。
“`javascript
// APIにてusersを取得したとする
users = [
{ id: 1,
userName: ‘suzuki’,
admin: true
},
{ id: 2,
userName: ‘tanaka’,
admin: false
},
{ id: 3,
userName: ‘sasaki

HTML Canvasのインターフェイスのまとめ #3

HTMLのCanvasを触れ始めたので備忘録として記事に残しておきます。
本記事で3記事目となります。前記事で触れた内容は割愛するので必要に応じて前記事もご確認ください。

1記事目:

https://qiita.com/simonritchie/items/36e34bf409b6bd10f23a

2記事目:

https://qiita.com/simonritchie/items/a303605e476b65b177a1

# テキスト

以降の各節ではCanvasのテキスト関係について色々触れていきます。

## fillTextメソッド

fillTextメソッドでは塗りを設定したテキストを描画します。第一引数には設定するテキストの文字列、第二引数にX座標、第三引数にはY座標を指定します。

“`html

```
まずhtmlファイルにscript srcでjquery.min.jsを追加しましょう。
jQueryもjavascript同様、HTMLファイル内に直接記述するか、専用のJavaScriptファイルに記述します。

```
$(document).ready(function () {
jQueryプログラムの内容
});
```
基本文法はこのようになります。
また省略形もあり、
```
$(function(){
jQueryプログラムの内容
});
```

JavaScriptで全画面(フルスクリーン)にする【YouTube】

# TL;DR

1. フルスクリーンにできるようWebサーバーを起動

```bash
# wget https://github.com/msoap/shell2http/releases/download/v1.14.1/shell2http_1.14.1_linux_amd64.deb
# sudo apt install xdotool ./shell2http_1.14.1_linux_amd64.deb
shell2http /fullscreen "DISPLAY=:0 xdotool key f"
```

2. videoにフォーカスして、フルスクリーンにする

```javascript
document.querySelector('video').focus()
setTimeout(() => fetch('http://localhost:8080/fullscreen'), 1000)
```

Google Cloud Skills Boostで動かすと便利です！

```javascript:S