Web-Dev-For-Beginners/translations

初心者のための Web 開発 - カリキュラム

マイクロソフトの Azure Cloud Advocates は、JavaScript、CSS、HTML の基礎知識を12週間、24レッスンのカリキュラムで提供しています。各レッスンには、レッスン前後のクイズ、レッスンを完了するための指示書、ソリューション、課題などが含まれています。私たちのプロジェクトベースの教育法は、新しいスキルを「定着させる」ための実証済みの方法である、構築しながら学ぶことを可能にします。

著者の Jen Looper さん、Chris Noring さん、Christopher Harrison さん、Jasmine Greenaway さん、Yohan Lasorsa さん、Floor Drees さん、そしてスケッチノートアーティストの Tomomi Imura さんに心から感謝します。

先生方、このカリキュラムをどのように使用するか、いくつかの提案があります。あなた自身のレッスンを作成したい場合は、レッスンテンプレートもご用意しています。

学生の皆さん、このカリキュラムを自分で使うためには、リポジトリ全体をフォークして、講義前の小テストから始めて、講義を読んで、残りのアクティビティを自分で完成させてください。解答コードは各レッスンの /solutions フォルダにありますが、解答コードをコピーするのではなく、授業を理解した上でプロジェクトを作成するようにしてください。また、友達と勉強会を作って、一緒に勉強するのもいいでしょう。さらに勉強するには、Microsoft Learn や以下のビデオを見ることをお勧めします。

上の画像をクリックすると、プロジェクトとそれを作成した人々についてのビデオを見ることができます。

教育学

私たちは、このカリキュラムを構築する際に、2つの教育学的な考え方を選択しました。このシリーズが終わる頃には、学生はタイピングゲーム、バーチャルテラリウム、「グリーン」ブラウザ拡張機能、「スペースインベーダー」タイプのゲーム、ビジネスタイプの銀行アプリを作成し、JavaScript、HTML、CSS の基本を、今日の Web 開発者の最新のツールチェーンとともに学んでいることでしょう。

コンテンツがプロジェクトに沿ったものであることを確認することで、プロセスは学生にとってより魅力的なものとなり、概念の定着率が向上します。また、JavaScriptの基本的な概念を紹介するために、いくつかのスターターレッスンを執筆し、その中の何人かの著者がこのカリキュラムに貢献しているビデオチュートリアルのコレクション "Beginners Series to: JavaScript" のビデオと組み合わせました。

また、授業前の小テストで学習者の学習意図を確認し、授業後に2回目の小テストを行うことで、学習の定着度を高めています。このカリキュラムは柔軟性があり、楽しく、全体的にも部分的にも受講できるように設計されています。プロジェクトは小さなものから始まり、12週間のサイクルが終わる頃には徐々に複雑なものになっていきます。

フレームワークを採用する前に Web 開発者として必要とされる基本的なスキルに集中するため、JavaScript フレームワークの紹介は意図的に避けていますが、このカリキュラムを修了するための良い次のステップとして、別のビデオのコレクション "Beginner Series to: Node.js" を通して Node.js について学ぶことができます。

行動規範、貢献、翻訳のガイドラインをご覧ください。建設的なご意見をお待ちしております。

各レッスンの内容は以下の通りです

• オプションのスケッチノート
• オプションの補足ビデオ
• レッスン前の小テスト
• 記載されたレッスン
• プロジェクトベースのレッスンのために、プロジェクトを構築する方法をステップバイステップでガイドします
• 知識のチェック
• チャレンジ
• 副読本
• 課題
• レッスン後の小テスト

レッスン

	プロジェクト名	教える概念	学習の目的	関連するレッスン	レッスンの記載	スケッチノート	課題	レッスン前の小テスト	レッスン後の小テスト	ビデオ	著者
