#author("2023-12-01T11:24:13+09:00","default:irrp","irrp") →JavaScript →JavaScriptのTips →モダンJavaScript ←カリー化などはこちら #contents *一般 [#ud26d96e] -[[【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を読んでて「なにこれ!?」と思うけれど調べられない記法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の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