blob: 2a218b21c6ec0c63c3e3f2c571ef742fba1f1a8f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: ウェブ開発を学ぶ
slug: Learn
tags:
- Intro
- Landing
- ウェブ
- 初心者
- 学習
- 索引
translation_of: Learn
---
<p>{{LearnSidebar}}</p>
<p class="summary">MDN 学習エリアへようこそ。この一連の記事では、ウェブ開発が全くの初心者にとって、シンプルなウェブサイトのコーディングを始めるのに必要な全てを提供することを目標とします。</p>
<p>MDN のこのエリアでは、あなたを「初心者」から「上級者」までのスキルアップでなく、「初心者」から「中級程度」までの支援となります。ウェブ開発において自分なりの方法を確立するためには、さらに、<a href="/">MDN のこのエリア以外の記事</a>と、中・上級者用のウェブサイトを読み進めてください。その前提知識を身に付ける為に本、学習エリアがあります。</p>
<p>全くの初心者であれば、ウェブ開発は難しいものです - 私たちはあなたの手を握り、あなたが快適に感じ、適切にトピックを学ぶために十分な詳細を提供します。あなたがウェブ開発を学習している学生 (個人またはクラスの一部として)、クラスの教材を探している先生、趣味の人、ウェブ技術の仕組みをもっと理解したい人など、どのような人であっても、安心してください。</p>
<h2 id="何が新しくなった？">何が新しくなった？</h2>
<p>学習エリアのコンテンツは定期的に追加されています。<a href="/ja/docs/Learn/Release_notes">学習エリアのリリースノート</a>には、何が変更されたかを記載しています。</p>
<p>カバーしてほしいトピックや不足していると感じたトピックについて質問がある場合は、<a href="https://discourse.mozilla.org/c/mdn">Discourse フォーラム</a>にメッセージを送ってください。</p>
<div class="in-page-callout webdev">
<h3 id="フロントエンドの_Web_開発者になりたいですか？">フロントエンドの Web 開発者になりたいですか？</h3>
<p>目標に向かって頑張るために必要な情報をまとめたコースをご用意しました。</p>
<p><a class="cta primary" href="/ja/docs/Learn/Front-end_web_developer">開始する</a></p>
</div>
<h2 id="Where_to_start" name="Where_to_start">読み始める場所</h2>
<ul class="card-grid">
<li><span>完全な初心者の方:</span> ウェブ開発の完全な初心者なら、<a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>を一通り読むのをお勧めします。これを読めば、ウェブ開発を始めるのに必要な基本的な知識はすべて見つかるでしょう。</li>
<li><span>特定の質問がある方:</span> ウェブ開発について何か質問がある場合、<a href="/ja/docs/Learn/Common_questions">よくある質問</a>セクションに助けとなる情報があるかもしれません。</li>
<li><span>基本の次の段階の方:</span> すでにいくらかの知識があるなら、次のステップは {{glossary("HTML")}} と {{glossary("CSS")}} を詳しく学ぶことです。 <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>のモジュールから始めて、 <a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>のモジュールに移動します。</li>
<li><span>スクリプト作成まで進む方:</span> HTML と CSS を十分知っていたり、主にコーディングに興味があるなら、 {{glossary("JavaScript")}} やサーバーサイド開発に移動したくなるでしょう。<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と<a href="/ja/docs/Learn/Server-side/First_steps">サーバサイドの第一歩</a>のモジュールから始めます。</li>
</ul>
<div class="note">
<p><strong>メモ</strong>: <a href="/ja/docs/Glossary">用語集</a>にて、単語の定義が提供されています。</p>
</div>
<p>{{LearnBox({"title":"Random glossary entry"})}}</p>
<h2 id="Topics_covered" name="Topics_covered">カバーするトピック</h2>
<p>下記は MDN 学習エリアにてカバーしているすべてのトピック一覧です。</p>
<dl>
<dt><a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a></dt>
<dd>完全なウェブ開発初心者用の実用的な入門を提供します。</dd>
<dt><a href="/ja/docs/Learn/HTML">HTML — ウェブの構造化</a></dt>
<dd>HTML はコンテンツのいろいろな部分を構造化し、意味や目的を定義するのに使う言語です。このトピックでは HTML を詳細に教えます。</dd>
<dt><a href="/ja/docs/Learn/CSS">CSS — ウェブのスタイルづけ</a></dt>
<dd>CSS はウェブのコンテンツをスタイルづけしたりレイアウトしたり、アニメーションのような振る舞いを追加したりする言語です。このトピックでは CSS を包括的にカバーします。</dd>
<dt><a href="/ja/docs/Learn/JavaScript">JavaScript — 動的クライアントサイドスクリプティング</a></dt>
<dd>JavaScript はウェブページに動的な機能を追加するスクリプト言語です。このトピックでは JavaScript を書いたり理解するのに十分となるのに必要なすべての要点を教えます。</dd>
<dt><a href="/ja/docs/Learn/Accessibility">アクセシビリティ — ウェブをすべての人が利用できるようにする</a></dt>
<dd>アクセシビリティはウェブコンテンツをなるべく多くの人に利用できるようにする実践であり、それは障がいや、端末や、ロケールや、その他の分化させる要素に関係なく利用できるようにします。このトピックでは知る必要のあるすべてが与えられます。</dd>
<dt><a href="/ja/docs/Learn/Performance">ウェブの性能 — ウェブサイトを高速かつレスポンシブにする</a></dt>
<dd>ウェブの性能は、ウェブアプリケーションのダウンロードを確実に高速化し、ダウンロードを帯域幅、画面の寸法、ネットワーク、端末の能力にかかわらず、ユーザーの操作をレスポンシブにする技術です。</dd>
<dt><a href="/ja/docs/Learn/Tools_and_testing">ツールとテスト</a></dt>
<dd>このトピックは開発者が作業をやり易くするツール、例えばクロスブラウザーテストツールなどについてカバーします。</dd>
<dt><a href="/ja/docs/Learn/Server-side">サーバサイドのウェブサイトプログラミング</a></dt>
<dd>クライアントサイドのウェブ開発に集中していても、サーバとサーバサイドのコードがどう動くのかを知るのは有益です。このトピックではサーバサイドの動作の一般的な入門と、2 つの有名フレームワーク — Django (Python) and Express (node.js) を使ってサーバサイドアプリを作る方法の詳しいチュートリアルを提供します。</dd>
</dl>
<h2 id="Getting_our_code_examples" name="Getting_our_code_examples">コードサンプルを入手する</h2>
<p>学習エリアにあるコードの例はすべて <a href="https://github.com/mdn/learning-area/">GitHub で利用可能</a>です。それらすべてをあなたのコンピュータにコピーしたいのなら、最も簡単な方法は<a href="https://github.com/mdn/learning-area/archive/master.zip">最新の master コードブランチのZIPをダウンロードする</a>ことです。</p>
<p>自動更新を可能にするより柔軟な方法でリポジトリをコピーしたい場合は、より複雑な指示に従うことになります。</p>
<ol>
<li>あなたのマシンに <a href="https://git-scm.com/downloads">Git をインストールします</a>。これは GitHub が動作している、その下にあるバージョン管理システムのソフトウェアです。</li>
<li><a href="https://github.com/join">GitHub にサインアップします</a>。</li>
<li>サインアップが済んだら、ユーザー名/パスワードで <a href="https://github.com">github.com</a> にログインします。</li>
<li>あなたのコンピューターで<a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">コマンドプロンプト</a> (Windows) かターミナル (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>) を開きます。</li>
<li> learning area のリポジトリを、あなたのコマンドプロンプト/ターミナルの現在位置の learning-area と呼ぶフォルダーにコピーするには、下記のコマンドを使います。
<pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre>
</li>
<li>そのディレクトリに入って、ファイルが (finder/エクスプローラーや、<a href="https://en.wikipedia.org/wiki/Cd_(command)">cd コマンド</a>のいずれか) の後に見つかるでしょう。</li>
</ol>
<p><code>learning-area</code> リポジトリを、GitHub の master バージョンになされたあらゆる変更で更新するには、以下の手順でできます。</p>
<ol>
<li>コマンドプロンプト/ターミナルで、<code>cd</code> を使って <code>learning-area</code> ディレクトリの中に移動します。例えば、上位のディレクトリにいる場合は以下のようにします。
<pre class="brush: bash notranslate">cd learning-area</pre>
</li>
<li>下記のコマンドでリポジトリを更新します。
<pre class="brush: bash notranslate">git pull</pre>
</li>
</ol>
<h2 id="Contact_us" name="Contact_us">連絡方法</h2>
<p>何か連絡を取りたいことがある場合、<a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">learning area discourse スレッド</a>や <a href="/ja/docs/MDN/Community/Conversations#Chat_in_IRC">IRC チャンネル</a> でメッセージを投稿するのがもっともよい方法です。サイトの間違いや新しい学習トピックスの要望、理解できない項目についてのヘルプ要請などなんでも歓迎です。</p>
<p>コンテンツの開発、改善の手助けに興味がある場合、<a href="/ja/docs/Learn/How_to_contribute">協力するには？</a>を覗いて、始めてください！あなたが初心者でも、先生でも、熟練のウェブ開発者でも、その他学習体験の改善に興味がある人でも、誰でも歓迎です。</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<dl>
<dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla developer newsletter</a></dt>
<dd>我々のウェブ開発者向けニュースレターで、あらゆる経験レベル向けのすばらしいリソースです。</dd>
<dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt>
<dd>ウェブの基礎を説明するすばらしい動画シリーズで、ウェブ開発の完全な初心者に向けたもの。製作者は <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a></dd>
<dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
<dd>最初からプログラミング言語を学ぶためのすばらしいインタラクティブサイト</dd>
<dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt>
<dd>ゲーミフィケーションされた学習プロセスによる基本的なコーディング理論です。主に初心者向けです。</dd>
<dt><a href="https://code.org/">Code.org</a></dt>
<dd>基本的なコーディング理論と実践で、主に子供や完全な初心者を目的としたもの。</dd>
<dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt>
<dd>技術スキルを学ぶための、メンターシップやプロジェクトベースの学習があるフリーでオープンなコースです。</dd>
<dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt>
<dd>ウェブ開発を学習するチュートリアルやプロジェクトのあるインタラクティブなサイト。</dd>
<dt><a href="https://learning.mozilla.org/web-literacy/">Web literacy map</a></dt>
<dd>エントリーレベルのウェブリテラシーや 21世紀のスキル向けのフレームワークで、カテゴリーごとにソートされた教科にもアクセスできます。</dd>
<dt><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt>
<dd>Mozilla Foundation によって作成された教える(と学ぶ)ための教科シリーズで、ウェブリテラシーやプライバシーなどの基本から、JavaScript や Minecraft のハックまで、すべてカバーしています。</dd>
<dt><a href="https://edabit.com/challenges">Edabit</a></dt>
<dd>数千のインタラクティブなJavaScriptチャレンジ。</dd>
</dl>
|