01	入門	プログラミング言語と開発ツール入門	ほとんどのプログラミング言語の背後にある基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学ぶことができます。	プログラミング言語と開発ツール入門	✅	✅	✅	✅	✅	✅	Jasmine
02	入門	GitHubの基礎、チームでの作業を含む	プロジェクトでの GitHub の使い方、コードベースでの他の人との共同作業の仕方	GitHub 入門	✅	✅	✅	✅	✅	🛑	Floor
03	入門	アクセシビリティ	Web アクセシビリティの基礎を学ぶ	アクセシビリティの基本	✅	✅	✅	✅	✅	🛑	Christopher
04	JS の基礎	JavaScript のデータ型	JavaScript のデータ型の基礎	データ型	✅	✅	✅	✅	✅	✅	Jasmine
05	JS の基礎	関数とメソッド	アプリケーションのロジックフローを管理するための機能とメソッドを学ぶ	関数とメソッド	✅	✅	✅	✅	✅	✅	Jasmine and Christopher
06	JS の基礎	JS での意思決定	意思決定の方法を使ってコードに条件を作成する方法を学ぶ	意思決定	✅	✅	✅	✅	✅	✅	Jasmine
07	JS の基礎	配列とループ	JavaScript で配列やループを使ってデータを扱う	配列とループ	✅	✅	✅	✅	✅	✅	Jasmine
08	テラリウム	HTML の実践	レイアウトの構築を中心に、オンラインテラリウムを作成するための HTML を構築する	HTML 入門	✅	✅	✅	✅	✅	🛑	Jen
09	テラリウム	CSS の実践	レスポンシブ対応など CSS の基本を中心に、オンラインテラリウムのスタイルを整える CSS を構築します。	CSS 入門	✅	✅	✅	✅	✅	🛑	Jen
10	テラリウム	JavaScript のクロージャ、DOM の操作	テラリウムをドラッグ＆ドロップのインターフェイスとして機能させるための JavaScript を構築します。	JavaScript のクロージャ、DOM の操作	✅	✅	✅	✅	✅	🛑	Jen
11	タイピングゲーム	タイピングゲームを構築	キーボードイベントを使用して JavaScript アプリのロジックを駆動する方法を学びます。	イベント駆動型プログラミング	✅	🛑	✅	✅	✅	✅	Christopher
12	グリーンブラウザ拡張機能	ブラウザとの連携	ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ	ブラウザについて	✅	✅	✅	✅	✅	🛑	Jen
13	グリーンブラウザ拡張機能	フォームの構築、API の呼び出し、ローカルストレージへの変数の格納	ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。	API、フォーム、およびローカルストレージ	✅	🛑	✅	✅	✅	✅	Jen
14	グリーンブラウザ拡張機能	ブラウザのバックグラウンドプロセス、Web パフォーマンス	ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。	バックグラウンドタスクとパフォーマンス	✅	🛑	✅	✅	✅	🛑	Jen
15	スペースゲーム	JavaScript を使ったより高度なゲーム開発	ゲーム構築に備えて、クラスとコンポジションの両方を使った継承と Pub/Sub パターンを学ぶ	高度なゲーム開発入門	✅	🛑	✅	✅	✅	🛑	Chris
16	スペースゲーム	キャンバスへの描画	画面に要素を描画するために使用される Canvas API について説明します。	キャンバスへの描画	✅	🛑	✅	✅	✅	🛑	Chris
17	スペースゲーム	画面の周りの要素の移動	直交座標と Canvas API を使用して、要素がどのように動きを得ることができるかをご覧ください。	要素の移動	✅	🛑	✅	✅	✅	🛑	Chris
18	スペースゲーム	衝突の検出	要素を衝突させ、キープレスでお互いに反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します。	衝突の検出	✅	🛑	✅	✅	✅	🛑	Chris
19	スペースゲーム	スコアの保持	ゲームのステータスや成績に応じて計算を行う	スコアの保持	✅	🛑	✅	✅	✅	🛑	Chris
20	スペースゲーム	ゲームの終了と再開	アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学ぶことができます。	終了条件	✅	🛑	✅	✅	✅	🛑	Chris
21	バンキングアプリケーション	Web アプリの HTML テンプレートとルート	ルーティングと HTML テンプレートを使ったマルチページサイトのアーキテクチャの足場の作り方を学ぶ	HTML テンプレートとルート	✅	🛑	✅	✅	✅	✅	Yohan
22	バンキングアプリケーション	ログインと登録フォームの構築	フォームの構築と検証ルーチンの渡し方について学ぶ	フォーム	✅	🛑	✅	✅	✅	✅	Yohan
23	バンキングアプリケーション	データの取得と利用方法	アプリのデータの出入り、データの取得方法、保存方法、廃棄方法	データ	✅	🛑	✅	✅	✅	✅	Yohan
24	バンキングアプリケーション	状態管理の概念	アプリの状態を保持する方法とプログラムで管理する方法を学ぶ	状態管理	✅	🛑	✅	✅	✅		Yohan

オフラインアクセス

Docsify を使えば、このドキュメントをオフラインで実行することができます。このリポジトリをフォークしてローカルマシンに Docsify をインストールし、このリポジトリのルートフォルダで docsify serve と入力してください。これで、ローカルホスト上の3000番ポート、つまり localhost:3000 で Web サイトがサーブされます。