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

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

### 📙 読んだところ
- https://jsprimer.net/basic/introduction/#what-is-javascript から
- https://jsprimer.net/basic/variables/#summary

### 📝 学んだこと・感想・雑談
- @sugiwe
- PrettierプリティアとLintを合わせるとRubyのRuboCop、というイメージが分かりやすかった
- `strict mode`は、関数の中に書くとその関数でだけ適用される。ファイル冒頭に書くものかなーと思っていたので知れてよかった
- 数学的な意味合いでの「変数」「定数」とプログラミング的な意味合いはちょっと異なる、という話を聞けて良かった
- `const`は、再代入できない変数を宣言できる
- `let`は、再代入ができる変数を宣言できる
- `var`は、再代入ができる変数を宣言できるが、いくつかの問題が知られている
- `var`は新しく書くコードで使わないほうがいい
- web版で読んでるとここにメモするのもコピペできてしまい、良いのか悪いのか。。。
- 初回開催できてよかった！ご案内がグダグダだったのに来てくださってありがとうございます🙏

- @karlley
- 変数、定数の宣言のイメージは「どのメモリに定義するのか」
- constでの変数定義は初期値の省略はできない
- 物理の書籍がないことに慣れないけどPCだけあれば良いので楽！

- norisuke
- constは定数のことだと認識していたが、「再代入できない変数」であるということがしれた。

- @haruguchi
- 今日見出し3つ分終わったのであと10回で終わる！！！？:thinking_face:
- 😂
- const で記述するからといって値が必ず変わるとは限らない(オブジェクトは変更できる)
- 今出張で福井にいるんですがJSPrimerは本なくていいから便利

- @yumiya
- `strict mode`は冒頭に書いてJavaScriptファイル全体に適応するだけでなく、関数内に設定できることを知りました
- 「[実行コンテキスト](https://jsprimer.net/basic/introduction/#script-module)」の違いがよくわからなかった
- 変数を宣言する際には,(カンマ)を使い、同時に複数宣言できる
- `const`でオブジェクトを宣言した場合、オブジェクトそのものの値を変更することは可能

- @moegi29
- strictモードだとどこからでもアクセスできる変数を排除してくれる
- 数学の変数・定数とプログラミングの変数・定数はちがうもの
- 私は恵比寿出張です。本無くて参加できる輪読会は良いですね
- :nakama:
- https://railsgirls.com/tokyo.html
<hr/>

## 🗓 2024-3-3(日)

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

### 📙 読んだところ
- https://jsprimer.net/basic/read-eval-print/ から
- https://jsprimer.net/basic/data-type/#integer-literal まで

### 次回
- https://jsprimer.net/basic/data-type/#floating-point-number-literal から

### 📝 学んだこと・感想・雑談
- @sugiwe
- REPL（レプル・リプル）は、コードを評価して結果を表示する開発者向けの機能
- エラーには構文エラーと実行時エラーがある
- 構文エラーの例：`console.log (1`　（閉じカッコがない）
- 実行時エラーの例：変数xが無いのに`console.log(x)`を実行した時に起こる
- 「エラーがWebコンソールに表示されているならば、そのエラーは修正できます。」という一文が良かった
- データ型は、プリミティブ型とオブジェクトの2種類ある
- プリミティブ型（基本型）
- オブジェクト（複合型）
- `console.log(typeof null); // => "object"`が、なんで？と思ったら注釈があった
- > JavaScriptが最初にNetscapeで実装された際にtypeof null === "object"となるバグがありました。このバグを修正するとすでにこの挙動に依存しているコードが壊れるため、修正が見送られ現在の挙動が仕様となりました。 詳しくは https://2ality.com/2013/10/typeof-null.html

- @genny
- エラーは大きく分けて2種類ある
- 構文エラーと実行時(ランタイム)エラー
- データ型は大きく分けると２つに分類される
- プリミティブ型とオブジェクト型
- プリミティブ型
- 一度作成したら、その値自体も変更できない(immutable)
- オブジェクト型
- 一度作成した後も、その値自体を変更できる(mutable)
- 値への参照を経由して操作する->参照型のデータ
- リテラル
- プログラム上で数値や文字列など、データ型の値を直接記述できるように構文として定義されたもの
- たとえば、"と"で囲んだ範囲が文字列リテラルで、これは文字列型のデータを表現している
- サクサク進んでる！

- @yumiya
- Firefoxブラウザの開発者ツール「コンソール」タブでJavaScriptエラーを確認すると、MDNの解説ページへのリンクが表示されて便利だと感じた
- コンソールでコードを評価して結果を表示させる機能を「REPL（read–eval–print loop）」と呼ぶ
- 『オブジェクト型』
- 複数のプリミティブ型の値やオブジェクトの集合である
- 値そのものではなく値への参照を経由している

- @karlley
- エラーメッセージの行、列のカウント
- 行: 1からスタート
- 列: 0からスタート
- データ型の種類(いつもどっちがどっちか分からなくなる😇)
- プリミティブ型 -> イミューダブル(変更不可)
- オブジェクト型 -> ミューダブル(変更可)
- リテラル: データ型の値を直接記述できるように構文として定義されたもの(文字列の`''`とか)
- REPLは「レプル」、「リプル」で伝わりそう
- 進むスピードが早いので進捗を感じやすくて良い！

<hr/>

## 🗓 2024-3-9(土)

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

### 📙 読んだところ
- https://jsprimer.net/basic/data-type/#floating-point-number-literal から
- https://jsprimer.net/basic/operator/#minus-operator まで

### 次回
- https://jsprimer.net/basic/operator/#multiplication-operator から

### 📝 学んだこと・感想・雑談
- @sugiwe
- `.123`みたいな書き方は可能だけど、紛らわしいので`0.123`で良さそう
- BigIntは大きな数字（めちゃ細かい小数点も）を正しく扱える
- `1_000_000`みたいなのはRubyでもあった気がする（自分で使ったことない）
- JSではシングルクオートとダブルクオートの役割は全く同じ（Rubyではちょっと違った）
- JSではこれに加えてバッククオートを使える。これがちょっとだけRubyのダブルクオートに似ているとこもあると思った（式展開っぽいことができるとか。改行もできるとかは違う点か？）
- 文字列を変数に格納するとき`const str = new String("文字列");`としてもいいんだけど、シンプルに`const str = "文字列";`ってすれば基本的には良いらしい？
- 型を意識するときとかに変わってくるのだろうか🤔
- 背中が痛くて接骨院に通っています🤒 背中痛と花粉症（くしゃみ）の相性は最悪…ッ

- @genny
- カッコの読み方再発見
- `{}`は中かっこ
- `[]`は大カッコ
- 独習でも序盤で話しましたよね笑
- https://www.web-s.biz/wpr/archives/8240
- 英語では何て読むんだろう
- オブジェクトのプロパティを参照する方法は二種類ある
- ドット記法 `obj.key`
- ブラケット記法 `obj[key]`
- BigIntはお金の計算とかするときは意識した方がいいというのはなるほど〜と思った
- 安全に表せる最大値: 9007199254740991

- @karlley
- 文字列の`''`と`""` は全く同じ動作
- プリミティブ: 文字列、数字、真偽値等の変更できないもの
- 文字列内で改行は原則使えない　-> \n、テンプレートリテラルを使う
- js primer読むの2回目ですが、1度目に読んだ時の大変さを思い出してきた...
- リレラルとかオブジェクトとか型とか聞き慣れない言葉で理解するのに疲れる😇

- @moegi29
- `0.123`は0を省略して書けるけど省略せず書いたほうが良い
- `_123`のように数字の前に_をつけると変数として扱える
- プリミティブ型の値は、一度作成したらその値自体を変更できないというイミュータブル（immutable）の特性を持つ。変更できるものはミュータブル。
- undefinedはただのグローバル変数。
<hr/>

## 🗓 2024-3-10(日)

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

### 📙 読んだところ
- https://jsprimer.net/basic/operator/#multiplication-operator から
- https://jsprimer.net/basic/operator/#bit-not まで

### 次回
- https://jsprimer.net/basic/operator/#left-shift から

### 📝 学んだこと・感想・雑談
- @sugiwe
- 以下のマイナスのつき方や整数と小数点数が混じった時など、RubyとJSで計算結果が異なることがままありそうなので気を付ける
- `console.log(9 % 2); // => 1`
- `console.log(-9 % 2); // => -1`
- `console.log(9 % -2); // => 1`
- `console.log(-9 % -2); // => -1`
- インクリメント演算子・デクリメント演算子はオペランドの前に着くか後ろに着くかで評価の順が異なるので注意
- `n = n + 1`
- `n++`` もしくは ``++n`
- Rubyだと`n += 1`って書くやつ
- JSでは基本的には`==`より`===`を使う。Rubyとこんがらがるなぁ〜
- ビット演算子むずい、、、一つ一つ眺めてる分には算数的な面白さを感じるんだけど、コードを読み解いていくときにこんがらがる。

- @karlley
- 言語毎に計算結果が違うことに驚いた
- jsの数字はnumber型しかない
- マイナスが含まれる計算には注意
- 2の補数は「反転して1足す」
- 自然言語の「または」は排他的論理和という例えがとても分かりやすかった！
- ビットと聞くと蕁麻疹が出そうになる笑
- こーゆー系は動画とか図とかで理解していった方が自分には合っていそう

- haruguchi
- すがく嫌いが挫折するポイント演算子
- bit演算はプログラマの嗜み
- JSは暗黙的型変換が多くバグりやすいので面白い(だからTSが必要とされている)
- 2の補数は反転して1ビット足す(nbitの場合2^(n-1)を法とした合同式を作る)
- ビットは所詮、決められた大きさの箱に0と1が詰まってるだけ

<hr/>

## 🗓 2024-3-16(土)

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

### 📙 読んだところ
- https://jsprimer.net/basic/operator/#left-shift から
- https://jsprimer.net/basic/operator/#and-operator まで

### 次回
- https://jsprimer.net/basic/operator/#or-operator から

### 📝 学んだこと・感想・雑談
- @sugiwe
- 左シフト演算は2倍していく
- 右シフト演算は割2して（1/2倍して）切り捨てる
- ゼロ埋めシフト演算は使うシーンはあまりなさそうだけど頭に入れとく
- 分割代入はパターンマッチ
- AND演算子（`&&`）は、左辺から順番に評価して行って「全部trueになるかどうか決まった時点」の評価が返る。`&&`をいくつ繋げても一緒。（幾つでも繋げられるけど読みやすさに気を付ける）
- falseっぽい値をfalsyという。Rubyでのfalseが返るものと異なるので気を付ける
- 温かくなって花粉が元気な気がしてつらい

- @karlley
- 右シフト、左シフト
- 2進数で左シフト -> *2
- 2進数で右シフト -> /2
- オブジェクトはキー、値が同じ場合はキーを省略して表現できる
- `{key: key} -> {key}`
- AND演算子
- 左から順に評価
- 評価した結果が決まった時点の値を返す
- ビット演算子やっと終わった..?(難しい！)
- 基礎的な部分を紐解いて理解していく感じが楽しかった！

- haruguchi
- シフト演算子のずらすという行為は値を2倍, 1/2倍(割る2)してることに対応する
- 分割代入は要はパターンマッチ
- オブジェクトの分割代入は省略記法が用いられるので注意`{ foo: foo } → {foo}`
- && みたいな命題（論理)記号は短絡評価
- 北陸新幹線が今日開通する(らしい)

