< Back

【完全保存版】2023年度Qiita月別人気記事ランキング【JavaScript】

今年人気になった記事一覧です。
Stockしたのに読んでない記事とか再発見してください。
特にまとめ記事を除外したり、作者の好き嫌いで弾いたりはしておりません。

成形用の参考コード
export const qiitaFileToPost = async (tag: string) => {
  const file = `${downloadsPath}/res_${tag}.json`;
  const data = JSON.parse((await readFileSync(file, 'utf8'))) as QiitaItem[];
  console.log(data.length);

  const result = [];
  // 12回ループ2023年ま
  for (let i = 1; i <= 12; i++) {
    const m = `0${i}`.slice(-2);
    const ym = `2023-${m}`;

    result.push(`## ${ym}\n`);
    const filterd = data.filter(d => d.created_at.startsWith(ym));
    console.log(ym, filterd.length);

    const orderedLike = filterd.sort((a, b) => b.likes_count - a.likes_count).slice(0, 3);
    const orderedStock = filterd.sort((a, b) => b.stocks_count - a.stocks_count).slice(0, 3);
    const orderedComment = filterd.sort((a, b) => b.comments_count - a.comments_count).slice(0, 3);

    // top3を抽出
    result.push(['Rank', 'Like', 'Stock', 'Comment'].join('|'))
    result.push([':---:', ':---:', ':---:', ':---:'].join('|'))
    for (let l = 0; l < 3; l++) {
      const rank = l + 1;
      const like = orderedLike[l]
      const likeOutput = `(${like?.likes_count}) [${like?.title}](${like?.url})${like.tags.map(t => t.name).join(', ')}}`;
      const stock = `(${orderedStock[l]?.stocks_count})[${orderedStock[l]?.title}](${orderedStock[l]?.url})`;
      const comment = `(${orderedComment[l]?.comments_count})[${orderedComment[l]?.title}](${orderedComment[l]?.url})`;
      result.push([rank, likeOutput, stock, comment].join('|'));
    }
    result.push("\n");

    await writeFileSync(`${downloadsPath}/${tag.toLocaleLowerCase()}.md`, result.join("\n"));
  }
}

year

Rank Like Stock Comment
1 (809) 悪名高きスワイプ広告を解析する (877)【永久保存版】0からReactを勉強するならこのロードマップに従え! (20)危険な文字
2 (655) 【永久保存版】0からReactを勉強するならこのロードマップに従え! (651)【2023年版】ブックマークすべきGitHubリポジトリまとめ (19)ITエンジニアなのにまだ投資やってないの?ChatGPTでクオンツシステム作って儲けようぜpart3
3 (487) 2023年度版フロントエンド開発環境構築徹底解説 (562)2023年最新版の有名企業のエンジニア向け研修資料をまとめてみた (18)「なんで、for文ってforなの?」って、みんな思ったはず。
4 (471) ITエンジニアなのにまだ投資やってないの?ChatGPTでクオンツシステム作って儲けようぜpart3 (534)フルスタックプログラマーの卵どもにおくる、独学チートシート (18)英語が話せてプログラムも書けるようになったのでより就職が難しくなった件について
5 (432) フルスタックプログラマーの卵どもにおくる、独学チートシート (520)2023年度版フロントエンド開発環境構築徹底解説 (16)JavaとJavaScriptが違うことをビジネスサイドに伝える例

2023-01

Rank Like Stock Comment
1 (343)JavaScript / TypeScript の豆知識 10 選 (341)JavaScript / TypeScript の豆知識 10 選 (12)【JavaScript】紆余曲折の末、『最も直感的に文字列に改行を入れる方法』にたどり着いた話
2 (213)【React】フォームは状態管理せずに実装できるよ (169)【React】フォームは状態管理せずに実装できるよ (8)JavaScriptで平仮名(ひらがな)を判定する
3 (148)【JavaScript】ES2023の新機能 (98)【フロントエンド】駆け出しエンジニアが目指すジュニアレベルのエンジニアとは【2023年版】 (7)【React】フォームは状態管理せずに実装できるよ

2023-02

