【JavaScript関連】【長期】Qiitaの今読んでおくべき記事１００選【2021/8 更新停止】

ページ容量を増やさないために、不具合報告やコメントは、**[説明記事](https://qiita.com/j5c8k6m8/items/09e0baf63e171269b587)** に記載いただけると助かります。
※ `CSS`, `HTML` 等のタグのみが付与されている記事は除いています。
 **[【CSS/HTML】【長期】Qiitaの今読んでおくべき記事１００選【毎週自動更新】](https://qiita.com/j5c8k6m8/items/caeca96c91aab83fd0ab)** を参照してください。

|順位|記事名<br/>________________________________________|ユーザ|投稿日付<br/>更新日付|LGTM[^1]|
|:-:|:--|:-:|:-:|:-:|
|1|**[TypeScriptの型入門](e2fdef2d3236b9bfe74a)**|uhyo|18/02/16<br/>20/09/12|3718<br/>1129|
|2|**[async/await 入門（JavaScript）](1a9613e023200bbebcb3)**|soarflat|17/08/03<br/>21/08/01|2889<br/>820|
|3|**[今から始めるReact入門 〜 React の基本](72d8cf9f07a5a30be048)**|TsutomuNakamura|18/09/08<br/>21/04/30|2003<br/>771|
|4|**[なんとなく CORS がわかる...はもう終わりにする。](2154a8aad8bf1409db2b)**|att55|19/08/14<br/>20/09/14|1739<br/>1098|
|5|**[Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary)](c43232c6c44918e977c9)**|wtetsu|18/09/04<br/>20/12/30|4724<br/>439|
|6|**[イマドキのJavaScriptの書き方2018](19ab5c381bbb2e09d0d9)**|shibukawa|17/12/26<br/>20/07/26|5519<br/>311|
|7|**[Vue.js を vue-cli を使ってシンプルにはじめてみる](dde495d6a8ad1c25fa43)**|567000|16/09/10<br/>21/04/25|2049<br/>361|
|8|**[MacにNode.jsをインストール](c5f68fc9d89b84c0df09)**|kyosuke5\_20|16/11/15<br/>21/04/02|1432<br/>456|
|9|**[2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ](915345b8f3f870cfe2aa)**|rana\_kualu|19/11/11<br/>19/11/20|3566<br/>382|
|10|**[webpack 4 入門](28bf799f7e0335b68186)**|soarflat|17/02/01<br/>21/08/01|2352<br/>378|
|11|**[Vue.jsを100時間勉強して分かったこと](3e8887d45b11f9132012)**|kskinaba|19/05/16<br/>20/06/30|2228<br/>434|
|12|**[【初心者向け】NPMとpackage.jsonを概念的に理解する](e5448cb2e7e11ab7d477)**|righteous|19/06/24<br/>20/03/11|1170<br/>646|
|13|**[Redux入門【ダイジェスト版】10分で理解するReduxの基礎](49a1f03445b19cf407b7)**|kitagawamac|15/12/04<br/>18/04/24|2837<br/>285|
|14|**[フロントエンドのコンポーネント設計に立ち向かう](8814e905693f00cdade2)**|seya|18/04/01<br/>21/02/19|1947<br/>463|
|15|**[Node.jsとはなにか？なぜみんな使っているのか？](a8fee0b7ad96e67713eb)**|non\_cal|20/10/15<br/>20/12/02|2071<br/>2071|
|16|**[たぶんこれが一番分かりやすいと思います React + Redux のフロー図解](a816c6380219b1d5a3bf)**|mpyw|17/01/05<br/>21/01/26|2753<br/>321|
|17|**[すべての新米フロントエンドエンジニアに読んでほしい50の資料](ea5d802cb0ad16682ae2)**|suzu-4|19/07/11<br/>19/07/12|3793<br/>369|
|18|**[Reactを使うとなぜjQueryが要らなくなるのか](fdb61bc743395f8d8faf)**|naruto|16/05/09<br/>20/08/13|4415<br/>255|
|19|**[JavaScript で forEach を使うのは最終手段](70d9b0cbd4e3d5cc6fce)**|diescake|18/12/01<br/>21/07/15|1274<br/>466|
|20|**[JavaScript アロー関数を説明するよ](4a49c7c78b55d75d693b)**|may88seiji|17/04/16<br/>21/02/11|1070<br/>396|
|21|**[Prettier 入門 ～ESLintとの違いを理解して併用する～](06377f3b96964964a65d)**|soarflat|18/02/21<br/>21/08/01|1307<br/>415|
|22|**[大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました](01896c1faa8241e6b1bc)**|thesugar|20/04/23<br/>20/09/16|1454<br/>729|
|23|**[\<script\> タグに async / defer を付けた場合のタイミング](82c85ea4b8f9c373d684)**|phanect|17/08/05<br/>19/02/23|1319<br/>310|
|24|**[npmとyarnのコマンド早見表](1696530bb9fd59aa28d8)**|rubytomato@github|18/07/01<br/>20/07/16|847<br/>463|
|25|**[ES2015(ES6) 入門](b251caf9cb59b72beb9b)**|soarflat|16/12/14<br/>21/08/01|1479<br/>237|
|26|**[【JavaScript】アロー関数式を学ぶついでにthisも復習する話](69e5facdb60781927929)**|mejileben|17/03/26<br/>20/09/08|1532<br/>215|
|27|**[JavaScript の this を理解する多分一番分かりやすい説明](c6e2f2cf25327299cf03)**|takkyun|17/07/29<br/>18/10/14|1264<br/>318|
|28|**[お前らのReactは遅い](5b8f79d26e1b319ac44f)**|teradonburi|18/12/01<br/>21/05/27|1318<br/>341|
|29|**[Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな](faf125e28f8c2860269c)**|jagaapple|20/11/05<br/>20/11/09|1604<br/>1604|
|30|**[ESLint 最初の一歩](f523dab04a25f617c87d)**|mysticatea|15/10/21<br/>19/07/08|1560<br/>232|
|31|**[【動画付き】 draw.io 使い方まとめ 〜エンジニアでなくても使えるTips集〜](8fd414700b68b2bcafcc)**|G-awa|20/02/09<br/>20/02/09|1963<br/>348|
|32|**[Ubuntuに最新のNode.jsを難なくインストールする](36cef7df85fe2cefa3ea)**|seibe|15/12/10<br/>19/02/10|1336<br/>235|
|33|**[Reactで誰もがやりたかった10の機能。アプリ構想はあるけど作れない人の壁をぶっ壊す。](8f1b5a303400a09c4923)**|y\_kawase|18/09/03<br/>19/04/21|1920<br/>205|
|34|**[ReactとVueのどちらを選ぶか](236b6535695ea67b4fbe)**|yoichiwo7|18/06/16<br/>19/06/05|1885<br/>213|
|35|**[現代開発者のためのCSS基礎技術](e1af320e2755461649a0)**|arowM|20/06/18<br/>21/06/01|2371<br/>233|
|36|**[CORSまとめ](81698edd5812ff6acb34)**|tomoyukilabs|16/02/01<br/>17/11/30|1772<br/>186|
|37|**[styled-componentsを使ったCSS設計](4547830b461d11a69a20)**|taneba|17/12/13<br/>19/11/14|950<br/>253|
|38|**[JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。](d75f96f81ff83680013f)**|takeharu|15/11/28<br/>16/06/28|1649<br/>208|
|39|**[tsconfig.jsonの全オプションを理解する（随時追加中）](390647a7c26933940470)**|ryokkkke|19/11/21<br/>20/10/13|742<br/>498|
|40|**[TypeScript学習ロードマップ](33744e15a4e0ca52d6bc)**|irico|20/08/17<br/>20/08/19|1626<br/>1626|
|41|**[vue.js + typescript = vue.ts ことはじめ](be90cc19fa3122266fd7)**|nrslib|18/10/08<br/>19/11/11|1362<br/>188|
|42|**[jQuery から Vue.js へのステップアップ](e7b2596d06b8005e8e6f)**|mio3io|17/10/13<br/>18/12/14|1964<br/>99|
|43|**[Facebook製のJavaScriptテストツール「Jest」の逆引き使用例](e97883fd46b67529d59f)**|chimame|16/10/13<br/>18/11/07|1246<br/>185|
|44|**[治安の悪い Slack Emoji を作るツールを作った](8a24b8ad9d1eabd364aa)**|zk\_phi|18/06/17<br/>20/01/29|2567<br/>187|
|45|**[なぜ仮想DOMという概念が俺達の魂を震えさせるのか](4d25bc26def1719d52e6)**|mizchi|14/11/30<br/>20/09/21|2831<br/>192|
|46|**[TypeScriptのInterfaceとTypeの比較](d01b96363e58a7df830e)**|tkrkt|17/05/26<br/>19/04/16|891<br/>197|
|47|**[JavaScriptのpreventDefault()って難しくない？preventDefault()を使うための前提知識](4e9e64cabc0a1cd7a1ae)**|tochiji|18/08/19<br/>21/05/15|789<br/>274|
|48|**[要素の取得方法まとめ](25e8b4e1b41c8d3211f4)**|amamamaou|17/10/27<br/>20/07/14|654<br/>285|
|49|**[JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。](a44825d253d023e31e4d)**|suin|20/03/22<br/>20/04/12|1676<br/>374|
|50|**[フロントエンド開発の３ステップ（npmことはじめ）](15f4a4961183cfbb2658)**|hashrock|15/04/11<br/>20/08/17|1627<br/>230|
|51|**[非同期処理ってどういうこと？JavaScriptで一から学ぶ](da434d169755cbb20447)**|kiyodori|15/12/19<br/>15/12/19|1339<br/>192|
|52|**[[axios] axios の導入と簡単な使い方](2daaaf3a15c4c11956e9)**|ksh-fthr|17/09/13<br/>21/04/28|755<br/>247|
|53|**[TypeScript の概要](4de2a1ee6e2a541246f6)**|EBIHARA\_kenji|19/03/18<br/>19/07/17|625<br/>381|
|54|**[【保存版】Webフロントエンド基礎力（初心者向け）](43c52d7cffc318e9b1e9)**|teradonburi|19/11/04<br/>20/03/15|1836<br/>159|
|55|**[Webpackってどんなもの？](45fb4690ace32216ca25)**|kamykn|16/09/17<br/>16/09/19|1195<br/>186|
|56|**[TypeScript + Node.js プロジェクトのはじめかた2020](3bbd2293e2ff286d9f49)**|notakaos|19/02/08<br/>20/08/12|758<br/>309|
|57|**[GAS ビギナーが GAS を使いこなすために知るべきこと 10 選](2c51681396fe12b6a0e4)**|tanabee|18/04/03<br/>20/10/21|1340<br/>204|
|58|**[ライブラリを使わない素のJavaScriptでDOM操作](dfc14d25ccb4e50afe89)**|kouh|15/05/28<br/>18/04/26|1587<br/>124|
|59|**[Vueのライフサイクルを完全に理解した](7f3233053b0e209ef355)**|chan\_kaku|18/11/24<br/>20/06/06|727<br/>258|
|60|**[2020年にWebフロントエンドを勉強する人が作るべきたったひとつのアプリ](03f322dee15b19c33613)**|Dragon-taro|20/02/04<br/>20/02/09|2383<br/>142|
|61|**[Chrome拡張の作り方 (超概要)](32b2a7b879f21b3edefc)**|RyBB|18/11/10<br/>20/12/25|613<br/>295|
|62|**[Jamstackって何なの？何がいいの？](4075d03278d1fb51cc37)**|ozaki25|20/02/07<br/>20/11/05|548<br/>462|
|63|**[Nuxt.jsを使うときに、SPA・SSR・SSGのどれがいいか迷ったら](f42e2f03663b00b5886d)**|nishinoshake|18/09/17<br/>20/11/22|858<br/>276|
|64|**[JavaScriptの「this」は「4種類」？？](9935ce476a17d6258e27)**|takeharu|13/04/09<br/>15/12/07|2347<br/>177|
|65|**[ようこそ！Electron入門](6ce4f46c1458e89c4cfc)**|umamichi|16/12/28<br/>19/11/22|717<br/>191|
|66|**[早く・それなりの UI を実現する React コンポーネントセット 16 選](39ce30dd2d204791a9ea)**|kyrieleison|16/07/10<br/>18/06/15|2032<br/>177|
|67|**[Reactベース静的サイトジェネレータGatsbyの真の力をお見せします](1b7f0a86596353587466)**|uehaj|18/12/21<br/>21/01/28|896<br/>212|
|68|**[Promiseの使い方、それに代わるasync/awaitの使い方](97041d3e0691c12f4974)**|suin|18/01/05<br/>20/03/12|722<br/>202|
|69|**[Vue.js + Vuexでデータが循環する全体像を図解してみた](f16d988ec491b7800ace)**|m\_mitsuhide|18/07/30<br/>19/12/05|1318<br/>165|
|70|**[2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips](6b4834b9a13406535f32)**|kahirokunn|19/03/01<br/>20/05/01|1679<br/>147|
|71|**[JavaScript学習ロードマップ](ae2dbbd34f8557d5af19)**|yukiji|20/09/02<br/>20/09/02|1435<br/>1435|
|72|**[JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。](5f3d8620187905aea3d4)**|ukiuni@github|15/04/17<br/>15/04/22|3196<br/>120|
|73|**[【JavaScript】クロネコヤマトの404ページでダンボールをこじ開けてみた](3fb149ff0a185b82caf2)**|omoshiro\_web|21/03/02<br/>21/03/02|623<br/>623|
|74|**[【JavaScript】スプレッド構文の便利な使い方まとめ](e6f503cbb95c8e6967f8)**|Nossa|17/09/09<br/>19/07/02|822<br/>167|
|75|**[フルスタックエンジニアになるためのモダンな8つのプロジェクト](77a9746e9b98abbb97e6)**|kanye\_\_east|20/09/17<br/>21/03/08|1624<br/>1624|
|76|**[スナック「jQuery」](b089a3f2e6dbc59cd5c8)**|8amjp|20/05/05<br/>20/05/05|2497<br/>52|
|77|**[webpackとBabelの基本を理解する(1) ―webpack編―](3e64612d22f3473f36a4)**|koedamon|19/03/03<br/>20/06/23|830<br/>309|
|78|**[出来る限り短く説明するReactJS入門](8ec309d1bf5e203d2b19)**|rgbkids|15/06/21<br/>21/08/01|2053<br/>120|
|79|**[JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる](732ded26c85a7f771a27)**|YoshikiNakamura|16/01/27<br/>18/10/25|1121<br/>75|
|80|**[ゼロからはじめるExpress + Node.jsを使ったアプリ開発](723990c518acfee6e473)**|nkjm|15/12/29<br/>16/02/13|1038<br/>154|
|81|**[【Laravel 6 & PHP 7.4 対応】Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。](2597bd6973a45f92e1e8)**|MasahiroHarada|19/01/13<br/>20/05/09|1972<br/>76|
|82|**[JavaScript の Date は罠が多すぎる](5fbaa0491b67221419b4)**|labocho|12/09/06<br/>19/11/28|1260<br/>169|
|83|**[Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する](47ec3d243d00ddd0b4ed)**|thesugar|20/11/11<br/>20/11/13|858<br/>858|
|84|**[async関数においてtry/catchではなくawait/catchパターンを活用する](cc73afcdb5ac5d0774bc)**|akameco|17/08/27<br/>17/08/31|846<br/>177|
|85|**[React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする](b9d3d17b8ab1f5dbfed2)**|soarflat|20/05/24<br/>21/08/01|577<br/>404|
|86|**[React Nativeの実は使ってはダメなライブラリ素晴らしいライブラリ(随時更新)](569aafd80889bb5d9328)**|kaba|18/06/02<br/>21/04/01|592<br/>191|
|87|**[Vue.jsのv-modelを正しく使う](c27d69f17d2d08722b3a)**|simezi9|19/05/13<br/>20/05/01|629<br/>242|
|88|**[4歳娘「パパ、具体的な名前をつけないで？」](bcd3166e5d2ad696a89e)**|Yametaro|20/03/18<br/>20/12/10|1809<br/>130|
|89|**[Denoとはなにか - 実際につかってみる](8238c0c68ed525377883)**|azukiazusa|20/05/19<br/>21/03/07|917<br/>288|
|90|**[【いまさらですが】package.jsonのdependenciesとdevDependencies](ca1529f9b3d016af53ec)**|chihiro|17/07/21<br/>19/08/27|474<br/>188|
|91|**[JavaScriptで即時関数を使う理由](cfe9fd968ba0db603b1e)**|katsukii|15/02/20<br/>18/12/12|942<br/>163|
|92|**[iPadでプログラミングしてる人、今まで馬鹿にしててすみませんでしたァァァァ!!!!](94c5720a7d477eb4c2f1)**|Mahito6|19/03/04<br/>19/07/18|2046<br/>100|
|93|**[Storybookがなぜ必要か？(Vue.js編)](dad8d84807918f3a43cb)**|masaakikunsan|17/12/23<br/>19/02/26|821<br/>140|
|94|**[[JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について](723aa59851b0716a87e3)**|phi|14/06/18<br/>16/05/09|1181<br/>142|
|95|**[Denoの登場でNode.jsの時代は終わるのか？](c3ba2a528052827e3b3c)**|so99ynoodles|20/05/11<br/>20/06/03|2013<br/>78|
|96|**[Chrome拡張の開発方法まとめ　その1：概念編](26d7a22233ecdf48fed8)**|k7a|16/03/13<br/>16/03/15|1147<br/>130|
|97|**[Reactの最強フレームワークGatsby.jsの良さを伝えたい！！](00739eaf9ae7fc95c1ca)**|hppRC|19/11/30<br/>20/02/14|895<br/>233|
|98|**[JavaScript の テンプレートリテラル を極める！](c9fa858870ad56dfec12)**|kura07|15/08/07<br/>18/09/17|917<br/>114|
|99|**[開発体験を変える! Chrome DevTools Tips 7選](d02863bddbd0c86efa4a)**|ryo2132|20/08/17<br/>20/08/18|1531<br/>1531|
|100|**[any型で諦めない React.EventCallback](f1ba99a7ca7e66290f24)**|Takepepe|19/01/28<br/>19/01/28|437<br/>248|
[^1]: 1行目が総数。2行目が直近1年。