<hr/>

## 🗓 2024-3-17(日)

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

### 📙 読んだところ
- https://jsprimer.net/basic/operator/#or-operator から
- https://jsprimer.net/basic/operator/#conclusion まで

### 次回
- https://jsprimer.net/basic/implicit-coercion/ から

### 📝 学んだこと・感想・雑談
- @sugiwe
- `||`は左辺がtrueなら左辺を返す、左辺がfalseなら右辺の評価結果を返す
- 左辺の評価は真偽値に暗黙的な型変換される
- `!!`は真偽値を返すためのテクニックだけど、他の方法で書けるかどうかは検討すると良いらしい
- `??`演算子（ヌリッシュコアレシング？）、前にも読んだはずだけど忘れていた、、、
- 「なにも入れない場合にはデフォルト値を返したいけど、`0`をfalseでなく「0」として扱いたい場合」などに`||`が使えないので、そういう時に`??`を使える
- 三項演算子、ちょっと例で混乱したけどちょっとしたif文をシンプルに書けるってことでRubyでは割と慣れていたので、同様に考えて使っていきたい
- letは初期値を定義しないと`undefined`になるが、constは初期値を定義しないとエラーになるので注意
- トイレットペーパーの例わかりやすかった🚽
　　 - https://nlab.itmedia.co.jp/nl/articles/2201/10/news048.html