Rank Like Stock Comment
1 (377) フロントエンドテストにおける知見の宝庫を発見!「javascript-testing-best-practices」 (352) フロントエンドテストにおける知見の宝庫を発見!「javascript-testing-best-practices」 (7)長年break文を使い続けたプログラマーが、break文の無いElixirを学んで、遅延評価にたどり着いた話
2 (193)console.logだけではないconsoleの使い方 (190)『リーダブルコード』を実践的に活用するための問題集[Javascript](第1部 表面上の改善) (7)TypeScriptで戻り値がvoid型の関数を扱う場合の注意点
3 (151)『リーダブルコード』を実践的に活用するための問題集[Javascript](第1部 表面上の改善) (155)console.logだけではないconsoleの使い方 (6)null + null = 0 になるんだけど in JavaScript

2023-03

Rank Like Stock Comment
1 (255)【コード品質】綺麗なReactコード 応用7例 (230)【コード品質】綺麗なReactコード 応用7例 (14)ViteとDockerにてシンプルなHTML(EJS)/CSS(Sass)/JSコーディング環境を構築する方法
2 (168)最低限の知識で簡単なWebアプリを作る(生JavaScript vs React&TypeScript、やりたいこと別サンプル集) (198)最低限の知識で簡単なWebアプリを作る(生JavaScript vs React&TypeScript、やりたいこと別サンプル集) (8)小道具:英数の別文字コードへの変換(テキストデータなのにボールドとかイタリックとかスクリプト体とか…)
3 (155)Webの次世代アーキテクチャ - PESPA (155)Webの次世代アーキテクチャ - PESPA (6)[CPS変換]継続ってパイプライン的な何かだなと思ったらなんかわかってきた

2023-04

Rank Like Stock Comment
1 (295)オブジェクトのクローンにJSON化を使う時代は終わった!【JavaScript】 (222)オブジェクトのクローンにJSON化を使う時代は終わった!【JavaScript】 (10)オブジェクトのクローンにJSON化を使う時代は終わった!【JavaScript】
2 (117)【全人類へ】お前らはスペルミスが多すぎるッッ!!絶対に入れて欲しい拡張機能!【VisualStudioCode】 (101)【GPT】アーキテクチャが参考になるアプリケーションまとめ (10)[ChatGPT]2次元キャラと会話したかったので会話アプリを自作してみた
3 (109)【GPT】今日から使えるOSSライブラリまとめ (84)【GPT】今日から使えるOSSライブラリまとめ (5)【Javascript】JSフレームワーク等を学ぶなら覚えておきたいコト

2023-05

Rank Like Stock Comment
1 (276)すぐに使える!Reactテンプレート15選 (295)すぐに使える!Reactテンプレート15選 (20)危険な文字
2 (95)【react-hydration-error】Text content does not match server-rendered HTMLを解決するときの話 (98)JavaScriptのthisに沼って仕様書にまで沈んだ話 (7)レガシーなcallbackをasync/awaitで書き直す
3 (92)危険な文字 (85)【react-hydration-error】Text content does not match server-rendered HTMLを解決するときの話 (6)【React】setCount(count + 1)みたいな書き方が良くないよーってお話

2023-06

Rank Like Stock Comment
1 (327)jQueryへの別れ:現代的な開発のための必須JavaScriptメソッド (400)jQueryへの別れ:現代的な開発のための必須JavaScriptメソッド (14)【TypeScript/JavaScript】配列操作reduce()を救いたい。
2 (226)【TypeScript】超実践的テクニック集【Reactなし】 (236)【TypeScript】超実践的テクニック集【Reactなし】 (11)「もう1年以上JavaScript書いてるのに、どっちがshiftなのか覚えられないんだけど?!」
3 (155)React 2023 最新 おすすめ 教材 と検索して疲弊しているあなたもしくはサーバーサイドエンジニアの方へ (165)React 2023 最新 おすすめ 教材 と検索して疲弊しているあなたもしくはサーバーサイドエンジニアの方へ (8)jQueryへの別れ:現代的な開発のための必須JavaScriptメソッド

2023-07

