# 初心者のための Web 開発 - カリキュラム マイクロソフトの Azure Cloud Advocates は、JavaScript、CSS、HTML の基礎知識を12週間、24レッスンのカリキュラムで提供しています。各レッスンには、レッスン前後のクイズ、レッスンを完了するための指示書、ソリューション、課題などが含まれています。私たちのプロジェクトベースの教育法は、新しいスキルを「定着させる」ための実証済みの方法である、構築しながら学ぶことを可能にします。 **著者の Jen Looper さん、Chris Noring さん、Christopher Harrison さん、Jasmine Greenaway さん、Yohan Lasorsa さん、Floor Drees さん、そしてスケッチノートアーティストの Tomomi Imura さんに心から感謝します。** > **先生方**、このカリキュラムをどのように使用するか、[いくつかの提案があります](for-teachers.ja.md)。あなた自身のレッスンを作成したい場合は、[レッスンテンプレート](lesson-template/translations/README.ja.md)もご用意しています。 > **学生の皆さん**、このカリキュラムを自分で使うためには、リポジトリ全体をフォークして、講義前の小テストから始めて、講義を読んで、残りのアクティビティを自分で完成させてください。解答コードは各レッスンの /solutions フォルダにありますが、解答コードをコピーするのではなく、授業を理解した上でプロジェクトを作成するようにしてください。また、友達と勉強会を作って、一緒に勉強するのもいいでしょう。さらに勉強するには、[Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) や以下のビデオを見ることをお勧めします。 [![Promo video](screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Promo video") > 上の画像をクリックすると、プロジェクトとそれを作成した人々についてのビデオを見ることができます。 ## 教育学 私たちは、このカリキュラムを構築する際に、2つの教育学的な考え方を選択しました。このシリーズが終わる頃には、学生はタイピングゲーム、バーチャルテラリウム、「グリーン」ブラウザ拡張機能、「スペースインベーダー」タイプのゲーム、ビジネスタイプの銀行アプリを作成し、JavaScript、HTML、CSS の基本を、今日の Web 開発者の最新のツールチェーンとともに学んでいることでしょう。 コンテンツがプロジェクトに沿ったものであることを確認することで、プロセスは学生にとってより魅力的なものとなり、概念の定着率が向上します。また、JavaScriptの基本的な概念を紹介するために、いくつかのスターターレッスンを執筆し、その中の何人かの著者がこのカリキュラムに貢献しているビデオチュートリアルのコレクション "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" のビデオと組み合わせました。 また、授業前の小テストで学習者の学習意図を確認し、授業後に2回目の小テストを行うことで、学習の定着度を高めています。このカリキュラムは柔軟性があり、楽しく、全体的にも部分的にも受講できるように設計されています。プロジェクトは小さなものから始まり、12週間のサイクルが終わる頃には徐々に複雑なものになっていきます。 フレームワークを採用する前に Web 開発者として必要とされる基本的なスキルに集中するため、JavaScript フレームワークの紹介は意図的に避けていますが、このカリキュラムを修了するための良い次のステップとして、別のビデオのコレクション "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)" を通して Node.js について学ぶことができます。 > [行動規範](./CODE_OF_CONDUCT.md)、[貢献](./CONTRIBUTING.md)、[翻訳](./TRANSLATIONS.md)のガイドラインをご覧ください。建設的なご意見をお待ちしております。 > ## 各レッスンの内容は以下の通りです - オプションのスケッチノート - オプションの補足ビデオ - レッスン前の小テスト - 記載されたレッスン - プロジェクトベースのレッスンのために、プロジェクトを構築する方法をステップバイステップでガイドします - 知識のチェック - チャレンジ - 副読本 - 課題 - レッスン後の小テスト ## レッスン | | プロジェクト名 | 教える概念 | 学習の目的 | 関連するレッスン | レッスンの記載 | スケッチノート | 課題 | レッスン前の小テスト | レッスン後の小テスト | ビデオ | 著者 | | :---: | :-----------------------------------------------------------: | :--------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------: | :------------: | :------------: | :---: | :------------------: | :------------------: | :----: | :---------------------: | | 01 | 入門 | プログラミング言語と開発ツール入門 | ほとんどのプログラミング言語の背後にある基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学ぶことができます。 | [プログラミング言語と開発ツール入門](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | | 02 | 入門 | GitHubの基礎、チームでの作業を含む | プロジェクトでの GitHub の使い方、コードベースでの他の人との共同作業の仕方 | [GitHub 入門](/1-getting-started-lessons/2-github-basics/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Floor | | 03 | 入門 | アクセシビリティ | Web アクセシビリティの基礎を学ぶ | [アクセシビリティの基本](/1-getting-started-lessons/3-accessibility/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Christopher | | 04 | JS の基礎 | JavaScript のデータ型 | JavaScript のデータ型の基礎 | [データ型](/2-js-basics/1-data-types/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | | 05 | JS の基礎 | 関数とメソッド | アプリケーションのロジックフローを管理するための機能とメソッドを学ぶ | [関数とメソッド](/2-js-basics/2-functions-methods/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine and Christopher | | 06 | JS の基礎 | JS での意思決定 | 意思決定の方法を使ってコードに条件を作成する方法を学ぶ | [意思決定](/2-js-basics/3-making-decisions/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | | 07 | JS の基礎 | 配列とループ | JavaScript で配列やループを使ってデータを扱う | [配列とループ](/2-js-basics/4-arrays-loops/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | | 08 | [テラリウム](/3-terrarium/solution/translations/README.ja.md) | HTML の実践 | レイアウトの構築を中心に、オンラインテラリウムを作成するための HTML を構築する | [HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | | 09 | [テラリウム](/3-terrarium/solution/translations/README.ja.md) | CSS の実践 | レスポンシブ対応など CSS の基本を中心に、オンラインテラリウムのスタイルを整える CSS を構築します。 | [CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | | 10 | [テラリウム](/3-terrarium/solution) | JavaScript のクロージャ、DOM の操作 | テラリウムをドラッグ＆ドロップのインターフェイスとして機能させるための JavaScript を構築します。 | [JavaScript のクロージャ、DOM の操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | | 11 | [タイピングゲーム](/4-typing-game/solution) | タイピングゲームを構築 | キーボードイベントを使用して JavaScript アプリのロジックを駆動する方法を学びます。 | [イベント駆動型プログラミング](/4-typing-game/typing-game/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher | | 12 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | | 13 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen | | 14 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen | | 15 | [スペースゲーム](/6-space-game/solution) | JavaScript を使ったより高度なゲーム開発 | ゲーム構築に備えて、クラスとコンポジションの両方を使った継承と Pub/Sub パターンを学ぶ | [高度なゲーム開発入門](/6-space-game/1-introduction/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | | 16 | [スペースゲーム](/6-space-game/solution) | キャンバスへの描画 | 画面に要素を描画するために使用される Canvas API について説明します。 | [キャンバスへの描画](/6-space-game/2-drawing-to-canvas/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | | 17 | [スペースゲーム](/6-space-game/solution) | 画面の周りの要素の移動 | 直交座標と Canvas API を使用して、要素がどのように動きを得ることができるかをご覧ください。 | [要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | | 18 | [スペースゲーム](/6-space-game/solution) | 衝突の検出 | 要素を衝突させ、キープレスでお互いに反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します。 | [衝突の検出](/6-space-game/4-collision-detection/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | | 19 | [スペースゲーム](/6-space-game/solution) | スコアの保持 | ゲームのステータスや成績に応じて計算を行う | [スコアの保持](/6-space-game/5-keeping-score/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | | 20 | [スペースゲーム](/6-space-game/solution) | ゲームの終了と再開 | アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学ぶことができます。 | [終了条件](/6-space-game/6-end-condition/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | | 21 | [バンキングアプリケーション](/7-bank-project/solution) | Web アプリの HTML テンプレートとルート | ルーティングと HTML テンプレートを使ったマルチページサイトのアーキテクチャの足場の作り方を学ぶ | [HTML テンプレートとルート](/7-bank-project/1-template-route/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | | 22 | [バンキングアプリケーション](/7-bank-project/solution) | ログインと登録フォームの構築 | フォームの構築と検証ルーチンの渡し方について学ぶ | [フォーム](/7-bank-project/2-forms/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | | 23 | [バンキングアプリケーション](/7-bank-project/solution) | データの取得と利用方法 | アプリのデータの出入り、データの取得方法、保存方法、廃棄方法 | [データ](/7-bank-project/3-data/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | | 24 | [バンキングアプリケーション](/7-bank-project/solution) | 状態管理の概念 | アプリの状態を保持する方法とプログラムで管理する方法を学ぶ | [状態管理](/7-bank-project/4-state-management/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan | ## オフラインアクセス [Docsify](https://docsify.js.org/#/) を使えば、このドキュメントをオフラインで実行することができます。このリポジトリをフォークしてローカルマシンに [Docsify をインストール](https://docsify.js.org/#/quickstart)し、このリポジトリのルートフォルダで `docsify serve` と入力してください。これで、ローカルホスト上の3000番ポート、つまり `localhost:3000` で Web サイトがサーブされます。