ウェブ開発の学習について
MDN ウェブ開発の学習は、現代のウェブ業界においてフロントエンドウェブ開発者として就業し、長く活躍するために必要な基礎的なスキルと知識を学べるよう設計されています。本リソースは、私たちがウェブに求める価値――アクセシビリティ、持続可能性、使いやすさ、パフォーマンス、そしてコミュニティ――を体現しています。教育者、開発者、学生の皆さんが本リソースを活用し、それぞれの仕事や教育、開発するプロダクトの中でこれらの価値を広めていただければ幸いです。
本コンテンツは MDN コミュニティによって作成され、Mozilla 内外の専門家からのレビューとフィードバックを受けています。貴重なご協力に感謝します。
背景と目的
私たちは当初、MDN を専門家以外の人にもより利用しやすくし、ウェブ開発を始めたばかりの人が「初心者から自信のあるレベルへ」進めるよう支援することを目的として、2016 年に MDN の「ウェブ開発の学習」セクションを公開しました。
コンテンツ自体はかなり好評でしたが、数年後には構成が不十分であることに気づきました。初心者は、何をいつ学ぶべきかを自分で考え出すのではなく、必要な知識を習得するための確固たる道筋を求めているのです。
さらに、Mozilla は日々業界の専門家と対話しており、新規採用者に見られる知識の不足について継続的にフィードバックを受けています。採用担当者からは次のような指摘がよくあります。
- フレームワークを使って素早くウェブアプリを構築することに偏りすぎており、その背後にある基礎技術の理解が不足している。その結果、問題解決能力が育たず、ツールの変化に対応しづらくなる。
- セマンティクス、アクセシビリティ、レスポンシブデザインといった基本的なベストプラクティスが不足している。そのためユーザー視点が弱く、使い勝手に問題が生じる。
- ブラウザーの基本的な仕組みや情報の扱い方、標準で得られるインタラクティブ性に関する理解が不足している。その結果、解決策が過度に複雑になり、アクセシビリティも低下する。
- 問題解決力、チームワーク、調査力などの重要なソフトスキルが不足している。
その結果、私たちは人々がより優れたスキルを習得し、就職の可能性を高め、より良く、よりアクセスしやすく、より責任ある未来のウェブを構築できるよう支援するカリキュラムを作成しました。私たちは、彼らが成功するための最高の機会を得られるようにしたいと考えています。私たちは2024 年初頭に MDN カリキュラムを公開しました。
しかしながら、MDN 上にカリキュラム／学習パスウェイと学習コンテンツという2つの学習リソースが存在することはユーザーにとって分かりにくいというフィードバックがすぐに寄せられました。そのため、2024 年 12 月にカリキュラムを学習エリアに統合しました。
対象者
学習者
このカリキュラムは、次のような学習者に役立ちます。
- 業界での就職を目指し、関連する資格や認定の取得を検討している人。学ぶべき内容の指針として活用できます。
- スキルを向上させたい既存のウェブ開発者。スキルセットを最新の状態に保ち、学ぶべき知識の抜け漏れを確認するのに役立ちます。
- 他分野での開発経験を持ち、フロントエンド開発に移行したいウェブ開発者（例: バックエンド開発者や特定プラットフォームの開発者）。学ぶべきトピックのガイドとして活用できます。
教育者
教育者は、本コンテンツを、ウェブ関連の大学の学位プログラムや大学・専門学校の講義、プログラミングスクール講座などのプログラム、単元、評価基準を作成する際に、このコンテンツを参考にすることができます。記事に記載されている学習成果に準拠することで、最新の技術とベストプラクティスを教え、誤った手法や時代遅れの情報を避けることができます。
詳細については、教育者向けリソースページを参照してください。
メモ: MDN ウェブ開発の学習カリキュラムの全内容は、学生や同僚と共有しやすい便利なPDF形式で提供されています。カリキュラムをダウンロード
範囲
フロントエンド開発者 という言葉は曖昧で、人によって意味が異なります。また担当する業務も幅広くなります。
扱う内容
この一連の記事は、ウェブ開発者が深く理解しておくべきと考えられるすべてのトピックを網羅的に教えることを目的としているわけではありません。カリキュラムの内容は以下のとおりです。
- セマンティック HTML、CSS、JavaScript の基礎など、中核となる技術スキル。
- アクセシビリティ、レスポンシブデザイン、UI デザイン理論などのベストプラクティス。
- フレームワークやバージョン管理などの主要ツール。
- 就職に必要な考え方や態度を育むためのソフトスキル。
- コンピュータやファイルシステム、ウェブブラウジング、コマンドラインの基本、コードエディタなど、環境に関する知識。
- 開発者が知識を広げ、専門分野を発展させていく上で、習得しておくと役立つ追加スキルとなると思われるいくつかの「拡張機能」を以下に示します。
- CSS 座標変換とアニメーション
- Web API の一般的なカテゴリ (例：メディア、グラフィック、クライアントサイドストレージ)
- サーバーサイドウェブ開発の基礎
- パフォーマンス
- セキュリティとプライバシー
- テスト
掘り下げレベル
提示されたトピックは、それぞれ異なる掘り下げのレベルで扱われています。
- HTML や CSS の基礎など、一部のトピックは深く掘り下げて解説されています。これらは、学習を進める上で、学生がしっかりと理解しておくべき重要なポイントです。
- バージョン管理やテストなど、一部のトピックは表面的な説明にとどまります。これらのトピックが何であるかを理解し、基本的なことから始めることは重要ですが、こうしたスキルはキャリアを積むにつれてさらに深めていくことができます。
扱わない内容
また、このカリキュラムでは明示的に取り上げていない分野がいくつかあります。具体的には以下のとおりです。
- バックエンドの言語/プラットフォームの網羅的な解説。HTTP やサーバーサイド技術の仕組みを理解することはすべてのウェブ開発者にとって有用であるため、Node.js (Express) および Python (Django) については簡単に紹介しています。しかし、複数のプラットフォームにわたる網羅的な解説は提供していません。これは MDN の対象範囲外です。
- 従来型のリレーショナルデータベース (例: MySQL、Postgres) や、その他のサーバーサイドのデータストア (例: MongoDB、Google Cloud Datastore)などのクラウドデータベースの詳細な解説。サーバーサイドウェブサイトプログラミング モジュールにおいて、これらの技術について簡単な紹介を行っています。
- クラウドプラットフォーム（例: Amazon AWS、Google Cloud Platform、Microsoft Azure やコンテナ化ツール (例: Kubernetes、Docker) など、プロビジョニングや自動化に関する DevOps の詳細なトピックは扱いません。ただし、GitHub や自動テストツールなど、DevOps 分野に含まれるツールの一部については軽く触れます。これらはフロントエンド開発者の領域とも明確に重なるためです。
- 開発者のためのデザインで説明されている基本的な知識を超えるグラフィックデザイン。
- プロダクトマネジメントやプログラムマネジメントなどの役割に関連するスキル (例: 組織化、調査、計画)。
帰属
このリソースはどなたでも無料でご利用いただけます。もしお役に立てた場合は、以下の点をご検討いただければ幸いです。
-
リンクを貼ってください。例えば、教育者は公開プログラム情報に以下のような内容を含めることができます。
html<p> このコースは <a href="https://developer.mozilla.org/ja/curriculum/" >MDN ウェブ開発の学習</a >に基づいています。 </p> -
ぜひ周囲の人にも紹介してください！できるだけ多くの学生や教育者にこの教材を使っていただき、ウェブ開発者に必要な基礎知識の標準として広く活用されることを願っています。
メモ: 教育者はこの資料を指針として活用することが推奨されますが、これを使用しても Mozilla がその内容を推奨していることを意味するものではありません。
更新プロセス
ウェブ開発は急速に変化しています。そのため、本カリキュラムの内容を常に最新に保つため、私たちは定期的に教材を見直し、変更履歴を更新し、年に一度アナウンスを行います。既知の適合コースの作成者にも連絡し、内容の変更を伝えるとともに、必要に応じた見直しや更新を促します。
私たちはこれを毎年第 2 四半期に実施し、教育関係者が翌年度の開始前に第 2 四半期と第 3 四半期の間に変更を実施する時間を確保できるようにする予定です。
よくある質問
Scrimba との連携について
MDN はどのようにして Scrimba のコースが高品質でベストプラクティスに従っていると判断していますか？
Scrimba は、提携について検討を始める以前から高い評価を得ていました。しかし、コミュニティの評価だけに頼ったわけではありません。Scrimba の Frontend Developer Career Path (FDCP)を詳細にレビューし、ベストプラクティスの網羅性やコア学習モジュールへの準拠を重視しながら、改善点についてフィードバックを行いました。Scrimba は私たちのフィードバックをすべて反映し、FDCP は以前よりもさらに良いものになりました。現在はカリキュラムコアに準拠しているため、MDN の標準にも適合していると確信しています。
MDN は Scrimba とユーザーデータを共有していますか？
MDN はユーザープライバシーと透明性を重視しています。Scrimba と共有される情報は、ユーザーが MDN 上の外部リンクをクリックして Scrimba に移動したという情報のみです。
また、MDN 上に Scrimba のコンテンツを埋め込んでいる場合でも、ユーザーが操作を行うまではデータは送信されません。
Scrimba のコンテンツは有料ですが、MDN の理念と矛盾しませんか？
Scrimba の多くのコンテンツは有料ですが、登録後に無料で利用できるコースも複数提供されています。
また、Scrimba のコースは MDN ウェブ開発の学習を利用するために必須ではありません。カリキュラムコアを体系的に学びたい人向けの補助的な選択肢です。MDN の記事を通じて、すべての学習内容を無料で学ぶことも可能です。
Scrimba の Frontend Developer Career Path を修了すると認定は受けられますか？
はい。Frontend Developer Career Path のすべてのトピックを修了すると、修了証を取得できます。詳しくは Where can I find my completion certificate? を参照してください。