[[373657]]

この記事は、WeChat公式アカウント「フルスタック修行への道」（鮑兄弟著）からの転載です。転載の許可については、「フルスタック修行への道」公式アカウントまでお問い合わせください。

2021年が到来し、皆さんの中には既に2021年の目標を立て始めている方もいらっしゃるでしょう。2020年には、フロントエンドの学習教材について個人的にお問い合わせをいただいた方もいらっしゃいました。その質問に一様にお答えするため、年末年始にGitHubから素晴らしいオープンソースプロジェクトを10個厳選しました。

もちろん、これら10のオープンソースプロジェクトはフロントエンド分野に限定されるものではありません。これらのプロジェクトが皆さんの進歩に役立つことを願っています。まずは最初のプロジェクト「build-your-own-x」からご紹介しましょう。

自分で作るx

独自のものを構築する（ここにテクノロジーを挿入）

https://github.com/danistefanovic/build-your-own-x

このリポジトリは27の異なるドメインのコンテンツを網羅しており、それぞれ特定の言語を用いて特定の機能を実装しています。下の画像は、フロントエンドドメインに関連するコンテンツを示しています。

JavaScriptアルゴリズム

JavaScript で実装されたアルゴリズムとデータ構造、説明、参考文献へのリンク

https://github.com/trekhleb/javascript-algorithms

このリポジトリには、JavaScriptベースの様々なアルゴリズムとデータ構造が含まれています。それぞれのアルゴリズムとデータ構造には、関連する説明や参考資料（および関連ビデオ）へのリンクを含むREADMEファイルが用意されています。

30秒のコード

あらゆる開発ニーズに対応する短い JavaScript コード スニペット

https://github.com/30-seconds/30-seconds-of-code

このリポジトリには、開発ニーズを満たす簡潔なJavaScriptコードスニペットが多数含まれています。例えば、以下の`listenOnce`関数は、イベントハンドラーが1回だけ実行されることを保証します。

 const listenOnce = (el, evt, fn) => {
 fired = falseとします。
  el.addEventListener(evt, (e) => {
 if (!発火) fn(e);
発砲 = true ;
 });
 }; 
 
一度聞く(
 document.getElementById( 'my-btn' )、
 'クリック'
 () => console.log( 'こんにちは!' )
 ); // 'Hello!'は最初のクリック時にのみ記録されます

ノードのベストプラクティス

Node.jsのベストプラクティスリスト

https://github.com/goldbergyoni/nodebestpractices

このリポジトリでは、Node.js アプリケーションのベスト プラクティスを紹介しており、次のものが含まれています。

RealWorldのサンプルアプリ

「すべてのデモ アプリの母」 — React、Angular、Node、Django などを搭載した模範的なフルスタック Medium.com クローン。

https://github.com/gothinkster/realworld

ほとんどの「Todo」の例では、フレームワークと関連テクノロジー スタックを使用して実際のアプリケーションを構築するために必要な知識と視点を十分に説明せずに、フレームワークの機能を紹介するだけです。

RealWorldは、任意のフロントエンドフレームワーク（React、Vue、Angularなど）と任意のバックエンドフレームワーク（Node、Go、Springなど）を選択して、「Conduit」と呼ばれるリアルで美しくデザインされたフルスタックアプリケーションを構築できるようにすることで、この問題を解決します。以下の図は、現在サポートされているフロントエンドフレームワークを示しています（コンテンツが膨大であるため、ここでは一部のみを示しています）。

クリーンコードJavaScript

JavaScript に適応したクリーンコードの概念

https://github.com/ryanmcdermott/クリーンコード-javascript

このリポジトリでは、検索可能な名前を使用するという著者の提案など、クリーンな JavaScript コードの記述方法を示しています。

悪い

86400000の目的は何ですか?
 setTimeout(blastOff, 86400000);

わかりました

// この値を説明するには、単純でわかりやすい定数を使用します。
定数MILLISECONDS_IN_A_DAY = 60 * 60 * 24 * 1000; //86400000; 
 
 setTimeout(blastOff, 1日あたりミリ秒);

このリポジトリには、以下の目次に示すように 11 のセクションが含まれています。

JavaScriptに関する質問

（高度な）JavaScript の質問とその説明の長いリストですか?

https://github.com/lydiahallie/javascript-questions

このリポジトリには、初級から上級レベルまでのJavaScriptの知識が詰まっています。JavaScriptの理解度をテストしたり、面接対策に活用したりできます。

素晴らしいデザインパターン

ソフトウェアおよびアーキテクチャ関連の設計パターンの厳選されたリスト。

https://github.com/DovAmir/awesome-design-patterns

このリポジトリには、ソフトウェアとアーキテクチャに関連するデザインパターンの厳選リストが含まれています。ソフトウェア工学において、デザインパターンとは、ソフトウェア設計において頻繁に発生する様々な問題に対する解決策を指します。この用語は、1990年代にErich Gammaらによって建築設計の分野からコンピュータサイエンスに導入されました。

開発者ロードマップ

2021年にWeb開発者になるためのロードマップ

https://github.com/kamranahmedse/developer-roadmap

7.4K 142K 21.3K 2021-01-04

このリポジトリには、Web開発者になるための学習ロードマップを示すチャートのセットが含まれています。フロントエンド、バックエンド、DevOpsのロードマップが含まれていますが、ここではフロントエンドのロードマップのみを示します（元の画像は長いため、ここでは一部のみを示しています）。

無料のプログラミング書籍

無料で入手できるプログラミング書籍

https://github.com/EbookFoundation/フリープログラミングブック

このリポジトリには、複数の言語での無料学習リソースのリストが含まれています。下の画像は、無料の中国語リソースのリストです（コンテンツは多数ありますが、一部のみを示しています）。