# 2022/4/18 週
###### tags: `JavaScript`

## 開催概要
[JavaScript Primer輪読会について \- HackMD](https://hackmd.io/qj69tJBhTryCBRhxKuYuZA#%E9%96%8B%E5%82%AC%E3%81%AE%E6%A6%82%E8%A6%81)

## 読み物(Web版)
- [JavaScript Primer \- 迷わないための入門書 \#jsprimer](https://jsprimer.net/)

## サンプルコード
- サンプルコード(Github)・・・cloneしてダウンロードする
[asciidwango/js\-primer: JavaScript Primer \- 迷わないための入門書](https://github.com/asciidwango/js-primer)

## 参加者
- @cafedomancer
- @haruguchi-yuma
- @garammasala29
- @Maeda8
- @napple29 はるな
- @ryotori1024
- @Saki
- @SatoshiHaramura
- @shucream-p
- @Aseiide
- @lef237
- @hyumanase

## 目次

[TOC]

-----

## 2022/4/18(月)

### 連絡事項や確認・相談

### 進行係

### ドライバー

### 読んだところ

### 次回

### 先輩が教えてくださったこと

### 自由に使う共有スペース

### 各自の疑問点や気づき、学んだこと
- @cafedomancer

- @haruguchi-yuma

- @garammasala29

- @Maeda8

- @napple29 はるな

- @ryotori1024

- @Saki

- @SatoshiHaramura

- @shucream-p

- @aseiide

- @lef237

- @hyumanase

### 本日の振り返り(よかった点・次回に向けての改善点等)
- @cafedomancer

- @haruguchi-yuma

- @garammasala29

- @Maeda8

- @napple29 はるな

- @ryotori1024

- @Saki

- @SatoshiHaramura

- @shucream-p

- @Aseiide

- @lef237

- @hyumanase

### 明日質問・確認したいこと(名前不要)

-----

## 2022/4/19(火)

### 連絡事項や確認・相談

### 進行係
- @SatoshiHaramura

### ドライバー
- @garammasala29

### 読んだところ
- [JavaScriptとは · JavaScript Primer \#jsprimer](https://jsprimer.net/basic/introduction/#script-module)

### 次回
- [変数と宣言 · JavaScript Primer \#jsprimer](https://jsprimer.net/basic/variables/#const-is-not-constant)

### 先輩が教えてくださったこと

### 自由に使う共有スペース

### 各自の疑問点や気づき、学んだこと
- @cafedomancer

- @haruguchi-yuma

// コメント
const hoge = 'hoge';　再代入できない変数の宣言(と代入)
let foo = 'foo'; 再代入可能な変数の宣言(と代入)
var // これはやばいやつ
let bar;
bar // => undefined

- @garammasala29
- constは再代入不可、letは可
- letでの変数宣言は自動的に`undefined`になる
- ｃonstはコンスタント(定数)の略

- @Maeda8
- constは値の再代入ができない変数を宣言することができる
- 初期値が必要
- let, varは値の再代入が可能な変数を宣言できる
- 初期値を指定しない変数を定義できる。その場合デフォルト値としてundefinedが入る
- letとvarの違いとして同じ名前の変数を再定義できない点が挙げられる。（意図しない値の上書きを避けることができる）

const foo = {name: "piyo"}
foo["name"] = "piyopiyo"
foo
{ name: 'piyopiyo' }

- @napple29 はるな
- constは再代入できない
- letは再代入できる
- varは過去の遺物
- 変数の宣言というものに慣れない、、

- @ryotori1024
- const:再代入できない変数の定義
- let:値の再代入ができる変数の定義
- var:同じ名前の変数を再定義できる(あまり使わない方が良い)

- @Saki
- `let`は再代入できるけど、再定義はできない
- 初めて読んだ時、再定義と再代入を同じだと思ってたので、違いを整理しました
- 再定義：すでに宣言してる変数`x`をもう一度まったく別個の新しい変数`x`として宣言すること
→`var`はこれができてしまうので問題のもとになってる。
　　 再定義してしまう(=`var 変数名 = 値`や`let 変数名 = 値`など、先頭に`var`や`let`を付けてしまう)と、再代入ではなく再定義になってしまう。
　- 再代入：再定義ではなく、同じ変数`x`の[* 値(中身)だけを変える]こと
　　再代入するときは`変数名 = 値`。先頭に`let`や`var`は付けない。
- ブラウザのコンドールで動かしたときの挙動
- JSの`let x;`みたいに、Rubyで変数の宣言だけをできるのかirbで試したらだめでした

  irb(main):001:0> x
  (irb):1:in `<main>`: undefined local variable or method `x` for main:Object (NameError)
  (x という変数orメソッドは無いとおこられる)

- なのでRubyの世界には再代入しかなくて、再定義という概念が存在しない、ということで合ってる？

- @SatoshiHaramura
- 変数の`宣言`と`代入`は異なる。
- 使用する優先順位
- const
- let

- @shucream-p
- 変数の宣言には`const`、`let`、`var`の3つある。
- `var`は同じ名前の変数を再定義できてしまうので、意図せず値を上書きしてしまう。そのため使用は避ける。

- @aseiide
- 基本はconstで変数を定義しつつ、数え上げのときだけletを使う
- varはスコープがでかいからあんま良くない

- @lef237
- const, let ,varの違いについてわかりました
- varは基本的に使ってはいけない！

- @hyumanase

- @fuwa
- const, var, letの違いがわかりました
- varは基本NG

### 本日の振り返り(よかった点・次回に向けての改善点等)
- @cafedomancer

- @haruguchi-yuma
:::danger
varはやばい（けどよく見る）
:::

- 僕ほとんど見たことないんですけど、どこで見ました? :kininaru:
- あと `:::` この書き方行けるんですね。 :+1:
- @garammasala29
- Devツール以外のよさげなコンソール、何かありそうですかね？
- 気になる
- ターミナルのnodeしか思いつかない、、、
- ぱっとは思いつかんすね
- 後方互換性をどこまでフォローしましょうか。。。

- @Maeda8
- 確かにコンソール他にないのか気になる！！

- @napple29 はるな
- 流石にまだいけてますがキャメルケース見ると動悸しますね（苦手すぎて）:cry::scream::kowai:

- @ryotori1024
- この辺はまだ簡単
- 前に仕事で見ていたJSのコードがバリバリvar使っていたので、昔からあるコードには使われているっぽい感じ
- やっぱ古いやつだとvar残ってるんすね。

- @Saki
- まだ大丈夫!
- 疑問あるけど発言が怖い方はスレッドで送ってもらえたらいいかなと思います〜☺️
- @SatoshiHaramura

- @shucream-p
- まだ大丈夫そうです😄

- @aseiide
- まだ行ける
- [余談]GWに、パRails読みたい人募集してます。https://discord.com/channels/715806612824260640/823739924615790622/965877747211722772

- @lef237
- 変数の宣言をする必要があるのが新鮮でした
- Rubyとの違いも意識していきたいです！

- @hyumanase

- @fuwa
- 途中からでしたがラジオ参加できてよかったです〜JSのプラクティスで詰まっているので良い感じに基礎から学習できそうです
- wakaru

### 明日質問・確認したいこと(名前不要)

-----

## 2022/4/20(水)

### 連絡事項や確認・相談

### 進行係
- @Aseiide

### ドライバー
- @Maeda8

### 読んだところ
- [変数と宣言 · JavaScript Primer \#jsprimer](https://jsprimer.net/basic/variables/#const-is-not-constant)

### 次回
- [値の評価と表示 · JavaScript Primer \#jsprimer](https://jsprimer.net/basic/read-eval-print/#syntax-error)

### 先輩が教えてくださったこと

### 自由に使う共有スペース

### 各自の疑問点や気づき、学んだこと
- @cafedomancer

- @haruguchi-yuma
- REPLをずっとあーるいーぴーえると読んでいた。
- 前田さんのコンソールはJS愛が足りないので拡大できないことがわかった
- denoというサーバーサイドの実行環境が最近?できたらしいので使ってみたい
- :eyes:

- @garammasala29
- 変数宣言自体は何も返さないという意味で`undefined`が返る
- REPLは「りぷる」、1行入力すると即座に実行して結果を返してくれるもの

- @Maeda8
- `const`で定義した変数は定数ではないことを知った
- デベロッパーツールの文字拡大はcommand+^
- US配列の人はcommand + shift +`+`でできてそうだった
- REPLはりぷると読む

- @napple29 はるな
- constは変数宣言
- コンソールの拡大は`⌘+^`
- ⌘これどうやって出すんですか？　⌘
- コマンドで変換すると出ますよ！！はるぐちさん話聞いて :🤣
- HTMLでJSを読み込みたいときにはheadタグ内で`<script~`を書く

- @ryotori1024
- constは「再代入できない変数」を定義する変数宣言であり、必ずしも定数を定義するわけではない
- 数値や文字列などプリミティブな値で初期化すれば実質的に定数になる
- オブジェクトをconst宣言した後は、後から値の変更が可能(再代入というより参照の変更?)

- @Saki
- REPLは「りぷる」と読む
- コンソールの拡大、私のは`command + ^`でできました
- constは定数を定義しているわけではない。中身変更できる!

- @SatoshiHaramura
- `const`は、オブジェクトの中身に対して代入して、変更できる
- jsファイルは、htmlファイルから読み込む
- @shucream-p

- @aseiide
- REPLの読み方を初めて知りました。
- constは「再代入できない変数」を定義する変数宣言であり、必ずしも定数を定義するわけではない
- オブジェクトの値は変更できる

- @lef237
- ブラウザでのJavaScriptの使い方が分かりました！
- Console APIすごい！
- エラーをちゃんと読む👀
- 質問に答えてくださりありがとうございました！

- @hyumanase
- ガラムマサラさんありがとうございます→ REPL りぷる
- 「ガラムマサラ」ってこのような意味だったんですね！

- > あわてずにそのエラーメッセージを読むことで多くの問題は解決できます。
- エラー文怖がらずに読もうと思いました。↓たしかに次回気になります〜

- @fuwa
- REPLは「りぷる」と読む。そもそもREPL初めて聞きました。。
- エラー文の読み方がよくわからないので次回気になります〜

### 本日の振り返り(よかった点・次回に向けての改善点等)

- @haruguchi
- 駒形さんの話のくだり、ぼーっとしていて聞き逃してしまった、、、
- 突然会話から離脱されてたのでびっくりしました(笑)
- お米炊いたか気にしてたらああなりましたww :naruhodo:
- ⌘はコマンドで出る！！！！！！！

- @napple29 はるな
- 自作サービス終わらない、、
- 無計画にbulma入れましたが使える色が少な過ぎて絶望しています、、、、笑　TailwindCSSに乗り換えようかな、、こんなことで悩んでる場合じゃないのに感がすごい
- 色カスタマイズできますよ！
- それは簡単ですか、、、🥺？？？？？笑
- 僕は詰まりましたが、、はるなさんなら、、、
- @ryotori1024
- 最近、夜が涼しくなってきたので勉強が快適になってきた。

- @hyumanase
- いでさんの解説たすかりました！！
- 駒形さん話し方やさしいと思います🙋🏻

- @fuwa
- そういえば駒形さんとお話ししたことない！ :gogo!:

- @Saki
- 今やってるチーム開発のissueでエラー出ることのありがたみをめちゃくちゃ実感してます
- 私もガラムマサラさんのプロフィールさんの初めて見たとき、外国の方かと思ってました!
- हिंदी, हिन्दी
- @SatoshiHaramura
- 質問タイムでVueについて駒形さんに質問させてもらいました！駒形さん、おやさしかったです😄

- @aseiide
- 拡大は英語配列か、日本語配列かによりそう
- ^ キャレット、ハット

- @Maeda
- `^`はキャレットと読む。ハットとも読む
- haruguchiさんが偽名だったのLT会でしれっと発表されて、かなりざわついていたのを思い出しましたw
- 偽名って文字のインパクトがやばかったですね
- 今ざわついてます :crab:

### 明日質問・確認したいこと(名前不要)

-----

## 2022/4/21(木)

### 連絡事項や確認・相談

### 進行係
- @ryotori1024

### ドライバー
- @garammasala29

### 読んだところ
- [値の評価と表示 · JavaScript Primer \#jsprimer](https://jsprimer.net/basic/read-eval-print/#syntax-error)

### 次回

### 先輩が教えてくださったこと

### 自由に使う共有スペース

### 各自の疑問点や気づき、学んだこと
- @cafedomancer

- @haruguchi-yuma
- プリミティブ型は7種類
- プリミティブ型はイミュータブル
- プリミティブ型以外はオブジェクト
- ただ、後で出てくると思うけど文字列などはプリミティブ型のくせに暗黙の型変換でオブジェクトになる時がある。
- typeof null //=> object　はバグ
- 配列はオブジェクトの一種　`Object.keys(['a', 'b']) // ['0', '1']`
- @garammasala29
- プリミティブ型は真偽値や数値などの基本的な型、7種類ある
- オブジェクトは複合型と呼ばれ変更可能(ミュータブル)、配列もオブジェクト
- (キーがあるようです。)
- `typeof`演算子でデータ型を調べられるが、nullはオブジェクトが返ってくるので注意が必要

- @Maeda8
- referenceは「参照」という意味
- 値の型のことをデータ型という（プリミティブ型とオブジェクトに分けられる）
- プリミティブ型はイミュータブル
- オブジェクトはミュータブル
- typeof演算子でデータ型を調べることができる
- nullのデータ型がobjectであるのに注意する
- 配列はobject、関数はfunctionと出てくる
- ややこしすぎる
- 数値についての箇所は毎回調べることになりそう

- @napple29 はるな
- データ型はプリミティブ型とオブジェクトに分けられる
- nullはプリミティブ型だけど`typeof`すると`object`
- `typeof`はプリミティブかオブジェクトかをざっくり判別してくれる
- undefinedもデータ型の一つなのが意外、エラーみたいな気持ちでいた

- @ryotori1024
- データ型にはプリミティブ型とオブジェクト型の2種類がある
- プリミティブ型
- 真偽値や数値などの基本的な型のこと
- 一度作成したら変更できないイミュータブルの性質をもつ
- オブジェクト型
　　- プリミティブ型以外のデータ(配列、オブジェクト、関数、正規表現、Dateなど)
- プリミティブ型の値や一部のオブジェクトはリテラルを使うことで簡単に定義できる
- リテラルの種類(今日学んだもの)
- 真偽値
- 数値

- @Saki

- @SatoshiHaramura
- `typeof`は、戻り値がふわっとしているので、あまり使わないほうがよい？と思った
- `typeof null`は、`object`が返って来るバグ
- データの型は大きく2種類
- プリミティブ型
- オブジェクト

- @shucream-p
- データ型は大きく、プリミティブ型とオブジェクトの二つに分かれる。
- `typeof`演算子はプリミティブ型かオブジェクトを判定する。オブジェクトの詳細な種類は判定できない。

- @Aseiide

- @lef237
- JavaScriptでのエラーの読み方が分かりました！
- データ型が、プリミティブ型とオブジェクトで分かれているので、違いをちゃんと意識しようと思います。💪

- @hyumanase

- @fuwa
- エラーには実行時エラーと構文エラーの2種類がある
- エラーはちゃんと読んだりググったりすることが大事！
- データ型にはプリミティブ型とオブジェクトの2種類がある
- プリミティブ型以外はオブジェクトという認識でおｋ
- オブジェクトの枠組みざっくりしてるなぁ。。

### 本日の振り返り(よかった点・次回に向けての改善点等)
- @cafedomancer

- @haruguchi-yuma
- 今日もなんかぼーっとしてたら1日が終わった。
- そうか、JavaScriptは肩がふわふわしてるからTypeScriptみたいなやつが必要になるのか！！
- 肩

- @garammasala29
- 今日は暖かかった〜札幌は今週桜が開花しそうです

- @Maeda8
- データ型勉強になりました！

- @napple29 はるな
- プラクティス終わっているとは思えないくらいデータ型知らなかったです、、
- 金曜だと思ってたのに木曜だった

- @ryotori1024
- 最近ようやく勉強の意欲が出てきた

- @Saki

- @SatoshiHaramura
- Vueと格闘し続けて、プラクティスが少し前進しました😭まだ戦います...
- 💪🏻

- @shucream-p
- OOP版ボウリングやっとOKもらえたんですが、lsはもっと難しそうで緊張します😇
- 🎉　:100::100::100::100::100::100::100::100::100::100::100::100::100::100::100::100:
- :tada::tada::smile_cat:

- @Aseiide

- @lef237
- VSCodeのプラグインをもっと色々調べてみようと思います。
- typo（タイプミス）と全角半角を表示するもの⌨
- https://bootcamp.fjord.jp/questions/1155　すでに見ているかもですが、過去にプラグインのQ&Aもありました！全角見つけてくれる系は挙げられてないですが、、😂
- 今Rubyのカレンダーのプラクティスに取り組んでいますが、難しい！📅

- @hyumanase
- 出先で音声だけ聞かせていただいてました
- 正直音声だけだと今日の内容を頭に入れるの難しかったので、hackMDのみなさんのまとめ助かります🙏🙏
- (「今日はこういうこと学習してたんだな...🤤」)

- @fuwa
- 今メモアプリのプラクティスでエラーが出てしまっているのでいろいろ調べようと思いますー
- :muscle: :cat:

### 明日質問・確認したいこと(名前不要)

-----

## 2022/4/22(金)

### 連絡事項や確認・相談

### 進行係
- @napple29 はるな

### ドライバー
- @haruguchi-yuma

### 読んだところ
- [データ型とリテラル · JavaScript Primer \#jsprimer](https://jsprimer.net/basic/data-type/#bigint-literal)

### 次回
- [データ型とリテラル · JavaScript Primer \#jsprimer](https://jsprimer.net/basic/data-type/#primitive-and-wrapper-object)

### 先輩が教えてくださったこと

### 自由に使う共有スペース

### 各自の疑問点や気づき、学んだこと
- @cafedomancer

- @haruguchi-yuma
- リテラルを細かく見ていった
- オブジェクトのアクセスは"でも'でも\`でも大丈夫

- @garammasala29
- 大きな数を計算する際にはBigIntリテラルで数値の後ろに`n`を付けて計算するとよい
- JSのテンプレートリテラル内での変数は`#`ではなく`$`
- オブジェクトのキー名は文字列かSymbolを指定する、バリューはプリミティブ型

- @Maeda8
- `Number.MAX_SAFE_INTEGER`（2^53 - 1）よりも大きな整数を扱うときはBigIntを使用する
- テンプレートリテラルは、バッククォートで囲んだ範囲を文字列とするリテラルのこと
- `null`は値がないということを表現する値のこと
- `let hoge;`には初期値として`undefined`が入る
- `undefined`はグローバル変数
- 予約語ではないため、変数名として使用できる
- オブジェクトのキーは文字列かSymbolを指定する。値はなんでもOK
- 配列の最後の要素を取りたい時は、`array[array.length - 1]`で取れる

- @napple29 はるな
- 2^53-1以上の数を正確に使いたい時はBigIntとして末尾にnをつける
- 桁の大きい数字を可視化しやすくするために数値の間に_を入れられるが、数値リテラルの前後には入れられない
- ``バッククォートの中では改行ができる
- undefinedは独自に定義できてしまうが混乱の元だからやめよう
- 配列[-1]で最後の要素にアクセスできない

- @ryotori1024
- 数値リテラルで扱える範囲は2^53-1まで
- BigIntリテラルを使うことで、2^53-1以上の数値を扱える
- BigIntリテラルでは数値の後ろにnをつける
- 数値内では区切り文字として「_」が使える。(一応どこにでもかける)
- 文字列はダブルクォートとシングルクォートどちらで囲んでも良い
- テンプレートリテラルはバッククオート内で囲んだ文字列内で「$(変数名)」とすることで変数の値を出力できる
- undefinedはリテラルではない

- @Saki

- @SatoshiHaramura
- 数値リテラルで`_`のNumeric Separatorsは、数字の区切りが見やすくなる
- `` のテンプレートリテラル内で、式展開できる。便利そう。
- オブジェクトのキーに対応する値を参照するときは、ブラケット記法(`[]`)が便利そう。ドット記法(`.`)でキーが数値だと利用できない。

- @shucream-p

- @Aseiide

- @lef237

- @hyumanase
- すみません、本日飛び飛びで参加してました。
- リテラルってなんだっけ?というところから理解をスタートしました。
- 普通は `new String('aaaa')`みたいにnewキーワードを使ってコンストラクタ関数で生成するんですが、文字列とか正規表現とかはそれ専用の記法があって、それをリテラルというみたいです。 'string' /\d+/など
- 解説ありがとうございます！うーん、ちょっと自分には理解難しいかもです...😭 ぐぬぬ、、
- コンストラクタ関数とかがわからないです。。すみません(JS入門してきます、ふりがなプログラミングとか読もうかな)
- wwww okです。なるほどチェリー本よみます
- (また鍛錬したのち、haruguchiさんの解説文を読み直してみよう)

- @fuwa

### 本日の振り返り(よかった点・次回に向けての改善点等)
- @cafedomancer

- @haruguchi-yuma
- ドライバー楽しいですね:+1:
- なんとなく輪読会慣れてきた？
- @garammasala29
- 自作サービスの案出しはコードを書くのとは別の頭を使っているようで疲れますね

- @Maeda8
- リテラル難しい（雑なイメージ）　'' とか [] とか　{}とか　// のこと
- "foo"
- String.new("foo")

- @napple29 はるな
- 輪読会始まって1週間ですね！

- @ryotori1024
- JavaScript Primer買ってから全然読めてなかったので、皆さんと読めて楽しい
- 昼間に銭湯行ったら、いい天気すぎて露天風呂で寝てました💤

- @Saki

- @SatoshiHaramura
- あっという間に金曜日だ〜1週間が早い💦

- @shucream-p

- @Aseiide

- @lef237

- @hyumanase
- 17時に歯医者で麻酔5,6発打ったら、輪読会ボイス参加できないことがわかりました💪
- 水、勘でのんでます🤤
- jsprimer一人では挫折して積ん読になりそうなので、改めてこの輪読会ができて感謝しております🚀
- :waiwai:

- @fuwa

### 明日質問・確認したいこと(名前不要)

-----