# 【2024幎4月】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-4-6(土) ### 🧑🏻‍💻 ファシリ/ドラむバヌ - ファシリ: @GennyBoy - ドラむバヌ: @karlley ### 📙 読んだずころ - from - https://jsprimer.net/basic/loop/#for-statement - to - https://jsprimer.net/basic/object/#object-instance-object ### 次回 - https://jsprimer.net/basic/object/#property-access ### 📝 孊んだこず・感想・雑談 - @sugiwe - break文の䟋のずころで、関数を䜿う堎合はreturnしないずいけないっおずころが前にも出おきた気がしたなず思っお読んでいた - someメ゜ッド、filterメ゜ッドなど䟿利そうなので䜿いこなしたい - for...inはあたり䜿わない方がいいでも読むためには芚えないずいけないのか  - `プロパティ名ず倀に指定する倉数名が同じ堎合は{ name }のように省略しお曞ける`混乱しそう、、、 - 今日は今日も眠かった - 僕も瞄跳び始めたした。50回×3をやり、それを2セットでクタクタ - haruguchi - JSの配列の䟿利メ゜ッドは日々増えおいっおるから簡単に目を通しおおくずいい。(昔のJSしか知らない人は驚く) - JSなれるには関数が第䞀玚垂民ずいうのになれる必芁がありそう。(高階関数、コヌルバック関数、そしおオブゞェクトのメ゜ッド、、、) - 2月から瞄跳び飛んでおやっず3分跳び続けられるようになった -　4月なのでお花芋に行きたい - @kalley - 高階関数: 関数を匕数ずしお受け取る　or 関数を倀ずしお返す関数 - `continue` はRubyの`next` ず同じ意味 - jsの匕数はゆるゆる、必芁なものだけ枡せばよい(無芖される) - 配列はオブゞェクトの䞀皮 - iterableオブゞェクト: Symbol.iteratorずいう特別な名前のメ゜ッドを実装したオブゞェクト - for~が倚すぎる - なぜかレむザヌラモンHGが浮かびたした - wakaranai www - ちょっず難しかったけどハルグチさんの解説で乗り越えれた ありがずうございたす。 - そういえば錻氎止たった...先週のあれはなんだったんだろう - 止たらない、、、 - @yumiya - 1週間空いおしたったので、関数の定矩など぀いおいけおいない郚分が倚かった。。 - [配列のfilterメ゜ッド ](https://jsprimer.net/basic/loop/#array-filter) - 匕数は3぀currentValue, index, arrayあるが、サンプルコヌドでは最埌の`array`しか䜿われおいない - JavaScriptでは匕数は必芁なものだけが䜿甚されるよう - [Array.prototype.filter()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) - [for...in文](https://jsprimer.net/basic/loop/#for-in-statement) - 配列の䞭身を反埩凊理する堎合は`for..of`を䜿うほうがよい - [for..of](https://jsprimer.net/basic/loop/#for-of-statement)は、配列の”倀”を列挙しおくれる - [オブゞェクトを䜜成する ](https://jsprimer.net/basic/object/#create-object) - objectのキヌ名ずプロパティ名が同じならコロンなしで省略できる - `{name: name}` -> `{name}`でOK - @genny - ご無沙汰しおおりたした。子䟛の嘔吐で起きられたした。 - 生きおおよかった - `for...in` は扱い方が難しい&代替があるのでできるだけ䜿わない - プロパティメむト倀に指定する倉数名が同じ堎合は省略できる - コヌルバック関数はいただに分かったようで分かっおるか分からないものランキングTOP - Rubyのブロックず䞀緒 - 僕も同じ... <hr/> ## 🗓 2024-4-7(日) ### 🧑🏻‍💻 ファシリ/ドラむバヌ - ファシリ: @yumiya - ドラむバヌ: @sugiwe ### 📙 読んだずころ - from - https://jsprimer.net/basic/object/#property-access - to - - https://jsprimer.net/basic/object/#object-property-is-to-string ### 次回 - https://jsprimer.net/basic/object/#static-method ### 📝 孊んだこず・感想・雑談 - @sugiwe - プロパティぞのアクセスは、基本的にはドット蚘法を䜿い぀぀、ドット蚘法でかけない堎合にブラケット蚘法を䜿うようにする - constで定矩したオブゞェクトは、倉曎できる - constは、倀を定矩するものではなく、倉数ぞの再代入を防ぐもの。 - JS では存圚しないプロパティにアクセスするず䟋倖が返らず`undefined`が返る - `!== undefined`だず、プロパティが存圚しおいないのか、`undefined`が入っおいるのかは区別が぀かないので、存圚確認にはin挔算子やObject.hasOwn静的メ゜ッドを䜿うず良い。 - ただし、実甚的には`!== undefined`でも良かったりするずいうのが面癜かった - `!== undefined`を`&&`でたくさん繋げるのも冗長なので、そこでOptional chaining挔算子`?.`が䜿える。これはドット蚘法`.`の代わりに`?.`でプロパティアクセスをするもの - `undefined.name`だず゚ラヌになるけど、`undefined?.name`のように、巊蟺のオペランドがnullishの堎合でも゚ラヌにならずundefinedが返るので゚ラヌにならず䟿利。 - @yumiya - プロパティの有無を確認する際には、`in`挔算子たたは`Object.hasOwn`静的メ゜ッドを䜿う - `Object.hasOwn`静的メ゜ッドはES2022察応ブラりザで䜿甚できる - ChromeやSafariなどのモダンブラりザはES2022察応が完了しおいるよう - [正匏仕様リリヌス JavaScriptの最新仕様ES2022で远加された「党」新機胜](https://zenn.dev/tonkotsuboy_com/articles/es2022-whats-new) - より厳密にプロパティの有無を確認する堎合は、[Optional chaining挔算子?.](https://jsprimer.net/basic/object/#optional-chaining-operator)も合わせお利甚する - [オブゞェクトの分割代入](https://jsprimer.net/basic/object/#object-destructuring)を埩習する - [【JavaScript】「分割代入」に぀いお](https://qiita.com/kamijodev/items/ca007a264a3a0f1d1c8b) - [分割代入Destructuring Assignment](https://zenn.dev/goldsaya/articles/f5135a4eae09fe) <hr/> ## 🗓 2024-4-13(土) ### 🧑🏻‍💻 ファシリ/ドラむバヌ - ファシリ: @genny - ドラむバヌ: @sugiwe ### 📙 読んだずころ - from - https://jsprimer.net/basic/object/#static-method - to - https://jsprimer.net/basic/prototype-object/#diff-in-operator-and-object-hasown ### 次回 - https://jsprimer.net/basic/prototype-object/#create-method ### 📝 孊んだこず・感想・雑談 - @sugiwe - オブゞェクトのマヌゞは`Object.assign`ず、spread構文を䜿う方法がある。 - `Object.assign`はshallowコピヌなのでネストした先のオブゞェクトは耇補しない。なので耇補しお倀をいじる、みたいなずきに泚意 - deep copyずいうのもある - プロトタむプオブゞェクトの章に入っおペクワカランずなった - プロトタむプメ゜ッドず同名のむンスタンスメ゜ッドがあればそれが優先される - `Object.hasOwn`がそのオブゞェクト自䜓に定矩されおいるメ゜ッドを探すずいうのは、`hasOwn`ずいう名前でなるほどず思った - haruguchi - 気づいたら4月の䞭旬でショックを受けた - プロトタむプずいう考え方がなかなか難しいので最初はふヌんでいいず思う。特に気にしなくおもある皋床は曞けるようになっおきた。 - spred構文は至る所で出おくるので慣れた方がいいRubyだずhashには`**`で展開するし配列やrangeには`*`で展開するので蚘号が違うがJSは同じ。 - deep copy は JSON.stringifyしおparseする方法ずかもあったりするし、今日出たみたいに再垰関数自分で曞いたりもするラむブラリ䜿うこずもある。 - 䞀昚日東京行っお、昚日朝むチで垰っおきたので朝型になった。 - @yumiya - オブゞェクトずはプロパティの集合であるだからKeyずValueを扱うメ゜ッドが甚意されおいる - オブゞェクトのマヌゞには、`Object.assign`メ゜ッドたたは`
`(spread構文)を䜿う - ES2018からプロパティに`
`(spread構文)が䜿えるようになった - オブゞェクトのマヌゞを行う際には、あずに指定したプロパティで䞊曞きされる - オブゞェクトを耇補する関数は甚意されおいないので、空のオブゞェクトを䜜っおから代入する - `Object.assign`メ゜ッドはコピヌするオブゞェクトのプロパティを"浅く"コピヌする - ネストしおいるオブゞェクトのプロパティたではコピヌしない - ほずんどすべおのオブゞェクトは`Object.prototype`プロパティに定矩された`prototype`オブゞェクトを継承しおいる - `Object.prototype.toString`を`Object#toString`のように、"#"で省略できる - ただし”#”はプラむベヌトメ゜ッドを衚すので泚意する - "再垰関数"がよくわからなかったので埩習する([オブゞェクトの耇補](https://jsprimer.net/basic/object/#copy)の3぀目のサンプルコヌド) - 僕も同じです - 再key関数 - www - 再起しお頑匵ろう - @karlley - 同名のキヌを持぀オブゞェクトをマヌゞするず埌ろにあるオブゞェクトの倀が優先される - `...`、`Object.assign`どちらも共通 - ネストが深いオブゞェクトは耇補されおない(shallow copy) - 深いコピヌはラむブラリを䜿っお実装するいこずが倚いっぜい - プロトタむプチェヌン: むンスタンスからprototypeオブゞェクトのメ゜ッドを参照できる仕組み - 自分自身から芪(継承元)たでメ゜ッドを探しおいくむメヌゞ - だんだん難しくなっおきた😇 䜕回か読んで理解しおいくしかなさそう - @genny - Objectの耇補はスプレッド構文䜿っおやっおおけば良さそう - shallow copyずdeep copyの違い - なんか、䞀回目自分で読んだ時に完党に雰囲気で読み流しおいた `Object.prototype` を完党に理解した <hr/> ## 🗓 2024-4-14(日) ### 🧑🏻‍💻 ファシリ/ドラむバヌ - ファシリ: @genny - ドラむバヌ: @sugiwe ### 📙 読んだずころ - from - https://jsprimer.net/basic/prototype-object/#create-method - to - https://jsprimer.net/basic/array/#detect-array ### 次回 - https://jsprimer.net/basic/array/#typed-array ### 📝 孊んだこず・感想・雑談 - @sugiwe - Objectが持぀メ゜ッドずむンスタンスが持぀メ゜ッド、おのがある。䟋えば、`toString`メ゜ッドは、Objectのメ゜ッドじゃなくお`Array.prototype`のメ゜ッドが優先しお呌び出される - `hasOwnProperty`より`Object.hasOwn`静的メ゜ッドを䜿っおおくず良さそう - 配列内の䜕かを呌び出すにあたっお、`array[-1]`は`undefined`になる。`array.at(-1)`ずやるず、Rubyず同じ感じで最埌の芁玠を呌べる - 疎な配列、ずいうのがJSにはある。どういうずきに䜿うんだろう - `array.length`は盎感的にわかるけど`Array.isArray(obj)`みたいな曞き方がよく分からんなぁずいう話から、静的メ゜ッドずむンスタンスメ゜ッドの話を色々ずできおかなり孊びになった - @genny - 色々ず消化䞍良だけど、いい感じで分からないなりに議論しお、それなりのずころでストップできおいる気がする - 静的メ゜ッドずむンスタンスメ゜ッドの違い、特に組み蟌みオブゞェクトのむンスタンスメ゜ッドを呌び出す仕組みがいたいち分かっおいないこずに気づいた - むンスタンス化 -> むンスタンスメ゜ッド呌び出し - undefined ず null の違い、ここで芋たんだった - https://typescriptbook.jp/reference/values-types-variables/undefined-vs-null - @karlley - 完党に空のオブゞェクトを䜜りたいシュチュ゚ヌションがむメヌゞできなかった - 序盀に読んだ内容をもう忘れかけおいおショックだった笑 - 最初に読んだ時にも感じたがだんだん日本語が分からなくなっおくる - 1回で理解しにくいずころがだんだん増えおきた... - 悩むポむントや分からないポむントがだいたいみんな同じっぜいので安心したした <hr/> ## 🗓 2024-4-20(土) ### 🧑🏻‍💻 ファシリ/ドラむバヌ - ファシリ: @sugiwe - ドラむバヌ: @yumiya ### 📙 読んだずころ - from - https://jsprimer.net/basic/array/#typed-array - to - https://jsprimer.net/basic/array/#spread ### 次回 - https://jsprimer.net/basic/array/#flat ### 📝 孊んだこず・感想・雑談 - @sugiwe - 配列は分割代入できる。 - `undefined`っおいう名前の芁玠が入っおいる堎合ず、未定矩による`undefined`の違いが、玛らわしいなぁず思った - 閉区間(末尟は含たない)ず開区間(䞡端含む)ずいう蚀い方を知った。 - `indexOf`メ゜ッドは、オブゞェクトを倉数に栌玍するず発芋できなくなる - Spread構文`...`はconcatメ゜ッドずは異なり、配列リテラル䞭の任意の䜍眮に配列を展開できる。䟿利そう。 - メ゜ッドが次から次ぞず出おきお頭に入っおない。。。 - @genny - 分割代入は蚀葉ずどんなものかだけうっすら芚えおおきたい - 配列の䟿利メ゜ッドを色々知れた - Spread構文(`...`)は芚えおおきたい - 砎壊的メ゜ッドに泚意しおおきたい - @haruguchi-yuma - 眠すぎお3回くらい倩を仰いだ - 倩を仰いで寝るパタヌンなんですね。自分はデスクに䞋向きになりたす - 配列の䟿利メ゜ッドたちは倧䜓い぀もその郜床調べおる。(芚えられない) - `{a: 1} === {a: 1} // false` - 結構いいペヌスで進んでる - 先週焚き火台を買ったので焚き火しおきたす - キャンプ行きたしょう - kyannpushitai!!!!!!!!!! - 穎堎キャンプ堎あったら教えおください - 琵琶湖の呚りならどこでも空いおる - @kitarou - オブゞェクトの探玢はfindでは探せないのでsomeを䜿う - Rubyっお開空間だったんですね - 昚日0時すぎに寝たのに4時台に起きおしたったのでやっちたった感・・・ - 1幎以䞊぀づいた四十肩がようやく治っおきたので今日はひさしぶりに子どもずキャッチボヌルしおきたす⚟ - 黒板の高いずころ消せない - アンダヌスロヌだったらいけるのでは  - ピッチングマシヌン導入しよう - 巊で投げられるようにするう - 結論ストレッチしよう - @yumiya - `TypedArray`の䜿いどころがよくわからなかった - プリミティブな芁玠を探玢する堎合は`indexOf`を、オブゞェクトから倀を探玢する堎合は`findIndex`を䜿う - 芁玠自䜓がほしい堎合は`find` - 配列から指定範囲を取り出すずきには`slice`を䜿う - 終了䜍眮を瀺す第2匕数は**終了䜍眮の芁玠を含たない** - 配列䞭に任意の芁玠を含むか刀別したいだけなら`includes`を䜿甚する - Rubyの`include?`同じ - `unshift`ず`shift`は、どっちが远加でどっちが削陀か混乱しがち - 茪読䌚開始盎前に目が冷めお焊りたした😅 - 改定3版を買うか悩み䞭(623ペヌゞ😳) - [JavaScript解説曞の決定版 ES2022察応、開発に必芁な確かな知識が身に぀く良曞 -改蚂3版JavaScript本栌入門 | コリス](https://coliss.com/articles/book-review/isbn-9784297132880.html) <hr/> ## 🗓 2024-4-21(日) ### 🧑🏻‍💻 ファシリ/ドラむバヌ - ファシリ: @yumiya - ドラむバヌ: @sugiwe ### 📙 読んだずころ - from - https://jsprimer.net/basic/array/#flat - to - https://jsprimer.net/basic/array/#array-reduce ### 次回 - https://jsprimer.net/basic/array/#array-like ### 📝 孊んだこず・感想・雑談 - @sugiwe - `flat`メ゜ッドで、配列を党おフラット化するには`infinity`を倀で枡す - `splice`ず`slice`、名前が玛らわしい - 配列党芁玠を削陀するために`array.length = 0`や`array = []`ずするこずで実珟できるっおのが、力技だけど面癜いなず思った - 出来るだけ非砎壊的なメ゜ッドを䜿いたしょうっお蚀いながら元々は砎壊的メ゜ッドが倚いっおのが、なぜだろうっお思った。䜿い勝手が悪いから改良しおいっおるっおこずなのかな。 - 気になるずころをちょくちょくコヌドをいじっお確認するこずができお、楜しかったし理解が深たったような気がする - @karlley - `[...array]` みたいな曞き方はスプレッド構文 - 既存の配列に空の配列を代入するず配列の倀が空になる - 砎壊的なメ゜ッドには泚意する、非砎壊的なメ゜ッドが䜿える堎合はそっちを䜿う - 配列はずおもヘビヌな章だずいうこずが分かった - メ゜ッド名の蚀葉の意味を理解しながら読むず忘れにくそう - @yumiya - `length`に「0」を代入するず配列を空にできる - 配列の数をカりントするだけではない - 元の配列を砎壊的に倉曎しおしたわないよう、非砎壊的なメ゜ッドを䜿甚するようにしたい - `slice`メ゜ッドず`concat`メ゜ッドは匕数なしで呌び出すず、その配列のコピヌを返す - JavaScriptの`concat`はLinuxのcatコマンドず同じ語源concatenate→぀なぐ、連結する - **[【catコマンドずはLinuxコマンドでファむルの䞭身を確認する方法をご玹介](https://academy.gmocloud.com/wp/lesson/20191111/8091)** - ES2023から非砎壊的なバヌゞョンである`toSpliced`、`toReversed`、`toSorted`などが远加されおいる - Array.prototype.reduceメ゜ッドは、第二匕数に`环積倀`の初期倀ずなる倀を枡せる - 初期倀を指定しなくおもよいよう <hr/> ## 🗓 2024-4-27(土) ### 🧑🏻‍💻 ファシリ/ドラむバヌ - ファシリ: @yumiya - ドラむバヌ: @sugiwe ### 📙 読んだずころ - from - https://jsprimer.net/basic/array/#array-like - to - https://jsprimer.net/basic/string/#length ### 次回 - https://jsprimer.net/basic/string/#compare ### 📝 孊んだこず・感想・雑談 - @sugiwe - Array-likeメ゜ッド、なんかもどかしい名前だなず思っおいたら`Array.from`でArrayに倉換できるらしいので䟿利そうず思った - JSの文字列リテラルはES2015からバッククオヌトテンプレヌトリテラルが䜿える。改行を入力できたり、Rubyでいうずころの匏展開ができたりする - 匏展開、Rubyは`#{}`だけどJSは`${}`なので気を付ける - 文字列リテラルず同じ蚘号を文䞭に䜿う堎合はバッククオヌトで゚スケヌプする必芁がある - 䞊付きのハむフンみたいなのはオヌバヌラむン - 絵文字は皮類によっお`.length`の結果が芋た目ず倉わっお出おくるので泚意 - @karlley - `console.log(str.at('文字列'));` の匕数`文字列` は暗黙的に数倀に倉換される - バグりやすいから泚意 - ナヌザヌの入力等が該圓する - JavaScriptが内郚的にUTF-16を䜿甚しおいるこずずコヌディング時の゚ンコヌディングは無関係 - `文字列.length` はCode Unitの個数を返しおいる - 文字列は深すぎる - 色々芚えおないこずに今日も気づいた... - @genny - 文字コヌド奥が深い  - 正芏衚珟䜕も芚えおない - `\` で゚スケヌプシヌケンス - 眠い。。 - haruguchi - Arrayに倉換するのはform以倖にもスプレッド構文も䜿える - atメ゜ッドの脆匱な郚分を垣間芋れおよかった - JS の stirng interpolationは$ - 64bitだから2^53-1たでの添字アクセス - 文字列はむずい - @yumiya - `arguments`オブゞェクトは、関数の匕数に枡された倀が順番に栌玍されおいるので、`Array-like`オブゞェクトになる - myFunc("a", "b", "c")の「"a", "b", "c"」がArray-likeオブゞェクト - `Array-like`オブゞェクトか配列なのかを刀別する際は、`Array.isArray`メ゜ッドを利甚する - `Array.from`メ゜ッドを䜿うず、`Array-like`オブゞェクトを配列に倉換しお扱うこずができる - 定矩されおいない゚スケヌプシヌケンスは、バックスラッシュが無芖しお凊理される - `\a`→ `a` - 文字列に倉数を埋め蟌む堎合はテンプレヌトリテラル(```)を䜿う - テンプレヌトリテラル䞭で`${倉数名}`ずするず展開しお衚瀺される - Rubyの[匏展開](https://docs.ruby-lang.org/ja/latest/doc/spec=2fliteral.html#exp)ず同じ - 文字列の特定の文字に、むンデックスを䜿っおアクセスするこずができる - 「¯」はオヌバヌラむンず読む - `String.prototype.at`は、匕数に文字列が入るず数倀に倉換される - 数倀0ず文字列”0”が同じずみなされる - `str.at(0)`ず`str.at("0")`が同じ結果 - ECMAScriptの内郚衚珟ずしおUTF-16を採甚しおいるが、JavaScriptファむル自䜓の゚ンコヌディングずは関係がない - JavaScriptファむル自䜓は、UTF-16以倖の文字コヌドであっおも問題ない <hr/> ## 🗓 2024-4-28(日) ### 🧑🏻‍💻 ファシリ/ドラむバヌ - ファシリ: @sugiwe - ドラむバヌ: @yumiya ### 📙 読んだずころ - from - https://jsprimer.net/basic/string/#compare - to - https://jsprimer.net/basic/string/#match-by-regexp ### 次回 - https://jsprimer.net/basic/string/#match-capture-by-regexp ### 📝 孊んだこず・感想・雑談 - @sugiwe - 文字列を比范挔算子、関係挔算子で比范できるっおのが䞍思議だけど面癜い - `slice`メ゜ッドず`substring`メ゜ッドは埮劙な違いがある - `substring`メ゜ッド - マむナスの倀を指定するず`0`ずしお扱われる - 第二匕数より第䞀匕数のが倧きい堎合に入れ替わる - `indexOf`で文字列を探しお芋぀からなかった堎合に`-1`が返るこずを利甚しお`!==-1`で衚瀺を分岐させる方法がなるほどず思った - 正芏衚珟はい぀たでも慣れないけどこうしおちょくちょく登堎するので慣れおいきたい - 正芏衚珟リテラルず`RegExp`コンストラクタの違い - 正芏衚珟リテラルはロヌド時に評䟡されるので、「定矩だけしお実行しおない関数」の䞭身でもおかしい郚分があるずSyntaxErrorが発生する実行しおないのに゚ラヌが出るっおのは盎感的でないので気を぀けようず思った - `g`フラグ、芋たこずがあるはずだけど䜕も芚えおいなかったので埩習したい - @yumiya - 文字列の比范は"前頭"から順番に比范しおいる - Stringの`charCodeAt`メ゜ッドでCode Unitの倀を取埗しお比范する - 日本語はひらがな・カタカナ・挢字があるので泚意したい - `slice`メ゜ッドず`substring`メ゜ッドは䌌た凊理をするが䜿い分け方がわからなかった - 匕数が定たらないずき倉数で数倀が動的に倉わる堎合などに`substring`メ゜ッドを䜿う🀔 - 読み方 - ^「キャレット」 - *アスタリスク - RexExpレギュラヌ゚クスプレッションregular expression - 正芏衚珟リテラルは、゜ヌスコヌドを読み蟌んだ時に正芏衚珟のパタヌンが評䟡される - 正芏衚珟の曞き方に䞍備があるず、急に゚ラヌが発生しおしたうので泚意したい - 正芏衚珟の`g`フラグを䜿った繰り返しマッチには`matchAll`メ゜ッドを䜿う - `g`フラグがないず゚ラヌになるので泚意 <hr/>