はじめに

今回は、MDNが展開しているフロントエンド開発者のための学習コンテンツ、「MDN curriculum」を紹介します。

私自身、最近偶然見つけたもので全然知らなかったので、誰かの勉強リソース探しの助けになればなと思います。

どんな内容なのか

MDN カリキュラムは、フロントエンド開発者として成功するために必要なスキルと実践、および推奨される学習リソースに関する構造化されたガイドを提供します。

主に、フロントエンド開発に必要な知識を得られるようなカリキュラムが組まれているようです。

コアなモジュールとして9つが定義されており(セクションのようなもの)、以下のようなものがあります。

1. Web標準

通信に使用されるモデル、関連するコアテクノロジー、それらのテクノロジーの作成方法、Web ブラウザーが Web サイトをレンダリングしてユーザーに表示する方法など、Web の高レベルでの仕組みの基礎について説明します。

Webサイトがブラウザにレンダリングされるまでのネットワークの仕組みや、Web標準について述べられています。

2. セマンティックHTML

HTML は、あらゆる Web サイトのコンテンツと構造を定義するテクノロジーです。適切に記述すると、コンテンツのセマンティクス (意味) を機械が読み取り可能な方法で定義する必要もあります。これは、アクセシビリティ、検索エンジンの最適化、およびコンテンツを最適に動作させるためにブラウザーが提供する組み込み機能を利用するために不可欠です。このモジュールでは、言語の基礎をカバーした後、ドキュメント構造、リンク、リスト、画像、フォームなどの重要な領域について説明します

基本的なHTMLの構文やタグ、セマンティックHTML(情報に意味を持たせるHTNL)について述べられています。
また、DevToolsを使用したデバッグについても紹介されています。

3. CSSの基礎

CSS を使用すると、色、テキスト、配置とレイアウト、アニメーションなどのスタイルを Web ページに追加できます。最初の CSS モジュールでは、CSS の仕組みを理解するために必要なすべての基本的な言語メカニズムについて説明します。

CSSの構文、セレクター、cssでの単位などCSSの基本的な知識を学ぶことができます。
こちらも、DevToolsを使用したデバッグについても紹介されています。

4. CSSテキストスタイル

このモジュールは、カスタム Web フォントの読み込みとテキストへの適用など、CSS フォントとテキストのスタイル設定に特に重点を置いています。

テキスト・フォントを主軸に、ウェブフォントやリスト・リンクのstyleについても述べられています。

5. CSSレイアウト

最新の Web サイトのレイアウトの作成について詳しく説明します。このモジュールでは、フロート、配置、その他の最新のレイアウトツール、さまざまなデバイス、画面サイズ、解像度に適応するレスポンシブデザインの構築について説明します。

floatやflexbox、css gridなど、レイアウト関連が主軸となっています。
現代のWeb開発では必須のレスポンシブデザインについても述べられています。

6. JavaScriptの基礎

JavaScript は、学ぶべきさまざまな機能、スタイル、テクニック、そしてその上に構築された数多くの API とツールがある、非常に大きなトピックです。このモジュールでは、主にコア言語の基本といくつかの重要な周辺トピックに焦点を当てています。これらのトピックを学習することで、作業の確固たる基盤が得られます。

javascriptの基本的な使い方が主になっています。
変数・四則演算からDOM操作、EventListenerや非同期処理、fetchといった最低限Web開発をするための知識が一挙に学べるようです。

7. アクセシビリティ

公共サービス、教育、電子商取引サイト、エンターテイメントなどの Web コンテンツへのアクセスは人権です。障害、人種、地理、その他の人間的特徴に基づいて誰も排除されるべきではありません。このモジュールでは、Web サイトを可能な限りアクセスしやすいものにするために習得すべきベストプラクティスとテクニックについて説明します。

アクセシビリティについてまとめられています。
:focus・:hoverや色のコントラスト、テキストのスタイルなどが紹介されています。
スクリーンリーダーやWAI-ARIAの紹介も行われています。

8. 開発者向けの設計

このモジュールの目的は、開発者にデザイン思考を (再) 紹介することです。開発者はデザイナーとして働きたくないかもしれませんが、基本的なユーザーエクスペリエンスとデザイン理論を身に付けておくことは、役割に関係なく、Web サイトの構築に携わるすべての人にとって有益です。少なくとも、最も技術に詳しい「非デザイナー」開発者であっても、デザインの概要、物事がなぜそのようにデザインされているのかを理解し、ユーザーの考え方を理解できる必要があります。また、ポートフォリオの見栄えを良くするのにも役立ちます。

UIデザイン・UXデザインについて述べられています。

9. バージョン管理

バージョン管理ツールは、コードベースのバックアップや共同作業を行うための現代のワークフローに不可欠な要素です。このモジュールでは、Git と GitHub を使用したバージョン管理の基本について説明します。

バージョン管理システムが必要な理由や、Git、Githubについての紹介がされています。

拡張モジュール

これらの「拡張」モジュールは、Web 開発者が知識を広げ、専門性を高めていく際に習得する便利な追加スキルとなります。

ここまでコアモジュールを紹介してきましたが、「拡張モジュール」なるやや専門性が高いセクションがあります。(内容も、概要とリソースのリンクをのせただけのものになる)

興味がある方は見てみてください！

おわりに

今回は、「MDN curriculum」について簡単な紹介をしました！

惜しむらくは英語であることと、紹介されているリソースを見なければいけない(このサイト内で完結しない)ことでしょうか。
ただ、MDNのコンテンツなの信頼度は高い...はず。

興味のある方ぜひ、このコンテンツを使用して学習をしてみてください！