Web開発初心者向けカリキュラム

Microsoft Cloud Advocatesによる12週間の包括的なコースで、Web開発の基礎を学びましょう。24の各レッスンでは、テラリウム、ブラウザ拡張機能、スペースゲームなどの実践的なプロジェクトを通じてJavaScript、CSS、HTMLを深く掘り下げます。クイズ、ディスカッション、実践的な課題に取り組みながら、効果的なプロジェクトベースの教育法でスキルを向上させ、知識の定着を最適化しましょう。今日からコーディングの旅を始めましょう！

🧑‍🎓 学生の方へ

Student Hubページを訪れてください。初心者向けリソース、学生パック、無料の認定証バウチャーを取得する方法などが見つかります。このページはブックマークして、月ごとにコンテンツが更新されるので定期的にチェックすることをお勧めします。

📣 お知らせ - JavaScript向けの新しいGenerative AIカリキュラムがリリースされました

新しいGenerative AIカリキュラムをお見逃しなく！

https://aka.ms/genai-js-course にアクセスして始めましょう！

基礎からRAGまでを網羅したレッスン
GenAIとコンパニオンアプリを使って歴史上の人物と対話
楽しく魅力的なストーリーで、タイムトラベルを体験！

各レッスンには、以下のようなトピックを学ぶための課題、知識チェック、チャレンジが含まれています：

プロンプティングとプロンプトエンジニアリング
テキストおよび画像アプリの生成
検索アプリ

https://aka.ms/genai-js-course にアクセスして始めましょう！

🌱 はじめに

教師の方々、このカリキュラムの使用方法についていくつかの提案を用意しています。ディスカッションフォーラムでフィードバックをお待ちしています！

学習者の方々、各レッスンでは、事前クイズから始め、講義資料を読み、さまざまなアクティビティを完了し、事後クイズで理解度を確認してください。

学習体験をさらに向上させるために、仲間と協力してプロジェクトに取り組みましょう！ディスカッションフォーラムで議論を奨励しており、モデレーターチームが質問にお答えします。

さらに学びを深めるために、Microsoft Learnで追加の学習資料を探索することを強くお勧めします。

📋 環境設定

このカリキュラムには、すぐに使える開発環境が用意されています！開始時には、Codespace（ブラウザベースでインストール不要の環境）で実行するか、Visual Studio Codeなどのテキストエディタを使用してローカルで実行するかを選択できます。

リポジトリの作成

作業を簡単に保存するために、このリポジトリのコピーを作成することをお勧めします。ページ上部の「Use this template」ボタンをクリックすると、GitHubアカウントにカリキュラムのコピーが作成されます。

以下の手順に従ってください：

リポジトリをフォーク: このページの右上にある「Fork」ボタンをクリックします。
リポジトリをクローン: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Codespaceでカリキュラムを実行

作成したリポジトリのコピーで、「Code」ボタンをクリックし、「Open with Codespaces」を選択します。これにより、作業用の新しいCodespaceが作成されます。

ローカルコンピュータでカリキュラムを実行

このカリキュラムをローカルで実行するには、テキストエディタ、ブラウザ、コマンドラインツールが必要です。最初のレッスン「プログラミング言語の紹介とツールの選択」では、これらのツールのさまざまなオプションを紹介し、最適なものを選択できるようにします。

エディタとしてはVisual Studio Codeを使用することをお勧めします。これにはターミナルも組み込まれています。Visual Studio Codeはこちらからダウンロードできます。

リポジトリをコンピュータにクローンします。「Code」ボタンをクリックしてURLをコピーします：

次に、Visual Studio Code内のターミナルを開き、コピーしたURLを<your-repository-url>に置き換えて以下のコマンドを実行します：
```
git clone <your-repository-url>
```
Visual Studio Codeでフォルダを開きます。「File」 > 「Open Folder」をクリックし、クローンしたフォルダを選択します。

おすすめのVisual Studio Code拡張機能：

Live Server - Visual Studio Code内でHTMLページをプレビュー

Copilot - コードをより速く書くための支援

📂 各レッスンには以下が含まれます：

オプションのスケッチノート
オプションの補足動画
レッスン前のウォームアップクイズ
記述されたレッスン
プロジェクトベースのレッスンでは、プロジェクトを構築するためのステップバイステップガイド
知識チェック
チャレンジ
補足資料
課題
レッスン後のクイズ

クイズについての注意: すべてのクイズはQuiz-appフォルダに含まれており、3問ずつ合計48のクイズがあります。クイズアプリはローカルで実行するかAzureにデプロイできます。quiz-appフォルダ内の指示に従ってください。現在、徐々にローカライズされています。

🗃️ レッスン

	プロジェクト名	教えるコンセプト	学習目標	リンクされたレッスン	著者
