Web-Dev-For-Beginners/translations/ja

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

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

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

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

🧑‍🎓 学生の皆さんへ

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

📣 お知らせ - 新しいカリキュラム「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アカウントに新しいリポジトリとして作成されます。

手順:

1. リポジトリをフォークする: ページ右上の「Fork」ボタンをクリックしてください。
2. リポジトリをクローンする: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

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

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

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

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

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

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

   

   次に、Visual Studio Code内のターミナルを開き、コピーしたURLを <your-repository-url> に置き換えて以下のコマンドを実行してください:

   git clone <your-repository-url>
   

2. Visual Studio Codeでフォルダを開きます。File > Open Folder をクリックし、クローンしたフォルダを選択してください。

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

• Live Server - HTMLページをVisual Studio Code内でプレビューするため
• 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 and Christopher
06	JSの基本	JSでの意思決定	意思決定方法を使用してコード内で条件を作成する方法を学ぶ	意思決定	Jasmine
07	JSの基本	配列とループ	JavaScriptで配列とループを使用してデータを操作する	配列とループ	Jasmine
08	テラリウム	HTMLの実践	オンラインテラリウムを作成するためのHTMLを構築し、レイアウトの作成に焦点を当てる	HTMLの紹介	Jen
09	テラリウム	CSSの実践	オンラインテラリウムをスタイル設定するためのCSSを構築し、CSSの基本（ページをレスポンシブにする方法を含む）に焦点を当てる	CSSの紹介	Jen
10	Terrarium	JavaScriptのクロージャとDOM操作	JavaScriptを使ってドラッグ＆ドロップのインターフェースとしてテラリウムを機能させるコードを作成し、クロージャとDOM操作に焦点を当てます	JavaScriptのクロージャとDOM操作	Jen
11	Typing Game	タイピングゲームを作る	キーボードイベントを使用してJavaScriptアプリのロジックを駆動する方法を学びます	イベント駆動型プログラミング	Christopher
12	Green Browser Extension	ブラウザの仕組みを学ぶ	ブラウザの仕組みや歴史を学び、ブラウザ拡張機能の最初の要素を構築する方法を学びます	ブラウザについて	Jen
13	Green Browser Extension	フォームの作成、APIの呼び出し、ローカルストレージへの変数保存	ローカルストレージに保存された変数を使用してAPIを呼び出すブラウザ拡張機能のJavaScript要素を構築します	API、フォーム、ローカルストレージ	Jen
14	Green Browser Extension	ブラウザのバックグラウンドプロセスとウェブパフォーマンス	ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理する方法を学び、ウェブパフォーマンスと最適化について学びます	バックグラウンドタスクとパフォーマンス	Jen
15	Space Game	JavaScriptを使ったより高度なゲーム開発	クラスとコンポジションを使用した継承やPub/Subパターンについて学び、ゲーム構築の準備をします	高度なゲーム開発の紹介	Chris
16	Space Game	キャンバスへの描画	画面に要素を描画するために使用されるCanvas APIについて学びます	キャンバスへの描画	Chris
17	Space Game	画面上の要素の移動	デカルト座標とCanvas APIを使用して要素に動きを与える方法を学びます	要素の移動	Chris
18	Space Game	衝突検出	キー入力を使用して要素が衝突し、互いに反応する方法を学び、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します	衝突検出	Chris
19	Space Game	スコアの管理	ゲームの状態とパフォーマンスに基づいて数学的計算を行います	スコアの管理	Chris
20	Space Game	ゲームの終了と再開	ゲームの終了と再開について学び、アセットのクリーンアップや変数値のリセットを含めます	終了条件	Chris
21	Banking App	ウェブアプリにおけるHTMLテンプレートとルート	マルチページウェブサイトのアーキテクチャをルーティングとHTMLテンプレートを使用して構築する方法を学びます	HTMLテンプレートとルート	Yohan
22	Banking App	ログインと登録フォームの作成	フォームの作成とバリデーションルーチンの処理について学びます	フォーム	Yohan
23	Banking App	データの取得と使用方法	アプリ内でデータがどのように流れ、取得、保存、破棄されるかを学びます	データ	Yohan
24	Banking App	状態管理の概念	アプリが状態を保持する方法と、それをプログラムで管理する方法を学びます	状態管理	Yohan

🏫 教育方針

私たちのカリキュラムは、以下の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はこちらからダウンロードできます。

🎒 その他のコース

私たちのチームは他にもコースを提供しています！ぜひチェックしてください：

• Generative AI 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
• Mastering GitHub Copilot for C#/.NET Developers
• Choose Your Own Copilot Adventure

ライセンス

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

---

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