MDN 学習エリアへようこそ。この一連の記事では、Web 開発が全くの初心者にとって、シンプルな Web サイトのコーディングを始めるのに必要な全てを提供することを狙っています。

MDN のこのエリアのねらいは、あなたを「初心者」から「達人」に変えることではなく、「初心者」から「それなり」に変えることです。Web 開発において自分なりの方法を確立するためには、さらに、MDN のこのエリア以外の記事と他の中・上級者用の Web サイトを読み進めなければなりません。しかしその前に、このエリアでたくさんの前提知識を身に付けておく必要があります。

全くの初心者の場合、Web 開発は難しいかもしれません — 手を取って、あなたが安心できて適切に学習できるよう、十分に詳細な情報を提供します。あなたが Web 開発を学習する学生 (自習でも教科でも) でも、教材を探している先生でも、趣味に熱中する人でも、単に Web 技術の動作を知りたい場合のいずれであっても、ここは落ち着く場所になるでしょう。

重要: 学習エリアのコンテンツは定期的に追加されています。もし、カバーしていてほしい、または足りないと思うトピックに関して質問がある場合は、下記のContact usのセクションを参照して、連絡する方法の情報を探してださい。

読み始める場所

  • 完全な初心者の方: Web 開発の完全な初心者から、「Web 入門」を一通り読むのをお勧めします。これを読めば、Web 開発を始めるのに必要な基本的な知識はすべて見つかるでしょう。
  • 特定の質問がある方: Web 開発について何か質問がある場合、よくある質問セクションに助けとなる情報があるかもしれません。
  • 基本の次の段階の方: すでにいくらかの知識があるなら、次のステップは HTMLCSS を詳しく学ぶことです。 HTML 入門のモジュールから始めて、 CSS 入門のモジュールに移動します。
  • スクリプト作成まで進む方: HTML と CSS を十分知っていたり、主にコーディングに興味があるなら、 JavaScript やサーバーサイド開発に移動したくなるでしょう。JavaScript の第一歩サーバサイドの第一歩のモジュールから始めます。

メモ: 用語集にて、単語の定義が提供されています。

Random glossary entry

Forbidden header name (禁止ヘッダー名)
禁止ヘッダー名はプログラムから変更することができない HTTP ヘッダーの名前、特に、 HTTP リクエストヘッダーの名前です(反対に、禁止レスポンスヘッダー名 もあります)。

カバーするトピック

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

Web 入門
完全なWeb開発初心者用の実用的な入門を提供します。
HTML — Web の構造化
HTML はコンテンツのいろいろな部分を構造化し、意味や目的を定義するのに使う言語です。このトピックでは HTML を詳細に教えます。
CSS — Web  のスタイルづけ
CSS はWebのコンテンツをスタイルづけしたりレイアウトしたり、アニメーションのような振る舞いを追加したりする言語です。このトピックでは CSS を包括的にカバーします。
JavaScript — 動的クライアントサイドスクリプティング
JavaScript はWebページに動的な機能を追加するスクリプト言語です。このトピックでは JavaScript を書いたり理解するのに十分となるのに必要なすべての要点を教えます。
アクセシビリティ — Web をすべての人が利用できるようにする
アクセシビリティはWebコンテンツをなるべく多くの人に利用できるようにする実践であり、それは障がいや、端末や、ロケールや、その他の分化させる要素に関係なく利用できるようにします。このトピックでは知る必要のあるすべてが与えられます。
Web の性能 — Web サイトを高速かつレスポンシブにする
Web の性能は、Web アプリケーションのダウンロードを確実に高速化し、ダウンロードを帯域幅、画面の寸法、ネットワーク、端末の能力にかかわらず、ユーザーの操作をレスポンシブにする技術です。
ツールとテスト
このトピックは開発者が作業をやり易くするツール、例えばクロスブラウザーテストツールなどについてカバーします。
サーバサイドの Web サイトプログラミング
クライアントサイドの Web 開発に集中していても、サーバとサーバサイドのコードがどう動くのかを知るのは有益です。このトピックではサーバサイドの動作の一般的な入門と、2 つの有名フレームワーク — Django (Python) and Express (node.js) を使ってサーバサイドアプリを作る方法の詳しいチュートリアルを提供します。

コードサンプルを入手する

学習エリアにあるコードの例はすべて GitHub で利用可能です。それらすべてをあなたのコンピュータにコピーしたいのなら、最も簡単な方法は最新の master コードブランチのZIPをダウンロードすることです。

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

  1. あなたのマシンに Git をインストールします。これは GitHub が動作している、その下にあるバージョン管理システムのソフトウェアです。
  2. GitHub にサインアップします
  3. サインアップが済んだら、ユーザー名/パスワードで github.com にログインします。
  4. あなたのコンピューターでコマンドプロンプト (Windows) かターミナル (Linux, macOS) を開きます。
  5.  learning area のリポジトリを、あなたのコマンドプロンプト/ターミナルの現在位置の learning-area と呼ぶフォルダーにコピーするには、下記のコマンドを使います。
    git clone https://github.com/mdn/learning-area
  6. そのディレクトリに入って、ファイルが (finder/エクスプローラーや、cd コマンドのいずれか) の後に見つかるでしょう。

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

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

連絡方法

何か連絡を取りたいことがある場合、learning area discourse スレッドIRC チャンネル でメッセージを投稿するのがもっともよい方法です。サイトの間違いや新しい学習トピックスの要望、理解できない項目についてのヘルプ要請などなんでも歓迎です。

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

Learnコミュニティに参加してください

あなたの好きな方法でディスカッションに参加してください

関連情報

Mozilla developer newsletter
我々のWeb開発者向けニュースレターで、あらゆる経験レベル向けのすばらしいリソースです。
Web demystified
Webの基礎を説明するすばらしい動画シリーズで、Web開発の完全な初心者に向けたもの。製作者は Jérémie Patonnier
Codecademy
最初からプログラミング言語を学ぶためのすばらしいインタラクティブサイト
Code.org
基本的なコーディング理論と実践で、主に子供や完全な初心者を目的としたもの。
EXLskills 
技術スキルを学ぶための、メンターシップやプロジェクトベースの学習があるフリーでオープンなコースです。
freeCodeCamp.org
Web開発を学習するチュートリアルやプロジェクトのあるインタラクティブなサイト。
Web literacy map
エントリーレベルのWebリテラシーや 21世紀のスキル向けのフレームワークで、カテゴリーごとにソートされた教科にもアクセスできます。
Teaching activities
Mozilla Foundation によって作成された教える(と学ぶ)ための教科シリーズで、Webリテラシーやプライバシーなどの基本から、JavaScript や Minecraft のハックまで、すべてカバーしています。
Edabit
いろいろな言語のフリーでインタラクティブなコーディングチャレンジ。

ドキュメントのタグと貢献者

最終更新者: silverskyvicto,