01	はじめに	プログラミング入門と開発ツール	ほとんどのプログラミング言語の基本概念と、プロの開発者が仕事をするためのソフトウェアについて学ぶ	プログラミング言語と開発ツール入門	Jasmine
02	はじめに	GitHubの基本（チーム作業を含む）	プロジェクトでGitHubを使用する方法、コードベースで他の人と協力する方法	GitHub入門	Floor
03	はじめに	アクセシビリティ	Webアクセシビリティの基本を学ぶ	アクセシビリティの基礎	Christopher
04	JavaScript基礎	JavaScriptのデータ型	JavaScriptのデータ型の基本	データ型	Jasmine
05	JavaScript基礎	関数とメソッド	アプリケーションのロジックフローを管理するための関数とメソッドについて学ぶ	関数とメソッド	JasmineとChristopher
06	JavaScript基礎	JavaScriptでの意思決定	意思決定メソッドを使用してコード内で条件を作成する方法を学ぶ	意思決定	Jasmine
07	JavaScript基礎	配列とループ	JavaScriptで配列とループを使用してデータを操作する	配列とループ	Jasmine
08	テラリウム	HTMLの実践	レイアウトの構築に焦点を当てて、オンラインテラリウムを作成するためのHTMLを構築する	HTML入門	Jen
09	テラリウム	CSSの実践	ページをレスポンシブにするなど、CSSの基本に焦点を当てて、オンラインテラリウムのスタイルを構築する	CSS入門	Jen
10	テラリウム	JavaScriptのクロージャ、DOM操作	ドラッグ＆ドロップインターフェースとして機能するテラリウムのJavaScriptを構築し、クロージャとDOM操作に焦点を当てる	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への描画	画面に要素を描画するために使用されるCanvas APIについて学ぶ	canvasへの描画	Chris
17	スペースゲーム	画面内での要素の移動	デカルト座標とCanvas APIを使用して要素に動きを与える方法を発見する	要素の移動	Chris
18	スペースゲーム	衝突検出	キー操作を使用して要素を衝突させ、互いに反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供する	衝突検出	Chris
19	スペースゲーム	スコアの保持	ゲームの状態とパフォーマンスに基づいて数学的な計算を実行する	スコアの保持	Chris
20	スペースゲーム	ゲームの終了と再開	ゲームの終了と再開について学び、アセットのクリーンアップと変数値のリセットを含む	終了条件	Chris
21	銀行アプリ	WebアプリのHTMLテンプレートとルート	ルーティングとHTMLテンプレートを使用して、マルチページウェブサイトのアーキテクチャの骨組みを作成する方法を学ぶ	HTMLテンプレートとルート	Yohan
22	銀行アプリ	ログインと登録フォームの構築	フォームの構築とバリデーションルーチンの処理について学ぶ	フォーム	Yohan
23	銀行アプリ	データの取得と使用方法	アプリへのデータの流入と流出、データの取得、保存、廃棄の方法	データ	Yohan
24	銀行アプリ	状態管理の概念	アプリが状態を保持する方法と、プログラムで管理する方法を学ぶ	状態管理	Yohan

🏫 教育方法

私たちのカリキュラムは、以下の2つの主要な教育原則に基づいて設計されています：

プロジェクトベースの学習
頻繁なクイズ

このプログラムでは、JavaScript、HTML、CSSの基本、および今日のWeb開発者が使用する最新のツールと技術を教えます。学生は、タイピングゲーム、仮想テラリウム、エコフレンドリーなブラウザ拡張機能、スペースインベーダー風のゲーム、ビジネス向けの銀行アプリを構築することで、実践的な経験を積む機会があります。シリーズの終わりまでに、学生はWeb開発の基本的な理解を深めることができます。

🎓 このカリキュラムの最初のいくつかのレッスンは、Microsoft Learnの「学習パス」として受講できます！

コンテンツがプロジェクトと連携していることを確認することで、学生にとってプロセスがより魅力的になり、概念の保持が強化されます。また、JavaScriptの基本を紹介するためにいくつかの入門レッスンを作成し、"Beginners Series to: JavaScript"ビデオチュートリアルコレクションのビデオと組み合わせました。このコレクションの著者の一部は、このカリキュラムにも貢献しています。

さらに、クラス前の低負荷のクイズは、学生の学習意図を設定し、クラス後の2回目のクイズはさらなる保持を確実にします。このカリキュラムは柔軟で楽しく、全体または一部を受講できるように設計されています。プロジェクトは小さく始まり、12週間のサイクルの終わりに向かって徐々に複雑になります。

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

行動規範と貢献ガイドラインをご覧ください。建設的なフィードバックをお待ちしています！

🧭 オフラインアクセス

このドキュメントは、Docsifyを使用してオフラインで実行できます。このリポジトリをフォークし、Docsifyをインストールして、このリポジトリのルートフォルダでdocsify serveと入力します。ウェブサイトはローカルホストのポート3000で提供されます：localhost:3000。

📘 PDF

すべてのレッスンのPDFはこちらから入手できます。

🎒 その他のコース

私たちのチームは他のコースも制作しています！以下をチェックしてください：

ライセンス

このリポジトリはMITライセンスの下でライセンスされています。詳細はLICENSEファイルをご覧ください。