#author("2024-04-14T21:04:26+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の後の数字は０の数を意味する

-[[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
トップ   編集 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS