HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3L1DfV1rpiftzw3JRBeXr_hg-dho7OQSB4MARQvkUdHxgPCqrN2_IH83K-K9_9sGNvi
cache-control: public, max-age=3600
expires: Thu, 09 Oct 2025 22:35:01 GMT
last-modified: Thu, 09 Oct 2025 01:11:50 GMT
etag: W/"41f753c41746f315e4c4d2dddc9fcde4"
x-goog-generation: 1759972310369752
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 187624
x-goog-meta-goog-reserved-file-mtime: 1759970203
x-goog-hash: crc32c=lvhX+g==, md5=QfdTxBdG8xXkxNLd3J/N5A==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: cd2ee53bf7eeb1a35e4a3595faf6b054
date: Thu, 09 Oct 2025 21:35:02 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
発展モジュール - ウェブ開発の学習 | MDN
これらのモジュールを始めるための前提知識は特にありませんが、ウェブ技術の初心者であれば、まずコアモジュール を一通り行うことをお勧めします。
特に、コーディングをしたことがない方には、ウェブ技術をやさしく紹介し、簡単なウェブサイトを構築するプロセスを説明する「初めてのウェブサイト 」モジュールをお勧めします。
高度な JavaScript オブジェクト
JavaScript のオブジェクトがどのように動作するのかについて深い知識を持つことは、ウェブ開発に自信を持ち、より複雑なアプリを作り始め、独自のライブラリーを作成する際に役立ちます。このモジュールは、 JavaScript オブジェクトの理論とオブジェクト指向プログラミングの実践を提供することで、あなたの助けとなるでしょう。
クライアント側ウェブ API
アプリケーションプログラミングインターフェイス (API ) は、サイトが動作しているブラウザーやオペレーティングシステムのさまざまな側面を操作したり、他のウェブサイトやサービスからデータを操作したりするためのプログラミング機能です。このモジュールでは、これまで詳しく取り上げてこなかった、最も一般的なクラスのウェブ API の一般的な側面を取り上げ、ブラウザー API の使い方をより深く知りたい人に役立つ基礎を提供します。
非同期 JavaScript
このモジュールでは、非同期 JavaScript について、なぜそれが重要なのか、そして、サーバーからリソースを取得するような、潜在的なブロック操作を効果的に処理するために、どのように使用できるのかを見ていきます。
ウェブフォーム
このモジュールでは、ウェブフォームの基本をマスターするための一連の記事を提供します。ウェブフォームはユーザーとやりとりするための非常に強力なツールです。最も一般的には、ユーザーからデータを収集したり、ユーザーがユーザーインターフェイスを操作したりするために使われます。しかし、歴史的な理由や技術的な理由から、フォームを最大限に活用する方法は必ずしも明らかではありません。以下の記事では、 HTML 構造のマークアップ、フォーム・コントロールのスタイル設定、フォームデータの検証、サーバーへのデータ送信など、ウェブフォームの本質的な側面について説明します。
クライアント側のウェブ開発ツールを理解する
クライアント側のツール設定は敷居が高いかもしれませんが、この一連の記事では、最も一般的なクライアント側ツールの種類の目的を説明し、チェーンできるツールの説明、パッケージマネージャーを使用したツールのインストール方法、コマンドラインを使用したツールのコントロール方法を説明することを目的としている。最後に、生産的になる方法を示す完全なツールチェーンの例を提供する。
サーバーサイドウェブサイトプログラミング
この一連のモジュールでは、HTTP リクエストに応答してカスタマイズされた情報を配信するウェブサイト、サーバーサイドウェブサイトの作成方法を説明します。このモジュールでは、基本的なアプリケーションを作成するための Django (Python) と Express (Node.js/JavaScript) ウェブフレームワークの使用方法に関する具体的な初心者レベルのガイドとともに、サーバーサイドプログラミングの一般的な入門を提供します。
ウェブパフォーマンス
ウェブサイトを構築するには、HTML、CSS、JavaScript が必要です。人々が使いたいと思うウェブサイトやアプリケーションを構築し、ユーザーを惹きつけ、維持するためには、優れたユーザーエクスペリエンスを生み出す必要があります。使い勝手を良くするためには、コンテンツが素早く読み込まれ、ユーザーの操作に反応することを保証することです。これはウェブパフォーマンス として知られており、このモジュールではパフォーマンスの高いウェブサイトを作成する方法の基礎に焦点を当てます。
テスト
どのコードベースも、複雑さが一定レベルを超えると、それに関連するテストシステムが必要になります。これは、新しいコードが追加されても、コードベースが正しく機能し続け、ユーザのニーズを満たし続けられるようにするためです。このモジュールでは、まず始めるべき基本的なことを説明します。
CSS の座標変換とアニメーション
アニメーションは、使い勝手を良くするためには欠かせない要素です。 アニメーションをうまく使うことで、ページデザインをより興味深く魅力的なものにすることができます。また、ユーザビリティと知覚的パフォーマンスも向上します。
セキュリティとプライバシー
データを盗もうとする攻撃者から、自分自身やユーザーのデータを保護する方法と、その方法を理解しておくことが重要です。このモジュールでは、データを盗むことをより困難にするウェブサイトの強化と、ユーザーを追跡したり、不適切なサードパーティーと共有したりすることを避けるためのユーザーデータの集合方法、どちらにも応じた内容となっています。