---
title: フロントエンド Web 開発者
slug: Learn/Front-end_web_developer
translation_of: Learn/Front-end_web_developer
---
<p>{{learnsidebar}}</p>

<p>フロントエンドWeb開発パスへようこそ！</p>

<p>このパスでは、フロントエンドWeb開発者になるために理解すべき全ての事を体系的なコースとして提供しています。 それぞれのセクションに取り組み、どんどん新しいスキルを習得（または、既存のスキルをより磨いて）して下さい。それぞれのセクションには、練習とテストがあり理解を確かめてから次のセクションに進んで下さい。</p>

<h2 id="扱っているトピック">扱っているトピック</h2>

<p>扱っているトピックとしては:</p>

<ul>
 <li>基礎的なセットアップと学習の仕方</li>
 <li>Web標準とベストプラクティス（例えば、アクセシビリティやブラウザ間の互換性など）</li>
 <li>HTML：ウェブコンテンツに構造と意味を与える言語</li>
 <li>CSS：ウェブページをデザインする言語</li>
 <li>JavaScript：ウェブ上で動的な処理をするスクリプト言語</li>
 <li>モダンなフロントエンド開発がよりしやすくなるツール</li>
</ul>

<p>それそれのセクションに順番どおり取り組んでも良いですが、 内容が独立しているため、もしHTMLを既に知っているのであれば、一つ飛ばしてCSSのセクションに取り組んでも良いでしょう。</p>

<h2 id="前提知識">前提知識</h2>

<p>このコースを始めるにあたり前提知識は必要ありません。必要なのはモダンなブラウザが動作するコンピュータ、インターネット接続 、学びたいという意欲だけです。</p>

<p>フロントエンドWeb開発が自分に適しているかわからなく､易しい説明が必要な場合はこの時間がかかる完全なコースを始める前に､<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Webサイト学習の最初のステップ</a>を読んでください｡</p>

<h2 id="学習につまずいたら">学習につまずいたら</h2>

<p>私たちは、フロントエンドWeb開発の学習が少しでもやさしくなるよう努力してきました。それでも、何か理解できないことあったり、コードが動かなかったりして、学習につまずくことがあるでしょう。</p>

<p>落ち着いて下さい。プロの開発者でも初心者でも、誰にだって学習でつまづくことはあります。<a href="/en-US/docs/Learn/Learning_and_getting_help">学習とヘルプ（English）</a> では情報を検索する際のヒントなど一連の有益な情報を提供しています。依然として学習につまずいているなら <a href="https://discourse.mozilla.org/c/mdn/learn/">Discourse forum</a> で気軽に質問して見て下さい。</p>

<p>さあ、始めましょう。幸運を！</p>

<h2 id="学習パス">学習パス</h2>

<h3 id="さあ、始めましょう">さあ、始めましょう</h3>

<p>所要時間: 1–2 時間</p>

<h4 id="前提知識_2">前提知識</h4>

<p>基本的なコンピュータリテラシー以外に必要ありあせん。</p>

<h4 id="学習を進めるための条件">学習を進めるための条件</h4>

<p>コースのこの部分には評価はありません。 ただし、スキップしないように注意してください。 コースの後半で演習を行う準備を整えておくことが重要です。</p>

<p>中心となるモジュール</p>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> </a>— 基本的なツールのステップアップ (15分で読めます)</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">標準的なWebとWebのバックグラウンド</a> (45分で読めます)</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Learning_and_getting_help">学習とヘルプ（English）</a> (45分で読めます)</li>
</ul>

<h3 id="HTML（意味付けと構造）">HTML（意味付けと構造）</h3>

<p>所要時間: 35–50 時間</p>

<h4 id="前提知識_3">前提知識</h4>

<p>基本的なコンピュータリテラシーと基本的なWeb開発環境以外は何もありません。</p>

<h4 id="学習を進めるための条件_2">学習を進めるための条件</h4>

<p>それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです｡</p>

<h4 id="中心となるモジュール">中心となるモジュール</h4>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTMLの紹介</a> (15–20 時間の学習)</li>
 <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">動的コンテンツ（映像や音楽）の埋め込み</a> (15–20 時間の学習)</li>
 <li><a href="/en-US/docs/Learn/HTML/Tables">HTMLの表</a> (5–10 時間の学習)</li>
</ul>

<h3 id="CSS（スタイルとレイアウト）">CSS（スタイルとレイアウト）</h3>

<p>所要時間: 90–120 時間</p>

