ウェブ開発を学ぶ

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

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

読み始める場所

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

カバーするトピック

下記は MDN learning area にてカバーしているすべてのトピック一覧です。

ウェブ入門

完全なウェブ開発初心者用の実用的な入門を提供します。

HTML — ウェブの構造化

HTML はコンテンツのいろいろな部分を構造化し、意味や目的を定義するのに使う言語です。このトピックでは HTML を詳細に教えます。

CSS — ウェブのスタイルづけ

CSS はウェブのコンテンツをスタイルづけしたりレイアウトしたり、アニメーションのような振る舞いを追加したりする言語です。このトピックでは CSS を包括的にカバーします。

JavaScript — ダイナミッククライアントサイドスクリプティング

JavaScript はウェブページに動的な機能を追加するスクリプト言語です。このトピックでは JavaScript を書いたり理解するのに十分となるのに必要なすべての要点を教えます。

アクセシビリティ — ウェブをすべての人が利用できるようにする

アクセシビリティはウェブコンテンツをなるべく多くの人に利用できるようにする実践であり、それは障がいや、端末や、ロケールや、その他の分化させる要素に関係なく利用できるようにします。このトピックでは知る必要のあるすべてが与えられます。

ツールとテスト

このトピックは開発者が作業をやり易くするツール、例えばクロスブラウザーテストツールなどについてカバーする場所です。

サーバーサイドのウェブサイトプログラミング

クライアントサイドのウェブ開発に集中していても、サーバーとサーバーサイドのコードがどう動くのかを知るのは有益です。このトピックではサーバーサイドの動作の一般的な入門と、2つの有名フレームワーク — Django (Python) and Express (node.js) を使ってサーバーサイドアプリを作る方法の詳しいチュートリアルを提供します。

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

Learning Area で発見するコードサンプルはすべてGitHubにて入手できます。 すべてをあなたのコンピューターにコピーしたい場合、最も簡単な方法は次の通り:

1. あなたのマシンに Git をインストールします。これは GitHub が動作している、その下にあるバージョン管理システムのソフトウェアです。
2. GitHub にサインアップします。簡潔で簡単です。
3. サインアップが済んだら、ユーザー名/パスワードで github.com にログインします。
4. あなたのコンピューターで コマンドプロンプト (Windows) か ターミナル (Linux, MacOSX) を開きます。
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

Contact us

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

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

関連情報

Mozilla Developer Newsletter

我々のウェブ開発者向けニュースレターで、すべて経験レベル向けのすばらしいリソースです。

Codecademy

最初からプログラミング言語を学ぶためのすばらしいインタラクティブサイト

Code.org

基本的なコーディング理論と実践で、主に子供や完全な初心者を目的としたもの。

freeCodeCamp.org

ウェブ開発を学習するチュートリアルやプロジェクトのあるインタラクティブなサイト。

Web Literacy Map

エントリーレベルのウェブリテラシーや21世紀のスキル向けのフレームワークで、カテゴリーごとにソートされた教科にもアクセスできます。

Teaching activities

Mozilla ファウンデーションによって作成された教える(と学ぶ)ための教科シリーズで、ウェブリテラシーやプライバシーなどの基本から、JavaScriptやMinecraftのハックまで、カバーしています。