35 KiB

Raw Blame History Unescape Escape

初心者のためのウェブ開発 - カリキュラム

Microsoft Cloud Advocatesによる12週間の包括的なコースで、ウェブ開発の基本を学びましょう。24のレッスンそれぞれで、テラリウム、ブラウザー拡張機能、宇宙ゲームなどの実践的なプロジェクトを通じてJavaScript、CSS、HTMLを学びます。クイズ、ディスカッション、実践的な課題にも参加できます。効果的なプロジェクトベースの教育法でスキルを高め、知識の定着を最適化しましょう。今日からコーディングの旅を始めてみませんか！

Azure AI Foundry Discordコミュニティに参加

これらのリソースを使い始めるには、以下の手順に従ってください：

リポジトリをフォーク：クリック
リポジトリをクローン： git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Azure AI Foundry Discordに参加し、専門家や仲間の開発者と交流

🌐 多言語サポート

GitHub Actionを通じてサポート（自動かつ常に最新）

ローカルでのクローンを希望されますか？

このリポジトリには50以上の言語翻訳が含まれており、ダウンロードサイズが大きくなります。翻訳なしでクローンするには、スパースチェックアウトを使用してください：
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
これにより、コースを完了するために必要なすべてが含まれ、より高速にダウンロードできます。

追加の翻訳言語をご希望の場合はこちらに記載されています

🧑‍🎓 学生の皆さんへ

Student Hubページをご覧ください。初心者向けリソース、学生パック、無料の証明書バウチャー獲得方法も掲載しています。このページはブックマークして、毎月更新されるコンテンツを随時チェックしてください。

📣 お知らせ - GitHub Copilot Agentモードの新たなチャレンジが登場！

「GitHub Copilot Agent Challenge 🚀」という新チャレンジが多くの章に追加されました。GitHub CopilotとAgentモードを使ってクリアしてください。Agentモードはテキスト生成だけでなく、ファイル作成や編集、コマンド実行も可能です。まだ使ったことがない方はぜひお試しください。

📣 お知らせ - ジェネレーティブAIを使った新プロジェクト追加

新しいAIアシスタントプロジェクトが追加されました。詳細はプロジェクトをチェック！

📣 お知らせ - JavaScriptのジェネレーティブAI用新カリキュラムリリース

ジェネレーティブAIの新カリキュラムをお見逃しなく！

https://aka.ms/genai-js-courseで今すぐ始めましょう！

基礎からRAGまでをカバーするレッスン。
GenAIと連携アプリで歴史上の人物と対話。
楽しく魅力的な物語形式でタイムトラベル体験！

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

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

https://aka.ms/genai-js-courseで今すぐ始めましょう！

🌱 はじめに

先生方へ、このカリキュラムの使い方についていくつかの提案を用意しています。ぜひディスカッションフォーラムでフィードバックをお寄せください！

**学習者**は各レッスンで、まず事前クイズから始め、講義資料の読解、様々なアクティビティに取り組み、事後クイズで理解度をチェックしましょう。

学習効果を高めるために、仲間とつながって一緒にプロジェクトに取り組むことをお勧めします！ディスカッションはフォーラムで活発に行われており、モデレータチームが質問に対応します。

さらに学習を進めるにはMicrosoft Learnで追加の教材を探すことを強く推奨します。

📋 環境のセットアップ

このカリキュラムは開発環境がすぐ利用できる状態になっています！開始時にはCodespace（ブラウザベースでインストール不要の環境）またはテキストエディタ（例：Visual Studio Code）を使ってローカルに実行できます。

リポジトリを作成しましょう

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

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

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

Codespaceでカリキュラムを実行する

作成したリポジトリのコピーで、Codeボタンをクリックし、Open with Codespacesを選択すると、新しいCodespaceが作成されます。

ご自身のコンピューターでカリキュラムを実行する

ローカルで実行するにはテキストエディタ、ブラウザー、コマンドラインツールが必要です。最初のレッスンプログラミング言語とツールの紹介では、それぞれのツールの選択肢を紹介し、最適なものを選べるようガイドします。

おすすめはVisual Studio Codeで、内蔵のターミナルも利用可能です。Visual Studio Codeはこちらからダウンロードできます。

GitHub上のリポジトリをクローンしてください。Codeボタンをクリックし、URLをコピーして使用します。

CodeSpace それから、Visual Studio Code内のターミナルを開き、以下のコマンドを実行します。<your-repository-url>は先ほどコピーしたURLに置き換えてください。
```
git clone <your-repository-url>
```
Visual Studio Codeでフォルダーを開きます。これはファイル > フォルダーを開く をクリックし、先ほどクローンしたフォルダーを選択することで行えます。

推奨されるVisual Studio Code拡張機能：

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

Copilot - コーディングをより速くするための支援ツール

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

任意のスケッチノート
任意の補足ビデオ
レッスン前のウォームアップクイズ
書面によるレッスン
プロジェクトベースのレッスンの場合は、プロジェクト開発のステップバイステップガイド
知識チェック
チャレンジ
補足読書
レッスン後のクイズ

クイズについての注意：すべてのクイズはQuiz-appフォルダーに収録されており、全48回のクイズが各3問ずつあります。これらはここで利用可能です。クイズアプリはローカルで実行するかAzureにデプロイできます。詳細はquiz-appフォルダー内の指示に従ってください。

