ウェブ開発を学ぶ

MDN 学習領域へようこそ。この一連の記事は、ウェブ開発の完全な初心者に、ウェブサイトをコーディングするための基本的なスキルを提供することを目的としています。目的は、あなたを「初心者」から「エキスパート」に導くことではなく、「初心者」から「ほどほど」に導くことです。そこから、 MDN のその他の部分や、前回多くの知識を想定した他の中級から上級のリソースから学びながら、自分の道を歩み始めることができるはずです。

全くの初心者であれば、ウェブ開発は難しいものです。私たちはあなたの手を握り、あなたが快適に感じ、適切にトピックを学ぶために十分な詳細を提供します。あなたがウェブ開発を学習している学生（個人またはクラスの一部として）、クラスの教材を探している先生、趣味の人、ウェブ技術の仕組みをもっと理解したい人など、どのような人であっても、安心してください。

読み始める場所

ウェブ開発を深く学ぶことに自信がなく、おためしセッションから始めたい場合は、ウェブ入門ガイドを読み終えてから作業することをお勧めします。続いて、以下のトピックを学ぶことから始めてください。

HTML および CSS: HTML とはウェブコンテンツの構造を指定されたもので、 CSS とはそのコンテンツをスタイル設定したりレイアウトしたりする命令を提供するものです。必要不可欠な初心者向け情報については、 HTML 入門および CSS 入門を参照してください。
JavaScript: JavaScript を使用すると、ウェブサイト上でインタラクティブな機能をコード化することができます。 JavaScript の第一歩から始めてください。
フレームワークとツールの利用: HTML、CSS、JavaScript の基本をマスターしたら、クライアントサイドウェブ開発ツールについて学んでください。そして、クライアントサイド JavaScript フレームワーク、サーバーサイドウェブサイトプログラミングについて掘り下げて考えてみてください。

メモ: 用語集には、用語の定義が記載されています。また、ウェブ開発に関する特定の質問がある場合は、よくある質問の節で解決できることがあるかもしれません。

フロントエンドのウェブ開発者を目指している方へ

あなたがフロントエンドウェブ開発者になりたいと思っていて、最初に何を学べばいいかわからない場合は、 MDN カリキュラムを使用して学習計画を立てることを提案します。これは、成功するフロントエンド開発者になるために必要なスキルと実践を網羅し、推奨される学習リソースとともに、体系化された学習経路を提供します。

始めましょう

扱うトピック

下記は MDN 学習領域にて扱っているすべてのトピック一覧です。

ウェブ入門: 完全なウェブ開発初心者用の実用的な入門を提供します。
HTML — ウェブの構造化: HTML はコンテンツのいろいろな部分を構造化し、意味や目的を定義するのに使う言語です。このトピックでは HTML を詳細に教えます。
CSS — ウェブのスタイル付け: CSS はウェブのコンテンツウェブコンテンツのスタイルやレイアウトを制御したり、アニメーションのような振る舞いを追加したりするために用いる言語です。このトピックでは CSS を包括的にカバーします。
JavaScript — 動的クライアントサイドスクリプティング: JavaScript はウェブページに動的な機能を追加するスクリプト言語です。このトピックでは JavaScript を書いたり理解するのに十分となるのに必要なすべての要点を教えます。
ウェブフォーム — ユーザーデータを扱う: ウェブフォームは、ユーザーと対話するための強力なツールです。最も一般的には、ユーザーからデータを収集したり、ユーザーがユーザーインターフェイスを制御したりするために使用されます。以下の記事では、ウェブフォームの構造、スタイル、操作に関するすべての重要な側面について説明します。
アクセシビリティ — ウェブを誰でも利用できるようにする: アクセシビリティはウェブコンテンツをなるべく多くの人に利用できるようにする実践であり、それは障がいや、端末や、ロケールや、その他の分化させる要素に関係なく利用できるようにします。このトピックでは知る必要のあるすべてが与えられます。
ウェブの性能 — ウェブサイトを高速かつレスポンシブにする: ウェブの性能は、ウェブアプリケーションのダウンロードを確実に高速化し、ダウンロードを帯域幅、画面の寸法、ネットワーク、端末の能力にかかわらず、ユーザーの操作をレスポンシブにする技術です。
MathML: MathML は、分数、スクリプト、基数、行列、インテグラル、級数などを用いて、ウェブページに数式を記述するために使用する言語です。このトピックでは、MathML を網羅します。
ツールとテスト: このトピックでは、開発者が作業を円滑に進めるために使用するツール、例えばブラウザー間テストツール、リンター、フォーマッター、変換ツール、バージョン管理システム、デプロイツール、クライアント側 JavaScript フレームワークなどについて説明します。
サーバーサイドのウェブサイトプログラミング: クライアントサイドのウェブ開発に集中していても、サーバーとサーバーサイドのコードがどう動くのかを知るのは有益です。このトピックではサーバーサイドの動作の一般的な入門と、2 つの有名フレームワーク — Django (Python) や Express (Node.js) を使ってサーバーサイドアプリを作る方法の詳しいチュートリアルを提供します。

課題と評価

MDN のウェブ開発の学習セクションには、自己完結型の課題や評価がたくさんあります。これらは主に 2 つの型に入力します。

「スキルテスト」の課題、例えばコードでの意思決定 — 条件文。
一部のモジュールの終わりには、より詳細な評価試験、例えば画像ギャラリーなどがあります。

それぞれに関連する採点ガイドと模範解答があり、作業する際の評価に利用できます。例えば、このようなリソースを探しやすくするパターンがあります。

上記リンクのスキルテスト課題には、採点ガイドと資料が 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 にあります。

メモ: 課題と評価のための採点ガイドと他のリソースのほとんどは mdn/learning-area で利用できますが、一部は mdn/css-examples にあります。

サンプルコードの入手

学習領域にあるサンプルコードはすべて GitHub から利用可能です。すべてのコードを自分のコンピューターにコピーしたいのであれば、最新の main コードブランチの ZIP をダウンロードするのが最も簡単です。

自動更新ができる、より柔軟な方法でリポジトリーをコピーしたい場合は、より複雑な指示に従うことになります。

マシンに Git をインストールします。これは GitHub が動作する基盤となっているバージョン管理システムのソフトウェアです。
コンピューターでコマンドプロンプト (Windows) またはターミナル (Linux, macOS) を開きます。
学習領域のリポジトリーを、コマンドプロンプト/ターミナルが指している現在位置の learning-area というフォルダーにコピーするには、下記のコマンドを使います。
bash
```
git clone https://github.com/mdn/learning-area
```
（Finder/エクスプローラーや cd コマンドを使用して）そのディレクトリーに入ると、ファイルが見つかります。

learning-area リポジトリーを、GitHub の master バージョンになされたあらゆる変更で更新するには、以下の手順でできます。

コマンドプロンプト/ターミナルで、 cd を使って learning-area ディレクトリーの中に移動します。例えば、上位のディレクトリーにいる場合は以下のようにします。
bash
```
cd learning-area
```
下記のコマンドでリポジトリーを更新します。
bash
```
git pull
```

連絡方法

何か連絡を取りたいことがある場合は、コミュニケーションチャンネルを使用してください。サイト上で間違っていると思うことや足りないもの、新しい学習テーマのリクエスト、わからない項目のヘルプなど、どんなことでもお聞かせください。

コンテンツの開発、改善の手助けに興味がある場合、協力するには？を覗いて、始めてください。あなたが初心者でも、先生でも、熟練のウェブ開発者でも、その他学習体験の改善に興味がある人でも、誰でも歓迎です。