- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2023-03-23T11:25:46+09:00","default:irrp","irrp")
#author("2024-04-17T12:07:49+09:00","default:irrp","irrp")
→JavaScript
→JavaScriptのTips
→モダンJavaScript ←カリー化などはこちら
#contents
*一般 [#ud26d96e]
-[[JavaScript の複雑な型変換を今度こそ理解した - TECHSCORE BLOG>https://blog.techscore.com/entry/2024/04/17/080000]] 2024.4
-[[「巻き上げ」の誤解【JS】 #JavaScript - Qiita>https://qiita.com/kohki_takatama/items/0aeb419bda555f8c240e]] 2024.4
-[[【JavaScript】プロパティはいくつまで繋げられるのか? #JavaScript - Qiita>https://qiita.com/nanasi-1/items/a72de5d3c18727a675ff]] 2024.2
-[[TypeScriptの非nullアサーション演算子(!)について #TypeScript - Qiita>https://qiita.com/Asaminnn/items/64f3143ebf980d3a58c8]] 2024.1
-[[【JavaScript】varとletを辞めてconstを使っていこう | レコチョクのエンジニアブログ>https://techblog.recochoku.jp/9805]] 2023.11
-[[お前らはjsのvarとletの違いを分かってない - Qiita>https://qiita.com/tk22/items/7f08a043b9d6edd52df3]] 2023.5
-[[JavaScriptの概念たち (前編) - Qiita>https://qiita.com/tsin1rou/items/90576b6c00b895478610]] 2018
-[[JavaScriptの概念たち (後編) - Qiita>https://qiita.com/tsin1rou/items/b30885b189a8ec596c72]] 2018
-[[JavaScriptのMapやSetをJSONやObjectあたりと相互変換したいという話 - CLOVER🍀>https://kazuhira-r.hatenablog.com/entry/2023/03/23/004137?utm_source=feed]] 2023.3
-[[JavaScript to Know Before Learning ‘How to’ React>https://www.telerik.com/blogs/javascript-know-before-learning-react]] 2022.10
-[[7 neat tricks for JS that you probably did not know - DEV Community 👩‍💻👨‍💻>https://dev.to/ruppysuppy/7-neat-tricks-for-js-that-you-probably-did-not-know-358d]] 2022.8
--Readable numbers, Truncate the end of arrays, Short circuit evaulation(&&,||), Optional chaining(?.), Get unique values in an array, Nullish coalescing(??), Replace all
-[[6歳娘「パパ、条件によって変わる型を作りたいの」 - Qiita>https://qiita.com/Yametaro/items/9b2f0ab2037450004816]] 2022.5
--ConditionalTypes, infer
-[[JavaScriptのコードには、こんな書き方もある>https://zenn.dev/chida/articles/ff3e073bce9306]] 2022.5
--.破壊的メソッドを避ける,配列の要素の存在チェックに比較演算子を使わない,
--極端に数値が多いときは短くする書き方もある
6e3 -> 6000 eの後の数字は0の数を意味する
-[[JavaScriptの上限・限界値 - Qiita>https://qiita.com/mod_poppo/items/f3fcbc673526c84b9387]] 2022.5
-[[【Javascript】空オブジェクトの判定方法 - Qiita>https://qiita.com/takengineer1216/items/fffe440375ea0ff2443b]] 2022.3
-[[[JavaScript] Arrayメソッド破壊・非破壊チートシート>https://qiita.com/Shokorep/items/929e2e66908eaa915286]] 2020.3
-[[JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。>https://qiita.com/suin/items/a44825d253d023e31e4d]] 2020.3
-[[Javascriptでのenum(列挙型)>http://fksekiguchi.sakura.ne.jp/wp/it_basic_understanding/javascript/javascript%E3%81%A7%E3%81%AEenum%EF%BC%88%E5%88%97%E6%8C%99%E5%9E%8B%EF%BC%89]] 2016.7
-[[JavaScriptの基礎を押さえて、中級JS使いを目指す>https://qiita.com/qeema/items/42d4458ba3ddf5d686da]] 2019.11
-[[テンプレート文字列>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings]] 2019.10
-[[JavaScriptの行末セミコロンは省略すべきか>https://blog.tai2.net/automatic_semilocon_insertion.html]] 2015
--[[行頭にセミコロン | Re: yozik>https://blog.yzk.io/2018/09/24/358]] 2018
-[[JavaScriptのnewって本当にいらない子?>http://taiju.hatenablog.com/entry/20090706/1246840565]] 2009.7
-[[JavaScriptを言語仕様から把握し、ライブラリに振り回されない漢を目指す人に贈るJavaScriptの基礎>https://qiita.com/hakozaru/items/c00e472ab0f5e823098c]] 2018.8
-[[JavaScript の ジェネレータ を極める!>http://qiita.com/kura07/items/d1a57ea64ef5c3de8528]] 2017.7.17
-[[TypeScriptの等価演算子(==)と厳密等価演算子(===)について - Qiita>https://qiita.com/shimajiri/items/d0419e5f14d353998117]] 2022.5
-[[JavaScriptの==の中身を知る>http://qiita.com/IganinTea/items/6a148d69b764df11ad40]] 2017.4.28
--ゆるい比較'=='と厳密な比較'==='
-[[JavaScript イディオム集>http://nmi.jp/archives/488]] 2013.7.3
-[[即時関数(function(){ ... })()の別の書き方いろいろ>http://blog.tojiru.net/article/197270788.html]] 2013.6.16
-[[JavaScriptとコールバック地獄>http://techblog.yahoo.co.jp/programming/js_callback/]] 2013.2.9
-[[JavaScriptでうっかりやってしまいそうなこと色々>http://blog.asial.co.jp/1092]] 2012.11.1
-[[What is the Execution Context & Stack in JavaScript?>http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/]] 2012.6.21
-JavaScriptのイベント
--[[イベント>http://www.tohoho-web.com/js/event.htm]]
--[[イベントハンドラ>http://www.tohoho-web.com/js/onevent.htm]]
-[[JavaScriptの初見で読みづらいシンタックス&パターン9種>http://havelog.ayumusato.com/develop/javascript/e316-javascript_evil_syntax.html]] 2012.1.10
-[[javascriptには整数はない>http://blog.livedoor.jp/dankogai/archives/51215663.html]]
--JavaScriptのNumberオブジェクトは、数値を常に浮動小数点で保持しているからです。そうなのです。JavaScriptには整数がないんです。整数が「ある」ように見えているのは、文字列にする時に小数点がないだけなのです。
-[[evalは最後の武器>http://blog.livedoor.jp/dankogai/archives/51175261.html]]
-[[for文と無名関数のイディオム>http://d.hatena.ne.jp/amachang/20090119/1232331329]] 2009.1.19
-[[Client-side database Storageとは>http://d.hatena.ne.jp/amachang/20080327/1206607704]] 2008.3.28
-[[JavaScriptは変数名にUnicodeエスケープが使える:http://d.hatena.ne.jp/amachang/20061030/1162165340]]
-[[JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念>http://d.hatena.ne.jp/amachang/20060910/1157911122]]
--JavaScript には実行キューがあり、setTimeout は指定秒後にそれに関数を登録している、ということ
-[[ページはいつ更新されるか:http://blog.livedoor.jp/dankogai/archives/50637906.html]]
--現在のブラウザーの実装は、以下のようになっているようである。「ようである」というのは、仕様書で確認したわけではないからだ。
イベント発生 → 関数の実行 → ページの再描画
--上記の例で意図したように、カウンターが動いた都度表示させたいと思ったら、その都度関数の実行を完了しなければならない。しかしカウンターを動かすという行為そのものに関数の実行が必要である。どうしたらよいか?
--その答えが、setTimeout()というわけだ。
*JavaScriptの不思議仕様 [#o80a64da]
-[[JavaScriptで、なぜfor文の初期化部分においてletで宣言された変数はループごとに異なるインスタンスを持ちうるのか #JavaScript - Qiita>https://qiita.com/khond/items/2d22c6b297d58ec914f5]] 2024.3
-[[JavaScriptでObjectに空のStringを足すと0になる!?……わけではなかった>https://zenn.dev/ymrl/articles/3c401819fe7a82]] 2024.1
-[[JavaScriptを読んでて「なにこれ!?」と思うけれど調べられない記法8選。 - Qiita>https://qiita.com/ukiuni@github/items/5f3d8620187905aea3d4]] 2015
--ビット演算子、_$、()()、ラベル、正規表現の/、バックスラッシュ、function前の記号
-[[JavaScript を愛してくれ - エムスリーテックブログ>https://www.m3tech.blog/entry/2022/12/21/110000]] 2022.12
-[[くそったれJavaScript - Qiita>https://qiita.com/rana_kualu/items/793f0cbdde6a88f86394]] 2017
-[[奇妙なJavaScript - Qiita>https://qiita.com/Tsukina_7mochi/items/9fb0b4a3ae6b245580c6]] 2022.7
['constructor']['constructor']['constructor']('return this')()['console']['log']('Hello JavaScript!')
-[[React + Typescript の現場で初心者からよくあった質問とか小技的なのを書いてく - Qiita>https://qiita.com/dosukoi_man/items/70386fa0bb919804eaed]] 2022.5
--JavaScriptの変態的な仕様いろいろ
--Falsy とはなにか,突然な || ってなに?、突然な && ってなに?、この ?? と ? は何ですか?、文字列結合はテンプレートリテラルを使ったほうが良い説、スプレッド構文
-[[JavaScriptの反意図性(クソ挙動)を指摘するバズツイ周辺解説 - Qiita>https://qiita.com/GunseiKPaseri/items/7652787323f1ecd97f69]] 2022.1
*null, undefined, NaN ... [#la12d476]
-[[【JavaScript】「キレイなコード」を考える #1 null 結合 `??` ・オプショナルチェーン `?.` 演算子を使う - Qiita>https://qiita.com/honey32/items/2abe8ca1443b57824396]] 2023.7
-[[JavaScript の undefined と null を完全に理解する>http://nmi.jp/2022-10-17-Understanding-Undefined-And-Null]] 2022.10
-[[In JavaScript, what's the difference between a variable that is: null, undefined and undeclared? - DEV Community>https://dev.to/anewman15/in-javascript-whats-the-difference-between-a-variable-that-is-null-undefined-and-undeclared-j1f]] 2022.7
-[[What is NaN in JavaScript? What is its type? How can you reliably test if a value is equal to NaN? - DEV Community>https://dev.to/anewman15/what-is-nan-what-is-its-type-how-can-you-reliably-test-if-a-value-is-equal-to-nan-4bp3]] 2022.7
-[[undefined may not be undefined>http://blog.livedoor.jp/dankogai/archives/51224098.html]]
--undefined,NaN,Infinityに代入が可能
-[[Null & typeof>http://kiro.me/blog/typeof_null.html]] 2012.6.22
*クロージャ [#x3cb3f23]
-[[クロージャ - JavaScript | MDN>https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures]] 2024.3
-[[JavaScriptのGeneratorを使うとなぜ関数型プログラミングが捗るのか調べてみた|zochang☕️>https://note.zochang.com/n/n69e5c0bbde38]] 2022.12
-[[What is a closure? And why this matters ? - Javascript - DEV Community 👩‍💻👨‍💻>https://dev.to/vcctm/what-is-a-closure-and-why-this-matters-javascript-386p]] 2022.10
-[[ちょっと高度にJavaScript/クロージャでアクセサを作る>http://dev.classmethod.jp/client-side/language-client-side/javascript-closure/]] 2012.10.5
-[[ちょっと高度にJavaScript/クロージャの基礎>http://dev.classmethod.jp/client-side/language-client-side/javascript-closure-basic/]] 2012.10.4
*配列の操作 [#cf662f40]
-[[ついに JavaScript に groupBy が実装されたぞ!!! #JavaScript - Qiita>https://qiita.com/silane1001/items/5f2a4f06e964e7443433]] 2023.11
-[[【JavaScript】オブジェクト(+配列)について復習する - Qiita>https://qiita.com/mihooo24/items/083580b3d99f001e081c]] 2022.8
-[[How to iterate over an object in Javascript? - DEV Community>https://dev.to/rakshit/how-to-iterate-over-an-object-in-javascript-2apj]] 2022.7
-[[配列の最後の要素を取得する方法【JavaScript】 - Qiita>https://qiita.com/y-suzu/items/1bff89e209b5f38a1069]] 2022.4
-[[【JavaScript】お前はまだコレクション関数を知らない - Qiita>https://qiita.com/nowvilla_physi/items/ca67e7c009e630ccb8e9]] 2021.11
-メンバに集計したい値を持つオブジェクトの配列で reduce を使って合計を出すサンプル
chargedAmountsTotal() {
return this.chargedAmounts.amounts.reduce(
(accumulator, currentValue) => {
accumulator.amount += currentValue.amount;
return accumulator;
}, {amount:0}
).amount ;
},
-[[JavaScriptでforEach, filter, map, reduceとか>https://qiita.com/itagakishintaro/items/29e301f3125760b81302]] 2018.9
*非同期処理 [#ia6591f7]
-[[【図解】1から学ぶ JavaScript の 非同期処理 - Qiita>https://qiita.com/ryosuketter/items/dd467f827c1b93a74d76]] 2023.7
-[[【初心者向け】【JS・TS】forEachのコールバック関数内の非同期処理は、async/awaitで同期処理化できない - Qiita>https://qiita.com/Naoumi1214/items/5864b93340dbba561f12]] 2023.5
-[[[javascript] なぜ「forEachでasync/awaitは使えない」と言われるのか - Qiita>https://qiita.com/tawatawa/items/c458f76ff364bf9f5781]] 2022.12
-[[async/awaitのaの違い〜async wait説への反論 - Qiita>https://qiita.com/querykuma/items/5b8d861b422d03a0337a]] 2022.11
-[[【TypeScript】axiosの内側をPromiseから理解する - RAKUS Developers Blog | ラクス エンジニアブログ>https://tech-blog.rakus.co.jp/entry/20220929/axios]] 2022.9
-[[マンガでわかるJavaScriptのPromise マンガでわかるプログラミング | 柳井 政和 | 青年マンガ | Kindleストア | Amazon>https://www.amazon.co.jp/%E3%83%9E%E3%83%B3%E3%82%AC%E3%81%A7%E3%82%8F%E3%81%8B%E3%82%8BJavaScript%E3%81%AEPromise-%E3%83%9E%E3%83%B3%E3%82%AC%E3%81%A7%E3%82%8F%E3%81%8B%E3%82%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-%E6%9F%B3%E4%BA%95-%E6%94%BF%E5%92%8C-ebook/dp/B09XQ89M9Y?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=OUOUBETPJ9V7&keywords=%E3%83%9E%E3%83%B3%E3%82%AC%E3%81%A7%E3%82%8F%E3%81%8B%E3%82%8B+promise&qid=1656211570&sprefix=%E3%83%9E%E3%83%B3%E3%82%AC%E3%81%A7%E3%82%8F%E3%81%8B%E3%82%8B+promi,aps,254&sr=8-5&linkCode=shr&tag=keisuke6906-22&language=ja_JP&ref_=as_li_ss_shr&creativeASIN=B09XQ89M9Y&camp=1207&creative=undefined&linkId=8e8179825c08ea3f894025d20ca1048c]] 2022.6
-[[【非同期処理】JavaScriptのPromise, async, awaitなどについての整理と使い方 - Qiita>https://qiita.com/rahydyn/items/dbdf62a0e6543a7fe48a]] 2022.5
-[[イベントループと TypeScript の型から理解する非同期処理>https://zenn.dev/mizchi/articles/understanding-promise-by-ts-eventloop]] 2022.4
-[[JavaScriptの非同期を理解するにはMDN Web Docsを読むべき。翻訳しといたよ Part.1 - Qiita>https://qiita.com/Naughty1029/items/63f27d4a514d16d1c184]] 2022.1
-[[プログラミングの幅を広げよう!一段上のPromise活用テクニック - ICS MEDIA>https://ics.media/entry/211203/]] 2021.12
--実践例1. Promiseでモーダル(alertやconfirm)を作る
--実践例2. PromiseでAPIを確実にキャッシュする
--実践例3. Promiseで同時処理数をコントロールする
-[[Promiseの実装を読んでみた>https://qiita.com/tommy3/items/57d3f554ff65c0f973d5]] 2021.8
-[[[JS]なぜawaitはasync関数の中にしか書けないのか>https://qiita.com/jun1s/items/ecf6965398e00b246249]] 2021.7
-[[複数の非同期処理を実行して結果待つ>https://qiita.com/horikeso/items/6830014923216db009b3]] 2018.1
-[[Promiseの使い方、それに代わるasync/awaitの使い方>https://qiita.com/suin/items/97041d3e0691c12f4974]] 2019.9
-[[JavaScript Promiseの本>http://azu.github.io/promises-book/]]
-[[JSの非同期処理を初めてES6のPromiseを使ったものに書き換えてみた>https://techracho.bpsinc.jp/tanaka/2014_04_23/16726]] 2018.10
--promiseに渡した非同期処理はすぐに実行されるため、「非同期処理がすぐに終わったらどうなるの?thenを呼ぶ前に終わったらどうなるの?怖い」と最初は思いがちだが実行結果を保持して待つため問題ない。例の場合だとpromiseにAを渡してにthenでB,Cを渡してやると、thenを呼んだ際にAが終わっていようが終わっていまいが、必ずAが終わった後にBかCが呼び出されることになる。
-[[Promiseを使う>https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises]] 2018.10
-[[Promise再入門>http://qiita.com/gcfuji/items/1dfe4265c36bea903ab3]] 2017.5.16
*オブジェクト指向 [#ge9092cd]
-[[や...やっと理解できた!JavaScriptのプロトタイプチェーン>http://d.hatena.ne.jp/maeharin/20130215/javascript_prototype_chain]] 2013.2.15
-[[Ruby脳が理解するJavaScriptのオブジェクト指向>http://melborne.github.com/2012/09/09/understand-js-oop-with-ruby-brain/]] 2012.9.10
-[[newを封印して、JavaScriptでオブジェクト指向する(1)>http://blog.tojiru.net/article/199670885.html]] 2011.5.7
* thisの理解 [#r269daac]
-[[JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita>https://qiita.com/suin/items/a44825d253d023e31e4d]] 2020
-[[JavaScriptのthisを8種類試してみた - Qiita>https://qiita.com/fsd-masa/items/300ee16e919900e03ff5]] 2022.11
-[[JavaScriptのthisを理解する>http://qiita.com/takkyun/items/c6e2f2cf25327299cf03]] 2017.7.30
-[[初めてthisにぶち当たった人たちに贈るthisまとめ>http://qiita.com/nave421m/items/94da3099d622bf894d71]] 2017.5.4
-[[JavaScriptのthisの覚え方 >http://qiita.com/items/74005adacc0e8e2a3cab]] 2013.2.1
--トップレベルのthis
--コンストラクタ内のthis
--何かに所属している時のthis
--function#apply とか function#call とかで無理矢理変えられた時のthis