# 【2024年6月】JavaScript Primer 早朝輪読会🌅

tags: `JSPrimer🌅`

- [開催概要](https://bootcamp.fjord.jp/regular_events/53) ※FBC内ページ
- [HackMDまとめ](https://hackmd.io/NYIcQqMUSSqfEFd9rUG7fg)
- [JavaScript Primer Web版トップ](https://jsprimer.net/)

<hr/>

## 🗓 2024-6-1(土)

### 🧑🏻‍💻 ファシリ/ドライバー
- ファシリ: karlley
- ドライバー: yumiya

### 📙 読んだところ
- from
- https://jsprimer.net/basic/function-this/#arrow-function-this
- to
- https://jsprimer.net/basic/class/#class-declaration

### 次回
- https://jsprimer.net/basic/class/#class-instance

### 📝 学んだこと・感想・雑談

- @karlley
- thisムズい... とりあえずこれだけ覚える
- arrow function: 一番近い外側のthis、thisは固定(静的に決まる)
- function: ベースオブジェクトがthis、thisは呼び出し方で変わる(動的)
- メソッドの省略記法: `const obj = { fn(){処理} }`
- クラスはオブジェクトの一種(特別なものではないイメージ？)
- use strictを使うとトップレベルのオブジェクトが参照できないのはなぜ？
- 使い方を間違わせないようにしている仕様
- thisとして参照する使い道がない
- セキュリティ面もある

- haruguchi
- this難しくないよ
- 1. アロー関数以外の場合
- fn() だとベースオブジェクトないからトップレベルのthisが参照
- xxx.fn() だとベースオブジェクトあるからベースオブジェクト(xxx)がthis
- つまり呼び出し方によってthisが決まる(動的にthisが決まる)
- 2. アロー関数の場合
- 関数自体はthisを持たないのでアロー関数を定義した外側のスコープへとthisを参照していく
- つまり定義したスコープによる(静的にthisが決まる)
- これだけ理解したら9割は大丈夫。入れ子になるとややこしいけどね。
- あとmapみたいに用意されている関数はthisよくわからなくなる。親切だとドキュメントに書いてあったりする。書いてなかったら自分でソースコード見ないといけない。が、基本的に意識しないで良いような作りにしてくれているはず、、、はず。

- yumiya
- 復習ができていなかったので、今回の章の内容はなかなか理解できなかった😓
- `use strict`の有無で`this`の定義が変わる場合がある
- > strict modeではない状況でthisがundefinedの場合は、thisがグローバルオブジェクトを参照するように変換される問題があるためです。
- アロー関数自身は`this`を持たない（参照：[対処法: Arrow Functionでコールバック関数を扱う](https://jsprimer.net/basic/function-this/#arrow-function-callback)）
- よって「自身の外側のスコープに定義されたもっとも近い関数のthisの値」を取る
- アロー関数でコールバック関数を定義すると、`this`を一時変数に代入しなくてよくなる
- メソッドの省略記法（参照：[メソッドの種類](https://jsprimer.net/basic/function-this/#type-of-method)）
- const obj = { fn(){処理} }

<hr/>

## 🗓 2024-6-2(日)

### 🧑🏻‍💻 ファシリ/ドライバー
- ファシリ: @sugiwe
- ドライバー: @yumiya

### 📙 読んだところ
- from
- https://jsprimer.net/basic/class/#class-instance
- to
- https://jsprimer.net/basic/class/#public-class-fields

### 次回
- https://jsprimer.net/basic/class/#declare-class-fields

### 📝 学んだこと・感想・雑談
- @sugiwe
- JSのクラスでは、インスタンスの初期化処理を`constructor`メソッド（コンストラクタ関数）で行う
- クラスのインスタンスを作成するには`new`演算子を使う
- new演算子の引数は、クラス内の`constructor`メソッド（コンストラクタ関数）の仮引数に渡される
- コンストラクタの中ではインスタンスオブジェクト（this）の初期化処理を行う
- クラスは通常の関数としては呼べない
- コンストラクタ関数内でreturnを使って任意のオブジェクトを返すことは可能だけど、混乱の元なので使わない方が良いらしい。実際ちょっとよくわからなかった…
- クラスのプロトタイプメソッド定義では`:`区切りでメソッドを定義できない。`メソッド() { メソッドの中身 }`という感じで定義するようにする
- `getter`と`setter`のふんわりしたイメージ
- `getter`はゲットなので取得してくる役割。なのでreturnで返す必要がある
- `setter`はセットなので値を入れる役割。なので、`=`で代入するし、returnで値が返る必要はない

- @yumiya
- インスタンスの処理化処理はコンストラクタ関数を使う
- クラスのコンストラクタはインスタンス（this）を初期化するため
- コンストラクタ関数では`return`を使わないようにする
- `return`は使うことはできるが、オブジェクトが返されるから

- クラスのインスタンス化の処理は`this`があることを除けばRubyに近いイメージだと感じた
- `constructor` -> `initialize`
- アクセッサプロパティの定義も似ている
- `get` -> `attr_reader`
- `set` -> `attr_writer`
- `attr_accessor`に相当するものはない？🤔
- `_プロパティ`名は、プラベートにしたいプロパティを一時的に変数にするイメージ？
- `constructor`メソッドで引数を`this._プロパティ名`へ代入する

        constructor(value) {
            this._value = value;
        }
    - `this`がちゃんと理解できていないので難しい。。 



<hr/>

## 🗓 2024-6-8(土)

### 🧑🏻‍💻 ファシリ/ドライバー
- ファシリ: @sugiwe
- ドライバー: @karlley

### 📙 読んだところ
- from
    - https://jsprimer.net/basic/class/#declare-class-fields
- to
    - https://jsprimer.net/basic/class/#static-class-fields

### 次回
- https://jsprimer.net/basic/class/#two-instance-method-definition

### 📝 学んだこと・感想・雑談
- @sugiwe
  - arrow functionのthisは、定義時に1つ外を見にいく。thisが固定されるというのがポイント。
  - thisが固定されるということがメリットである、というのがまだ明確にピンとこないけど、ずーっとthisを見てきてやんわりと「そうかも…？」くらいの気持ちにはなってきた
  - Privateクラスフィールドについて。`_`は何の制約もなく慣習として「これは外で使わないようにしようね」っていう取り決めのようなものだったが、ES2022に追加された`#`によって機能として外から呼べないようになった
  - 途中で娘が乱入して集中力7割減でした汗（3分くらい）

- @karlley
    - 最後までクラスフィールドが何か分からなかった...前回のを読まねば😅
    - クラスフィールドでのthisはそのクラスのインスタンス
    - アロー関数のthisが固定されるメリットはたぶんめっちゃ大きいんだと感じた
    - `_`はprivateだよと伝えているだけ(機能はpublic)、`#` は機能的にもprivate
    - jsのセッター、ゲッターの存在すら忘れていた... js　primerの中盤以降はほとんど覚えていないことが良く分かった
        - JSでOOPする機会少ないのでここら辺は使う時に復習でも良いかも(プラクティスで使うか、、😇)

- @shodan
    - クラスフィールドは`=`を使った代入で定義されるのではなく、`Object.defineProperty`メソッドを使ってプロパティが定義される
        - `Object.defineProperty`を使ったプロパティの定義では、そのクラスフィールドで定義したプロパティのセッター（`set`で定義したセッターメソッド）は無視してプロパティが定義される
        - ゆっくり違いを説明されたら「なるほど……」と思えたけれどややこしい
    - 静的クラスフィールドもあとから普通に書き換えることができた

class Colors {
static GREEN = "緑";
}
console.log(Colors.GREEN); // => "緑"
Colors.GREEN　= 'hoge'
console.log(Colors.GREEN); // => "hoge"

<hr/>


- haruguchi
    - クラスフィールドDIしたい時は宣言だけしか使い道なさそう？
    - クラスで実現できることをオブジェクトで書き直せば理解が深まる
    - もうすぐみんな大好き非同期処理じゃん
    - 6月から毎日1日1万歩チャレンジしてるんですが、もう辞めたいです。
        - 💪
        - 🏋️

- @yumiya
    - 今日はラジオ参加でした📻
    - `this`あたりから理解が難しくなってきた。
        - クラスフィールドでは`this`はクラス自身のインスタンスを参照する
        - アロー関数を使って`this`が変化しないようにする
    - プライペートなクラスフィールドは、フィールド名の前に`#`をつける
        - 定義：`#`フィールド名
        - 参照：`this.#`フィールド名
        - Privateクラスフィールドは、クラスに存在するすべてのPrivateクラスフィールドを明示する必要がある
        - 変数名にアンダースコア（`_hoge`など）をつけても強制力はなく、外から参照できていた
    - 静的メソッド（クラスメソッド）はメソッド名の前に`static`をつける
        - 静的メソッドの`this`はクラス自身を参照する
    - クラス自体に定義する静的クラスフィールドも利用できる
        - フィールド名の前に`static`をつける
        - `#`をつけてPrivateにすることもできる
    - 前章の「[関数とthis](https://jsprimer.net/basic/function-this/)」あたりから、ちゃんと復習する📖

## 🗓 2024-6-9(日)

### 🧑🏻‍💻 ファシリ/ドライバー
- ファシリ: @sugiwe
- ドライバー: @yumiya

### 📙 読んだところ
- from
    - https://jsprimer.net/basic/class/#two-instance-method-definition
- to
    - https://jsprimer.net/basic/class/#prototype-inheritance

### 次回
- https://jsprimer.net/basic/class/#static-inheritance

### 📝 学んだこと・感想・雑談
- @sugiwe
    - プロトタイプメソッドとインスタンスオブジェクトのメソッドは上書きされずにどちらも定義されている
    - インスタンスオブジェクトのメソッドがプロトタイプオブジェクトのメソッドよりも優先して呼ばれている
    - インスタンスメソッドはarrow関数`method = () => {`で定義
    - プロトタイプメソッドは `method() {`で定義
    - プロトタイプチェーン。スコープチェーンのように、内側から外側に探索していくイメージ
        - Rubyのメソッドチェーンという言葉に引っ張られてちょっと混乱している
    - 継承は `extends`
    - `super`を使って継承を活用？するシーンと、使わずに継承を活用するシーンの違いをもう一回復習したい。
        - thisを使いたい場合に`super`が必要？
        - フィールドやメソッドは`super`不要？
    - `hard private`と`soft private`がある。JSの`#`はhardのほう。

- @yumiya
    - 難易度が上がってきたと感じます。。わからないキーワードが多く、テキストと読み進めながらサンプルコードを動かしてみないと理解が進みません😅
    - プロトタイプチェーンとは
        - インスタンスオブジェクトとプロトタイプメソッドは、どちらも定義される
        - インスタンスオブジェクトのメソッドが、プロトタイプオブジェクトのメソッドよりも優先して呼ばれる
            - プロトタイプメソッド → プロトタイプオブジェクトへ定義される
            - インスタンスオブジェクトのメソッド → インスタンスオブジェクトに定義される
        - [オブジェクト](https://jsprimer.net/basic/object/)と[プロトタイプオブジェクト](https://jsprimer.net/basic/prototype-object/)の章を復習する！
    - 継承
        - Rubyの構文と似ているな、と感じました💡
            - JavaScriptは`extends`　で　Rubyは`<`
                - class Child extends Parent{~}
                - class Child < Parent{~}
            - `super`キーワードは同じ
        - privateクラスフィールドは`hard private`になっている
            - `soft private`はユーザー自身で実装する必要があるよう
                - Rubyでいう`protected`みたいなものを作る？

<hr/>

## 🗓 2024-6-15(土)

### 🧑🏻‍💻 ファシリ/ドライバー
- ファシリ: @yumiya
- ドライバー: @sugiwe

### 📙 読んだところ
- from
    - https://jsprimer.net/basic/class/#static-inheritance
- to
    - https://jsprimer.net/basic/error-try-catch/#error-and-debug

### 次回
- https://jsprimer.net/basic/error-try-catch/#console.error

### 📝 学んだこと・感想・雑談
- @sugiwe
  - 静的メソッドは、Rubyでのクラスメソッドのようなもの。インスタンスを作らなくてもメソッドを呼び出せる
  - ArrayやStringなどのビルトインオブジェクトも継承できる
  - try...catchなしでエラーが発生すると、ただエラーメッセージが出るだけだけど、ちゃんとcatchすればエラー内容を詳しく見たりできる。
  - throwでErrorオブジェクトのインスタンスを投げることが重要。ただ「例外が投げられました」だけだと、スタックトレースが得られない
  - SyntaxErrorは、構文的に不正、つまり実行前におかしいとわかるので、try...catchできない。evalを使った例がほぉ〜〜となった
  - 例外捕捉ニガテ…


- @karlley
    - 静的メソッド
        - クラスメソッド的なやつ、newせず呼べる
        - 呼び出す側が固定される -> 静的(static) 
    - throwでErrorオブジェクト以外を投げるとゴミになる！
    - SyntaxErrorはプログラム実行前に発生するのでtry...catchでキャッチできない
    - コンソールでよく見る`<anonymous>` は匿名関数という意味
        - globalコンテキストのトップレベルの関数

- @haruguchi
    - 0 is not positive number. 0 is not negative number.
    - 例外処理はちゃんとやろう
    - `(x => x + 1)();` ← 匿名関数
    - 眠い。このあと寝るかどうかいつも迷う。


- @yumiya
    - `super.プロパティ名`で、親クラスのプロトタイプメソッドを参照できる
    - メソッド名の前に`static`をつけると[静的メソッド](https://jsprimer.net/basic/class/#static-method)になる（Rubyでいうクラスメソッド）
        - `Child.method()`で呼び出す
        - haruguchiさんより補足 

class Foo {
static foo() {}
bar() {}
}
↓　クラス定義した時点で固定(静的に決まる)
Foo.foo()

foo1 = new Foo()
↓動的に決まる
foo1.bar()

foo2 = new Foo()
↓動的に決まる
foo2.bar()

    - catch節でオブジェクトを参照できる識別子を「[例外識別子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/try...catch#The_exception_identifier)」と呼ぶ
        - 例：catch(error){~}の`error`を指す
    - `Error new`で`Error`クラスのインスタンス
        - `throw`は`new Error(”hoge”)`のように書かないとスタックトレースできない
    - `SyntaxError`は、実行時のエラーをキャッチするため`try...catch`文ではcatchできない
        - コードを実行する前にパースして、構文が正しいかをチェックする
    - スタックトレースは、プログラムの実行過程を記録した内容。どの処理によってエラーが発生したかわかる
        - スタックトレースで表示された内容は、上から下に呼び出し元を遡っていく

<hr/>

## 🗓 2024-6-16(日)

### 🧑🏻‍💻 ファシリ/ドライバー
- ファシリ: @yumiya
- ドライバー: @sugiwe

### 📙 読んだところ
- from
    - https://jsprimer.net/basic/error-try-catch/#console.error
- to
    - https://jsprimer.net/basic/async/#promise-instance

### 次回
- https://jsprimer.net/basic/async/#promise-then-and-catch

### 📝 学んだこと・感想・雑談
- @sugiwe
  - causeはいいとこ取り。エラーメッセージをわかりやすく追加できつつ、スタックトレースも追える
  - JS Primerのサイト内で実行できる環境と、ブラウザのコンソールで実行した結果は違うことがあるので注意（同期処理のところで混乱した）
  - 非同期処理の代表的な関数`setTimeout(コールバック関数, delay);`は慣れておきたい
    - 数行後に`}, 1000);`って出てきてまだ混乱させられる
  - 非同期処理も同期処理と同じメインスレッドで実行されるので、非同期処理で実行順をコントロールしようと思っていても間に同期処理が入ってくることがあるので注意
  - 非同期処理でtry...catch構文を正しく使うには、コールバック関数内で同期的なエラーとしてキャッチする必要がある
  - Promiseは非同期処理の状態や結果を表現するビルトインオブジェクトで、以下の２つからなっている
    - 非同期処理をする部分（asyncPromiseTask関数）: Promiseのインスタンスを返す
    - 非同期処理の結果を扱う部分: Promiseのインスタンスを受け取り、成功時の処理と失敗時の処理をコールバック関数で登録する

- @yumiya
    - `console.error`ではメッセージと共にスタックトレースが出力される
    - `Error Cause`は例外を編集して、エラーメッセージを登録する際に使うと良さそう（ログメッセージ編集）
    - 同期処理・非同期処理はブラウザのコンソールで実行して見ると、動きがわかりやすいかも
    - 非同期処理はメインスレッドで実行されるため、直前に重い同期処理があると、非同期処理の実行も遅れる
        - WebWorkAPIで対応する
    - 非同期処理では`try...catch`構文を使っても非同期的に発生した例外をキャッチできない
        - 非同期処理の**外**から、非同期処理の**内で発生した例外**はキャッチできない
    - `Promise`インスタンスは、成功時と失敗時の状態を表すオブジェクト
        - `then`や`catch`を使う
        - thenメソッドには`resolve`と`reject`を渡す


<hr/>

## 🗓 2024-6-22(土)

Skip


<hr/>

## 🗓 2024-6-23(日)

Skip


<hr/>

## 🗓 2024-6-29(土)

### 🧑🏻‍💻 ファシリ/ドライバー
- ファシリ: @hoge
- ドライバー: @hoge

### 📙 読んだところ
- from
    - https://jsprimer.net/basic/async/#promise-then-and-catch
- to
    - https://jsprimer.net/basic/async/#promise-status

### 次回
- https://jsprimer.net/basic/async/#promise-resolve

### 📝 学んだこと・感想・雑談
- @sugiwe
  - thenメソッド、catchメソッドの使い方
  - Promiseクラスにはthenメソッドが用意されており、thenメソッドは2つのコールバック関数を引数に取る
    - 2つの引数の切れ目を探すのから慣れてないので頑張る
  - 2つの引数（成功と失敗）どちらも省略できる（成功しか想定しないのであれば失敗の方は省略するとか）
  - 失敗だけするって時はthenじゃなくcatchを使うと良い
  - Promiseインスタンスには内部的に3つの状態がある
    - Fulfilled
    - Rejected
    - Pending
  - Pending中（レンジでチンしてる間）に他の作業をやらすイメージ
  - Fulfilled・Rejectedとなったらそれ以降変化しない（チンした後からさらに変えることはできない）
  - 非同期処理を何もわかっていないことが改めてわかってよかった（？）

- @kitarou888
    - thenメソッドに失敗時のコールバック関数も登録できる
    - fulfilled状態とrejected状態を合わせてsettled状態という　⇔対して結果待ちのときはpending状態
    - すべての非同期処理がPromiseを返すわけではない。Promiseを返さない関数（setTimeout。db.runも？）はPromiseでラップしてあげると扱いやすくなる
    - 第二部もやる感じでしょうか？（もしやるなら毎回早起きがんばるかも）
    - イベントループのzenn記事、第一部だけでいいと聞いてがぜんやる気出た！この週末やるぞーーーーーーーーーーーーー

- @haruguchi
    - 先週風邪引いてだいぶ進んだと思ったけど、skipだったのか。
    - とりあえず書き方覚えると良いのかな。(難しい話は置いておいて)
    - ただ、サンプルコードは基本的に挙動を確認するためのコードだから、普通にあんなコードは書かないことに注意
    - 非同期の目的→Promiseの書き方→async awaitへの変換→イベントループの理解 という順でやればいいので最初から難しい話ばっかり覚えてもしんどいかも。

- @karlley
    - Promiseは2つのコールバック関数を引数にとる
        - 第1引数: 成功時に実行される関数、resolve -> then
        - 第2引数: 失敗時に実行される関数、reject -> catch
    - Promiseの3つの状態
        - 成功、Fulfilled
        - 失敗、Rejicted
        - 実行中/待機中(成功/失敗が確定していない)、Pending
            - そもそもpendingって保留って意味だからそれで覚えるといいかも
    - 非同期は全部レンジの話で説明してくれれば理解しやすいことがわかった！！
    - Promiseを使う目的がそもそも理解していないので復習します
    
- @yumiya
    - `Promise`の失敗時は、`then(undefined, onRejected)`のように第1引数に`undefined`を渡す
        - 失敗の場合に`then`を使えるが、`catch(コールバック関数)`を使うほうがよい
        - （基本）`setTimeout`は非同期処理だが`Promise`を返さない
            - 【参考】
                - [Node.js v22.3.0 documentation](https://nodejs.org/docs/latest/api/timers.html)
                - [イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理](https://zenn.dev/estra/books/js-async-promise-chain-event-loop)
    - `Promise`内で例外が発生すると、`then`の第2引数や`catch`メソッドで登録したエラー時のコールバック関数が呼ばれる
    - `Promise`は3つの状態がある
        - `FulFilled`：成功時
        - `Rejected`：失敗または例外時
        - `Pending`：上のどちらでもない状態（`new Promise`でインスタンスを作成した初期状態）
        - `Pending` → FulFilled or Rejectedに変化し、状態が変化した後は不変（`Settled`）となる
            - `Pending`の状態にして、他の処理を進める
            - `Pending`のイメージ：調理中、レンジに入れ加熱している状態（その間に他の作業を進める）
    - `Promise`インスタンスの状態は一度しか変化しない

- @genny (ラジオ参加のため読み上げなしでmm)
    - Promise の復習ができてよかった
    - Async/Await を完全に雰囲気で使っているので、明日も参加できるように頑張る
    - 最近日中が結構ハードで参加が不定期になってますが、引き続き不定期な状態が続くと思いますmm
    - 自分がパスしたプラクティスは非同期処理のひの字もなかったのか…と衝撃を受けています（確かに簡単だった）
        - 新しい方もやろ

<hr/>

## 🗓 2024-6-30(日)

### 🧑🏻‍💻 ファシリ/ドライバー
- ファシリ: @yumiya 
- ドライバー: @sugiwe 

### 📙 読んだところ
- from
    - https://jsprimer.net/basic/async/#promise-resolve
- to
    - https://jsprimer.net/basic/async/#promise-finally

### 次回
- https://jsprimer.net/basic/async/#promise-sequential

### 📝 学んだこと・感想・雑談
- @sugiwe
  - Promise.resolveメソッドはFulfilledの状態となったPromiseインスタンスを作成する
  - Promise.resolveメソッドはnew Promiseの糖衣構文で、シンプルにかける
  - 全ての同期的な処理が実行された後に非同期の処理が実行される
  - コンストラクタ関数がある場合はまずそれが実行される。つまり、コンストラクタ関数、同期処理、非同期処理の順番で実行される
  - Promise.rejectメソッドは Rejectedの状態となったPromiseインスタンスを作成する
  - Promiseチェーン
    - fulfilledしてその後に続くthenが順番に実行される
    - rejectedされる場合は、fulfilledおよびそれに続くthenは無視してrejectedが実行されて、もしその後にrejectedに続くthenがあればそれが順番に実行される？？
  - Promiseチェーン、ややこしくてまだ理解追いついていないので復習します…
  - finallyメソッドは、成功・失敗どちらの場合でも呼び出されるコールバック関数


- @yumiya
    - `Fulfilled`状態は`Promise.resolve` 、`Rejected`状態は`Promise.reject` のようにシンタックスシュガーが用意されている
        - シンタックスシュガー：同じ意味の処理を元の構文よりシンプルに書ける別の書き方のこと
    - `then`や`catch`をつなげてメソッドをチェーンして処理していくことができる
        - `Fulfilled`の状態なら`then`メソッドが実行されていく
        - `Rejected`の状態なら`catch`メソッドが実行されていく
    - `Promise`内にコンストラクタ処理がある場合はそれが実行され、続いて同期的な処理が実行され、最後に非同期的にコールバック関数が呼ばれる
    - `Promise`チェーンで一度キャッチすると、次に呼ばれるのは成功時の処理（`then`メソッド）
        - `then`メソッド内で例外を発生させると、次の（最も近い）`catch`メソッドが実行される
        - 次の`catch`メソッドまでの間に`then`があっても実行されない
        - `finally`メソッドは、成功（`then`メソッド）または失敗（`catch`メソッド）時のあとに呼びだせるコールバック関数
            - `try…catch…finally`構文の`finally`節と同じ



<hr/>