# 【2024年5月】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-5-4(土)

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

### 📙 読んだところ
- from
- https://jsprimer.net/basic/string/#match-capture-by-regexp
- to
- https://jsprimer.net/basic/string/#tagged-template-function

### 次回
- https://jsprimer.net/basic/string/#tagged-template-function

### 📝 学んだこと・感想・雑談
- @sugiwe
- matchメソッド、matchAllメソッド、gフラグ、復習しないと…
- replaceメソッドとreplaceAllメソッドはなんかスッと入ってきた
- JS、「今まではこうやっていたけど ES20** でこんな便利なメソッドができました！」って話だらけで、実際どんどん便利になっているのだろうけど頭が追いつかない…汗
- URLの正規化、みたいな例はわかりやすくて面白かった
- 正規表現ってユースケースをイメージできないと全然ピンと来ないので、こういう例をもっと見たい
- と思ったが、この例は説明のための例で、実際にURLを扱う場合には自前でこねくり回さないでweb標準APIの URL オブジェクトを使ったり、ファイルパスを扱うなら Path モジュールを使うなどした方が良いそう。
- GWはプラクティスをいっぱい進めるぞ〜😄 と思ったままほとんど進まずGW前半が終わった

- haruguchi
- 正規表現って便利だけど使い所難しい、そしてそんなに使い所ない
- matchオブジェクトはなんか色々いい感じのオブジェクトになってる
- GWはあんまり予定がなくRubyKaigiの予習をしてたら終わりそう
- 活字中毒すぎて読むものないとき日報漁ってるからなんかダメだw

- @yumiya
- `match`と`matchAll`メソッドは、マッチした結果を「配列」で返す
- 正規表現の`g`フラグを使う場合、`matchAll`メソッド
- RegExpの`exec`メソッドでも同じような結果になるが、`match`メソッドと少し挙動が異なるので注意
- 文字列取得の使い分け
- `String`メソッドで表現できることは`String`メソッドを使う
- 柔軟性や曖昧な検索が必要な場合は、正規表現を利用する
- 文字の組み立てで、URLやファイルパスを作る際にはURLオブジェクトなどを使う
- `+`演算子で組み立てない
- 似たような処理の関数が増えてきたので、使い分け方を覚えていきたい

<hr/>

## 🗓 2024-5-5(日)

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

### 📙 読んだところ
- from
- https://jsprimer.net/basic/string/#tagged-template-function
- to
- https://jsprimer.net/basic/string-unicode/#regexp-unicode

### 次回
- https://jsprimer.net/basic/string-unicode/#count-of-code-points

### 📝 学んだこと・感想・雑談
- @sugiwe
- タグつきテンプレート関数（`関数()`でなく関数``）を使うと、関数の呼び出しに式展開のようなことができる
- タグつきテンプレートリテラル、わかったようなわからないような、、、
- 絵文字や一部の漢字は、2つの Code Unit を使って表現するので、`.length`で文字数をカウントすると2つ分になる
- uフラグがついた正規表現は、文字列をCode Pointごとに扱う
- uフラグが無いと下位サロゲートだけがマッチして文字化けしてしまうことがある
- 基本的にはuフラグをつけておいた方がいいってことかな
- 例文を理解するにあたり、その章自体で説明されている部分が理解できていないのか、全然関係ないけどその例文に出てくる関数とかがわかってなくて全体がわからなくなっているのか、まずそこの整理をしないといけないなと思った。。。

- @karlley
- タグ付きテンプレート関数は文字列をコンテキストに応じた処理をいい感じにやってくれる
- コードポイントとコードユニットの違いがまだフワッとしている
- コードユニットで表現しきれないコードユニットを2つのコードユニットで表現するのがコードポイントってこと？
- 文字列はCode Unitが順番に並んだものとして扱われる
- String.lengthはこの個数を調べるメソッド
- 文字列はムズい...

