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

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

|順位|記事名<br/>________________________________________|ユーザ|投稿日付<br/>更新日付|LGTM[^1]|
|:-:|:--|:-:|:-:|:-:|
|1|**[TypeScriptの型入門](e2fdef2d3236b9bfe74a)**|uhyo|18/02/16<br/>20/09/12|3718<br/>210|
|2|**[なんとなく CORS がわかる...はもう終わりにする。](2154a8aad8bf1409db2b)**|att55|19/08/14<br/>20/09/14|1739<br/>227|
|3|**[async/await 入門（JavaScript）](1a9613e023200bbebcb3)**|soarflat|17/08/03<br/>21/08/01|2889<br/>162|
|4|**[今から始めるReact入門 〜 React の基本](72d8cf9f07a5a30be048)**|TsutomuNakamura|18/09/08<br/>21/04/30|2003<br/>174|
|5|**[Node.jsとはなにか？なぜみんな使っているのか？](a8fee0b7ad96e67713eb)**|non\_cal|20/10/15<br/>20/12/02|2071<br/>228|
|6|**[【初心者向け】NPMとpackage.jsonを概念的に理解する](e5448cb2e7e11ab7d477)**|righteous|19/06/24<br/>20/03/11|1170<br/>133|
|7|**[Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary)](c43232c6c44918e977c9)**|wtetsu|18/09/04<br/>20/12/30|4724<br/>43|
|8|**[2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ](915345b8f3f870cfe2aa)**|rana\_kualu|19/11/11<br/>19/11/20|3566<br/>50|
|9|**[大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました](01896c1faa8241e6b1bc)**|thesugar|20/04/23<br/>20/09/16|1454<br/>120|
|10|**[Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな](faf125e28f8c2860269c)**|jagaapple|20/11/05<br/>20/11/09|1604<br/>139|
|11|**[イマドキのJavaScriptの書き方2018](19ab5c381bbb2e09d0d9)**|shibukawa|17/12/26<br/>20/07/26|5519<br/>56|
|12|**[Vue.jsを100時間勉強して分かったこと](3e8887d45b11f9132012)**|kskinaba|19/05/16<br/>20/06/30|2228<br/>57|
|13|**[フロントエンドのコンポーネント設計に立ち向かう](8814e905693f00cdade2)**|seya|18/04/01<br/>21/02/19|1947<br/>114|
|14|**[JavaScript で forEach を使うのは最終手段](70d9b0cbd4e3d5cc6fce)**|diescake|18/12/01<br/>21/07/15|1274<br/>114|
|15|**[すべての新米フロントエンドエンジニアに読んでほしい50の資料](ea5d802cb0ad16682ae2)**|suzu-4|19/07/11<br/>19/07/12|3793<br/>50|
|16|**[MacにNode.jsをインストール](c5f68fc9d89b84c0df09)**|kyosuke5\_20|16/11/15<br/>21/04/02|1432<br/>80|
|17|**[TypeScript学習ロードマップ](33744e15a4e0ca52d6bc)**|irico|20/08/17<br/>20/08/19|1626<br/>77|
|18|**[Vue.js を vue-cli を使ってシンプルにはじめてみる](dde495d6a8ad1c25fa43)**|567000|16/09/10<br/>21/04/25|2049<br/>74|
|19|**[【JavaScript】クロネコヤマトの404ページでダンボールをこじ開けてみた](3fb149ff0a185b82caf2)**|omoshiro\_web|21/03/02<br/>21/03/02|623<br/>199|
|20|**[webpack 4 入門](28bf799f7e0335b68186)**|soarflat|17/02/01<br/>21/08/01|2352<br/>50|
|21|**[【動画付き】 draw.io 使い方まとめ 〜エンジニアでなくても使えるTips集〜](8fd414700b68b2bcafcc)**|G-awa|20/02/09<br/>20/02/09|1963<br/>49|
|22|**[tsconfig.jsonの全オプションを理解する（随時追加中）](390647a7c26933940470)**|ryokkkke|19/11/21<br/>20/10/13|742<br/>96|
|23|**[npmとyarnのコマンド早見表](1696530bb9fd59aa28d8)**|rubytomato@github|18/07/01<br/>20/07/16|847<br/>80|
|24|**[Prettier 入門 ～ESLintとの違いを理解して併用する～](06377f3b96964964a65d)**|soarflat|18/02/21<br/>21/08/01|1307<br/>81|
|25|**[現代開発者のためのCSS基礎技術](e1af320e2755461649a0)**|arowM|20/06/18<br/>21/06/01|2371<br/>30|
|26|**[JavaScript アロー関数を説明するよ](4a49c7c78b55d75d693b)**|may88seiji|17/04/16<br/>21/02/11|1070<br/>76|
|27|**[お前らのReactは遅い](5b8f79d26e1b319ac44f)**|teradonburi|18/12/01<br/>21/05/27|1318<br/>77|
|28|**[たぶんこれが一番分かりやすいと思います React + Redux のフロー図解](a816c6380219b1d5a3bf)**|mpyw|17/01/05<br/>21/01/26|2753<br/>55|
|29|**[Firefoxは危険なJavaScriptに対応しない](8803f02c72a54f366f2a)**|rana\_kualu|21/07/04<br/>21/07/15|555<br/>555|
|30|**[Jamstackって何なの？何がいいの？](4075d03278d1fb51cc37)**|ozaki25|20/02/07<br/>20/11/05|548<br/>106|
|31|**[Redux入門【ダイジェスト版】10分で理解するReduxの基礎](49a1f03445b19cf407b7)**|kitagawamac|15/12/04<br/>18/04/24|2837<br/>56|
|32|**[JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。](a44825d253d023e31e4d)**|suin|20/03/22<br/>20/04/12|1676<br/>81|
|33|**[Reactを使うとなぜjQueryが要らなくなるのか](fdb61bc743395f8d8faf)**|naruto|16/05/09<br/>20/08/13|4415<br/>53|
|34|**[\<script\> タグに async / defer を付けた場合のタイミング](82c85ea4b8f9c373d684)**|phanect|17/08/05<br/>19/02/23|1319<br/>64|
|35|**[5歳娘「パパ、余分なpropsいっぱい書くんだね！」](814f40d08e9d30584e20)**|Yametaro|21/04/11<br/>21/04/18|982<br/>59|
|36|**[Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する](47ec3d243d00ddd0b4ed)**|thesugar|20/11/11<br/>20/11/13|858<br/>104|
|37|**[JavaScript の this を理解する多分一番分かりやすい説明](c6e2f2cf25327299cf03)**|takkyun|17/07/29<br/>18/10/14|1264<br/>72|
|38|**[5歳娘「パパのReact、めっちゃ遅いね！」](621bfd8c894f8fd36539)**|Yametaro|21/04/18<br/>21/04/28|842<br/>87|
|39|**[JavaScript学習ロードマップ](ae2dbbd34f8557d5af19)**|yukiji|20/09/02<br/>20/09/02|1435<br/>41|
|40|**[フルスタックエンジニアになるためのモダンな8つのプロジェクト](77a9746e9b98abbb97e6)**|kanye\_\_east|20/09/17<br/>21/03/08|1624<br/>21|
|41|**[ES2015(ES6) 入門](b251caf9cb59b72beb9b)**|soarflat|16/12/14<br/>21/08/01|1479<br/>61|
|42|**[TypeScript の概要](4de2a1ee6e2a541246f6)**|EBIHARA\_kenji|19/03/18<br/>19/07/17|625<br/>57|
|43|**[【保存版】Webフロントエンド基礎力（初心者向け）](43c52d7cffc318e9b1e9)**|teradonburi|19/11/04<br/>20/03/15|1836<br/>45|
|44|**[React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする](b9d3d17b8ab1f5dbfed2)**|soarflat|20/05/24<br/>21/08/01|577<br/>83|
|45|**[Reactで誰もがやりたかった10の機能。アプリ構想はあるけど作れない人の壁をぶっ壊す。](8f1b5a303400a09c4923)**|y\_kawase|18/09/03<br/>19/04/21|1920<br/>35|
|46|**[Chrome拡張の作り方 (超概要)](32b2a7b879f21b3edefc)**|RyBB|18/11/10<br/>20/12/25|613<br/>83|
|47|**[【JavaScript】アロー関数式を学ぶついでにthisも復習する話](69e5facdb60781927929)**|mejileben|17/03/26<br/>20/09/08|1532<br/>45|
|48|**[ReactとVueのどちらを選ぶか](236b6535695ea67b4fbe)**|yoichiwo7|18/06/16<br/>19/06/05|1885<br/>37|
|49|**[JavaScriptのpreventDefault()って難しくない？preventDefault()を使うための前提知識](4e9e64cabc0a1cd7a1ae)**|tochiji|18/08/19<br/>21/05/15|789<br/>57|
|50|**[Denoとはなにか - 実際につかってみる](8238c0c68ed525377883)**|azukiazusa|20/05/19<br/>21/03/07|917<br/>85|
|51|**[TypeScript + Node.js プロジェクトのはじめかた2020](3bbd2293e2ff286d9f49)**|notakaos|19/02/08<br/>20/08/12|758<br/>53|
|52|**[styled-componentsを使ったCSS設計](4547830b461d11a69a20)**|taneba|17/12/13<br/>19/11/14|950<br/>47|
|53|**[要素の取得方法まとめ](25e8b4e1b41c8d3211f4)**|amamamaou|17/10/27<br/>20/07/14|654<br/>65|
|54|**[React hooksを基礎から理解する (useState編)](f063e262b1d57d7e78b4)**|seira|20/01/26<br/>21/03/15|350<br/>100|
|55|**[2020年にWebフロントエンドを勉強する人が作るべきたったひとつのアプリ](03f322dee15b19c33613)**|Dragon-taro|20/02/04<br/>20/02/09|2383<br/>22|
|56|**[フロントエンドを100倍速くした（ ＾ω＾）](ed53c1cdb90f8d0f120c)**|nanocloudx|20/12/24<br/>21/01/21|1339<br/>30|
|57|**[vue.js + typescript = vue.ts ことはじめ](be90cc19fa3122266fd7)**|nrslib|18/10/08<br/>19/11/11|1362<br/>26|
|58|**[Vueのライフサイクルを完全に理解した](7f3233053b0e209ef355)**|chan\_kaku|18/11/24<br/>20/06/06|727<br/>46|
|59|**[Next.jsを使うべき5つの理由 + 実装Tips](5c0dfd8f7af8fb76af8f)**|Yuki\_Oshima|20/12/18<br/>20/12/18|359<br/>128|
|60|**[Ubuntuに最新のNode.jsを難なくインストールする](36cef7df85fe2cefa3ea)**|seibe|15/12/10<br/>19/02/10|1336<br/>37|
|61|**[Reactの学習、今からやるならこうする](971ffc8db6815e9aaad0)**|d0ne1s|20/04/27<br/>20/09/24|436<br/>83|
|62|**[ESLint 最初の一歩](f523dab04a25f617c87d)**|mysticatea|15/10/21<br/>19/07/08|1560<br/>41|
|63|**[Nuxt.jsを使うときに、SPA・SSR・SSGのどれがいいか迷ったら](f42e2f03663b00b5886d)**|nishinoshake|18/09/17<br/>20/11/22|858<br/>48|
|64|**[開発体験を変える! Chrome DevTools Tips 7選](d02863bddbd0c86efa4a)**|ryo2132|20/08/17<br/>20/08/18|1531<br/>10|
|65|**[治安の悪い Slack Emoji を作るツールを作った](8a24b8ad9d1eabd364aa)**|zk\_phi|18/06/17<br/>20/01/29|2567<br/>34|
|66|**[CORSまとめ](81698edd5812ff6acb34)**|tomoyukilabs|16/02/01<br/>17/11/30|1772<br/>48|
|67|**[あなたがまだ使っていないかもしれないHTML5の便利機能10選](9b419aac982c5323c429)**|kanye\_\_east|20/09/22<br/>20/09/30|1388<br/>5|
|68|**[スナック「jQuery」](b089a3f2e6dbc59cd5c8)**|8amjp|20/05/05<br/>20/05/05|2497<br/>9|
|69|**[webpackとBabelの基本を理解する(1) ―webpack編―](3e64612d22f3473f36a4)**|koedamon|19/03/03<br/>20/06/23|830<br/>32|
|70|**[Webフロントエンド開発で役立つサービスまとめ](ce2b664cdf5776970fbe)**|Tsuyoshi84|21/01/31<br/>21/03/14|825<br/>40|
|71|**[GAS ビギナーが GAS を使いこなすために知るべきこと 10 選](2c51681396fe12b6a0e4)**|tanabee|18/04/03<br/>20/10/21|1340<br/>36|
|72|**[[axios] axios の導入と簡単な使い方](2daaaf3a15c4c11956e9)**|ksh-fthr|17/09/13<br/>21/04/28|755<br/>36|
|73|**[【TypeScript】Utility Typesをまとめて理解する](e2791d7a57e96f6144e5)**|k-penguin-sato|20/07/09<br/>21/04/03|277<br/>116|
|74|**[JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。](d75f96f81ff83680013f)**|takeharu|15/11/28<br/>16/06/28|1649<br/>26|
|75|**[Facebook製のJavaScriptテストツール「Jest」の逆引き使用例](e97883fd46b67529d59f)**|chimame|16/10/13<br/>18/11/07|1246<br/>38|
|76|**[【JavaScript】本日未明、[ async - await ]さんが死体で発見され...](8ffbe865b8c53a75cfe3)**|impl\_s|20/08/25<br/>21/07/08|1312<br/>14|
|77|**[憧れのTypeScriptフルスタック環境がコマンド1発で作れる超軽量フレームワーク「frourio」](00b139bb565dddf8006a)**|m\_mitsuhide|20/10/08<br/>20/11/05|887<br/>33|
|78|**[TypeScriptのInterfaceとTypeの比較](d01b96363e58a7df830e)**|tkrkt|17/05/26<br/>19/04/16|891<br/>35|
|79|**[フロントエンド開発の３ステップ（npmことはじめ）](15f4a4961183cfbb2658)**|hashrock|15/04/11<br/>20/08/17|1627<br/>51|
|80|**[TypeScriptをプロダクト開発に使う上でのベストプラクティスと心得](ce0da04be28c35dc7d4f)**|jagaapple|20/02/04<br/>20/10/31|1321<br/>42|
|81|**[TypeScript で書く React コンポーネントを基礎から理解する](3ea63110517a1b66745b)**|sangotaro|19/12/19<br/>19/12/23|643<br/>40|
|82|**[Reactベース静的サイトジェネレータGatsbyの真の力をお見せします](1b7f0a86596353587466)**|uehaj|18/12/21<br/>21/01/28|896<br/>13|
|83|**[Vue.jsのv-modelを正しく使う](c27d69f17d2d08722b3a)**|simezi9|19/05/13<br/>20/05/01|629<br/>48|
|84|**[any型で諦めない React.EventCallback](f1ba99a7ca7e66290f24)**|Takepepe|19/01/28<br/>19/01/28|437<br/>54|
|85|**[jQuery から Vue.js へのステップアップ](e7b2596d06b8005e8e6f)**|mio3io|17/10/13<br/>18/12/14|1964<br/>23|
|86|**[4歳娘「パパ、具体的な名前をつけないで？」](bcd3166e5d2ad696a89e)**|Yametaro|20/03/18<br/>20/12/10|1809<br/>16|
|87|**[Denoの登場でNode.jsの時代は終わるのか？](c3ba2a528052827e3b3c)**|so99ynoodles|20/05/11<br/>20/06/03|2013<br/>16|
|88|**[Reactの最強フレームワークGatsby.jsの良さを伝えたい！！](00739eaf9ae7fc95c1ca)**|hppRC|19/11/30<br/>20/02/14|895<br/>37|
|89|**[NestJSのススメ ～Expressを超えてゆけ～](9b1e6b3efa62f3c2a166)**|elipmoc101|19/12/22<br/>20/04/18|342<br/>71|
|90|**[非同期処理ってどういうこと？JavaScriptで一から学ぶ](da434d169755cbb20447)**|kiyodori|15/12/19<br/>15/12/19|1339<br/>37|
|91|**[Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説](1735984f40540b8bdf91)**|matamatanot|20/03/08<br/>21/02/04|491<br/>62|
|92|**[なぜ我々は頑なにforを避けるのか](11e19b9da4892eb365c4)**|tetsuya-zama|20/09/22<br/>20/09/24|1112<br/>12|
|93|**[2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips](6b4834b9a13406535f32)**|kahirokunn|19/03/01<br/>20/05/01|1679<br/>18|
|94|**[色々書き比べた結果Tailwind CSSにしたという話](78ee15564bfefdea844c)**|Takazudo|21/06/06<br/>21/06/08|413<br/>413|
|95|**[Promiseの使い方、それに代わるasync/awaitの使い方](97041d3e0691c12f4974)**|suin|18/01/05<br/>20/03/12|722<br/>31|
|96|**[なぜ仮想DOMという概念が俺達の魂を震えさせるのか](4d25bc26def1719d52e6)**|mizchi|14/11/30<br/>20/09/21|2831<br/>24|
|97|**[フロントエンド開発者のための刺激的なプロジェクト10選](e720c2007716811c8b30)**|baby-degu|21/02/22<br/>21/02/22|582<br/>30|
|98|**[React開発において便利なTypeScriptの型まとめ](134386ee98b277f181f7)**|markey|19/03/06<br/>20/04/03|632<br/>51|
|99|**[JavaScriptで重複排除を自分で実装してはいけない（Setを使う）](7c1db0b0cea14a3d4419)**|netebakari|20/04/28<br/>20/05/01|724<br/>50|
|100|**[ようこそ！Electron入門](6ce4f46c1458e89c4cfc)**|umamichi|16/12/28<br/>19/11/22|717<br/>40|
[^1]: 1行目が総数。2行目が直近3ヵ月。