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

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

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

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

読み始める場所

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

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

Random glossary entry

Browsing context (ブラウジングコンテキスト)
ブラウジングコンテキストは、ブラウザーDocument (今日では通常タブであり、場合によってはウィンドウまたはページ内のフレーム)を表示する環境です。

カバーするトピック

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

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

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

学習エリアで見つかるコードサンプルは、すべて GitHub にて入手できます。 すべてをあなたのコンピューターにコピーしたい場合、最も簡単な方法は次の通りです。

  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

連絡方法

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

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

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

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

関連情報

Mozilla Developer Newsletter
我々のウェブ開発者向けニュースレターで、すべて経験レベル向けのすばらしいリソースです。
Codecademy
最初からプログラミング言語を学ぶためのすばらしいインタラクティブサイト
Code.org
基本的なコーディング理論と実践で、主に子供や完全な初心者を目的としたもの。
freeCodeCamp.org
ウェブ開発を学習するチュートリアルやプロジェクトのあるインタラクティブなサイト。
Web Literacy Map
エントリーレベルのウェブリテラシーや 21世紀のスキル向けのフレームワークで、カテゴリーごとにソートされた教科にもアクセスできます。
Teaching activities
Mozilla ファウンデーションによって作成された教える(と学ぶ)ための教科シリーズで、ウェブリテラシーやプライバシーなどの基本から、JavaScript や Minecraft のハックまで、すべてカバーしています。
Edabit
いろいろな言語のフリーでインタラクティブなコーディングチャレンジ。

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

最終更新者: mfuji09,