100 days of code frontend
1.0.0
注：このリソースは古いです！ 2021年の推奨事項の多くは2021年のフロントエンドWeb開発の学習に時代遅れであると感じているため、2021年7月末までにこのリポジトリをアーカイブします。
ページの上部に星€を提供し、より多くのリソースを求めて私に従ってください！
フロントエンド開発についてもっと知りたいですか？考慮する：
これは、＃100daysofcodeでフロントエンド開発を学習するためのやや意見のカリキュラムです。幅広いフロントエンド開発トピックをカバーするため、いずれかの領域に深く潜るのではなく、「調査」スタイルのコースと考えることができます。理想的には、このカリキュラムを完成させることからのあなたの持ち帰りは、各トピックに精通し、必要に応じて将来あらゆる分野で簡単に潜ることができます。
このカリキュラムは、Kamran AhmedのModern Frontend Developer Roadmapによって大きな影響を受けました。チェックしてください - それは素晴らしいです。
注：フロントエンド開発は、多くの人々にとって多くの異なることを意味することを知っています！あなたがフロントエンドの開発者であり、このガイドを改善できると思われる場合は、貢献セクションで説明されている問題を提起してお知らせください。ありがとう！
いくつかの信じられないほどの貢献者のおかげで、このカリキュラムは次の言語に翻訳されています！
このリポジトリの根本的な原則は、タイムボックス化です。過去にWeb開発や同様のスキルを学ぼうとする時間を費やした場合、特定のトピックでウサギの穴を下って行くことを経験した可能性があります。このリポジトリは、各テクノロジーに一定の日数を割り当てることを目的としており、その日数が増えたら次のテクノロジーに移動することを奨励しています。
この課題を開始するとき、誰もが異なるレベルの習熟度を持っていると予想されており、それは大丈夫です。初心者でも専門家のフロントエンド開発者も、これらの各分野でTimeBoxedのプラクティスの恩恵を受けることができます。
推奨される日々のアクティビティは次のとおりです。
以下に、カリキュラムの各トピックに関する少しの情報と、それぞれについて何をすべきかに関するいくつかのアイデア/ガイダンスを見つけることができます。このカリキュラムと一緒に行うプロジェクトのインスピレーションについては、プロジェクトのアイデアセクションを参照してください。
TimeBoxingの原則の一部として、「学習領域とアイデア」セクションのすべてのアイテムを通過しない場合は問題ありません。代わりに、各エリアに割り当てられた日数を最大限に活用してから先に進むことに集中する必要があります。
HyperText Markup Language（HTML）は、WebページとWebアプリケーションを作成するための標準マークアップ言語です。カスケードスタイルのシート（CSS）とJavaScriptにより、World Wide Webのコーナーストーンテクノロジーのトライアドを形成します。 Webブラウザは、WebサーバーまたはローカルストレージからHTMLドキュメントを受信し、ドキュメントをマルチメディアWebページにレンダリングします。 HTMLは、セマンティックおよび元々ドキュメントの外観の手がかりを含むWebページの構造について説明します。 （出典：ウィキペディア）
HTMLは、実際にはWeb開発の基盤です。 JavaScriptベースのフレームワークでさえ、HTMLを何らかの形で作成することになります。
Cascading Style Sheet（CSS）は、HTMLのようなマークアップ言語で記述されたドキュメントのプレゼンテーションを説明するために使用されるスタイルシート言語です。 CSSは、HTMLとJavaScriptと並んで、World Wide Webの礎石テクノロジーです。 CSSは、レイアウト、色、フォントなど、プレゼンテーションとコンテンツの分離を可能にするように設計されています。この分離は、コンテンツのアクセシビリティを改善し、プレゼンテーション特性の仕様におけるより柔軟性と制御を提供し、複数のWebページが別の.CSSファイルで関連するCSSを指定してフォーマットを共有し、構造コンテンツの複雑さと繰り返しを減らすことができます。 （出典：ウィキペディア）
CSSは、Web開発のもう1つの重要なコンポーネントです。主にHTML要素のスタイルと配置に使用されますが、かつてJavaScriptによって処理されるよりダイナミックなタスク（例えば、アニメーション）がますます能力を持っています。
<style>タグ<link>を使用した外部CSSしばしばJSと略されるJavaScriptは、ECMAScript仕様に準拠する高レベルの解釈プログラミング言語です。これは、動的、弱く型付け、プロトタイプベース、マルチパラダイムとしても特徴付けられる言語です。 HTMLとCSSに加えて、JavaScriptはWorld Wide Webの3つのコアテクノロジーの1つです。 JavaScriptはインタラクティブなWebページを有効にするため、Webアプリケーションの重要な部分です。大部分のWebサイトがそれを使用しており、すべての主要なWebブラウザには、それを実行するための専用のJavaScriptエンジンがあります。 （出典：ウィキペディア）
JavaScriptは、フロントエンドの世界でますます重要になっています。かつては主にページを動的にするために使用されていましたが、現在では多くのフロントエンドフレームワークの基礎となっています。これらのフレームワークは、以前はバックエンドによって処理されていた多くのタスクを処理します（例えば、異なるビューのルーティングと表示）。
<script>タグと配置jQueryは、高速で小さく、機能が豊富なJavaScriptライブラリです。 HTMLドキュメントのトラバーサルと操作、イベント処理、アニメーション、Ajaxなど、多数のブラウザで動作する使いやすいAPIを使用すると、はるかにシンプルになります。汎用性と拡張性の組み合わせにより、jQueryは何百万人もの人々がJavaScriptを書く方法を変えました。 （出典：jquery.com）
Plain（「Vanilla」とも呼ばれる）JavaScriptで時間を過ごした後、特にHTML要素へのアクセスと操作に関連するタスクが少し面倒です。かなり長い間、jQueryは、さまざまなブラウザーでこれらの種類のタスクを容易かつ一貫性にするための頼りになるライブラリでした。現在、jQueryは、Vanilla JavaScript、CSS、および新しいJavaScriptフレームワークの進歩のために、必ずしも「必須」学習ではありません（後でフレームワークを見てください）。それでも、jQueryを学び、それを小さなプロジェクトに適用するのに少し時間がかかることは有益です。
Responsive Web Design（RWD）は、Webデザインへのアプローチであり、Webページがさまざまなデバイスやウィンドウまたは画面サイズでうまくレンダリングされます。また、最近の研究では、視聴者の近接性はRWDの拡張機能として視聴コンテキストの一部として考慮されています。ユーザビリティと満足度を確保するために、すべてのデバイスでコンテンツ、設計、パフォーマンスが必要です。 RWDを使用して設計されたサイトは、 @Mediaルールの拡張であるFluid、Proportionベースのグリッド、柔軟な画像、CSS3メディアクエリを使用して、レイアウトを視聴環境に適応させます。 （出典：ウィキペディア）
レスポンシブWebデザインとは、すべてのタイプのデバイスでWebアプリケーションを適切に外観と機能させることです。簡単な例としては、ウェブサイトがデスクトップWebブラウザーと携帯電話ブラウザーの両方で適切に見て機能する必要があることです。レスポンシブデザインの理解は、フロントエンド開発者にとって非常に重要です！
Webアクセシビリティとは、障害のある人によるWorld Wide WebのWebサイトとの相互作用またはアクセスを妨げる障壁がないことを保証する包括的な慣行です。サイトが正しく設計、開発、編集されると、通常、すべてのユーザーが情報と機能に平等にアクセスできます。 （出典：ウィキペディア）
多くの場合、A11Yと書かれているアクセシビリティは、フロントエンドのWeb開発で最も重要なトピックの1つですが、しばしば短くなっているようです。アクセス可能なWebアプリケーションの作成は、倫理的に健全であるだけでなく、アクセス可能なときにアプリケーションを表示できる追加のオーディエンスを考慮して、多くのビジネスに意味があります。
Gitは、スピードと効率を備えた小規模から非常に大きなプロジェクトまですべてを処理するように設計された無料のオープンソース分散バージョン制御システムです。 （出典：git-scm.com）
バージョン/コードコントロールは、Web開発者のツールキットの重要な部分です。さまざまなバージョン制御システムがありますが、Gitは現時点で最も一般的です。学習しながらプロジェクトを追跡するためにそれを使用することができます（そしてそうすべきです！）！
node.jsは、ブラウザの外でJavaScriptコードを実行するオープンソースのクロスプラットフォームJavaScriptランタイム環境です。 JavaScriptは、主にクライアント側のスクリプトに使用されます。このスクリプトでは、JavaScriptで書かれたスクリプトがWebページのHTMLに埋め込まれ、ユーザーのWebブラウザーのJavaScriptエンジンによってクライアント側を実行します。 node.js開発者は、JavaScriptを使用してコマンドラインツールを作成し、サーバー側のスクリプトを作成し、スクリプトを実行して、ページがユーザーのWebブラウザーに送信される前にダイナミックWebページコンテンツを作成します。したがって、node.jsは、サーバー側とクライアント側のスクリプトの異なる言語ではなく、単一のプログラミング言語を中心にWebアプリケーション開発を統合する「どこでもJavaScript」パラダイムを表します。 （出典：ウィキペディア）
node.jsは通常、バックエンドソリューションとして知られていますが、フロントエンド開発をサポートするために非常に頻繁に使用されます。これは、ビルドツールの実行、テスト、糸くずなどを含む、さまざまな方法でこれを行います（すべてカバーされます！）。ノードパッケージマネージャー（NPM）はノードのもう1つの優れた機能であり、プロジェクトの依存関係を管理するために使用できます（つまり、プロジェクトが依存する可能性のあるコードライブラリ - jqueryは例です！）。
SASSは、基本的な言語にパワーと優雅さを加えるCSSの拡張です。これにより、変数、ネストされたルール、ミキシン、インラインインポートなどを使用することができます。 SASSは、特にコンパススタイルライブラリの助けを借りて、大きなスタイルシートを十分に組織化し、小さなスタイルシートを迅速に稼働させるのに役立ちます。 （出典：sass-lang.com）
SASSを使用すると、よりプログラム的な方法でCSSを作成できます。いくつかのCSSを行った場合、同じカラーコードを指定して、多くの情報を繰り返していることに気付いたかもしれません。 SASSでは、変数、ループ、ネストなどを使用して、冗長性を減らし、読みやすさを向上させることができます。 SASSでコードを作成した後、通常のCSSにすばやく簡単にコンパイルできます。
*いくつかの選択肢：基礎、バルマ、実現
Bootstrapは、WebサイトやWebアプリケーションを開発するための無料でオープンソースのフロントエンドフレームワークです。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他のインターフェイスコンポーネント、およびオプションのJavaScript拡張機能のHTMLおよびCSSベースの設計テンプレートが含まれています。 （出典：ウィキペディア）
レイアウト、スタイリング、およびWebアプリケーションの動的にするための多くのオプションがありますが、フレームワークから始めることで、ヘッドスタートを得るのに非常に役立つことがわかります。 Bootstrapはそのようなフレームワークの1つですが、それは間違いなく唯一のオプションからはほど遠いものです！このようなフレームワークに精通することをお勧めしますが、HTML、CSS、およびJavaScriptの基礎を把握することは、1つのフレームワークに巻き込まれるよりもはるかに重要です。
ブロック、要素、修飾剤方法論（一般にBEMと呼ばれる）は、HTMLおよびCSSのクラスに人気のある命名規則です。 Yandexのチームによって開発された目標は、開発者が特定のプロジェクトにおけるHTMLとCSSの関係をよりよく理解できるようにすることです。 （出典：CSS-Tricks.com）
命名とBEMのような組織システムが存在することと、それらが使用される理由を知ることが重要です。ここでいくつかの調査を行いますが、初心者レベルでは、テーマにあまり時間を費やすことをお勧めしません。
Gulpは、開発ワークフローで痛みを伴うまたは時間のかかるタスクを自動化するためのツールキットなので、いじりを止めて何かを構築できます。 （出典：gulpjs.com）
最新のフロントエンド開発では、バンドリング、ファイルの移動、参照の注入などのタスクをHTMLファイルに自動化する必要があることがよくあります。 Gulpは、これらのことをするのに役立つツールの1つです！
buildサブディレクトリに配置しますそのコアでは、Webpackは最新のJavaScriptアプリケーション用の静的モジュールバンドラーです。 Webpackがアプリケーションを処理すると、プロジェクトが必要とするすべてのモジュールをマップし、1つ以上のバンドルを生成する依存関係グラフを内部的に構築します。 （出典：webpack.js.org）
多くの異なるタスクに取り組んでいる多くの異なる開発者がいる大規模なWeb開発プロジェクトがあると想像してください。同じファイルですべてが動作するのではなく、可能な限りそれらをモジュール化することをお勧めします。 Webpackは、チームをモジュール式に作業させ、アプリケーションを構築する時間を確保することでこれを有効にします。WebpackはHTML、CSS/SASS、JavaSScript、画像などをまとめます。Webpackは唯一のモジュールバンドラーではありませんが、現時点ではフロントランナーのようです。
ESLINTは、2013年6月にNicholas C. Zakasが元々作成したオープンソースのJavaScript Lintingユーティリティです。コードリントは、特定のスタイルガイドラインに準拠していない問題のあるパターンまたはコードを見つけるために頻繁に使用される静的分析の一種です。ほとんどのプログラミング言語にはコードリナーがあり、コンパイラは清算プロセスに糸くずを組み込むことがあります。 （出典：eslint.org）
糸くずは、コードの品質、読みやすさ、一貫性のための素晴らしいツールです。リナーを使用すると、構文が生産に移行する前に、構文とフォーマットのミスをキャッチするのに役立ちます。リンジターを手動で実行したり、ビルド/展開プロセスに含めることができます。
*いくつかの選択肢：Vue、Angular、Ember
React（React.jsまたはReactjsとも呼ばれます）は、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。 Facebookと個々の開発者や企業のコミュニティによって維持されています。 Reactは、単一ページまたはモバイルアプリケーションの開発のベースとして使用できます。複雑な反応アプリケーションでは、通常、APIとの国家管理、ルーティング、および相互作用に追加のライブラリを使用する必要があります。 （出典：ウィキペディア）
フロントエンドのJavaScriptフレームワークは、最新のフロントエンド開発の最前線にあります。ここでの重要なポイントの1つは、反応が非常に人気があるにもかかわらず、ユーザーインターフェイスを構築するためのライブラリにすぎないのに対し、VueやAngularのようなフレームワークはよりフル機能を獲得することを目指していることです。たとえば、さまざまなビューへのルーティングを必要とするIn Reactを使用してアプリケーションを構築する場合、 react-routerようなものを持ち込む必要があります。
create-react-app新しいReactプロジェクトを足場化するための便利なツールです。Reduxは、JavaScriptアプリの予測可能な状態コンテナです。一貫して振る舞い、さまざまな環境（クライアント、サーバー、ネイティブ）で実行され、テストしやすいアプリケーションを作成するのに役立ちます。それに加えて、ライブコード編集と時間旅行デバッガーを組み合わせた優れた開発者エクスペリエンスを提供します。 （出典：redux.js.org）
より大きく、より大きいフロントエンドアプリケーションを構築すると、アプリケーションの状態を維持するのが難しいことに気付き始めます。ユーザーがログインしている場合、ユーザーが誰であるか、一般的にアプリケーションで何が起こっているのかなどです。 Reduxは、アプリケーションがその論理の基礎となる単一の状態源を維持するのに役立つ優れたライブラリです。
Jestは、シンプルさに焦点を当てた楽しいJavaScriptテストフレームワークです。 Babel、TypeScript、Node、React、Angular、Vueなどを使用してプロジェクトで動作します。 （出典：jestjs.io）
フロントエンドプロジェクトの自動テストをセットアップすることが非常に重要です。自動テストをセットアップすることで、将来の変更を自信を持って変更できます。変更を加えてテストがまだ合格した場合、既存の機能を壊さなかった場合、かなり快適になります。リストするテストフレームワークが多すぎます。 Jestは単に私のお気に入りの1つです。
create-react-appを使用した場合、Jestはすでに構成されています。*代替：フロー
TypeScriptは、Microsoftによって開発および維持されているオープンソースプログラミング言語です。これは、JavaScriptの厳格な構文的なスーパーセットであり、言語にオプションの静的タイピングを追加します。 TypeScriptは、大規模なアプリケーションの開発とJavaScriptへの転移のために設計されています。 TypeScriptはJavaScriptのスーパーセットであるため、既存のJavaScriptプログラムも有効なタイプスクリプトプログラムです。タイプスクリプトは、クライアント側とサーバー側（node.js）実行の両方のJavaScriptアプリケーションを開発するために使用できます。 （出典：ウィキペディア）
JavaScriptは動的にタイプされます。ただし、静的タイピング（つまり、変数タイプ、クラス、インターフェイスを事前に指定する）はより明確であり、欠陥/バグの可能性を減らすという一般的な信念です。トピックについてどのように感じているかに関係なく、少なくとも静的にタイプのバージョンのJavaScriptのようなTypeScriptを感じることが重要です。 TypeScriptはJavaScriptにコンパイルされているため、ブラウザで解釈できることに注意してください（つまり、ブラウザはタイプスクリプトをネイティブに解釈しない）。
next.jsは、サーバーレンダリングのReactアプリケーションの最小限のフレームワークです。 （出典：next.js - React Serverサイドレンダリングが正しく行われます）
今、私たちは前進しています！今では、ブラウザでかなりの作業を行うReact（またはVueまたはAngular）アプリケーションを構築しました。さまざまな理由（たとえば、クライアントのパフォーマンスに対する懸念など）では、実際にクライアントではなくサーバー上にフロントエンドアプリケーションをレンダリングする必要があります。それが、next.jsのようなフレームワークが登場する場所です。
このリストは、フロントエンドのエコシステムに幅広い露出を与えることになっていますが、各エリア内の無数のツールは言うまでもなく、すべてのトピックにヒットすることは単に不可能です！私が非常に重要なものを逃したと思うなら、このガイドをより良くするのに役立つ方法を確認するための貢献セクションをご覧ください。
＃100daysofcodeを進めるにつれて、新しい知識を適用できる1つまたは複数のプロジェクトが必要です。このセクションでは、使用できるプロジェクトのアイデアをいくつか提供しようとします。あるいは、それらのアイデアが興味を持ち、あなたをもっとやる気にさせるかもしれないので、あなた自身のプロジェクトのアイデアを考え出すことをお勧めします。
一般的に、私は次のリソースを学習ソフトウェア開発に非常に貴重であることがわかりました。
何かに関する私の入力が必要な場合は、Twitterで自由につながってください。私は最善を尽くします。カリキュラムに問題があると思われる場合、または推奨事項がある場合は、以下の貢献セクションを参照してください。
ここで行われた作業に感謝する場合は、次のようなものを含め、このリポジトリについての言葉を広めることで大きく貢献できます。
これは進行中の作業であり、この知識ベースを維持するための助けに感謝します！
このリポジトリに貢献するときは、最初に変更を行う前に、問題を介して行う変更について話し合ってください。そうでなければ、あなたの提案を理解するのは非常に難しいでしょう、そして、あなたが統合されない変化に多くの仕事をすることになる可能性があります。
このプロジェクトに関与している全員が学習しようとしているか、助けようとしていることに注意してください。