- @yumiya
- [タグつきテンプレート関数](https://jsprimer.net/basic/string/#tagged-template-function)で、引数内の特殊文字（`&`,`%`,`$`,`日本語`など）をエスケープしてURLを生成できる
- 文字には「一意のID」が振られていて、このIDを**Code Point**（符号位置）と呼ぶ
- Stringの`codePointAt`メソッドでコードポイントを返す
- `String.fromCodePoint`メソッドで、コードポイントに対応する文字を返す
- Unicodeはコードポイントで返すが、JavaScriptの文字列はUTF-16で変換されたCode Unit（符号単位）になる
- 絵文字などの扱いがCode PointとCode Unitで異なる
- UTF-16では2つのCode Unitの組み合わせ（合計4バイト）で1つの文字（1つのCode Point）を表現し、サロゲートペアと呼ぶ
- サロゲートペアで表現している文字列は、上位サロゲート（0番目）と下位サロゲート（1番目）を組み合わせる
- 正規表現を使う際には、u（unicode）フラグを付けるほうが良さそう
- Firefoxを使うと文字化け部分にコードポイントが表示されるよう
- Chrome・Safari：`console.log("𩸽"[0]);` => ◆の中に「？」
- Firefox：`console.log("𩸽"[0]);` => □の中に「D867」

<hr/>

## 🗓 2024-5-11(土)

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

### 📙 読んだところ
- from
- https://jsprimer.net/basic/string-unicode/#count-of-code-points
- to
- https://jsprimer.net/basic/function-scope/#scope-chain

### 次回
- https://jsprimer.net/basic/function-scope/#global-scope

### 📝 学んだこと・感想・雑談
- @sugiwe
- 絵文字、というか文字列とUnicodeの関係は難しい…
- `new String("文字列")`のようにStringオブジェクトをnewして作ったStringオブジェクトのインスタンスを、ラッパーオブジェクトと呼ぶ
- ラッパーオブジェクトで作った `new String("文字列")`は`typeof`で`object`になるが、プリミティブ型で作った`"文字列"`は`typeof`で`string`になる。ややこしい、、、
- 最終的にラッパーオブジェクトはあんまり使わずに、普通のリテラルで書く方が良いでしょうとのことで、そうしようと思った
- スコープチェーン
- OUTERブロックスコープで定義した変数はINNERブロックスコープで参照できる（INNERを探してあればそれを参照、なければOUTERを探してそれを参照）
- INNERブロックスコープで定義した変数はOUTERブロックスコープで参照できない
- スコープチェーン（スコープの入れ子）じゃなくても、以下となる
- ブロックの外で定義した変数はブロックの中で参照できる
- ブロックの中で定義した変数はブロックの外で参照できない

- @yumiya
- 絵文字などサロゲートペアを含む文字列を`length`でカウントすると見た目とは異なる数値が返ってくるので注意したい（🍎.length => 2）
- Twitterのようにリアルタイムで入力した文字数をカウントする機能など
- プリミティブ型のデータには常にリテラルを使うことで、ラッパーオブジェクトを意識する必要がなくなる
- あえてラッパーオブジェクトにする必要はなさそう
- どういったケースでラッパーオブジェクトにするのか気になった
- 同じスコープ内には同名の変数を定義できない
- ただし`var`は例外なので古いコードを編集するときに注意したい
- スコープがネストしている場合、内側のスコープから外側のスコープへ変数名を探索していく
- 「スコープチェーン」と呼ぶ
- スコープは階層的な構造になっている

- @karlley
- ラッパーオブジェクトはプリミティブ型の値をラップしたオブジェクト
- 型はオブジェクト型
- プリミティブ型に対応したそれぞれのラッパーオブジェクトが存在する
- 使い所は不明...
- 極力リテラル型を使った方が混乱を生まない
- 関数定義はスコープを作成しているのと同じ
- 仮引数: 関数定義時に引数に何が入るか分からないから「仮引数」
- スコープチェーン: 変数の参照が内側から外側に向かって探索される仕組み
- ブロックの外 -> 内はNG、ブロックの内 -> 外はOK
- for分などのループ部分は内 -> 外の変数を参照している

<hr/>

## 🗓 2024-5-12(日)

🏖お休み🏖

<hr/>

## 🗓 2024-5-18(土)

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

### 📙 読んだところ
- from
- https://jsprimer.net/basic/function-scope/#global-scope
- to
- https://jsprimer.net/basic/function-scope/#dynamic-scope

### 次回
- https://jsprimer.net/basic/function-scope/#memory-management

### 📝 学んだこと・感想・雑談
- @sugiwe
- グローバル変数はあらゆるスコープから参照できるが故に混乱の元にもなるので、無闇にグローバルスコープに変数を定義しない方が良さそう（変数を参照できる範囲はできるだけ小さく）
- varの巻き上げというのがある（宣言の前に参照してもエラーにならず`unedefined`が返る）
- 新しく書く際にはvarは使わない方が良さそう
- 関数宣言も、同様に「巻き上げ」というのがある。varの巻き上げは「なんだこれ！？」と思ったけど、関数宣言の巻き上げはなぜか受け入れられた。
- 確かに
- 即時実行関数、`()`を見逃してて訳が分からなかったけど、なるほどと思った
- クロージャー、ピンと来なかったが、「とある関数を複数の変数に代入したら、各変数ごとに関数の中身の状態は保持されるよ」ってことで、インスタンスを作るっぽい感じのイメージを持った。
- RubyKaigi勢は今日はグッスリ寝ているでしょうか🛌

- @genny
- スコープはできるだけ小さくする
- var は特殊な動きをするので使わない
- 宣言部分が最も近い関数またはグローバルスコープの先頭に巻き上げられ、代入部分はそのままの位置に残る
- クロージャーよくわからない…
- 「クロージャーとは「外側のスコープにある変数への参照を保持できる」という関数が持つ性質のこと」らしい
- 関数が状態を持っているように振る舞える
- JSもRubyも静的スコープ

<hr/>

## 🗓 2024-5-19(日)

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

### 📙 読んだところ
- from
- https://jsprimer.net/basic/function-scope/#memory-management
- to
- https://jsprimer.net/basic/function-scope/#closure-usecase

### 次回
- https://jsprimer.net/basic/function-scope/#closure-vs-function-object

### 📝 学んだこと・感想・雑談
- @sugiwe
- ガベージコレクションとは、参照されなくなった不要なデータをメモリから自動で解放する仕組み
- 「関数の実行が終了した際に解放される場合」と「関数の実行が終了しても解放されない場合」の違いが初め全然ピンと来なかったけど、 kitarou888 さんの解説でかなり分かった！
- メモリの概念を理解することがかなり重要
- returnを持つ関数の結果を任意の変数に代入しておくと、「ずっと参照され続けている」状態になるので、メモリが解放されない
- 変数aと変数bにそれぞれ同じ関数の結果を代入したら、それぞれが別の状態を保つことになる。（変数bに変数aを代入すると参照元が同じになる、というのも実際に画面で確認できて面白かった）
- React の関数コンポーネントは、クロージャーを活用しているらしい。
- kitarou888 さんが海外から参加してくれて嬉しかった😄
- @kitarou888
- 実行後にガベージコレクションされる関数とされない関数のちがい
- returnをもつこと
- その返り値をある変数に代入していること
- クロージャーは高階関数の一部分としても使われている
- つまりmapなどはループの都度部屋をつくっているという理解でよい？
- 明日は世界遺産のプリトヴィツェ湖群国立公園へ行って参ります！

<hr/>

## 🗓 2024-5-25(土)

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

### 📙 読んだところ
- from
- https://jsprimer.net/basic/function-scope/#closure-vs-function-object
- to
- https://jsprimer.net/basic/function-this/#method-this

### 次回
- https://jsprimer.net/basic/function-this/#this-problem

### 📝 学んだこと・感想・雑談
- @sugiwe
- クロージャー、状態を持つ関数オブジェクト、クラスについて
- 状態を持つ関数オブジェクトは、関数の外からプロパティを変更できちゃう。
- クロージャーを使えば変更できないように閉じ込めることができる
- 大抵はクラスでやれば良さそう
- `globalThis`の使い所がまだピンと来てない
- Rubyではハッシュ内にメソッドは書けないけど、JSではオブジェクト内にメソッドを書ける
- thisは、プラクティスで「関数使うときは基本arrow functionが良いけど、thisを使うときだけ関数宣言（関数式）を使おうね」みたいな話の時によく見かけた。arrow functionに慣れてないので（ってか省略記法っぽいの全般が苦手で）this使えないならarrow function使わなくて良いじゃんって思っている、、、
- ここら辺はfunction使おう派もいて論争がありそう
- 最近、TypeScriptの本を読み始めてもReactの本を読み始めてもJSの基礎が出てくるので、早くもっと慣れていきたいと痛感している、、、

- @haruguchi
- thisがない世界を想像するとthis(self)の必要性がわかるかも

const person = {
    fullName: "Brendan Eich",
    age: ...
    gender: ...
    sayName: function() {
        return person.fullName; // this.fullName
    },
    sayAge: function() {
        return person.age // this.age
    }

    sayGender: function() {
        return person.gender // this.gender
    }

}


// personじゃなくてuserにしたいと思った時、、、

- クロージャはレキシカルなスコープが関連するのでRubyのメソッドはクロージャじゃない。
- RubyKaigiで狂った生活リズムを取り戻したい。運動習慣も！

- @karlley
- jsのクラスはクラスもどき、クラスっぽい動きをするだけ
- 式と文
- 式: 値なのでプロパティになる -> メソッドにできる
- 文: 値ではないのでプロパテになれない　-> メソッドにできない
- jsのオブジェクトはrubyのハッシュとほぼ同じ
- ベースオブジェクトは`.` の左側のオブジェクト -> this
- 2週間ほど休んだのでだいぶ進んでいてびっくりしたし、関数のとこは参加したかった...
- 他の言語と対比して読んでいくと少しだけ覚えたり理解しやすくなる気がした

<hr/>

## 🗓 2024-5-26(日)

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

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

### 次回
- https://jsprimer.net/basic/function-this/#arrow-function-this

### 📝 学んだこと・感想・雑談
- @sugiwe
- this難しい
- thisは、その関数（メソッドも含む）が呼び出しのベースオブジェクトを参照するが、いろいろな問題がある
- thisを含むメソッドを変数に代入した場合
- メソッドをただの関数として呼ぶと、ベースオブジェクトが変わっているので意図しない結果になる
- call、apply、bindメソッドで対処できる
- 基本的には、メソッドとして定義されている関数はメソッドとして呼ぶ
- コールバック関数とthis
- コールバック関数として呼び出した関数にベースオブジェクトがなく、undefinedになる
- 対処法として、thisを一時変数に代入する、という手もある
- Arrow Functionを使えば、thisが外側を探索することになるので、その仕組みを活用できる

- @karlley
- メソッドとして定義したものはメソッドとして呼び出す
- メソッドとして定義しているものを関数として呼び出すとthisで参照できない問題が発生する
- 対策: call, bind, applyを使う
- コールバックでthisを使った関数を呼び出すとundefinedになる場合がある
- 対策: アロー関数を使う
- ここまで読んでるとアロー関数を使えば全部解決するんでしょ？と思ってしまうけど... 昨日ハルグチさんが言っていたfunction派もいるという話が逆に気になってきた

- @yumiya
- 寝坊のため、20分遅れて参加しました😓
- 2週間ぶりの参加でした。もう「[関数とthis](https://jsprimer.net/basic/function-this/)」の章に入っていたのでキャッチアップが必要👨🏻‍💻
- コールバック関数の中で`this`を参照すると問題が発生しやすい
- よってコールバック関数内で`this`を使う場合はアロー関数を使うほうがよい
- アロー関数で定義したコールバック関数は、外側の関数の`this`をそのまま利用する
- アロー関数自体は`this`を持たない
- `this`の内容がわからなくなったら、関数の中に`console.log(this);`を書いてチェックしたほうがわかりやすいかも
- 先週は[RubyKaigi2024](https://rubykaigi.org/2024/)に参加してきました❗いろいろな人とお話できてとても学びになりました✊🏻
- [講演内容](https://rubykaigi.org/2024/schedule/)はまったくWakaran🤔と思いながら聞いてました。。

<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(){処理} }