2024/12/22 時点の英語版に基づき更新

files/ja/learn_web_development/index.md

@@ -1,109 +1,44 @@
 ---
-title: ウェブ開発を学ぶ
+title: ウェブ開発の学習
 slug: Learn_web_development
-original_slug: Learn
 l10n:
-  sourceCommit: 4155f9bfa35ad2624ee1dad2fce5bba5bb425870
+  sourceCommit: 9b80c652eda0b516f3ed7f9be3b90f59aa9982e1
 ---
 
 {{LearnSidebar}}
 
-MDN 学習領域へようこそ。この一連の記事は、ウェブ開発の完全な初心者に、ウェブサイトをコーディングするための基本的なスキルを身に付けてもらうことを目的としています。あなたを「初心者」から「エキスパート」に導くことではなく、「初心者」から「慣れ親しむ」ところまで導くことがこの記事の目的です。これを終えると、そこから自分の歩みを始め、 [MDN の他の記事](/ja/)や、その他の多くの前提知識を想定する中級・上級者向けリソースを使って学んでいくことができるはずです。
+## 新人フロントエンド開発者のための基本的なスキルセット
 
-あなたが全くの初心者なら、ウェブ開発は難しいものかもしれません。私たちはあなたの手を取り、快適かつ適切にトピックを学べるよう十分に詳細な情報を提供します。あなたがウェブ開発を（独学または授業で）学習している学生や教材を探している教師、趣味の人、ただウェブ技術の仕組みをより深く理解したい人など、どのような人であっても安心してください。
+MDN の**ウェブ開発の学習**（または**学習**）へようこそ。このリソースでは、成功するフロントエンド開発者になるために必要なスキルと実践を教える、構造化されたチュートリアルセットを示しており、課題やさらに推奨されるリソースも提供しています。
 