<h4 id="前提知識_4">前提知識</h4>

<p>CSSの学習を始める前にHTMLの基本的な知識を身につけておくことを推奨します｡少なくとも<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTMLの紹介</a>は読んでおきましょう｡</p>

<h4 id="学習を進めるための条件_3">学習を進めるための条件</h4>

<p>それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです｡</p>

<h4 id="中心となるモジュール_2">中心となるモジュール</h4>

<ul>
 <li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a> (10–15 時間の学習)</li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a> (35–45 時間の学習)</li>
 <li><a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a> (15–20 時間の学習)</li>
 <li><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a> (30–40 時間の学習)</li>
</ul>

<h4 id="補助教材">補助教材</h4>

<ul>
 <li><a href="/ja/docs/Web/CSS/Layout_cookbook">CSS レイアウト料理帳</a></li>
</ul>

<h3 id="JavaScript（インタラクティビティ）">JavaScript（インタラクティビティ）</h3>

<p>所要時間: 135–185 時間</p>

<h4 id="前提知識_5">前提知識</h4>

<p>JavaScript を学習し始める前に基本的な HTML の知識を身に付けておくことをお勧めします。少なくとも <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a> は最初に読んでおくべきでしょう。</p>

<h4 id="学習を進めるための条件_4">学習を進めるための条件</h4>

<p>それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです｡</p>

<h4 id="中心となるモジュール_3">中心となるモジュール</h4>

<ul>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a> (30–40 時間の学習)</li>
 <li><a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a> (25–35 時間の学習)</li>
 <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">クライアントサイド Web APIs</a> (30–40 時間の学習)</li>
 <li><a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクト入門</a> (25–35 時間の学習)</li>
 <li><a href="/ja/docs/Learn/JavaScript/Asynchronous">非同期 JavaScript</a> (25–35 時間の学習)</li>
</ul>

<h3 id="Web_フォーム（ユーザーのデータを扱う）">Web フォーム（ユーザーのデータを扱う）</h3>

<p>所要時間: 40–50 時間</p>

<h4 id="前提知識_6">前提知識</h4>

<p>フォームを作るにはHTML､CSS､JavaScriptの知識が必要です｡フォームの操作は複雑であるため、これは専用のトピックです。</p>

<h4 id="学習を進めるための条件_5">学習を進めるための条件</h4>

<p>それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです｡</p>

<h4 id="中心となるモジュール_4"><span style="">中心となるモジュール</span></h4>

<ul>
 <li><a href="/ja/docs/Learn/Forms">Web フォーム</a> (40–50 時間)</li>
</ul>

<h3 id="すべての人のためにWebを作る">すべての人のためにWebを作る</h3>

<p>所要時間: 60–75 時間</p>

<h4 id="前提知識_7">前提知識</h4>

<p>このセクションを実行する前に、HTML、CSS、およびJavaScriptを理解しておくことをお勧めします。 テクニックと最善慣行の多くは、複数のテクノロジーに触れています。</p>

<h4 id="学習を進めるための条件_6">学習を進めるための条件</h4>

<p>それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです｡</p>

<h4 id="中心となるモジュール_5">中心となるモジュール</h4>

<ul>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-browser testing</a> (25–30 hour read/exercises)</li>
 <li><a href="/en-US/docs/Learn/Accessibility">Accessibility</a> (20–25 hour read/exercises)</li>
</ul>

<h3 id="モダンなツール">モダンなツール</h3>

<p>所要時間: 55–90 時間</p>

<h4 id="前提知識_8">前提知識</h4>

<p dir="ltr" id="tw-target-text">説明したツールはこれらのテクノロジーの多くと連携して機能するため、このセクションを実行する前にHTML、CSS、およびJavaScriptを理解しておくことをお勧めします。</p>

<h4 id="学習を進めるための条件_7">学習を進めるための条件</h4>

<p>There are no specific assessment articles in this set of modules. The case study tutorials at the end of the second and third modules prepare you for grasping the essentials of modern tooling.</p>

<h4 id="中心となるモジュール_6">中心となるモジュール</h4>

<ul>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a> (5 時間の記事)</li>
 <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Understanding client-side web development tools</a> (20–25 時間の記事)</li>
 <li>
  <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a> (30-60 時間の学習)</p>
 </li>
</ul>

<div id="gtx-trans" style="position: absolute; left: 67px; top: 5240px;">
<div class="gtx-trans-icon"></div>
</div>