Rank Like Stock Comment
1 (471)ITエンジニアなのにまだ投資やってないの?ChatGPTでクオンツシステム作って儲けようぜpart3 (562)2023年最新版の有名企業のエンジニア向け研修資料をまとめてみた (19)ITエンジニアなのにまだ投資やってないの?ChatGPTでクオンツシステム作って儲けようぜpart3
2 (398)2023年最新版の有名企業のエンジニア向け研修資料をまとめてみた (474)ITエンジニアなのにまだ投資やってないの?ChatGPTでクオンツシステム作って儲けようぜpart3 (10)【周りに流されるな!😱】人気なReactよりも初心者にVueがおすすめな理由 4選 🐳
3 (237)ITエンジニアなのにまだ投資やってないの?ChatGPTでクオンツシステム作って儲けようぜ (305)ITエンジニアなのにまだ投資やってないの?ChatGPTでクオンツシステム作って儲けようぜ (8)Amazonの商品ページのURLを短くしてコピーしたいときに使うブックマークレット

2023-08

Rank Like Stock Comment
1 (809)悪名高きスワイプ広告を解析する (248)悪名高きスワイプ広告を解析する (18)「なんで、for文ってforなの?」って、みんな思ったはず。
2 (432)「なんで、for文ってforなの?」って、みんな思ったはず。 (166)「なんで、for文ってforなの?」って、みんな思ったはず。 (9)悪名高きスワイプ広告を解析する
3 (189)Vue3をアゲアゲ↑↑する記事 (149)【むっず】Reactコードで理解する「結合度」 (6)主要言語で任意精度演算

2023-09

Rank Like Stock Comment
1 (219)【Qiita】糞コードは直すな!ぶっ壊せ! (206)VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス (13)Qiitaで自作の素因数分解プログラムを公開したら添削されて30倍速くなった件(2)
2 (204)VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス (91)【Qiita】糞コードは直すな!ぶっ壊せ! (5)JSでブラウザの戻るボタンを止める方法。
3 (75)React Server ComponentsとApp Routerをそろそろちゃんと理解したい (87)ITエンジニアなのにまだ投資やってないの?ChatGPTでクオンツシステム作って儲けようぜpart4 (5)Javascriptのコーディングでハマったところ

2023-10

Rank Like Stock Comment
1 (655)【永久保存版】0からReactを勉強するならこのロードマップに従え! (877)【永久保存版】0からReactを勉強するならこのロードマップに従え! (18)英語が話せてプログラムも書けるようになったのでより就職が難しくなった件について
2 (432)フルスタックプログラマーの卵どもにおくる、独学チートシート (534)フルスタックプログラマーの卵どもにおくる、独学チートシート (6)0 だけ末尾になるように並べ替える
3 (413)console.log() の代わりにdevtoolsのLogpointsを使う (338)console.log() の代わりにdevtoolsのLogpointsを使う (6)キー入力でアルファベットやコントロールキーが効かなくなった原因はこれだった

2023-11

Rank Like Stock Comment
1 (274)フルスタックプログラマーの卵どもにおくる、独学チートシート : 2 (399)フルスタックプログラマーの卵どもにおくる、独学チートシート : 2 (16)JavaとJavaScriptが違うことをビジネスサイドに伝える例
2 (197)あなたの作った画像アップローダー、投稿者の個人情報ダダ洩れだよ! (108)あなたの作った画像アップローダー、投稿者の個人情報ダダ洩れだよ! (12)いろんな言語比較してみた
3 (118)ついに JavaScript に groupBy が実装されたぞ!!! (84)Google Apps ScriptでGPTsのCustom ActionsのAPIを作ってみた (6)paizaのスキルチェック(JavaScript)でよく使う技

2023-12

Rank Like Stock Comment
1 (487)2023年度版フロントエンド開発環境構築徹底解説 (651)【2023年版】ブックマークすべきGitHubリポジトリまとめ (6)JSで日付扱うならmoment
2 (431)【2023年版】ブックマークすべきGitHubリポジトリまとめ (520)2023年度版フロントエンド開発環境構築徹底解説 (6)querySelectorで取得している値について調べてみた
3 (362)【エンジニア向け】生産性を上げるチートシートまとめ (455)【エンジニア向け】生産性を上げるチートシートまとめ (6)JqueryでRedmineの「活動ページ」をもっと便利に②(フィルタリング機能と移動機能)