- @yumiya
- OR演算子、NOT演算子では、条件を左辺から順に評価をしていく
- OR演算子では暗黙的な型変換が行われるので、左辺にfalsyな値（0,null,""など）が入ると右辺の値を返すので注意
- NOT演算子（!）を使うと、オペランドの評価結果を反転した真偽値になる
- !true -> false
- !false -> true
- `!`は複数重ねられるが、わかりにくくなるので多用しないほうが良さそう(例：!!!true)
- 値のデフォルト値を指定する場合には、OR演算子ではなく、Nullish coalescing演算子(??)を使うほうがよい
- coalesceのカタカナ読みは「コウアリス」のよう
- 参考：[トイレットペーパーでプログラミングの変数を理解する模型が分かりやすい　「絶妙」「秀逸」と話題に](https://nlab.itmedia.co.jp/nl/articles/2201/10/news048.html)

- @karlley
- `()` は一番優先度が高い
- 演算子の優先度が分からなくなったら以下で確認する
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table
- 変数定義時の初期値について
- var: 不要
- let: 不要
- const: 必要

        const a;
        Uncaught SyntaxError: Missing initializer in const declaration ← 初期値が必要って書いてた

- 変数はトイレットペーパーをイメージして覚えると良い🧻
- `??`とか　`||` がだんだん混乱してきたので整理していこう😇
- consoleで色々試しながら読み進めるのは理解しやすいし楽しい！

<hr/>

## 🗓 2024-3-23(土)

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

### 📙 読んだところ
- https://jsprimer.net/basic/implicit-coercion/ から
- https://jsprimer.net/basic/implicit-coercion/#nan-is-number-type　まで

### 次回
- https://jsprimer.net/basic/implicit-coercion/#unsolved-problem

### 📝 学んだこと・感想・雑談
- @sugiwe
- 「暗黙」の反対は「明示」
- 等価演算子`==`は、オペランド同士が同じ型となるように暗黙的な型変換をする
- 基本的には`==`でなく`===`を使うと良さそう
- Booleanコンストラクタ、Stringコンストラクタなど、コンストラクタはオブジェクト・プリミティブを作る関数
- `Number(input)`は文字列としてinputに入った数字を数値型に変換する。`Number("hoge")`などのように文字列を入れると`NaN`が返る
- `NaN`は自分自身ともイコールにならない、`NaN === NaN`がfalseになるという変わった性質を持つ
- NaNが計算途中に混ざるとそれ以降全部NaNになっちゃう。困ったやつ。
- IEEE 754 はプログラマは読んでおこう
- https://ja.wikipedia.org/wiki/IEEE_754
- Gennyさんの繁忙期が早く落ち着くと良いな🙏

- haruguchi
- 暗黙的な型変換はバグの温床になりやすい
- できるだけ明示的に型変換する(コンストラクタ、)または===で厳密にかたを比較する
- NaNはIEEE754で規定されている(知らなかった)
- 久しくJS触ってないから忘れてたけどやっぱり凶悪な設計だなぁw

- karlley
- `==`はオペランドが同じ型になるように変換する　-> 暗黙的な型変換
- 暗黙的な型変換は`==` 以外でも起きる
- コンストラクタ: オブジェクト、プリミティブを作る関数
- `parseInt` は数値を抽出する
- NaNが発生すると計算できなくなる
- NaNは自分自身とも一致しない(未だにイメージが湧いていない🤔)
- だんだん難しくなってきたのをめっちゃ感じる😅
- コンソールで実際に手を動かし方が理解が進む気がする

<hr/>

## 🗓 2024-3-24(日)

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

### 📙 読んだところ
- from
- https://jsprimer.net/basic/implicit-coercion/#unsolved-problem
- to
- (https://jsprimer.net/basic/function-declaration/#function-destructuring)

### 次回
- https://jsprimer.net/basic/function-declaration/#first-class-function

### 📝 学んだこと・感想・雑談
- @sugiwe
- 空文字列とは「String型で文字長が0の値」、と言い換えられる
- Booleanは楽をするための型変換で、安易に使うと意図しない結果になる場合がある
- 関数宣言の時は「仮引数」で関数呼び出しの時は「引数」。言い方が違って混乱したけど、むしろわかりやすいかも？
- JavaScriptでは、関数に定義した仮引数の個数と実際に呼び出したときの引数の個数が違っても、関数を呼び出せる
- 呼び出し時の引数が少ないとき：undefinedが代入される
- 呼び出し時の引数が多いとき：多い分は無視される
- `Rest parameters`は残余引数とも言い、可変長引数で使える
- `arguments`も可変長引数を扱う方法としてあるけど、コードが少しわかりにくくなるので基本的には使わない方が良さそう？`Rest parameters`が使える場合は`Rest parameters`を使う
- 関数の引数に分割代入を使うところが難しかった…

- @yumiya
- 関数に渡す引数は「"仮"引数」と呼ばれる
- 関数定義時に渡される引数の数が定まっていないから『仮』がついている？
- 呼び出す引数が足りない場合は、足りない仮引数には`undefined`が代入される
- 引数の数が定まっていない場合は"可変長引数"を使用する
- 仮引数名に「`...`」をつけることで、Rest parametersとして変数に配列を代入して、関数に渡すことができる
- 配列を展開して渡す際は、Spread構文を使用する
- Spread構文：　`...配列が格納された変数`
- [関数の引数と分割代入](https://jsprimer.net/basic/function-declaration/#function-destructuring)がわかりにくかった

- @karlley
- 関数定義部の引数は「仮引数」、関数呼び出し部は「引数」と呼ばれる
- 関数はreturnを省略するとundefinedが返る
- 関数定義部の仮引数の定義時の仮引数よりも呼び出し時の引数の数が多い場合はあふれた引数は無視される
- Rest parameters(`...`)で可変性引数を設定できる
- arguments
- Array Likeなオブジェクト
- 配列で呼べる
- Arrayのメソッドは呼べない
- Rest parameter使える場合はそっちを使う
- 変数を定義しているイメージ
- オブジェクトが出てくると急に難しくなる...
- 進みがとても良い気がする😁

<hr/>

## 🗓 2024-3-30(土)

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

### 📙 読んだところ
- from
- https://jsprimer.net/basic/function-declaration/#first-class-function
- to
- https://jsprimer.net/basic/statement-expression/#isolate-block-statement

### 次回
- https://jsprimer.net/basic/statement-expression/#function-statement-and-function-expression

### 📝 学んだこと・感想・雑談
- @sugiwe
- 関数はオブジェクトで、変数に代入したり変数の引数として渡すことができる
- 関数を値として変数に代入するのが「関数式」で、これだと関数名（functionのすぐ右に書くやつ）は省略できる。変数名で参照できるから。
- 一方、変数を使わない関数宣言では、関数名は省略できない（その関数を参照するための名前が何もつかないことになっちゃうから）
- つまり「関数式」では、名前のない関数を変数に代入して使っていける。この、名前を持たない関数のことを「無名関数・匿名関数」と呼ぶ。
- ちなみに、「関数式」でも関数名を付けることができる。でも関数の外からはよべず、その関数の中で再帰的に呼び出す際などに利用する
- 関数式の書き方として以下の２つがある
- functionキーワードを使った方法
- `=>` Arrow Function を使った方法
- コールバック関数は、引数として渡される関数のこと。
- コールバック関数を引数として使う関数やメソッドを、高階関数と呼ぶ
- この辺り、省略記法なども相まって全然覚えられていない、、、
- 式は、値を生成して変数に代入できるもの。
- 文は、処理する1つのステップ。
- 式は文になれるが（式文と呼ぶ）、文は式になれない
- 文のが塊として大きいものになることが多いのかな？と思った。文の中の一部分として式が入ってきたり。
- ちょっと眠かった。。。シャンとしたい

- @karlley
- コールバック関数を引数として使う関数、メソッド -> 高級関数
- 関数式を使うと`function` を省略できる
- アロー関数は条件によって`()`、`{}`、`return` を省略できる
- 引数が1つ
- 関数の処理が1つの式
- 代入できるもの: 式
- 代入できないもの: 文
- 式を文にしたもの: 式文(←よくわかっていない...)
- jsだいぶ忘れてきていることに気づいた😇
- はやくjsのプラクティスに進みたい！
- 2人での輪読会にしては進むスピードが早かった！もう少し掘り下げて読み進めてもよいかも？？
- jsへの恐怖感は無くなったけど、どーやっても好きだとは思えないのでどうにか克服したい
- 日本語むずかしい...

### ★メモ
読み手交代のタイミングで
「ここまでで何かありますか？」を、基本聞くことにする！

<hr/>

## 🗓 2024-3-31(日)

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

### 📙 読んだところ
- from
- https://jsprimer.net/basic/statement-expression/#function-statement-and-function-expression
- to
- https://jsprimer.net/basic/loop/#do-while-statement

### 次回
- https://jsprimer.net/basic/loop/#for-statement

### 📝 学んだこと・感想・雑談
- @sugiwe
- 文はセミコロンで終わるけど、ブロックで終わる文ではセミコロン不要
- if文はブロックの記号`{}`を省略できるらしいけど紛らわしいので基本的には省略しない
- JSは`else if`。Rubyは`elsif`。
- ネストが深くなってきたらシンプルに書けないか考え直す
- switchは`break;`で抜ける（忘れると、その続きのcaseも実行されちゃう）
- なのでswitchは関数にラップする形で使うと、関数であれば`return`で戻り値を持って抜けるので、`break;`もいらないし書きやすい
- `do while`は、条件が後側に来て、1回目は条件へのマッチに関係なく実行される。Rubyにはない書き方。
- 話者切り替えのタイミングで振り返るの、良さそう！

- @karlley
- ChromeのREPLはをEnterで環境がリセットされるのでconstでの再宣言できる
- Enterすればconstで変数をすぐに宣言できるので便利
- 再宣言できるようになっているイメージ
- どこが式でどこが文なのか意識してコードを書くことが大事(まだちょっとフワッとしているので式と文を読み直そう...)
- 変数に代入できたら式くらいの簡易的な考え方で良さそう
- switchは関数をラップするイメージで使う
- breakがreturnに置き換わるイメージ
- 「ここまで何かありますか？」は色々深掘れるので良さげ！

- haruguchi
- ブロックで終わる文はセミコロン不要
- 基本的にはセミコロンは自分で挿入する癖をつけたほうがいい(バグるから)
- 制御フローはRubyと同じ感じ。Switch文の癖が強い。
- いい感じで進んでる。ループはちょっと難しいかもだけど。
- 舌下免疫療法をちゃんと毎日できる人間になりたい。
- 木曜、金曜で沖縄行ったんですが(RubyKaigiの下見)暑かった。
<hr/>