-## どこから始めるか
-
-ウェブ開発を深く学ぼうと決めているわけではなく、おためしセッションから始めたい場合は、[ウェブ入門](/ja/docs/Learn/Getting_started_with_the_web)ガイドからまずはやってみることをお勧めします。それを終えたら、以下のトピックから学習を始めるといいでしょう。
-
-- HTML および CSS
-  - : HTML とはウェブコンテンツに構造を与えるもので、 CSS とはそのコンテンツにスタイルやレイアウトを設定するものです。初心者向けの基礎知識については、 [HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)および [CSS の第一歩](/ja/docs/Learn/CSS/First_steps)を参照してください。
-- JavaScript
-  - : JavaScript を使用すると、ウェブサイト上でインタラクティブな機能を実装することができます。 [JavaScript の第一歩](/ja/docs/Learn/JavaScript/First_steps)から始めてください。
-- フレームワークとツールの利用
-  - : 素の HTML、CSS、JavaScript の基本をマスターしたら、次は [クライアントサイドウェブ開発ツール](/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools)について学んでください。それから、 [クライアントサイド JavaScript フレームワーク](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks)、 [サーバーサイドウェブサイトプログラミング](/ja/docs/Learn/Server-side)の基本的なコンセプトの学習というふうに進めていくといいでしょう。
-
-> **メモ:** [用語集](/ja/docs/Glossary)には、用語の定義を掲載しています。また、ウェブ開発に関する特定の質問がある場合は、[よくある質問](/ja/docs/Learn/Common_questions)の節で解決できることがあるかもしれません。
-
-> [!CALLOUT]
->
-> #### フロントエンドのウェブ開発者を目指している方へ
->
-> あなたがフロントエンドウェブ開発者になりたいと思っていて、最初に何を学べばいいかわからない場合は、 [MDN Curriculum](/en-US/curriculum/)を使用して学習計画を立てることを提案します。これは、フロントエンド開発者として成功するために必須のスキルと実践を網羅し、推奨される学習リソースとともに、体系化された学習経路を提供します。
->
-> [**始める**](/en-US/curriculum/)
-
-## 扱うトピック
-
-下記は MDN 学習領域で扱っているすべてのトピックの一覧です。
-
-- [ウェブ入門](/ja/docs/Learn/Getting_started_with_the_web)
-  - : 完全なウェブ開発初心者用の実用的な入門を提供します。
-- [HTML — ウェブの構造化](/ja/docs/Learn/HTML)
-  - : HTML はコンテンツのいろいろな部分を構造化し、意味や目的を定義するのに使う言語です。このトピックでは HTML を詳細に教えます。
-- [CSS — ウェブのスタイル付け](/ja/docs/Learn/CSS)
-  - : CSS はウェブのコンテンツウェブコンテンツのスタイルやレイアウトを制御したり、アニメーションのような振る舞いを追加したりするために用いる言語です。このトピックでは CSS を包括的にカバーします。
-- [JavaScript — 動的クライアントサイドスクリプティング](/ja/docs/Learn/JavaScript)
-  - : JavaScript はウェブページに動的な機能を追加するスクリプト言語です。このトピックでは JavaScript を一通り書いたり理解できるようになるために必要なすべての要点を教えます。
-- [ウェブフォーム — ユーザーデータを扱う](/ja/docs/Learn/Forms)
-  - : ウェブフォームは、ユーザーと対話するための強力なツールです。最も一般的には、ユーザーからデータを収集したり、ユーザーがユーザーインターフェイスを制御したりするために使用されます。以下の記事では、ウェブフォームの構造、スタイル、操作に関するすべての重要な側面について説明します。
-- [アクセシビリティ — ウェブを誰でも利用できるようにする](/ja/docs/Learn/Accessibility)
-  - : アクセシビリティは、障がいや端末、言語、その他の人を分かつ要因に影響されず、ウェブコンテンツをなるべく多くの人に利用できるようにする実践です。このトピックでは知っておく必要のあることのすべてを提供します。
-- [ウェブパフォーマンス — ウェブサイトを高速かつレスポンシブにする](/ja/docs/Learn/Performance)
-  - : ウェブパフォーマンスは、ユーザーの帯域幅、画面サイズ、ネットワーク、端末の性能にかかわらず、ウェブアプリケーションが高速にダウンロードされ、ユーザーの操作に対してレスポンシブになるようにする技術です。
-- [MathML](/ja/docs/Learn/MathML)
-  - : MathML は、分数、スクリプト、基数、行列、インテグラル、級数などを用いて、ウェブページに数式を記述するために使用する言語です。このトピックでは、MathML を扱います。
-- [ツールとテスト](/ja/docs/Learn/Tools_and_testing)
-  - : このトピックでは、開発者が作業を円滑に進めるために使用するツール、例えばブラウザー間テストツール、リンター、フォーマッター、変換ツール、バージョン管理システム、デプロイツール、クライアントサイド JavaScript フレームワークなどについて説明します。
-- [サーバーサイドのウェブサイトプログラミング](/ja/docs/Learn/Server-side)
-  - : クライアントサイドのウェブ開発に専念しているとしても、サーバーとサーバーサイドのコードがどう動くのかを知るのは有益です。このトピックではサーバーサイドの動作の一般的な入門と、2 つの有名フレームワーク — Django (Python) や Express (Node.js) を使ってサーバーサイドアプリを作る方法の詳しいチュートリアルを提供します。
-
-## 課題と評価試験
-
-MDN のウェブ開発の学習セクションには、その中で完結する課題や評価試験がたくさんあります。これらは主に 2 つのタイプに分かれます。
-
-- 「スキルテスト」課題。例えば[コードでの意思決定 — 条件文](/ja/docs/Learn/JavaScript/Building_blocks/conditionals#test_your_skills!)など。
-- 一部のモジュールの終わりにある、より詳細な**評価試験**。例えば[画像ギャラリー](/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery)など。
-
-それぞれに関連する採点ガイドと模範解答があり、あなたの答案の評価に利用できます。
-これらのリソースには従っているパターンがあり、例えば以下の方法で簡単に見つけることができます。
-
-- 上記リンクの**スキルテスト**課題の採点ガイドとリソースは <https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/tasks/conditionals> にあります。
-- 上記リンクの**評価試験**の採点ガイドとリソースは <https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/gallery> にあります。
-
-> [!NOTE]
-> 課題と評価試験のための採点ガイドと他のリソースのほとんどは [`mdn/learning-area`](https://github.com/mdn/learning-area/) で利用できますが、一部は [`mdn/css-examples`](https://github.com/mdn/css-examples/tree/main/learn) にあります。
-
-## サンプルコードの入手
-
-学習領域にあるサンプルコードはすべて [GitHub から利用可能](https://github.com/mdn/learning-area/)です。
-すべてのコードを自分のコンピューターにコピーしたいのであれば、[最新の main コードブランチの ZIP をダウンロードする](https://codeload.github.com/mdn/learning-area/zip/main)のが最も簡単です。
+## ウェブ開発の学習について
 
-自動更新ができる、より柔軟な方法でリポジトリーをコピーしたい場合は、より複雑な以下の指示に従ってください。
+- フロントエンド開発者がキャリアを成功させ、業界で通用するために必要なスキルと知識を定義します。
 
-1. マシンに [Git をインストールします](https://git-scm.com/downloads)。これは GitHub が動作する基盤となっているバージョン管理システムのソフトウェアです。
-2. コンピューターで[コマンドプロンプト](https://www.lifewire.com/how-to-open-command-prompt-2618089) (Windows) またはターミナル ([Linux](https://help.ubuntu.com/community/UsingTheTerminal), [macOS](https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line)) を開きます。
-3. 学習領域のリポジトリーを、コマンドプロンプト/ターミナルが指している現在位置の learning-area というフォルダーにコピーするには、下記のコマンドを使います。
+- MDN コミュニティによって作成され、より幅広いウェブコミュニティの学生、教育者、開発者からの観察により改良されました。
 
-   ```bash
-   git clone https://github.com/mdn/learning-area
-   ```
+- あなたを（「初心者」から「エキスパート」ではなく）「初心者」から「慣れ親しむ」ところまで導き、より高度なリソース（[MDN の他の部分](/ja/)など）を使用するのに十分な知識を提供します。
 
-4. （Finder/エクスプローラーや [cd コマンド](<https://en.wikipedia.org/wiki/Cd_(command)>)を使用して）そのディレクトリーに入ると、ファイルが見つかります。
+> [!NOTE]
+> 最終更新: 2024 年 12 月（[変更履歴を見る](/ja/docs/Learn_web_development/Changelog)）。
 
-GitHub の main バージョンにどんな変更があったときでも、`learning-area` リポジトリーを以下の手順で更新できます。
+## どこから始めるか
 
-1. コマンドプロンプト/ターミナルで、 `cd` を使って `learning-area` ディレクトリーの中に移動します。例えば、一つ上のディレクトリーにいる場合は以下のようにします。
+- コードを全く書いたことがない方
+  - : [入門モジュール](/ja/docs/Learn_web_development/Getting_started)では、まったくの初心者の方を対象に、セットアップチュートリアルや、必要な概念や背景の情報を提供しています。 まったくの初心者の方（つまり、コードエディターをインストールしたこともなければ、コードを書いたこともない方）は、こちらから始めてください。
+- 基本をマスターしたい方
+  - : [コアモジュール](/ja/docs/Learn_web_development/Core)では、成功するフロントエンド開発者になるために必要なスキルと実践を教えるチュートリアルの構造化されたセットを提供しています。
+- 基本を終えた方
+  - : [応用モジュール](/ja/docs/Learn_web_development/Extensions)は、知識を広げ、専門分野を開発し始めるには有益な追加スキルを扱っています。コアモジュールを完了したら、こちらに進んでください。
+- 学校で働いている方
+  - : 私たちのモジュールを指導のガイドとして使い、さらにアイディアをお探しの方は[教育者ページ](/ja/docs/Learn_web_development/Educators)を参照するか、または Scrimba の [The Frontend Developer Career Path](https://v2.scrimba.com/the-frontend-developer-career-path-c0j?via=mdn) <sup>_MDN カリキュラムパートナー_</sup> に生徒を登録してください。
 
-   ```bash
-   cd learning-area
-   ```
+## サンプルコードの入手
 
-2. 下記のコマンドでリポジトリーを更新します。
+この学習領域で見かけるサンプルコードは、すべて [GitHub から利用可能](https://github.com/mdn/learning-area/)です。
 
-   ```bash
-   git pull
-   ```
+- 最も簡単な取得方法は、[最新の main コードブランチの ZIP をダウンロードする](https://codeload.github.com/mdn/learning-area/zip/main)ことです。
+- Git と GitHub に慣れている場合は、リポジトリーをクローンするという選択肢もあります。
 
 ## 連絡方法
 
@@ -113,15 +48,11 @@ GitHub の main バージョンにどんな変更があったときでも、`lea
 
 ## 関連情報
 
+- [The Frontend Developer Career Path](https://v2.scrimba.com/the-frontend-developer-career-path-c0j?via=mdn) <sup>_MDN カリキュラムパートナー_</sup>
+  - : [Scrimba](https://scrimba.com?via=mdn) のフロントエンド開発者キャリアパスでは、楽しく対話しながら学べるレッスンや課題、知識豊富な講師、対応しているコミュニティを通じて、有能なフロントエンドウェブ開発者になるために必要なすべてを学ぶことができます。ゼロから最初のフロントエンドの仕事に就くまで、このコースの多くの部分は、無料版として単独で利用できます。
 - [Learn JavaScript](https://learnjavascript.online/)
   - : ウェブ開発者を目指す人のための優れたリソースです。インタラクティブな環境で、短いレッスンとインタラクティブなテストを使用して、自動的に採点される評価試験にガイドされながら JavaScript を学ぶことができます。最初の 40 レッスンは無料で、完全なコースはわずかな一回の支払いで利用できます。
 - [Codecademy](https://www.codecademy.com/)
   - : 一からプログラミング言語を学ぶための優れたインタラクティブなサイトです。
 - [freeCodeCamp.org](https://www.freecodecamp.org/)
   - : ウェブ開発を学習するチュートリアルやプロジェクトを備えたインタラクティブなサイトです。
-- [The Odin Project](https://www.theodinproject.com/)
-  - : 初心者から上級者までを対象に、無料かつオープンソースのフルスタックカリキュラムが特徴です。
-- [MDN Blog](/en-US/blog/)
-  - : MDN ブログでは、 MDN チームやゲストライターが、サイトの新しい開発、HTML、CSS、JavaScript、他にもウェブ開発に関するニュースを記事にしています。
-- [Mozilla developer newsletter](https://www.mozilla.org/en/newsletter/developer/)
-  - : ウェブ開発者向けの私たちのニュースレターで、あらゆる経験のレベルに向けた素晴らしいリソースです。