ウェブ開発を学ぶ

MDN 学習領域へようこそ。この一連の記事では、ウェブ開発が全くの初心者にとって、シンプルなウェブサイトのコーディングを始めるのに必要な全てを提供することを目標とします。

MDN のこの領域の目的は、あなたを「初心者」から「エキスパート」にすることではなく、「初心者」から「中級者」にすることです。そこから、 MDN のその他の部分や、多くの予備知識を前提とする他の中級から上級のリソースから学びながら、自分の道を歩み始めることができるようになるはずです。

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

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

目標に向かって努力するために必要な必須情報をすべて盛り込んだコースを用意しました。

始めましょう

読み始める場所

全くの初心者の方: ウェブ開発の全くの初心者なら、ウェブ入門を一通り読むことをお勧めします。これを読めば、ウェブ開発を始めるのに必要な基本的な知識はすべて見つかるでしょう。
基本の次の段階の方: すでにいくらかの知識があるなら、次のステップは HTML と CSS を詳しく学ぶことです。 HTML 入門のモジュールから始めて、 CSS 入門のモジュールに移動してください。
スクリプト作成まで進む方: HTML と CSS を十分知っていたり、主にコーディングに興味があるなら、 JavaScript やサーバーサイド開発に行きたくなるでしょう。 JavaScript の第一歩とサーバーサイドの第一歩のモジュールから始めてください。
フレームワークとツールの利用: HTML、CSS、JavaScriptの基本をマスターしたら、クライアントサイドウェブ開発ツールについて学んでください。そして、クライアントサイド JavaScript フレームワーク、サーバーサイドウェブサイトプログラミングについて掘り下げて考えてみてください。

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

カバーするトピック

下記は MDN 学習領域にてカバーしているすべてのトピック一覧です。

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

コード例の入手

学習領域にあるコードの例はすべて GitHub から利用可能です。すべてのコードを自分のコンピューターにコピーしたいのであれば、最新の master コードブランチの 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
```

連絡方法

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

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

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

読み始める場所

カバーするトピック

コード例の入手

連絡方法

関連情報