info/Web-Dev-For-Beginners

Fork 0

mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git synced 2025-09-08 21:50:50 +02:00

Files

leestott a2fda673a6 🌐 Update translations via Co-op Translator

2025-08-28 18:57:20 +00:00

31 KiB

Raw Permalink Blame History

これらのリソースを使い始めるための手順:

リポジトリをフォークする: をクリックしてください。
リポジトリをクローンする: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Azure AI Foundry Discordに参加して、専門家や他の開発者と交流する

初心者向けウェブ開発 - カリキュラム

Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを使った実践的なプロジェクト（テラリウム、ブラウザ拡張機能、宇宙ゲームなど）を通じて学びます。クイズ、ディスカッション、実践課題を通じてスキルを向上させ、プロジェクトベースの教育法で知識の定着を最適化します。今すぐコーディングの旅を始めましょう！

🌐 多言語対応

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が作成されます。

!Codespace./images/createcodespace.png)

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

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

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

リポジトリをコンピュータにクローンします。CodeボタンをクリックしてURLをコピーしてください:

!CodeSpace

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

フォルダーを開く を選択し、クローンしたばかりのフォルダーを選択します。推奨される 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	はじめに	アクセシビリティ	ウェブアクセシビリティの基本を学ぶ	アクセシビリティの基本	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	グリーンブラウザ拡張機能	ブラウザのバックグラウンドプロセス、ウェブパフォーマンス	ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理する方法を学び、ウェブパフォーマンスと最適化について学ぶ	バックグラウンドタスクとパフォーマンス	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	ブラウザ/VScode コード	VScode の操作	コードエディタの使用方法を学ぶ	VScode コードエディタの使用	Chris
26	AI アシスタント	AI の操作	独自の AI アシスタントを構築する方法を学ぶ	AI アシスタントプロジェクト	Chris

🏫 教育方針

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

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

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

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

プロジェクトに沿った内容を確保することで、学生にとってより魅力的なプロセスとなり、概念の定着が促進されます。また、JavaScript の基本を紹介するいくつかのスターターレッスンを作成し、"Beginners Series to: JavaScript" のビデオコレクションとペアリングしました。このコレクションの一部の著者は、このカリキュラムにも貢献しています。

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

JavaScript フレームワークを導入せず、フレームワークを採用する前に必要な基本スキルに集中するよう意図的に設計されていますが、このカリキュラムを修了した後の次のステップとして、Node.js を学ぶことをお勧めします。こちらのビデオコレクションをご覧ください: "Beginner Series to: Node.js".

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

🧭 オフラインアクセス

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

📘 PDF

すべてのレッスンの PDF はこちらで見つけることができます。

🎒 その他のコース

私たちのチームは他のコースも制作しています！ぜひご覧ください:

ライセンス

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

免責事項:
この文書は、AI翻訳サービス Co-op Translator を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知ください。元の言語で記載された文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当方は責任を負いません。

31 KiB Raw Permalink Blame History Unescape Escape