ウェブ開発の学習
新人フロントエンド開発者のための基本的なスキルセット
MDN のウェブ開発の学習(または学習)へようこそ。このリソースでは、成功するフロントエンド開発者になるために必要なスキルと実践を教える、構造化されたチュートリアルセットを示しており、課題やさらに推奨されるリソースも提供しています。
ウェブ開発の学習について
-
MDN カリキュラム(英語)で定義されている、キャリアの成功と業界での活躍に必要な、すべてのフロントエンド開発者に必要な基本的なスキルと知識が学べます。
-
MDN コミュニティによって作成され、より幅広いウェブコミュニティの学生、教育者、開発者からの観察により改良されました。
-
あなたを(「初心者」から「エキスパート」ではなく)「初心者」から「慣れ親しむ」ところまで導き、より高度なリソース(MDN の他の部分など)を使用するのに十分な知識を提供します。
メモ: 最終更新: 2024 年 12 月(変更履歴を見る)。
どこから始めるか
- コードを全く書いたことがない方
-
入門モジュールでは、まったくの初心者の方を対象に、セットアップチュートリアルや、必要な概念や背景の情報を提供しています。 まったくの初心者の方(つまり、コードエディターをインストールしたこともなければ、コードを書いたこともない方)は、こちらから始めてください。
- 基本をマスターしたい方
-
コアモジュールでは、成功するフロントエンド開発者になるために必要なスキルと実践を教えるチュートリアルの構造化されたセットを提供しています。
- 基本を終えた方
-
発展モジュールは、知識を広げ、専門分野を開発し始めるには有益な追加スキルを扱っています。コアモジュールを完了したら、こちらに進んでください。
- 学校で働いている方
-
私たちのモジュールを指導のガイドとして使い、さらにアイディアをお探しの方は教育者ページを参照するか、または Scrimba の The Frontend Developer Career Path MDN 学習パートナー に生徒を登録してください。
スキルテスト
このコースでは、このコースで学んだ内容を理解しているかどうかを評価するための記事がいくつか用意されています。記事には 2 種類あります。
- 「スキルテスト」の記事は頻繁に現れ、HTML リンク、CSS ボックスモデル、JavaScript 関数など、単一の機能に関する知識を検査します。
- 「チャレンジ」はそれほど頻繁には現れませんが、複数の機能を組み合わせて、完全なウェブサイトやプログラムを作成するための能力を検査します。
ほとんどの質問には、それぞれのタスクの開始コードを示す HTML/CSS/JavaScript コードブロックが含まれています。それぞれを解くには、コードブロックの "Play" ボタンを押して MDN Playground でサンプルを開き、質問の指示に従ってコードを編集することをお勧めします。
もし間違えてしまった場合は、MDN Playground の「リセット」ボタンを使用して作業内容を消去することができます。どうしても解決できない場合は、通常、それぞれの質問の章の下部に解決策が表示されます。また、助けを求めることもできます。
メモ: 自分自身でエディターやオンラインエディター(CodePen や JSFiddle など)で作業したい場合は、MDN Playground からコードをコピーして、お好みの環境に貼り付けてください。
一部の質問には、作業を開始するためのコードブロックが含まれておらず、代わりに、ローカルマシンで作業するためのスターターファイルをダウンロードするよう指示があります。これは、質問が複雑なため、あるいは単に少し変更を加えたいためです。
サンプルコードの入手
この学習領域で見かけるサンプルコードは、すべて GitHub から利用可能です。
- 最も簡単な取得方法は、最新の main コードブランチの ZIP をダウンロードすることです。
- Git と GitHub に慣れている場合は、リポジトリーをクローンするという選択肢もあります。
連絡方法
何か連絡を取りたいことがある場合は、コミュニケーションチャンネルを使用してください。サイト上で間違っていると思うことや足りないもの、新しい学習テーマのリクエスト、わからない項目のヘルプなど、どんなことでもお聞かせください。
コンテンツの作成、改善の手助けに興味がある場合、協力するにはを覗いて、それから連絡を取ってください! あなたが初心者でも、教師でも、経験豊富なウェブ開発者でも、その他学習体験の改善に興味がある人でも、誰でも歓迎です。
関連情報
- The Frontend Developer Career Path MDN 学習パートナー
-
Scrimba (英語)のフロントエンド開発者キャリアパスでは、楽しく対話しながら学べるレッスンや課題、知識豊富な講師、対応しているコミュニティを通じて、有能なフロントエンドウェブ開発者になるために必要なすべてを学ぶことができます。ゼロから最初のフロントエンドの仕事に就くまで、このコースの多くの部分は、無料版として単独で利用できます。
- Codecademy(英語)
-
一からプログラミング言語を学ぶための優れたインタラクティブなサイトです。
- freeCodeCamp.org(英語)
-
ウェブ開発を学習するチュートリアルやプロジェクトを備えたインタラクティブなサイトです。
- Learn JavaScript(英語)
-
ウェブ開発者を目指す人のための優れたリソースです。インタラクティブな環境で、短いレッスンとインタラクティブなテストを使用して、自動的に採点される評価試験にガイドされながら JavaScript を学ぶことができます。最初の 40 レッスンは無料で、完全なコースはわずかな一回の支払いで利用できます。