本記事は、Simon Holdorf氏による「9 Popular GitHub Repos For Every Web Developer」（2021年4月4日公開）の和訳を、著者の許可を得て掲載しているものです。

こちらもどうぞ
すべてのウェブ開発者へ。人気GitHubリポジトリ10選

すべてのウェブ開発者へ。人気GitHubリポジトリ9選

便利なツール、参考になる例など

はじめに

GitHubは、最近の（ウェブ）開発に関連するすべてのワンストップショップです。フレームワーク、デモ、あらゆる種類のコレクションなど、GitHubで見つけられないものはないでしょう。しかし、この膨大な量が問題です。あまりにも多くのレポジトリがあるので、おそらく聞いたことのないクールなものがあります。

そこで今回も、知っておくべき最も人気のGitHubリポジトリを紹介することにします。各リポジトリには少なくとも30,000個の星が付いています。

1. Realworld

このリストの最初のリポジトリはRealworldです。制作者は「すべてのデモアプリの母」と呼んでいます。確かに大胆な発言ですが、誇張ではないと思います。

Realworldは、典型的なMedium.comクローンです。しかし、それだけではありません。リポジトリでは、さまざまなフロントエンドとバックエンドの実装を選ぶことができ、それらを自由に組み合わせることができます。
Vue.js + Node/ExpressやReact /Redux + Rust？どちらもできます！

Realworldでは、まったく同じブログアプリが、ほぼすべての人気言語やフレームワークでどのように構築されているかを見ることができます。すごいですよね？

2. You Don't Know JS Yet

このリポジトリは、Getifyという別名で広く知られているKyle Simpson氏の人気書籍シリーズです。この書籍では、JavaScriptの仕組みを深く掘り下げ、次のトピックを扱っています。

はじめに
スコープとクロージャ
オブジェクトとクラス
型と文法
同期と非同期
ES.Next以降

何よりも素晴らしいのは、何と言っても完全無料で読むことができることです！これは間違いなくJavaScriptに関する最高のシリーズの1つであり、JSの本質を理解するのにとても役立ちました。JavaScriptをよく知っていると思っている人も、この本を読んでみてください。驚くこと間違いなしです。

3. Airbnb JavaScriptスタイルガイド

最も妥当なJavaScriptへのアプローチです。

Airbnb JavaScriptスタイルガイドは、最も人気があり、よく使用されているスタイルガイドです。より良いJSコードを記述するのに役立ち、チームでの作業やESLintとの組み合わせで特に役立ちます。

varの代わりにconstを使用する例です。

4. Storybook

Storybookは、UIコンポーネントの開発環境です。コンポーネントライブラリの参照、各コンポーネントのさまざまな状態の表示、コンポーネントのインタラクティブな開発とテストが可能です。React、Vue、Angular、React Native、Ember、ウェブコンポーネントなどをサポートしています！

Storybookは、アプリ外で動作します。そのため、UIコンポーネントを分離して開発でき、コンポーネントの再利用やテストの容易性、開発速度を向上させることができます。アプリ固有の依存関係を気にすることなく、素早く構築できます。

こちらに素晴らしい例があります。

5. HTML5 Boilerplate

HTML5 Boilerplateは、ウェブ上で最も人気のある、プロフェッショナルなフロントエンドテンプレートの1つです。高速で堅牢、かつ柔軟性に優れたウェブサイトやアプリの構築に役立ちます。Microsoft、NASA、Nikeなどの企業が使用しています。

主な機能は次の通りです。

HTML5対応
プログレッシブエンハンスメントを念頭に置いた設計
Normalize.css、jQuery、Modernizerを含む
ウェブサイトのパフォーマンスとセキュリティを向上させる設定
CSSメディアクエリのプレースホルダ
パフォーマンスを最適化したデフォルトの印刷スタイル
Google Universal Analyticsスニペットの最適化バージョン

6. Node.js Best Practices

このリポジトリは、Node.jsの開発に関するさまざまなベストプラクティスを包括的に集めたものです。現在、80を超えるベストプラクティス、スタイルガイド、アーキテクチャのヒントで構成されています。

次のようなベストプラクティスがあります。

プロジェクト構造
エラー処理
コードスタイル
テストと全体的な品質
制作開始
セキュリティ
パフォーマンス

これは素晴らしいリポジトリであり、情報源です。Node.jsの開発に興味があれば、ぜひチェックしてください！

7. Front-End Checklist

ウェブアプリを起動する前に、何が必要か、何のテストが必要か、自問したことはありますか？Front-End Checklistリポジトリに答えがあります！

掲載されている項目の多くは、大半のプロジェクトで必須となっており、次のような構成です。

Head
HTML
ウェブフォント
CSS
画像
JavaScript
セキュリティ
パフォーマンス
アクセシビリティ
SEO
翻訳

Apple Web App MetaDataの例です。

8. NW.js

NW.jsは、Chromiumとnode.jsベースのアプリランタイムです。NW.jsを使用して、HTMLとJavaScriptでネイティブアプリを作成できます。また、DOMから直接Node.jsモジュールを呼び出すことができ、あらゆるウェブ技術を使用してネイティブアプリを作成する新しい方法を可能にします。

主な機能は次の通りです。

最新のHTML5、CSS3、JS、WebGLで作成したアプリ
Node.js APIとそのすべてのサードパーティモジュールの完全サポート
優れたパフォーマンス：NodeとWebKitは同じスレッドで実行
アプリのパッケージ化と配布が容易
Linux、Mac OS X、Windowsで利用可能

9. fullPage.js

Alvaro Trigo氏のfullPage.jsは、SPA（シングルページアプリケーション）やランドスケープスライダーを作成できる、シンプルで使いやすいライブラリです。Vue、React、Angular対応で、モバイルデバイスにも完全に対応しています。

こちらに素晴らしい例があります。

このライブラリは、オープンソースプロジェクトでは無料で使用できます。ただし、商業環境で使用する場合は、ライセンスを購入する必要があります。
とてもクールなライブラリなので、ぜひチェックしてください！

おわりに

これらのリポジトリをあなたのプロジェクトやその他の目的に使ってもらえたら嬉しいです。

記事を気に入ったらTwitterでフォローしてください。プログラミング、制作、執筆、キャリアについてもっと学べます🥰

翻訳協力

この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。

Original Author: Simon Holdorf (@simonholdorf)
Original Article: 9 Popular GitHub Repos For Every Web Developer
Thank you for letting us share your knowledge!

選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen

ご意見・ご感想をお待ちしております

今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。Twitterでもご意見を受け付けております。
皆様のメッセージをお待ちしております。