🗃️ レッスン一覧

	プロジェクト名	教える概念	学習目標	リンクされたレッスン	著者
01	はじめに	プログラミングの紹介とツールの基礎知識	ほとんどのプログラミング言語の基本的な基礎知識と、プロの開発者が仕事で使用するソフトウェアについて学びます	プログラミング言語とツールの紹介	Jasmine
02	はじめに	GitHubの基本、チームでの作業	GitHubの使い方、チームでコードベースを共同で作業する方法	GitHub入門	Floor
03	はじめに	アクセシビリティ	ウェブアクセシビリティの基礎を学びます	アクセシビリティの基礎	Christopher
04	JS基礎	JavaScriptのデータ型	JavaScriptデータ型の基本を学びます	データ型	Jasmine
05	JS基礎	関数とメソッド	アプリケーションのロジックフローを管理するための関数とメソッドについて学びます	関数とメソッド	Jasmine と Christopher
06	JS基礎	JSでの条件分岐作成	条件分岐メソッドを使ってコードに条件を作成する方法を学びます	条件分岐	Jasmine
07	JS基礎	配列とループ	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	グリーンブラウザー拡張機能	ブラウザーのバックグラウンド処理とウェブパフォーマンス	拡張機能のアイコンを管理するためのブラウザーのバックグラウンド処理を利用し、ウェブパフォーマンス関連の最適化を学びます	バックグラウンド処理とパフォーマンス	Jen
15	スペースゲーム	JavaScriptによる高度なゲーム開発	クラスとコンポジションによる継承、Pub/Subパターンなどを学び、ゲーム開発の準備をします	高度なゲーム開発入門	Chris
16	スペースゲーム	Canvasへの描画	画面に要素を描画するCanvas APIについて学びます	Canvasへの描画	Chris
17	スペースゲーム	画面上での要素の移動	直交座標とCanvas APIを用いて要素に動きを付ける方法を発見します	要素の移動	Chris
18	スペースゲーム	衝突検出	要素同士の衝突検出やそれに対する反応、キー押下によるクールダウン機能を作り、ゲームのパフォーマンスを確保します	衝突検出	Chris
19	スペースゲーム	スコア管理	ゲームの状態やパフォーマンスに基づいて数学計算を実施します	スコア管理	Chris
20	スペースゲーム	ゲーム終了と再開	ゲームの終了と再開について学び、資源のクリーンアップや変数のリセット方法を学びます	終了条件	Chris
21	バンキングアプリ	ウェブアプリにおけるHTMLテンプレートとルーティング	ルーティングとHTMLテンプレートを使ってマルチページサイトの構造を作る方法を学びます	HTMLテンプレートとルート	Yohan
22	バンキングアプリ	ログインと登録フォームの作成	フォーム作成と検証処理の基礎を学びます	フォーム	Yohan
23	バンキングアプリ	データの取得と利用方法	アプリ内のデータの流れ、取得、保存、処理方法を学びます	データ	Yohan
24	バンキングアプリ	状態管理の概念	アプリがどのように状態を保持し、プログラム的に管理するかを学びます	状態管理	Yohan
25	Browser/VScode Code	VScodeの使い方	コードエディターの使い方を学ぶ	VScodeコードエディターの使用	Chris
26	AIアシスタント	AIとの連携	独自のAIアシスタントの作成方法を学ぶ	AIアシスタントプロジェクト	Chris

🏫 教育方針

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

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

このプログラムではJavaScript、HTML、CSSの基礎から、今日のウェブ開発者が使用する最新のツールと技術を学べます。学習者はタイピングゲーム、バーチャルテラリウム、環境に優しいブラウザー拡張機能、スペースインベーダースタイルのゲーム、企業向けの銀行アプリを作成することで実践的な経験が得られます。シリーズの終了時点で、ウェブ開発に関する確かな理解を身につけられます。

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

内容がプロジェクトに沿っているため、学習者にとってより興味を引くものとなり、概念の定着が促進されます。またJavaScriptの基礎を紹介するスターター用のレッスンもいくつか用意し、同時に"Beginners Series to: JavaScript"というビデオチュートリアル集から提供しており、その中の一部の作者も本カリキュラムの作成に貢献しています。

さらに、クラスの前に低難度のクイズを行うことで学習者の学習意図を高め、クラス後の別クイズで理解度のさらなる定着を図ります。このカリキュラムは柔軟かつ楽しく学べるよう設計されているため、一部だけでも全体でも受講可能です。プロジェクトは小さなものから始まり、12週間のサイクル終了時にはより複雑なものへと発展します。

JavaScriptフレームワークの導入は意図的に避けており、基本的なウェブ開発スキルを身につけた後にフレームワーク導入に進むことを狙っています。このカリキュラムを終えた次のステップとして、別のビデオ集である"Beginner Series to: Node.js"でNode.jsを学ぶことを推奨します。

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

🧭 オフラインアクセス

Docsifyを使ってこのドキュメントをオフラインで実行できます。このリポジトリをフォークし、ローカルマシンにDocsifyをインストールした上で、このリポジトリのルートフォルダーでdocsify serveと入力してください。ウェブサイトはローカルホストの3000番ポート（localhost:3000）で提供されます。