31 KiB
初心者向けウェブ開発 - カリキュラム
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によるサポート（自動更新＆常に最新）
フランス語 | スペイン語 | ドイツ語 | ロシア語 | アラビア語 | ペルシャ語（ファルシ） | ウルドゥー語 | 中国語（簡体字） | 中国語（繁体字、マカオ） | 中国語（繁体字、香港） | 中国語（繁体字、台湾） | 日本語 | 韓国語 | ヒンディー語 | ベンガル語 | マラーティー語 | ネパール語 | パンジャブ語（グルムキー） | ポルトガル語（ポルトガル） | ポルトガル語（ブラジル） | イタリア語 | ポーランド語 | トルコ語 | ギリシャ語 | タイ語 | スウェーデン語 | デンマーク語 | ノルウェー語 | フィンランド語 | オランダ語 | ヘブライ語 | ベトナム語 | インドネシア語 | マレー語 | タガログ語（フィリピン） | スワヒリ語 | ハンガリー語 | チェコ語 | スロバキア語 | ルーマニア語 | ブルガリア語 | セルビア語（キリル文字） | クロアチア語 | スロベニア語 | ウクライナ語 | ビルマ語（ミャンマー）
追加の翻訳を希望する場合は、サポートされている言語のリストが こちら にあります
🧑🎓 学生の皆さんへ
Student Hubページ を訪問して、初心者向けリソース、学生向けパック、さらには無料の証明書バウチャーを取得する方法を見つけてください。このページはブックマークして、毎月内容が更新されるので定期的にチェックしてください。
📣 お知らせ - 生成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などのテキストエディタを使用することができます。
リポジトリを作成する
作業を簡単に保存するために、このリポジトリのコピーを作成することをお勧めします。ページ上部の 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内のターミナルを開き、以下のコマンドを実行します。
<your-repository-url>をコピーした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 | JSの基本 | JavaScriptのデータ型 | JavaScriptのデータ型の基本 | データ型 | Jasmine |
| 05 | JSの基本 | 関数とメソッド | アプリケーションのロジックフローを管理するための関数とメソッドについて学ぶ | 関数とメソッド | Jasmine and Christopher |
| 06 | JSの基本 | JavaScriptでの意思決定 | 意思決定方法を使用してコード内で条件を作成する方法を学ぶ | 意思決定 | Jasmine |
| 07 | JSの基本 | 配列とループ | JavaScriptで配列とループを使用してデータを操作する | 配列とループ | Jasmine |
| 08 | テラリウム | HTMLの実践 | オンラインテラリウムを作成するためのHTMLを構築し、レイアウト作成に焦点を当てる | HTMLの導入 | Jen |
| 09 | テラリウム | CSSの実践 | オンラインテラリウムをスタイル付けするための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 APIについて学ぶ | キャンバスへの描画 | Chris |
| 17 | スペースゲーム | 画面上の要素の移動 | 要素がカートesian座標とCanvas APIを使用して動きを得る方法を発見する | 要素の移動 | Chris |
| 18 | スペースゲーム | 衝突検出 | 要素が衝突して反応する方法を学び、キー入力を使用してゲームのパフォーマンスを確保するためのクールダウン機能を提供する | 衝突検出 | Chris |
| 19 | スペースゲーム | スコアの保持 | ゲームの状態とパフォーマンスに基づいて数学的計算を実行する | スコアの保持 | Chris |
| 20 | スペースゲーム | ゲームの終了と再開 | ゲームの終了と再開について学び、アセットのクリーンアップと変数値のリセットを含む | 終了条件 | Chris |
| 21 | バンキングアプリ | WebアプリでのHTMLテンプレートとルート | ルーティングとHTMLテンプレートを使用してマルチページWebサイトのアーキテクチャのスキャフォールドを作成する方法を学ぶ | HTMLテンプレートとルート | Yohan |
| 22 | バンキングアプリ | ログインと登録フォームの作成 | フォームの作成と検証ルーチンの処理について学ぶ | フォーム | Yohan |
| 23 | バンキングアプリ | データの取得と使用方法 | データがアプリ内でどのように流れるか、取得、保存、廃棄する方法を学ぶ | データ | Yohan |
| 24 | バンキングアプリ | 状態管理の概念 | アプリが状態を保持する方法とプログラム的に管理する方法を学ぶ | 状態管理 | Yohan |
| 25 | ブラウザー/VScodeコード | VScodeの操作 | コードエディターの使用方法を学ぶ | VScodeコードエディターの使用 | Chris |
| 26 | AIアシスタント | AIの操作 | 独自のAIアシスタントを構築する方法を学ぶ | AIアシスタントプロジェクト | Chris |
🏫 教育法
私たちのカリキュラムは、以下の2つの主要な教育原則に基づいて設計されています:
- プロジェクトベースの学習
- 頻繁なクイズ
このプログラムでは、JavaScript、HTML、CSSの基本と、現在のWeb開発者が使用する最新のツールと技術を教えます。学生は、タイピングゲーム、仮想テラリウム、環境に優しいブラウザー拡張機能、スペースインベーダースタイルのゲーム、ビジネス向けバンキングアプリを構築することで、実践的な経験を積む機会を得ます。このシリーズの終わりまでに、学生はWeb開発の確固たる理解を得ることができます。
🎓 このカリキュラムの最初のいくつかのレッスンをMicrosoft Learnで学習パスとして受講することができます！
コンテンツがプロジェクトと一致するようにすることで、学生にとってプロセスがより魅力的になり、概念の保持が強化されます。また、JavaScriptの基本に関するいくつかのスターターレッスンを作成し、"Beginners Series to: JavaScript"のビデオコレクションとペアリングしました。このコレクションの著者の一部は、このカリキュラムに貢献しています。
さらに、授業前の低リスクのクイズは、学生がトピックを学ぶ意図を設定し、授業後の2回目のクイズはさらに概念の保持を確保します。このカリキュラムは柔軟で楽しいように設計されており、全体または部分的に受講することができます。プロジェクトは小さなものから始まり、12週間のサイクルの終わりまでに徐々に複雑になります。
JavaScriptフレームワークを導入せず、Web開発者としてフレームワークを採用する前に必要な基本スキルに集中することを意図的に避けましたが、このカリキュラムを完了した後の次のステップとして、Node.jsについて学ぶことをお勧めします。これには、別のビデオコレクション"Beginner Series to: Node.js"が役立ちます。
🧭 オフラインアクセス
このドキュメントをオフラインで実行するには、Docsifyを使用してください。このリポジトリをフォークし、ローカルマシンにDocsifyをインストールし、このリポジトリのルートフォルダーでdocsify serveと入力します。ウェブサイトはローカルホストのポート3000で提供されます: localhost:3000。
すべてのレッスンのPDFはこちらで見つけることができます。
🎒 その他のコース
私たちのチームは他のコースも制作しています！以下をご覧ください:
- MCP for Beginners
- Edge AI for Beginners
- AI Agents for Beginners
- Generative AI for Beginners .NET
- Generative AI with JavaScript
- Generative AI with Java
- AI for Beginners
- Data Science for Beginners
- ML for Beginners
- Cybersecurity for Beginners
- Web Dev for Beginners
- IoT for Beginners
- XR Development for Beginners
- Mastering GitHub Copilot for Agentic use
- C#/.NET開発者向けGitHub Copilotの使い方
- 自分で選ぶCopilotの冒険
ヘルプを得る
AIアプリの構築で行き詰まったり質問がある場合は、以下に参加してください：
製品に関するフィードバックや構築中のエラーについては、以下を訪問してください：
ライセンス
このリポジトリはMITライセンスの下で提供されています。詳細はLICENSEファイルをご覧ください。
免責事項:
この文書は、AI翻訳サービスCo-op Translatorを使用して翻訳されています。正確性を期しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。原文（元の言語で記載された文書）が公式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳をお勧めします。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。