ウェブ開発を学ぶ

MDN 学習領域へようこそ。この一連の記事は、ウェブ開発の完全な初心者に、ウェブサイトをコーディングするための基本的なスキルを身に付けてもらうことを目的としています。あなたを「初心者」から「エキスパート」に導くことではなく、「初心者」から「慣れ親しむ」ところまで導くことがこの記事の目的です。これを終えると、そこから自分の歩みを始め、 MDN の他の記事や、その他の多くの前提知識を想定する中級・上級者向けリソースを使って学んでいくことができるはずです。

あなたが全くの初心者なら、ウェブ開発は難しいものかもしれません。私たちはあなたの手を取り、快適かつ適切にトピックを学べるよう十分に詳細な情報を提供します。あなたがウェブ開発を（独学または授業で）学習している学生や教材を探している教師、趣味の人、ただウェブ技術の仕組みをより深く理解したい人など、どのような人であっても安心してください。

どこから始めるか

ウェブ開発を深く学ぼうと決めているわけではなく、おためしセッションから始めたい場合は、ウェブ入門ガイドからまずはやってみることをお勧めします。それを終えたら、以下のトピックから学習を始めるといいでしょう。

HTML および CSS: HTML とはウェブコンテンツに構造を与えるもので、 CSS とはそのコンテンツにスタイルやレイアウトを設定するものです。初心者向けの基礎知識については、 HTML 入門および CSS の第一歩を参照してください。
JavaScript: JavaScript を使用すると、ウェブサイト上でインタラクティブな機能を実装することができます。 JavaScript の第一歩から始めてください。
フレームワークとツールの利用: 素の HTML、CSS、JavaScript の基本をマスターしたら、次はクライアントサイドウェブ開発ツールについて学んでください。それから、クライアントサイド JavaScript フレームワーク、サーバーサイドウェブサイトプログラミングの基本的なコンセプトの学習というふうに進めていくといいでしょう。

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

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

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

始める

扱うトピック

下記は 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 コマンドを使用して）そのディレクトリーに入ると、ファイルが見つかります。

GitHub の main バージョンにどんな変更があったときでも、learning-area リポジトリーを以下の手順で更新できます。

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

連絡方法

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

コンテンツの作成、改善の手助けに興味がある場合、協力するには？を覗いて、それから連絡を取ってください！　あなたが初心者でも、教師でも、経験豊富なウェブ開発者でも、その他学習体験の改善に興味がある人でも、誰でも歓迎です。