ウェブ開発を学ぶ

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

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

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

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

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

始めましょう

読み始める場所

全くの初心者の方

ウェブ開発の全くの初心者なら、ウェブ入門を一通り読むことをお勧めします。これを読めば、ウェブ開発を始めるのに必要な基本的な知識はすべて見つかるでしょう。

基本の次の段階の方

すでにいくらかの知識があるなら、次のステップは HTMLCSS を詳しく学ぶことです。 HTML 入門のモジュールから始めて、 CSS 入門のモジュールに移動してください。

スクリプト作成まで進む方

HTML と CSS を十分知っていたり、主にコーディングに興味があるなら、 JavaScript やサーバーサイド開発に行きたくなるでしょう。 JavaScript の第一歩サーバーサイドの第一歩のモジュールから始めてください。

フレームワークとツールの利用

HTML、CSS、JavaScriptの基本をマスターしたら、クライアントサイドウェブ開発ツール について学んでください。そして、クライアントサイド JavaScript フレームワークサーバーサイドウェブサイトプログラミングについて掘り下げて考えてみてください。

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

カバーするトピック

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

ウェブ入門

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

HTML — ウェブの構造化

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

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

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

JavaScript — 動的クライアントサイドスクリプティング

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

ウェブフォーム — ユーザーデータを扱う

ウェブフォームは、ユーザーと対話するための強力なツールです。最も一般的には、ユーザーからデータを収集したり、ユーザーがユーザーインターフェイスを制御したりするために使用されます。以下の記事では、ウェブフォームの構造、スタイル、操作に関するすべての重要な側面について説明します。

アクセシビリティ — ウェブを誰でも利用できるようにする

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

ウェブの性能 — ウェブサイトを高速かつレスポンシブにする

ウェブの性能は、ウェブアプリケーションのダウンロードを確実に高速化し、ダウンロードを帯域幅、画面の寸法、ネットワーク、端末の能力にかかわらず、ユーザーの操作をレスポンシブにする技術です。

ツールとテスト

このトピックでは、開発者が作業を円滑に進めるために使用するツール、例えばブラウザー間テストツール、リンター、フォーマッター、変換ツール、バージョン管理システム、デプロイツール、クライアント側 JavaScript フレームワークなどについて説明します。

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

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

コード例の入手

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

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

  1. マシンに Git をインストールします。これは GitHub が動作する基盤となっているバージョン管理システムのソフトウェアです。
  2. コンピューターでコマンドプロンプト (Windows) またはターミナル (Linux, macOS) を開きます。
  3. 学習エリアのリポジトリーを、コマンドプロンプト/ターミナルが指している現在位置の learning-area というフォルダーにコピーするには、下記のコマンドを使います。
    git clone https://github.com/mdn/learning-area
    
  4. (Finder/エクスプローラーや cd コマンドを使用して)そのディレクトリーに入ると、ファイルが見つかります。

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

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

連絡方法

何か連絡を取りたいことがある場合は、 Discourse フォーラムでメッセージを投稿するのがもっともよい方法です。サイト上で間違っていると思うことや足りないもの、新しい学習テーマのリクエスト、わからない項目のヘルプなど、どんなことでもお聞かせください。

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

関連情報

Mozilla developer newsletter

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

Learn JavaScript

ウェブ開発者を目指す人のための優れたリソースです。短いレッスンとインタラクティブなテストで、自動評価によって導かれるインタラクティブな環境で JavaScript を学ぶことができます。最初の 40 レッスンは無料で、完全なコースはわずかな一回の支払いで利用できます。

Web demystified

ウェブの基礎を説明するすばらしい動画シリーズで、ウェブ開発の完全な初心者に向けたもの。製作者は Jérémie Patonnier

Codecademy

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

BitDegree

ゲーミフィケーションされた学習プロセスによる基本的なコーディング理論です。主に初心者向けです。

Code.org

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

EXLskills 

技術スキルを学ぶための、メンターシップやプロジェクトベースの学習があるフリーでオープンなコースです。

freeCodeCamp.org

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

Web literacy map

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

Edabit

数千のインタラクティブな JavaScript チャレンジ。