initial commit

5 files changed, 1956 insertions, 0 deletions

diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html
new file mode 100644
index 0000000000..f49b505c56
--- /dev/null
+++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html
@@ -0,0 +1,138 @@
+---
+title: Understanding client-side JavaScript frameworks
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
+tags:
+  - Beginner
+  - Frameworks
+  - JavaScript
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - client-side
+translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">JavaScriptフレームワークは、最新のフロントエンドWeb開発に欠かせないものであり、開発者にスケーラブルでインタラクティブなWebアプリケーションを構築するための試行錯誤されたツールを提供しています。現代の多くの企業では、フレームワークをツールの標準的な一部として使用しているため、多くのフロントエンド開発の仕事でフレームワークの経験が必要とされています。</p>
+
+<p class="summary">フロントエンド開発者を目指していると、フレームワークを学ぶ際にどこから始めればいいのか悩むことがあります。— there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.</p>
+
+<p class="summary">この記事では、あなたがフレームワークを学び始めるための快適な出発点を提供することを目的としています。私たちは、React/ReactDOMやVue、その他の特定のフレームワークについて知っておく必要があるすべてのことを網羅的に教えることを目指しているわけではありません。その代わりに、以下のようなより基本的な質問に答えたいと思います。</p>
+
+<ul>
+ <li class="summary">なぜフレームワークを使うべきなのか？どんな問題を解決してくれるのか？</li>
+ <li class="summary">フレームワークを選ぼうとするとき、どのような質問をすればいいか？フレームワークを使う必要があるのか？</li>
+ <li class="summary">フレームワークにはどのような機能があるのか？フレームワークは一般的にどのように機能するのか、そしてその機能の実装はどのように異なるのか？</li>
+ <li class="summary">これらは素のJavaScriptやHTMLとどのように関係しているのか？</li>
+</ul>
+
+<p class="summary">その後、異なるフレームワークの選択の要点をカバーするチュートリアルをいくつか提供し、あなたが自分自身でより深く学び始めるのに十分なコンテキストと親しみやすさを提供します。アクセシビリティなどのウェブプラットフォームの基本的なベストプラクティスを忘れずに、実用的な方法でフレームワークについて学んでいただきたいと思います。</p>
+
+<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Get started now, with "Introduction to client-side frameworks"</a></strong></p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and especially <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p>
+
+<p>Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.</p>
+
+<h2 id="Introductory_guides">Introductory guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction to client-side frameworks</a></dt>
+ <dd>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Framework main features</a></dt>
+ <dd>Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.</dd>
+</dl>
+
+<h2 id="React_tutorials">React tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample React app code in our <a href="https://github.com/mdn/todo-react">todo-react repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Getting started with React</a></dt>
+ <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Beginning our React todo list</a></dt>
+ <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Componentizing our React app</a></dt>
+ <dd>At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React interactivity: Events and state</a></dt>
+ <dd>With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React interactivity: Editing, filtering, conditional rendering</a></dt>
+ <dd>As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibility in React</a></dt>
+ <dd>In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React resources</a></dt>
+ <dd>Our final article provides you with a list of React resources that you can use to go further in your learning.</dd>
+</dl>
+
+<h2 id="Ember_tutorials">Ember tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample Ember app code in the <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>. For a running live version, see <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (this also includes a few additional features not covered in the tutorial).</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt>
+ <dd>In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt>
+ <dd>In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt>
+ <dd>At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt>
+ <dd>Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt>
+ <dd>In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt>
+ <dd>Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.</dd>
+</dl>
+
+<h2 id="Vue_tutorials">Vue tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Vue tutorials last tested in May 2020, with Vue 2.6.11.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample Vue app code in our <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt>
+ <dd>Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt>
+ <dd>Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt>
+ <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">At this point we've got a fully working component; we're now ready to add multiple <code>ToDoItem</code> components to our App. In this article we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive. </span></dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt>
+ <dd>We now have sample data in place and a loop that takes each bit of data and renders it inside a <code>ToDoItem</code> in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <code>&lt;input&gt;</code>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt>
+ <dd>The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt>
+ <dd>In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt>
+ <dd>Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely <code>v-if</code> and <code>v-else</code> — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt>
+ <dd>We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt>
+ <dd>Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.</dd>
+</dl>
+
+<h2 id="Which_frameworks_did_we_choose">Which frameworks did we choose?</h2>
+
+<p>We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:</p>
+
+<ul>
+ <li>They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skill set when looking for a job.</li>
+ <li>They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.</li>
+ <li>We don't have the resources to cover <em>all</em> modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.</li>
+ <li>As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.</li>
+</ul>
+
+<p>We want to say this upfront — we've <strong>not</strong> chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.</p>
+
+<p>Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, or <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>, or drop us a mail on the <a href="mailto:mdn-admins@mozilla.org">mdn-admins list</a>.</p>
diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html
new file mode 100644
index 0000000000..43eedc76eb
--- /dev/null
+++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html
@@ -0,0 +1,450 @@
+---
+title: React アプリのコンポーネント化
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components
+translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p class="summary">この時点では、アプリは一枚岩です。アプリに何かをさせる前に、管理しやすく、記述しやすいコンポーネントに分解する必要があります。React には、何がコンポーネントで何がコンポーネントでないかという難しいルールはありません。それはあなた次第なのです！この記事では、アプリをコンポーネントに分解するための賢明な方法を紹介します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件：</th>
+   <td>
+    <p><a href="/en-US/docs/Learn/HTML">HTML</a>、<a href="/en-US/docs/Learn/CSS">CSS</a>、<a href="/en-US/docs/Learn/JavaScript">JavaScript</a> のコア言語に精通していること、<a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">ターミナル/コマンドライン</a>の知識があること。</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">目的：</th>
+   <td>Todo リストアプリをコンポーネントに分割するための賢明な方法を示すこと。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="最初のコンポーネントの定義">最初のコンポーネントの定義</h2>
+
+<p>コンポーネントの定義は、ある程度練習をするまでは難しいと思われるかもしれませんが、要点は以下の通りです。</p>
+
+<ul>
+ <li>アプリの明らかな "カタマリ" を表している場合、それはおそらくコンポーネントです。</li>
+ <li>よく再利用されるのであれば、それはおそらくコンポーネントです。</li>
+</ul>
+
+<p>2 番目の箇条書きは特に価値があります: 一般的な UI 要素からコンポーネントを作成することで、コードを一箇所で変更することができ、そのコンポーネントが使用される場所のどこでも変更内容を確認することができます。また、すぐにすべてをコンポーネントに分割する必要もありません。2 つ目の箇条書きをヒントに、UI の中で最も再利用され、最も重要な部分である TODO リスト項目からコンポーネントを作成してみましょう。</p>
+
+<h2 id="&lt;Todo_>の作成"><code>&lt;Todo /&gt;</code>の作成</h2>
+
+<p>コンポーネントを作る前に、そのための新しいファイルを作らなければなりません。実は、コンポーネント用の新しいディレクトリの作成が必要です。次のコマンドは、<code>components</code> ディレクトリを作成し、その中に <code>Todo.js</code> というファイルを作成します。これらを実行する前に、アプリのルートにいることを確認してください！</p>
+
+<pre class="brush: bash notranslate">mkdir src/components
+touch src/components/Todo.js</pre>
+
+<p>新しい <code>Todo.js</code> ファイルは今は空です。ファイルを開いて最初の行に次を入力してください。</p>
+
+<pre class="brush: js notranslate">import React from "react";</pre>
+
+<p>今回は <code>Todo</code> というコンポーネントを作る予定なので、以下のように <code>Todo.js</code> にもそのためのコードを追加していきます。このコードでは、関数の定義とエクスポートを一行で定義しています。</p>
+
+<pre class="brush: js notranslate">export default function Todo() {
+  return (
+
+  );
+}</pre>
+
+<p>ここまでは問題ありませんが、このコンポーネントは何かを返さなければなりません！<code>src/App.js</code> に戻って、最初の <code><a href="/en-US/docs/Web/HTML/Element/li">&lt;li&gt;</a></code> をコピーし、<code>Todo.js</code> に貼り付けて、以下のように読み込みます。</p>
+
+<pre class="brush: js notranslate">export default function Todo() {
+  return (
+    &lt;li className="todo stack-small"&gt;
+      &lt;div className="c-cb"&gt;
+        &lt;input id="todo-0" type="checkbox" defaultChecked={true} /&gt;
+        &lt;label className="todo-label" htmlFor="todo-0"&gt;
+          Eat
+        &lt;/label&gt;
+      &lt;/div&gt;
+      &lt;div className="btn-group"&gt;
+        &lt;button type="button" className="btn"&gt;
+          Edit &lt;span className="visually-hidden"&gt;Eat&lt;/span&gt;
+        &lt;/button&gt;
+        &lt;button type="button" className="btn btn__danger"&gt;
+          Delete &lt;span className="visually-hidden"&gt;Eat&lt;/span&gt;
+        &lt;/button&gt;
+      &lt;/div&gt;
+    &lt;/li&gt;
+  );
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>注意</strong>: コンポーネントは常に何かを返さなければなりません。もし今後あなたが何も返さないコンポーネントをレンダリングしようとしたら、React はブラウザにエラーを表示するでしょう。</p>
+</div>
+
+<p>これで <code>Todo</code> コンポーネントは完成しました。<code>App.js</code> で、ファイルの先頭付近に次の行を追加して <code>Todo</code> をインポートします。</p>
+
+<pre class="brush: js notranslate">import Todo from "./components/Todo";</pre>
+
+<p>このコンポーネントをインポートすると、<code>App.js</code> の <code>&lt;li&gt;</code> 要素をすべて <code>&lt;Todo /&gt;</code> コンポーネント呼び出しに置き換えることができます。<code>&lt;ul&gt;</code> は以下のようになるはずです。</p>
+
+<pre class="brush: js notranslate">&lt;ul
+  role="list"
+  className="todo-list stack-large stack-exception"
+  aria-labelledby="list-heading"
+&gt;
+  &lt;Todo /&gt;
+  &lt;Todo /&gt;
+  &lt;Todo /&gt;
+&lt;/ul&gt;</pre>
+
+<p>ブラウザに戻ってみると、何か不幸なことに気づくでしょう: あなたのリストは、最初のタスクを3回繰り返すようになりました！</p>
+
+<p><img alt="Our todo list app, with todo components repeating because the label is hardcoded into the component" src="https://mdn.mozillademos.org/files/17255/todo-list-repeating-todos.png" style="border-style: solid; border-width: 1px; height: 954px; width: 856px;"></p>
+
+<p>私たちは食べたいだけではなく、他にもやるべきこと — そう、TODO があります。次に、異なるコンポーネント呼び出しで別々のコンテンツをレンダリングする方法を見てみましょう。</p>
+
+<h2 id="「一意の」_&lt;Todo_>_を作成">「一意の」 <code>&lt;Todo /&gt;</code> を作成</h2>
+
+<p>コンポーネントが強力なのは、UI の一部を再利用し、その UI のソースを 1 か所で参照できるからです。問題は、通常、各コンポーネントのすべてを再利用するのではなく、ほとんどの部分を再利用しつつ小さな部分を変更したいということです。そこでプロップ( props )の出番です。</p>
+
+<h3 id="name_に何が入るでしょう？"><code>name</code> に何が入るでしょう？</h3>
+
+<p>完了させたいタスクの名前を追跡するために、それぞれの <code>&lt;Todo /&gt;</code> コンポーネントが一意の名前を表示するようにしなければなりません。</p>
+
+<p><code>App.js</code>では、それぞれの <code>&lt;Todo /&gt;</code> に名前のプロップを与えます。先ほどのタスクの名前を使ってみましょう。</p>
+
+<pre class="brush: js notranslate">&lt;Todo name="Eat" /&gt;
+&lt;Todo name="Sleep" /&gt;
+&lt;Todo name="Repeat" /&gt;</pre>
+
+<p>ブラウザを更新すると...以前と全く同じものが表示されます。<code>&lt;Todo /&gt;</code> にプロップを与えましたが、まだ使っていません。<code>Todo.js</code> に戻って解決しましょう。</p>
+
+<p>最初に <code>Todo()</code> 関数の定義を変更して、<code>props</code> をパラメータとして受け取るようにします。<code>props</code> がコンポーネントによって正しく受信されているかどうかを確認したい場合は、先ほどと同様に <code>console.log()</code> で <code>props</code> を取得することができます。</p>
+
+<p>コンポーネントが <code>props</code> を取得していることを確認したら、<code>Eat</code> を <code>name</code> のプロップで置き換えることができます。覚えておいてください: JSX の式の途中では、中括弧を使って変数の値を注入します。</p>
+
+<p>これらをまとめると、<code>Todo()</code> 関数は次のようになるはずです。</p>
+
+<pre class="brush: js notranslate">export default function Todo(props) {
+  return (
+    &lt;li className="todo stack-small"&gt;
+      &lt;div className="c-cb"&gt;
+        &lt;input id="todo-0" type="checkbox" defaultChecked={true} /&gt;
+        &lt;label className="todo-label" htmlFor="todo-0"&gt;
+          {props.name}
+        &lt;/label&gt;
+      &lt;/div&gt;
+      &lt;div className="btn-group"&gt;
+        &lt;button type="button" className="btn"&gt;
+          Edit &lt;span className="visually-hidden"&gt;{props.name}&lt;/span&gt;
+        &lt;/button&gt;
+        &lt;button type="button" className="btn btn__danger"&gt;
+          Delete &lt;span className="visually-hidden"&gt;{props.name}&lt;/span&gt;
+        &lt;/button&gt;
+      &lt;/div&gt;
+    &lt;/li&gt;
+  );
+}</pre>
+
+<p>これで、ブラウザには3つの一意のタスクが表示されるようになりました。しかし、もう一つの問題が残っています: これらはすべてデフォルトでチェックされています。</p>
+
+<p><img alt="Our todo list, with different todo labels now they are passed into the components as props" src="https://mdn.mozillademos.org/files/17256/todo-list-unique-todos.png" style="border-style: solid; border-width: 1px; height: 954px; width: 856px;"></p>
+
+<h3 id="それは_completed_ですか？">それは <code>completed</code> ですか？</h3>
+
+<p>元の静的リストでは、<code>Eat</code> だけがチェックされていました。もう一度言いますが、<code>&lt;Todo /&gt;</code>コンポーネントを構成するUIのほとんどを再利用しつつ、一つだけ変更したいのです。これは別のプロップが良い仕事をしてくれます！<code>App.js</code> での各 <code>&lt;Todo /&gt;</code> の呼び出しには、完了したことを示す新しいプロップを与えます。最初の (<code>Eat</code>) は <code>true</code> の値を持ち、残りは <code>false</code> にします。</p>
+
+<pre class="brush: js notranslate">&lt;Todo name="Eat" completed={true} /&gt;
+&lt;Todo name="Sleep" completed={false} /&gt;
+&lt;Todo name="Repeat" completed={false} /&gt;</pre>
+
+<p>先ほどと同様に、これらのプロップを実際に使用するためには <code>Todo.js</code> に戻る必要があります。<code>&lt;input /&gt;</code> の <code>defaultChecked</code> 属性の値が <code>completed</code> したプロップと同じになるように変更します。これで、Todo コンポーネントの <code>&lt;input /&gt;</code> 要素は次のようになります。</p>
+
+<pre class="brush: js notranslate">&lt;input id="todo-0" type="checkbox" defaultChecked={props.completed} /&gt;</pre>
+
+<p>そして、ブラウザを更新すると、<code>Eat</code> だけがチェックされていることが表示されるようになるはずです。</p>
+
+<p><img alt="Our todo list app, now with differing checked states - some checkboxes are checked, others not" src="https://mdn.mozillademos.org/files/17254/todo-list-differing-checked-states.png" style="border-style: solid; border-width: 1px; height: 954px; width: 856px;"></p>
+
+<p>各 <code>&lt;Todo /&gt;</code> コンポーネントの<code>conpleted</code> プロップを変更すると、ブラウザはそれに応じてレンダリングされた同等のチェックボックスをチェックしたり、チェックを外したりします。</p>
+
+<h3 id="id_をください"><code>id</code> をください</h3>
+
+<p>現在、<code>&lt;Todo /&gt;</code> コンポーネントはすべてのタスクに <code>todo-0</code> という <code>id</code> 属性を与えています。これは悪い HTML です、なぜなら <a href="/en-US/docs/Web/HTML/Global_attributes/id">id 属性</a>は一意でなければならないからです (CSS や JavaScript などでドキュメントフラグメントの一意な識別子として使用されます)。つまり、各 <code>Todo</code> に対して一意の値を取る <code>id</code> プロップをコンポーネントに与えるべきです。</p>
+
+<p>最初と同じパターンに従うために、<code>&lt;Todo /&gt;</code> コンポーネントの各インスタンスに <code>todo-i</code> の形式で ID を与えてみましょう。<code>i</code> は毎回1つずつ大きくなっていきます。</p>
+
+<pre class="brush: js notranslate">&lt;Todo name="Eat" completed={true} id="todo-0" /&gt;
+&lt;Todo name="Sleep" completed={false} id="todo-1" /&gt;
+&lt;Todo name="Repeat" completed={false} id="todo-2" /&gt;</pre>
+
+<p>ここで <code>Todo.js</code> に戻り、<code>id</code> プロップを使うようにします。これは <code>&lt;input /&gt;</code> 要素の <code>id</code> 属性の値とラベルの <code>htmlFor</code> 属性の値を置き換える必要があります。</p>
+
+<pre class="brush: js notranslate">&lt;div className="c-cb"&gt;
+  &lt;input id={props.id} type="checkbox" defaultChecked={props.completed} /&gt;
+  &lt;label className="todo-label" htmlFor={props.id}&gt;
+    {props.name}
+  &lt;/label&gt;
+&lt;/div&gt;</pre>
+
+<h2 id="ここまでは順調ですか？">ここまでは順調ですか？</h2>
+
+<p>今のところ React をうまく使っていますが、もっとうまくできるかもしれません！今のコードは反復的です。<code>&lt;Todo /&gt;</code> コンポーネントをレンダリングする3つの行はほぼ同じですが、1つだけ違う点があります: それぞれのプロップの値です。</p>
+
+<p>JavaScript のコアな能力の一つであるイテレーション（反復処理）を使えば、コードをクリーンアップすることができます。イテレーションを使うためには、まず自分のタスクを再考する必要があります。</p>
+
+<h2 id="データとしてのタスク">データとしてのタスク</h2>
+
+<p>それぞれのタスクには現在、3つの情報が含まれています: 名前、チェック済みかどうか、そして一意なIDです。このデータはうまくオブジェクトに変換されます。複数のタスクがあるので、このデータを表現するにはオブジェクトの配列が有効です。</p>
+
+<p>import の後 <code>ReactDOM.render()</code> より前の行で以下の <code>const</code> を作成してください。</p>
+
+<pre class="brush: js notranslate">const DATA = [
+  { id: "todo-0", name: "Eat", completed: true },
+  { id: "todo-1", name: "Sleep", completed: false },
+  { id: "todo-2", name: "Repeat", completed: false }
+];</pre>
+
+<p>次に、<code>tasks</code> という名前のプロップとして <code>&lt;App /&gt;</code> に <code>DATA</code> を渡します。<code>src/index.js</code> の最終行は以下のようになるはずです。</p>
+
+<pre class="brush: js notranslate">ReactDOM.render(&lt;App tasks={DATA} /&gt;, document.getElementById("root"));</pre>
+
+<p>この配列は、App コンポーネントで <code>props.tasks</code> として利用できるようになりました。よかったら <code>console.log()</code> で確認してください。</p>
+
+<div class="blockIndicator note">
+<p><strong>注意</strong>: <code>ALL_CAPS</code> 定数名は JavaScript では特別な意味はありません; 他の開発者に「このデータはここで定義された後は変更されません」と伝えるための慣習です。</p>
+</div>
+
+<h2 id="イテレーションによるレンダリング">イテレーションによるレンダリング</h2>
+
+<p>オブジェクトの配列をレンダリングするには、それぞれのオブジェクトを <code>&lt;Todo /&gt;</code> コンポーネントに変換しなければなりません。JavaScript では、データを別のものに変換するための配列メソッド <code>Array.prototype.map()</code> を提供しています。</p>
+
+<p>Above the return statement of <code>App()</code>, make a new <code>const</code> called <code>taskList</code> and use <code>map()</code> to transform it. Let's start by turning our <code>tasks</code> array into something simple: the <code>name</code> of each task:</p>
+
+<pre class="brush: js notranslate">const taskList = props.tasks.map(task =&gt; task.name);</pre>
+
+<p>Let’s try replacing all the children of the <code>&lt;ul&gt;</code> with <code>taskList</code>:</p>
+
+<pre class="brush: js notranslate">&lt;ul
+  role="list"
+  className="todo-list stack-large stack-exception"
+  aria-labelledby="list-heading"
+&gt;
+  {taskList}
+&lt;/ul&gt;</pre>
+
+<p>This gets us some of the way towards showing all the components again, but we’ve got more work to do: the browser currently renders each task's name as unstructured text. We’re missing our HTML structure — the <code>&lt;li&gt;</code> and its checkboxes and buttons!</p>
+
+<p><img alt="Our todo list app with the todo item labels just shown bunched up on one line" src="https://mdn.mozillademos.org/files/17257/todo-list-unstructured-names.png" style="border-style: solid; border-width: 1px; height: 627px; width: 856px;"></p>
+
+<p>To fix this, we need to return a <code>&lt;Todo /&gt;</code> component from our <code>map()</code> function — remember that JSX allows us to mix up JavaScript and markup structures! Let's try the following instead of what we have already:</p>
+
+<pre class="brush: js notranslate"> const taskList = props.tasks.map(task =&gt; &lt;Todo /&gt;);</pre>
+
+<p>Look again at your app; now our tasks look more like they used to, but they’re missing the names of the tasks themselves.  Remember that each task we map over has the <code>id</code>, <code>name</code>, and <code>checked</code> properties we want to pass into our <code>&lt;Todo /&gt;</code> component. If we put that knowledge together, we get code like this:</p>
+
+<pre class="brush: js notranslate">const taskList = props.tasks.map(task =&gt; (
+  &lt;Todo id={task.id} name={task.name} completed={task.completed} /&gt;
+));</pre>
+
+<p>Now the app looks like it did before, and our code is less repetitive.</p>
+
+<h2 id="Unique_keys">Unique keys</h2>
+
+<p>Now that React is rendering our tasks out of an array, it has to keep track of which one is which in order to render them properly. React tries to do its own guesswork to keep track of things, but we can help it out by passing a <code>key</code> prop to our <code>&lt;Todo /&gt;</code> components. <code>key</code> is a special prop that's managed by React – you cannot use the word <code>key</code> for any other purpose.</p>
+
+<p>Because keys should be unique, we're going to re-use the <code>id</code> of each task object as its key. Update your <code>taskList</code> constant like so:</p>
+
+<pre class="brush: js notranslate">const taskList = props.tasks.map(task =&gt; (
+    &lt;Todo
+      id={task.id}
+      name={task.name}
+      completed={task.completed}
+      key={task.id}
+    /&gt;
+  )
+);</pre>
+
+<p><strong>You should always pass a unique key to anything you render with iteration.</strong> Nothing obvious will change in your browser, but if you do not use unique keys, React will log warnings to your console and your app may behave strangely!</p>
+
+<h2 id="Componentizing_the_rest_of_the_app">Componentizing the rest of the app</h2>
+
+<p>Now that we've got our most important component sorted out, we can turn the rest of our app into components. Remembering that components are either obvious pieces of UI, or reused pieces of UI, or both, we can make two more components:</p>
+
+<ul>
+ <li><code>&lt;Form/&gt;</code></li>
+ <li><code>&lt;FilterButton/&gt;</code></li>
+</ul>
+
+<p>Since we know we need both, we can batch some of the file creation work together with a terminal command. Run this command in your terminal, taking care that you're in the root directory of your app:</p>
+
+<pre class="brush: bash notranslate">touch src/components/Form.js src/components/FilterButton.js</pre>
+
+<h3 id="The_&lt;Form_>">The <code>&lt;Form /&gt;</code></h3>
+
+<p>Open <code>components/Form.js</code> and do the following:</p>
+
+<ul>
+ <li>Import <code>React</code> at the top of the file, like we did in <code>Todo.js</code>.</li>
+ <li>Make yourself a new <code>Form()</code> component with the same basic structure as <code>Todo()</code>, and export that component.</li>
+ <li>Copy the <code>&lt;form&gt;</code> tags and everything between them from inside <code>App.js</code>, and paste them inside <code>Form()</code>’s <code>return</code> statement.</li>
+ <li>Export <code>Form</code> at the end of the file.</li>
+</ul>
+
+<p>Your <code>Form.js</code> file should read like this:</p>
+
+<pre class="brush: js notranslate">import React from "react";
+
+function Form(props) {
+  return (
+    &lt;form&gt;
+      &lt;h2 className="label-wrapper"&gt;
+        &lt;label htmlFor="new-todo-input" className="label__lg"&gt;
+          What needs to be done?
+        &lt;/label&gt;
+      &lt;/h2&gt;
+      &lt;input
+        type="text"
+        id="new-todo-input"
+        className="input input__lg"
+        name="text"
+        autoComplete="off"
+      /&gt;
+      &lt;button type="submit" className="btn btn__primary btn__lg"&gt;
+        Add
+      &lt;/button&gt;
+    &lt;/form&gt;
+  );
+}
+
+export default Form;</pre>
+
+<h3 id="The_&lt;FilterButton_>">The &lt;FilterButton /&gt;</h3>
+
+<p>Do the same things you did to create <code>Form.js</code> inside <code>FilterButton.js</code>, but call the component <code>FilterButton()</code> and copy the HTML for the first button inside the <code>&lt;div&gt;</code> element with the <code>class</code> of <code>filters</code> from <code>App.js</code> into the <code>return</code> statement.</p>
+
+<p>The file should read like this:</p>
+
+<pre class="brush: js notranslate">import React from "react";
+
+function FilterButton(props) {
+  return (
+    &lt;button type="button" className="btn toggle-btn" aria-pressed="true"&gt;
+      &lt;span className="visually-hidden"&gt;Show &lt;/span&gt;
+      &lt;span&gt;all &lt;/span&gt;
+      &lt;span className="visually-hidden"&gt; tasks&lt;/span&gt;
+    &lt;/button&gt;
+  );
+}
+
+export default FilterButton;</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You might notice that we are making the same mistake here as we first made for the <code>&lt;Todo /&gt;</code> component, in that each button will be the same. That’s fine! We’re going to fix up this component later on, in <a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering#Back_to_the_filter_buttons">Back to the filter buttons</a>.</p>
+</div>
+
+<h2 id="Importing_all_our_components">Importing all our components</h2>
+
+<p>Let's make use of our new components.</p>
+
+<p>Add some more <code>import</code> statements to the top of <code>App.js</code>, to import them.</p>
+
+<p>Then, update the <code>return</code> statement of <code>App()</code> so that it renders our components. When you’re done, <code>App.js</code> will read like this:</p>
+
+<pre class="brush: js notranslate">import React from "react";
+import Form from "./components/Form";
+import FilterButton from "./components/FilterButton";
+import Todo from "./components/Todo";
+
+function App(props) {
+  const taskList = props.tasks.map(task =&gt; (
+    &lt;Todo
+        id={task.id}
+        name={task.name}
+        completed={task.completed}
+        key={task.id}
+      /&gt;
+    )
+  );
+  return (
+    &lt;div className="todoapp stack-large"&gt;
+      &lt;Form /&gt;
+      &lt;div className="filters btn-group stack-exception"&gt;
+        &lt;FilterButton /&gt;
+        &lt;FilterButton /&gt;
+        &lt;FilterButton /&gt;
+      &lt;/div&gt;
+      &lt;h2 id="list-heading"&gt;3 tasks remaining&lt;/h2&gt;
+      &lt;ul
+        role="list"
+        className="todo-list stack-large stack-exception"
+        aria-labelledby="list-heading"
+      &gt;
+        {taskList}
+      &lt;/ul&gt;
+    &lt;/div&gt;
+  );
+}
+
+export default App;</pre>
+
+<p>With this in place, we’re <em>almost</em> ready to tackle some interactivity in our React app!</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>And that's it for this article — we've gone into some depth on how to break up your app nicely into components, end render them efficiently. Now we'll go on to look at how we handle events in React, and start adding some interactivity.</p>
+
+<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html
new file mode 100644
index 0000000000..5114539cca
--- /dev/null
+++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html
@@ -0,0 +1,468 @@
+---
+title: Reactをはじめる
+slug: >-
+  Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
+tags:
+  - Beginner
+  - Frameworks
+  - JavaScript
+  - Learn
+  - React
+  - client-side
+translation_of: >-
+  Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p class="summary">この記事では React のはじめかたを説明します。Reactの背景と使い方について説明し、ローカル環境で基本的な React ツールチェーンを設定します。また、シンプルな基本アプリを作成して、React がどのようなプロセスで機能するのかを学んでいきます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>
+    <p><a href="/ja/docs/Learn/HTML">HTML</a>、<a href="/ja/docs/Learn/CSS">CSS</a>、<a href="/ja/docs/Learn/JavaScript">JavaScript</a> に精通していること、<a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">ターミナル/コマンドライン</a>に関する知識があること。</p>
+
+    <p>React は JSX (JavaScript と XML) と呼ばれる HTML-in-JavaScript を使用します。HTML と JavaScript の両方に精通していると、JSX の学習に役立ち、アプリケーションのバグが JavaScript に関連しているか、React のより具体的なドメインに関連しているかを特定するのに役立つます。</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>ローカルの React 開発環境をセットアップし、開始アプリを作成して、それがどのように機能するかの基本を理解する</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Hello_React" name="Hello_React">React の基礎</h2>
+
+<p>公式のキャッチフレーズにあるように、<a href="https://reactjs.org/">React</a> はユーザーインターフェイスを構築するためのライブラリーです。React はフレームワークではなく、ウェブに限定されるものでもありません。他のライブラリーと共に使用して、特定の環境にレンダリングしますます。たとえば、<a href="https://reactnative.dev/">React Native</a> はモバイルアプリケーションの構築に使用できます。<a href="https://facebook.github.io/react-360/">React 360</a> を使用して、仮想現実アプリケーションを構築できます。他にも可能性があります。</p>
+
+<p>ウェブ向けに構築するには、開発者は <a href="https://reactjs.org/docs/react-dom.html">ReactDOM</a> と連携してリアクトを使用します。リアクトと ReactDOM は、他の本当のウェブ開発フレームワークと同じ土台で議論さんくれ、同じような問題を解決するために用いられます。しかし React を「フレームワーク」と呼ぶとき、私たちはその口語的な理解に別途でいます。</p>
+
+<p>React が目指すところは、開発者がUIを構築しているときに発生するバグを最小限に抑えることです。これは、コンポーネント (ユーザーインターフェイスの一部を記述する自己完結型の論理的なコード) を使用して行われます。これらのコンポーネントを組み合わせて完全なUIを作成でき、React はレンダリング作業の大部分を抽象化して、UI デザインに集中できるようにします。</p>
+
+<h2 id="Use_cases" name="Use_cases">ユースケース</h2>
+
+<p>このモジュールで取り上げられている他のフレームワークとは異なり、React はコード規則やファイル編成に関する厳密なルールを適用しません。これにより、チームは自分に最適な規則を設定し、Reactを好きなように採用することができます。React は、単一のボタン、一部のインターフェース、またはアプリのユーザーインターフェース全体を処理できます。</p>
+
+<p>React は<a href="https://reactjs.org/docs/add-react-to-a-website.html">インターフェイスの一部</a>に適に用することが <em>できます</em> が、jQuery のようなライブラリーや Vue のようなフレームワークほどアプリケーションに「ドロップ」するのは簡単ではありません。React でアプリ全体を構築するのに適しています。</p>
+
+<p>さらに、JSX のインターフェースの作成など、React アプリの開発者体験にはコンパイルプロセスが必要とします。Babel のようなコンパイラーをウェブサイトに追加すると、コードの実行が遅くなるため、開発者はビルドステップでそのようなツールをセットアップすることがよくあります。間違いなく React には厳しいツール要件がありますが、学習することはできます。</p>
+
+<p>この記事では、Facebook 独自の<a href="https://create-react-app.dev/"> create-react-app</a> を使って、アプリケーションのインターフェイスを構築していきます。</p>
+
+<h2 id="How_does_React_use_JavaScript" name="How_does_React_use_JavaScript">ReactにおけるJavaScriptの書き方</h2>
+
+<p>Reactは、そのパターンの多くに最新の JavaScript の機能を利用しています。JavaScript からの最大の違いは、<a href="https://reactjs.org/docs/introducing-jsx.html">JSX</a> 構文を使うことです。JSX は JavaScript の構文を拡張して、HTML のようにコードを書くことができます。例えば:</p>
+
+<pre class="brush: js notranslate">const heading = &lt;h1&gt;Mozilla Developer Network &lt;/h1&gt;;</pre>
+
+<p>この定数 heading は、<strong>JSX 式</strong>と呼ばれます。React はこのように <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;</a></code> タグをレンダリングすることができます。</p>
+
+<p>セマンティックの観点で、 <code><a href="/ja/docs/Web/HTML/Element/header">&lt;header&gt;</a></code> タグで、見出しを囲みたいとします。JSX では、HTML のように、要素を相互にネストできます。</p>
+
+<pre class="notranslate">const header = (
+  &lt;header&gt;
+    &lt;h1&gt;Mozilla Developer Network&lt;/h1&gt;
+  &lt;/header&gt;
+);</pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: このスニペットの括弧は JSX に固有のものではなく、あなたのアプリケーションに影響を与えません。それらは、あなた (またあなたのコンピューター) にとって、内部の複数行のコードが同じ式の一部であるという意味です。次のように header を定義することもできます。</p>
+
+<pre class="notranslate">const header = &lt;header&gt;
+    &lt;h1&gt;Mozilla Developer Network&lt;/h1&gt;
+&lt;/header&gt;</pre>
+
+<p>ただし、<code><a href="/ja/docs/Web/HTML/Element/header">&lt;header&gt;</a></code> 式を開始するタグが、対応する終了タグと同じ位置にインデントされていないため、これは少し読みにくいかもしれません。</p>
+</div>
+
+<p>もちろん、あなたのブラウザーはそのままでは JSX を読むことができません。(<a href="https://babeljs.io/">Babel</a> や <a href="https://parceljs.org/">Parcel</a> などのツールを使用して) コンパイルすると、ヘッダー式は次のようになります。</p>
+
+<pre class="brush: js notranslate">const header = React.createElement("header"、null、
+  React.createElement("h1"、null、 "Mozilla Developer Network")
+);</pre>
+
+<p>コンパイルステップとコンパイル自体をスキップし、<code><a href="https://reactjs.org/docs/react-api.html#createelement">React.createElement()</a></code> を使って、独自のUIを自分で書くこと。ただし、こうするとJSXの宣言的なメリットが失われ、コードが読みにくくなってしまいます。コンパイルは開発プロセスとは別のステップですが、Reactコミュニティの多くの開発者は、JSXの読みやすさに価値があると考えています。さらに、外部ツールにより、JSX から JavaScript へのコンパイルがセットアッププロセスの一部になります。特段の必要がない限り、コンパイルを自分の手で行う必要はありません。</p>
+
+<p>JSX は HTML と JavaScript がミックスされたものなので、一部の開発者にとっては直感的に使うことができます。しかしそうでない人にとってはは、そのミックスされていることで混乱させられると言います。ただし、慣れれば、ユーザーインターフェースをより迅速かつ直感的に構築できるようになり、他の人がコードを一目で理解しやすくなります。</p>
+
+<p>JSX の詳細については、React チームの <a href="https://reactjs.org/docs/jsx-in-depth.html">JSX In Depth</a> の記事をご覧ください。</p>
+
+<h2 id="Setting_up_your_first_React_app" name="Setting_up_your_first_React_app">最初の React アプリをセットアップする</h2>
+
+<p>React を使用する方法はたくさんありますが、前述のように、コマンドラインインターフェイス (CLI) ツールの create-react-app を使用します。これにより、いくつかのパッケージをインストールしていくつかを作成することにより、React アプリケーションの開発プロセスをスムーズにします。</p>
+
+<p><code><a href="/en-US/docs/Web/HTML/Element/script">&lt;script&gt;</a></code> を HTML ファイルにコピーすることで <a href="https://reactjs.org/docs/add-react-to-a-website.html">create-react-app なしでウェブサイトに　React を追加する</a>ことは可能ですが、create-react-app CLI　は、React　アプリケーションの一般的な始め方です。これを使うことで、アプリの作成に集中でき、セットアップに煩わされなくなります。</p>
+
+<h3 id="Requirements" name="Requirements">必要条件</h3>
+
+<p>create-react-app を使用するには、<a href="https://nodejs.org/en/">Node.js</a> をインストールする必要があります。長期サポート (LTS) バージョンを使用することをお勧めします。ノードには、npm (ノードパッケージマネージャー) および npx (ノードパッケージランナー) が含まれます。</p>
+
+<p>代わりに Yarn パッケージマネージャーを使用することもできますが、この一連のチュートリアルでは npm を使用するものとします。npm と yarn の詳細については、<a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">パッケージ管理の基本</a>を参照してください。</p>
+
+<p>Windows を使用している場合、このチュートリアルで言及されている端末コマンドを使用するには、Unix / macOS 端末と同等のソフトウェアをインストールする必要があります。<strong>Gitbash</strong> (<a href="https://gitforwindows.org/">Windows 用</a>の <a href="https://gitforwindows.org/">git ツールセットの</a>一部として提供) または <strong><a href="https://docs.microsoft.com/en-us/windows/wsl/about">Linux 用の Windows サブシステム</a></strong> (<strong>WSL</strong>) の両方が適しています。これら、および一般的な端末コマンドの詳細については、<a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">コマンドラインクラッシュコース</a>を参照してください。</p>
+
+<p>また、React と ReactDOM は、かなり近代的な一連のブラウザー (IE9 以降) でのみ機能するアプリを生成することにも注意してください。これらのチュートリアルを実行するときは、Firefox、Safari、Chrome などの最新のブラウザーを使用することをお勧めします。</p>
+
+<p>詳細については、以下も参照してください。</p>
+
+<ul>
+ <li><a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/">nodejs.org の「npm とは」</a></li>
+ <li><a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner">npm ブログの「npxの紹介」</a></li>
+ <li><a href="https://create-react-app.dev/">create-react-app のドキュメント</a></li>
+</ul>
+
+<h3 id="Initializing_your_app" name="Initializing_your_app">アプリの初期化</h3>
+
+<p>create-react-app は引数を 1 つ取ります。アプリに付ける名前です。create-react-app はこの名前を使用して新しいディレクトリーを作成し、その中に必要なファイルを作成します。<code>cd</code> でアプリのハードドライブ上の場所に移動したことを確認してから、ターミナルで次のコマンドを実行します。</p>
+
+<pre class="brush: bash notranslate">npx create-react-app moz-todo-react</pre>
+
+<p>これは <code>moz-todo-react</code> ディレクトリーを作成し、その中でいくつかのことを行います:</p>
+
+<ul>
+ <li>アプリの機能に不可欠な npm パッケージをインストールします。</li>
+ <li>アプリケーションを起動および提供するためのスクリプトを記述します。</li>
+ <li>基本的なアプリアーキテクチャを定義するファイルとディレクトリーの構造を作成します。</li>
+ <li>コンピュータに git がインストールされている場合、ディレクトリーを git リポジトリーとして初期化します。</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: Yarn パッケージマネージャーがインストールされている場合、create-react-app はデフォルトで npm の代わりにそれを使用します。両方のパッケージマネージャーがインストールされていて、明示的に NPM を使用したい場合、create-react-app を実行するときに <code>--use-npm</code> フラグを追加できます。</p>
+
+<pre class="brush: bash notranslate">npx create-react-app moz-todo-react --use-npm</pre>
+</div>
+
+<p>create-react-app が機能している間、端末にいくつかのメッセージが表示されますが、正常な動作です！これには数分かかる場合がありますので、お茶でも作って待ってみましょう。</p>
+
+<p>プロセスが完了したら、<code>moz-todo-react</code>ディレクトリーへ <code>cd</code> して、コマンド <code>npm start</code> を実行します。create-react-app によってインストールされたスクリプトは、localhost:3000 のローカルサーバーで提供され始め、新しいブラウザータブでアプリを開きます。ブラウザーには次のように表示されます。</p>
+
+<p><img alt="デフォルトのcreate-react-app アプリケーションを示す、Firefox MacOS のスクリーンショット、localhost:3000を開く" src="https://mdn.mozillademos.org/files/17203/default-create-react-app.png" style="border-style: solid; border-width: 1px; height: 980px; width: 1600px;"></p>
+
+<h3 id="Application_structure" name="Application_structure">アプリケーションの構造</h3>
+
+<p>create-react-app は、React アプリケーションの開発に必要なすべてのものを提供します。初期のファイル構造は次のようになります。</p>
+
+<pre class="notranslate">moz-todo-react
+├──README.md
+├──node_modules
+├──package.json
+├──package-lock.json
+├──.gitignore
+├──public
+│├──favicon.ico
+│├──index.html
+│└──manifest.json
+└──src
+    ├──App.css
+    ├──App.js
+    ├──App.test.js
+    ├──index.css
+    ├──index.js
+    ├──logo.svg
+    └──serviceWorker.js</pre>
+
+<p><strong><code>src</code></strong> ディレクトリーはアプリケーションの実態ともいえるソースことがある場所で、私たちが触るのは主にこの部分です。</p>
+
+<p><strong><code>public</code></strong> ディレクトリーには、アプリを開発している間、ブラウザーによって読み込まれるファイルが含まれています。これらの中で最も重要なのは <code>index.html</code> です。React はこのファイルにコードを挿入して、ブラウザーで実行できるようにします。create-react-app 関数に役立つマークアップが他にもいくつかあるので、何をしているのかを理解していなければ、自分で編集しないように注意してください。このファイルの要素内の <code><a href="/ja/docs/Web/HTML/Element/title">&lt;title&gt;</a></code> を変更して、アプリケーション自体のタイトルを反映させる必要があります。アクセシビリティ向上のためには正しいページタイトルが重要です。</p>
+
+<p><code>public</code> ディレクトリーは、アプリをビルドしてデプロイするときにも公開されます。このチュートリアルではデプロイ自体については説明しませんが、<a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">アプリのデプロイ</a>チュートリアルで説明されているものと同様のソリューションを使用できるはずです。</p>
+
+<p>この<code>package.json</code> ファイルには、Node.js / npm がプロジェクトを整理するために使用するプロジェクトに関する情報が含まれています。このファイルは React アプリケーションに固有のものではありません。create-react-app は単にそれを生成します。このチュートリアルを完了するためにこのファイルを理解する必要はまったくありませんが、詳しく知りたい場合は<a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/">「package.json ファイルとは」</a>を参照してください。</p>
+
+<h2 id="Exploring_our_first_React_component_—_&lt;App>" name="Exploring_our_first_React_component_—_&lt;App>">最初の React コンポーネント— <code>&lt;App/&gt;</code></h2>
+
+<p>React における、<strong>コンポーネント</strong>とはアプリの一部をレンダリングする再利用可能なモジュールを指します。これらのパーツは大きくても小さくてもかまいませんが、通常は明確に定義され、単一責務のもとに作られます。</p>
+
+<p>ブラウザーに表示されているように、<code>src/App.js</code> を開いて編集しましょう。このファイルには、最初のコンポーネント、<code>App</code>、その他の数行のコードが含まれています。</p>
+
+<pre class="notranslate">import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
+        &lt;/p&gt;
+        &lt;a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        &gt;
+          Learn React
+        &lt;/a&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}
+export default App;</pre>
+
+<p>この <code>App.js</code> ファイルは 3 つの主要な部分で構成されています。上部にいくつかの宣言されている <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/import">import</a></code>、中央にある <code>App</code>、最下部にある <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/export">export</a></code>。ほとんどの React コンポーネントはこのように書かれます。</p>
+
+<h3 id="Import_statements" name="Import_statements">ステートメントをインポートする</h3>
+
+<p><code>import</code> はファイルの先頭に宣言され、<code>App.js</code> が他の場所で定義されているコードを使用するのを許可します。これらをさらに詳しく見てみましょう。</p>
+
+<pre class="notranslate">import React from 'react';
+import logo from './logo.svg';
+import './App.css';</pre>
+
+<p>最初のステートメントは、React ライブラリー自体をインポートします。React は、作成する JSX を <code>React.createElement()</code> に変換するため、すべての React コンポーネントが <code>React</code> モジュールをインポートする必要があります。この手順をスキップすると、アプリケーションでエラーが発生します。</p>
+
+<p>2 番目のステートメントは、<code>'./logo.svg'</code> をインポートします。最初の <code>./</code> パスのと最後の拡張子 <code>.svg</code> に注意してください。これらはファイルがローカルであり、JavaScript ファイルではないことを示しています。実際、<code>logo.svg</code> ファイルは <code>src/</code> ディレクトリーにあります。</p>
+
+<p><code>React</code> モジュールのインポート時にパスや拡張子は記述しません—これはローカルファイルではないからです。代わりに、<code>package.json</code> ファイルに依存関係としてリストされます。このレッスンでは、この違いに注意してください。</p>
+
+<p>3番目のステートメントは、App コンポーネントに関連する CSS をインポートします。変数名も <code>from</code> ディレクティブもないことに注意してください。この特定のインポート構文は、JavaScript モジュール構文に特有のものではありません。Webpack から提供されるものです。create-react-app ツールは、すべての JavaScript ファイルをバンドルしてブラウザーに提供するために使用します。</p>
+
+<h3 id="The_App_component" name="The_App_component"><code>App</code> コンポーネント</h3>
+
+<p><code>import</code> の次に、<code>App</code> という名前の関数があります。ほとんどの JavaScript コミュニティは<code>helloWorld</code> のようなキャメルケース名を好みますが、React コンポーネントは <code>HelloWorld</code> のようなパスカルケース変数名を使用して、特定のJSX 要素が React コンポーネントであり、通常の HTML タグではないことを明確にしています。<code>App</code> 関数の名前を <code>app</code> に変更すると、ブラウザーにエラーが表示されます。</p>
+
+<p>アプリをもっと詳しく見てみましょう。</p>
+
+<pre class="notranslate">function App() {
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
+        &lt;/p&gt;
+        &lt;a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        &gt;
+          Learn React
+        &lt;/a&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}</pre>
+
+<p>この <code>App</code> 関数は JSX 式を返します。この式には、ブラウザーが最終的に DOM にレンダリングするものを定義します。</p>
+
+<p>HTML と同じように、<code>attribute="value"</code> のように属性をもつ要素があります。3 行目では、<code><a href="/ja/docs/Web/HTML/Element/div">&lt;div&gt;</a></code> 開始タグに <code>className</code> 属性があります。これは HTML の<code><a href="/ja/docs/Web/HTML/Global_attributes/class">class</a></code> 属性と同じですが、JSX は JavaScript であるため使用できません。<code>class</code> が予約されているためです。つまり、JavaScript ではすでにそれを使用しており、もし同様に使うと問題が発生するということです。同じような理由で、他のいくつかの HTML 属性は、HTML とは異なる方法で JSX で記述されています。</p>
+
+<p>6 行目の <code><a href="/ja/docs/Web/HTML/Element/p">&lt;p&gt;</a></code> タグを「Hello, world！」に変更して、ファイルを保存します。この変更はブラウザー <code>http://localhost:3000</code> で実行されている開発サーバーですぐにレンダリングされます。次に、<code><a href="/ja/docs/Web/HTML/Element/a">&lt;a&gt;</a></code> タグを削除して保存します。すると、「Learn React」リンクはなくなります。</p>
+
+<p>あなたの <code>App</code> コンポーネントは次のようになります。</p>
+
+<pre class="notranslate">function App() {
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          Hello, World!
+        &lt;/p&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}</pre>
+
+<h3 id="Export_statements" name="Export_statements">ステートメントのエクスポート</h3>
+
+<p><code>App.js</code> ファイルの一番下にある <code>export default App</code> は、<code>App</code> コンポーネントを他のモジュールで使用できるようにしています。</p>
+
+<h2 id="Interrogating_the_index" name="Interrogating_the_index">index を詳しくみる</h2>
+
+<p><code>src/index.js</code> を開きましょう。<code>App</code> コンポーネントを使用しているのがわかります。このファイルはアプリのエントリーポイントであり、最初は次のようになっています。</p>
+
+<pre class="notranslate">import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();</pre>
+
+<p><code>App.js</code> と同様に、ファイルは、実行する必要のあるすべての JS モジュールとその他のアセットをインポートすることから始まります。<code>src/index.css</code> ではアプリ全体に適用されるグローバルスタイルを保持します。ここに、インポートされた<code>App</code>コンポーネントも確認できます。下部の <code>export</code> により、<code>App.js</code> がインポートできるようになりました。</p>
+
+<p>7 行目 <code>ReactDOM.render()</code> は 2 つの引数で React の関数を呼び出します：</p>
+
+<ul>
+ <li><code>&lt;App /&gt;</code>: この場合、レンダリングしたいコンポーネント。</li>
+ <li>内部にコンポーネントをレンダリングする DOM 要素: この場合、<code>root</code> 要素。<code>public/index.html</code> の内側を見ると、これがの <code>&lt;div&gt;</code> であり、<code>&lt;body&gt;</code> すぐ内側の要素であることがわかります。</li>
+</ul>
+
+<p>これらはすべて、<code>App</code> コンポーネントを最初のコンポーネントとして React アプリケーションをレンダリングすることを React に伝えます。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: JSX では、React コンポーネントと HTML 要素には閉じスラッシュが必要です。そのまま <code>&lt;App&gt;</code> または <code>&lt;img&gt;</code> と書くとエラーが発生します。</p>
+</div>
+
+<p><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Worker</a> は、アプリケーションのパフォーマンスを向上させ、ウェブアプリケーションの機能をオフラインで動作させることができる興味深いコードですが、この記事の対象ではありません。5 行目と 9 〜 12 行目を削除します。</p>
+
+<p>最終的な<code>index.js</code>ファイルは次のようになります。</p>
+
+<pre class="notranslate">import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));</pre>
+
+<h2 id="Variables_and_props" name="Variables_and_props">変数と props</h2>
+
+<p>次に、JavaScript スキルのいくつかを使用して、コンポーネントの編集と React でのデータの操作をもう少し快適にします。JSX内での変数の使用方法について説明し、データをコンポーネントに渡す方法である props を紹介します (その後、変数を使用してアクセスできます)。</p>
+
+<h3 id="JSXの変数">JSXの変数</h3>
+
+<p><code>App.js</code> に戻り、9 行目に注目しましょう。</p>
+
+<pre class="brush: js notranslate">&lt;img src = {logo} className = "App-logo" alt = "logo" /&gt;</pre>
+
+<p>ここでは、<code>&lt;img /&gt;</code> タグの <code>src</code> 属性値は中括弧で囲まれています。これは、JSX が変数を認識する方法です。React が <code>{logo}</code> を表示し、アプリの2行目のインポートを参照していることを確認してから、logo ファイルを取得してレンダリングします。</p>
+
+<p>独自の変数を作ってみましょう。<code>App</code> の return ステートメントの前に <code>const subject = 'React';</code> を追加します。すると、<code>App</code> コンポーネントは次のようになります。</p>
+
+<pre class="notranslate">function App() {
+  const subject = "React";
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          Hello, World!
+        &lt;/p&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}</pre>
+
+<p>次のように、8 行目を変更して「world」という単語の代わりに <code>subject</code> 変数を使用します。</p>
+
+<pre class="notranslate">function App() {
+  const subject = "React";
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          Hello, {subject}!
+        &lt;/p&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}</pre>
+
+<p>保存すると、「Hello、world！」の代わりにブラウザーに「Hello、React！」と表示されます。</p>
+
+<p>変数は便利ですが、設定したばかりの変数はReactの機能をあまり活用していません。そこで、propsの登場です。</p>
+
+<h3 id="Component_props" name="Component_props">コンポーネントのprops</h3>
+
+<p><strong>props</strong> はコンポーネントに渡される任意のデータです。prop はコンポーネント内に記述され、HTML属性と同じ構文を使用します — <code>prop="value"</code>。<code>index.js</code>を開き、<code>&lt;App/&gt;</code> に最初の <code>prop</code> を渡しましょう。</p>
+
+<p><code>&lt;App/&gt;</code> コンポーネントに <code>subject</code> という prop を追加して、値は <code>Clarice</code> とします。完了すると、コードは次のようになります。</p>
+
+<pre class="notranslate">ReactDOM.render(&lt;App subject="Clarice" /&gt;, document.getElementById('root'));</pre>
+
+<p><code>App.js</code> に戻り、App 関数自体をもう一度見てみましょう。この関数は次のようになっています (簡潔にするために <code>return</code> で短くしています)。</p>
+
+<pre class="notranslate">function App() {
+  const subject = "React";
+  return (
+    // return statement
+  );
+}</pre>
+
+<p><code>App</code> 関数の引数を変更して、<code>props</code> をパラメーターとして受け入れられるようにします。他のパラメーターと同様 <code>props</code> に、<code>console.log()</code> を入力して、ブラウザーのコンソールにそれを表示させます。すると、次のようになります。</p>
+
+<pre class="notranslate">function App(props) {
+  const subject = "React";
+  console.log(props);
+  return (
+    // return statement
+  );
+}</pre>
+
+<p>ファイルを保存し、ブラウザーの JavaScript コンソールを確認します。次のようなログが表示されるはずです。</p>
+
+<pre class="notranslate">Object { subject: "Clarice" }</pre>
+
+<p>オブジェクトプロパティ <code>subject</code> は、<code>&lt;App /&gt;</code> コンポーネント呼び出しに追加した <code>subject</code> プロパティに対応し、文字列 <code>Clarice</code> はその値に対応します。React のコンポーネントプロップは、常にこのようにオブジェクトに集約されます。</p>
+
+<p><code>subject</code> は props の一部です。App.js でこれを使ってみましょう。<code>subject</code> 定数を変更して、<code>React</code> という文字列として定義する代わりに <code>props.subject</code> の値を読み取るようにします。<code>console.log()</code> は必要に応じて削除することもできます。</p>
+
+<pre class="notranslate">function App(props) {
+  const subject = props.subject;
+  return (
+    // return statement
+  );
+}</pre>
+
+<p>保存すると、アプリは「Hello、Clarice！」と挨拶するはずです。<code>index.js</code> に戻り、<code>subject</code> の値を編集して保存すると、テキストが変更されます。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>これで、React をローカルでインストールする方法、スターターアプリを作成する方法、基本的にどのように機能するかなど、React の入門が終わりました。次の記事では、最初に適したアプリケーションである todo リストの作成を開始します。ただし、その前に、私たちが学んだことのいくつかをおさらいしましょう。</p>
+
+<p>React では:</p>
+
+<ul>
+ <li>コンポーネントは必要なモジュールをインポートでき、ファイルの下部でエクスポートする必要があります。</li>
+ <li>コンポーネント関数は <code>PascalCase</code> で名前が付けられます。</li>
+ <li>JSX 変数は、<code>{so}</code> のように中括弧で囲むことで読み取ることができます。</li>
+ <li>一部の JSX 属性は HTML 属性とは異なるため、JavaScript の予約語と競合しません。例えば <code>class</code>、HTML では <code>className</code> JSX に変換されます。複数単語の属性はキャメルケースであることに注意してください。</li>
+ <li>props は、コンポーネント呼び出し内の属性と同じように記述され、コンポーネントに渡されます。</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html
new file mode 100644
index 0000000000..debc627272
--- /dev/null
+++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html
@@ -0,0 +1,599 @@
+---
+title: React ToDoリストをはじめる
+slug: >-
+  Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning
+translation_of: >-
+  Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning
+---
+<div>
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>
+</div>
+
+<p class="summary"><font><font><font><font>たとえば、Reactで</font></font></font></font><font><font>概念実証</font></font><font><font><font><font>を作成する必要があるとします。これは、ユーザーが作業したいタスクを追加、編集、削除したり、タスクを削除せずに完了としてマークしたりできるアプリです。</font></font></font><font><font><font>この記事では、基本的な</font></font></font></font><code>App</code><font><font><font><font>コンポーネントの構造とスタイルを設定し、個々のコンポーネントの定義と変更に対応できるようにします。これについては後で追加します。</font></font></font></font></p>
+
+<div class="blockIndicator note">
+<p class="summary"><strong><font><font><font><font>注</font></font></font></font></strong><font><font><font><font>：コードをGoogleのバージョンと照合する必要がある場合は、</font></font></font></font><a href="https://github.com/mdn/todo-react"><font><font><font><font>todo-react</font></font></font></font></a><font><font><font><font>リポジトリでサンプルのReactアプリコードの完成版を見つけることができます。実行</font></font></font><font><font><font>中の</font></font></font></font><a href="https://mdn.github.io/todo-react-build/"><font><font><font><font>バージョン</font></font></font></font></a><font><font><font><font>については、</font></font></font><a href="https://mdn.github.io/todo-react-build/"><font><font><font>https：//mdn.github .io / todo-react-build /を</font></font></font></a></font><font><font><font><font>参照してください。</font></font></font></font></p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row"><font><font><font><font>前提条件：</font></font></font></font></th>
+   <td>
+    <p><font><font><font><font>コア</font></font></font></font><a href="/en-US/docs/Learn/HTML"><font><font><font><font>HTML</font></font></font></font></a><font><font><font><font>、</font></font></font></font><a href="/en-US/docs/Learn/CSS"><font><font><font><font>CSS</font></font></font></font></a><font><font><font><font>、</font></font></font></font><a href="/en-US/docs/Learn/JavaScript"><font><font><font><font>JavaScriptの</font></font></font></font></a><font><font><font><font>言語に精通していること</font><font>、</font></font></font></font><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"><font><font><font><font>ターミナル/マンドコライン</font></font></font></font></a><font><font><font><font>に関すてる知識</font></font></font><font><font><font>。</font></font></font></font></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row"><font><font><font><font>目的：</font></font></font></font></th>
+   <td><font><font><font><font>todoリストの</font></font></font></font><font><font><font><font>ケーススタディを紹介</font></font></font><font><font><font>し、基本的な</font></font></font></font><code>App</code><font><font><font><font>構造とスタイルを整える。</font></font></font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="アプリの「ユーザーストーリー」"><font><font><font><font>アプリの「ユーザーストーリー」</font></font></font></font></h2>
+
+<p><font><font><font><font>ソフトウェア開発では、ユーザーストーリーはユーザーの観点から実行可能な目標を</font></font></font><font><font><font>指し</font></font></font><font><font><font>ます。</font></font><font><font>作業を開始する前にユーザーストーリーを定義すると、作業に集中することができます。今回、</font></font></font><font><font><font>私たちのアプリは以下のストーリーを実現する必要があります：</font></font></font></font></p>
+
+<p><font><font><font><font>ユーザーができること</font></font></font></font></p>
+
+<ul>
+ <li><font><font><font><font>タスクのリストを読むこと</font></font></font></font></li>
+ <li><font><font><font><font>マウスまたはキーボードを使用してタスクを追加すること</font></font></font></font></li>
+ <li><font><font><font><font>マウスまたはキーボードを使用して、タスクに完了のマークを付けること</font></font></font></font></li>
+ <li><font><font><font><font>マウスまたはキーボードを使用して、タスクを削除すること</font></font></font></font></li>
+ <li><font><font><font><font>マウスまたはキーボードを使用して、タスクを編集すること</font></font></font></font></li>
+ <li><font><font><font><font>タスクの特定の一部を表示する：すべてのタスク、アクティブなタスクのみ、または完了したタスクのみ。</font></font></font></font></li>
+</ul>
+
+<p><font><font><font><font>これらのストーリーに1つずつ取り組みます。</font></font></font></font></p>
+
+<h2 id="プロジェクトに入る前に現状整理"><font><font><font><font>プロジェクトに入る前に現状整理</font></font></font></font></h2>
+
+<p><font><font><font><font>create-react-appは、プロジェクトでまったく使用しないファイルをいくつか作成しています。</font></font></font></font></p>
+
+<ul>
+ <li><font><font><font><font>コンポーネントごと</font></font></font></font><code>App.js</code><font><font>の</font></font><font><font><font><font>スタイルシート</font></font></font></font><font><font><font><font>は作成しないので、</font></font></font><font><font><font>最初に</font></font></font><font>の</font><font><font><font>上部にあるインポート</font></font></font></font><code>App.css</code><font><font><font><font>を削除します。</font></font></font></font></li>
+ <li><font><font>また、</font></font><code>logo.svg</code><font><font>ファイル</font><font>を使用しない</font><font>ので、そのインポートも削除します。</font></font></li>
+</ul>
+
+<p><font><font>次に、以下のコマンドをコピーしてターミナルに貼り付け、不要なファイルをいくつか削除します。</font><font>アプリのルートディレクトリから開始していることを確認してください。</font></font></p>
+
+<pre># Move into the src directory of your project
+cd src
+# Delete a few files
+rm -- App.test.js App.css logo.svg serviceWorker.js setupTests.js
+# Move back up to the root of the project
+cd ..</pre>
+
+<p><font><font>ノート：</font></font></p>
+
+<ul>
+ <li><font><font>削除する2つのファイルは、アプリケーションのテスト用です。</font><font>ここではテストを扱いません。</font></font></li>
+ <li><font><font>上記のターミナルタスクを実行するためにサーバーを停止した場合は、</font></font><code>npm start</code><font><font>を使用してサーバーを再起動する必要があります。</font></font></li>
+</ul>
+
+<h2 id="はじめのプロジェクトコード"><font><font>はじめのプロジェクト</font></font><font><font>コード</font></font></h2>
+
+<p><font><font>このプロジェクトの開始点として、次の2つを提供します。現在持っているものを置き換えるApp関数と、アプリのスタイルを設定するCSSです。</font></font></p>
+
+<h3 id="JSX"><font><font>JSX</font></font></h3>
+
+<p><font><font>次のスニペットをクリップボードにコピーして貼り付け</font></font><code>App.js</code><font><font>、既存の</font></font><code>App()</code><font><font>関数を</font><font>置き換え</font><font>ます。</font></font></p>
+
+<pre>function App(props) {
+  return (
+    &lt;div className="todoapp stack-large"&gt;
+      &lt;h1&gt;TodoMatic&lt;/h1&gt;
+      &lt;form&gt;
+        &lt;h2 className="label-wrapper"&gt;
+          &lt;label htmlFor="new-todo-input" className="label__lg"&gt;
+            What needs to be done?
+          &lt;/label&gt;
+        &lt;/h2&gt;
+        &lt;input
+          type="text"
+          id="new-todo-input"
+          className="input input__lg"
+          name="text"
+          autoComplete="off"
+        /&gt;
+        &lt;button type="submit" className="btn btn__primary btn__lg"&gt;
+          Add
+        &lt;/button&gt;
+      &lt;/form&gt;
+      &lt;div className="filters btn-group stack-exception"&gt;
+        &lt;button type="button" className="btn toggle-btn" aria-pressed="true"&gt;
+          &lt;span className="visually-hidden"&gt;Show &lt;/span&gt;
+          &lt;span&gt;all&lt;/span&gt;
+          &lt;span className="visually-hidden"&gt; tasks&lt;/span&gt;
+        &lt;/button&gt;
+        &lt;button type="button" className="btn toggle-btn" aria-pressed="false"&gt;
+          &lt;span className="visually-hidden"&gt;Show &lt;/span&gt;
+          &lt;span&gt;Active&lt;/span&gt;
+          &lt;span className="visually-hidden"&gt; tasks&lt;/span&gt;
+        &lt;/button&gt;
+        &lt;button type="button" className="btn toggle-btn" aria-pressed="false"&gt;
+          &lt;span className="visually-hidden"&gt;Show &lt;/span&gt;
+          &lt;span&gt;Completed&lt;/span&gt;
+          &lt;span className="visually-hidden"&gt; tasks&lt;/span&gt;
+        &lt;/button&gt;
+      &lt;/div&gt;
+      &lt;h2 id="list-heading"&gt;
+        3 tasks remaining
+      &lt;/h2&gt;
+      &lt;ul
+        role="list"
+        className="todo-list stack-large stack-exception"
+        aria-labelledby="list-heading"
+      &gt;
+        &lt;li className="todo stack-small"&gt;
+          &lt;div className="c-cb"&gt;
+            &lt;input id="todo-0" type="checkbox" defaultChecked={true} /&gt;
+            &lt;label className="todo-label" htmlFor="todo-0"&gt;
+              Eat
+            &lt;/label&gt;
+          &lt;/div&gt;
+          &lt;div className="btn-group"&gt;
+            &lt;button type="button" className="btn"&gt;
+              Edit &lt;span className="visually-hidden"&gt;Eat&lt;/span&gt;
+            &lt;/button&gt;
+            &lt;button type="button" className="btn btn__danger"&gt;
+              Delete &lt;span className="visually-hidden"&gt;Eat&lt;/span&gt;
+            &lt;/button&gt;
+          &lt;/div&gt;
+        &lt;/li&gt;
+        &lt;li className="todo stack-small"&gt;
+          &lt;div className="c-cb"&gt;
+            &lt;input id="todo-1" type="checkbox" /&gt;
+            &lt;label className="todo-label" htmlFor="todo-1"&gt;
+              Sleep
+            &lt;/label&gt;
+          &lt;/div&gt;
+          &lt;div className="btn-group"&gt;
+            &lt;button type="button" className="btn"&gt;
+              Edit &lt;span className="visually-hidden"&gt;Sleep&lt;/span&gt;
+            &lt;/button&gt;
+            &lt;button type="button" className="btn btn__danger"&gt;
+              Delete &lt;span className="visually-hidden"&gt;Sleep&lt;/span&gt;
+            &lt;/button&gt;
+          &lt;/div&gt;
+        &lt;/li&gt;
+        &lt;li className="todo stack-small"&gt;
+          &lt;div className="c-cb"&gt;
+            &lt;input id="todo-2" type="checkbox" /&gt;
+            &lt;label className="todo-label" htmlFor="todo-2"&gt;
+              Repeat
+            &lt;/label&gt;
+          &lt;/div&gt;
+          &lt;div className="btn-group"&gt;
+            &lt;button type="button" className="btn"&gt;
+              Edit &lt;span className="visually-hidden"&gt;Repeat&lt;/span&gt;
+            &lt;/button&gt;
+            &lt;button type="button" className="btn btn__danger"&gt;
+              Delete &lt;span className="visually-hidden"&gt;Repeat&lt;/span&gt;
+            &lt;/button&gt;
+          &lt;/div&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;
+  );
+}</pre>
+
+<p><font><font>次に</font></font><code>public/index.html</code>を開いて<font><font>、</font></font><code><a href="/en-US/docs/Web/HTML/Element/title">&lt;title&gt;</a></code><font><font>要素のテキストを</font><font>開い</font><font>て</font></font><code>TodoMatic</code><font><font>に変更します。</font><font>こうすることでアプリ上部の</font></font><code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;</a></code><font><font>と一致し</font><font>ます。</font></font></p>
+
+<pre>&lt;title&gt;TodoMatic&lt;/title&gt;</pre>
+
+<p><font><font>ブラウザが更新されると、次のように表示されます。</font></font></p>
+
+<p><img alt="todo-maticアプリ、スタイルなし、乱雑なラベル、入力、ボタンの混乱を表示" src="https://mdn.mozillademos.org/files/17253/unstyled-app.png" style="border-style: solid; border-width: 1px; height: 743px; width: 838px;"></p>
+
+<p><font><font>まだ見た目が整っていなくて、機能もしていませんが、一旦問題はありません。すぐにスタイルを設定します。</font><font>まず、このJSXと、それがユーザーストーリーにどのように対応するかを考えます。</font></font></p>
+
+<ul>
+ <li><font><font>新しいタスクを書き込むためのと、フォームを送信するためのボタン</font><font>を備えた</font></font><code><a href="/en-US/docs/Web/HTML/Element/form">&lt;form&gt;</a></code>と<code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code><font><font>要素があります。</font></font></li>
+ <li><font><font>タスクのフィルタリングに使用するボタンの配列があります。</font></font></li>
+ <li><font><font>残っているタスクの数を示す見出しがあります。</font></font></li>
+ <li><font><font>3つのタスクがあり、順序付けられていないリストに配置されています。</font><font>各タスクはリストアイテム（</font></font><code><a href="/en-US/docs/Web/HTML/Element/li">&lt;li&gt;</a></code><font><font>）であり、</font><font>タスク</font><font>を編集および削除するためのボタンと、完了時にチェックボックスをオンにするチェックボックスがあります。</font></font></li>
+</ul>
+
+<p><font><font>このフォームにより</font></font><em><font><font>、</font></font></em><font><font>タスク</font><font>を作成できます。また、</font><font>ボタンでフィルタリングもで</font></font><font><font>きます。</font><font>見出しとリストは、</font><font>それら</font><font>を読むためのものです</font><font>。</font><font>現在のところ、タスク</font><font>を編集するためのUIはあまりよくありません</font><font>。大丈夫です。後ほど書き足していきます。</font></font></p>
+
+<h3 id="アクセシビリティ"><font><font>アクセシビリティ</font></font></h3>
+
+<p><font><font>ここでいくつかの変わった属性に気付くかもしれません。</font><font>例えば：</font></font></p>
+
+<pre>&lt;button type="button" className="btn toggle-btn" aria-pressed="true"&gt;
+  &lt;span className="visually-hidden"&gt;Show &lt;/span&gt;
+  &lt;span&gt;all&lt;/span&gt;
+  &lt;span className="visually-hidden"&gt; tasks&lt;/span&gt;
+&lt;/button&gt;</pre>
+
+<p><font><font>ここでは、</font></font><code>aria-pressed</code><font><font>ボタンは2つの状態のいずれかであることができることを（スクリーンリーダーなど）技術的に伝えます(</font></font><code>pressed</code><font><font>か</font></font><code>unpressed</code>)<font><font>。</font></font><code>on</code><font><font>と</font></font><code>off</code>の切替のように考えられます。<code>true</code><font><font>の値を設定</font></font><font><font>すると、デフォルトでボタンが押されます。</font></font></p>
+
+<p><font><font>CSSが含まれていないため、</font><font>この</font></font><code>visually-hidden</code><font><font>クラス</font><font>はまだ意味がありません。</font><font>ただし、スタイルを設定すると、このクラスの要素はすべて、目の見えるユーザーからは隠され、スクリーンリーダーのユーザーは引き続き使用できます。これは、目の見えるユーザーがこれらの単語を必要としないためです。</font><font>それらは、ボタンを使用してスクリーンリーダーのユーザーに役立つ追加の視覚的コンテキストがないユーザーのために、ボタンの機能に関する詳細情報を提供するためにあります。</font></font></p>
+
+<p><font><font>さらに下には</font></font><code><a href="/en-US/docs/Web/HTML/Element/ul">&lt;ul&gt;</a></code><font><font>要素</font><font>があります</font><font>：</font></font></p>
+
+<pre>&lt;ul
+  role="list"
+  className="todo-list stack-large stack-exception"
+  aria-labelledby="list-heading"
+&gt;</pre>
+
+<p><code>role</code><font><font>属性は、タグが表す要素の種類を説明するのに役立ちます。</font></font><code>&lt;ul&gt;</code><font><font>はデフォルトではリストのように扱われますが、これから追加するスタイルはその機能を壊します。</font><font>この役割は、</font></font><code>&lt;ul&gt;</code><font><font>  要素の</font><font>「リスト」の意味を復元し</font><font>ます。</font><font>これが必要な理由について詳しく知りたい場合は、</font></font><font><font><a href="https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html">Scott O'Haraの記事「Fixing Lists」</a>を</font></font><font><font>チェックしてください</font><font>。</font></font></p>
+
+<p><font><font>この</font></font><code>aria-labelledby</code><font><font>属性は、リストの見出しをその下にあるリストの目的を説明するラベルとして扱っていることを伝えます。</font><font>この関連付けを行うと、リストの情報が豊富になり、スクリーンリーダーを通じてユーザーがリストの目的を理解しやすくなります。</font></font></p>
+
+<p><font><font>最後に、リスト項目のラベルと入力には、JSXに固有のいくつかの属性があります。</font></font></p>
+
+<pre>&lt;input id="todo-0" type="checkbox" defaultChecked={true} /&gt;
+&lt;label className="todo-label" htmlFor="todo-0"&gt;
+  Eat
+&lt;/label&gt;</pre>
+
+<p><code>&lt;input/ &gt;</code><font><font>タグ</font><font>の</font></font><code>defaultChecked</code><font><font>属性は、デフォルトで</font></font><font><font>このチェックボックスをチェックするようにReactに指示します。通常のHTMLの場合</font><font>と同様に、</font></font><code>checked</code><font><font>を使用する</font><font>と、Reactは、チェックボックスでのイベントの処理に関する警告をブラウザーコンソールに表示しますが、これは望ましくありません。</font><font>とりあえず、これについてあまり心配しないでください。後でイベントを使用するときにこれについて説明します。</font></font></p>
+
+<p><font><font>この</font></font><code>htmlFor</code><font><font>属性は、HTMLで使用される</font></font><code>for</code><font><font>属性に対応してい</font><font>ます。</font></font><code>for</code><font><font>は予約語であるため、JSXでは属性として</font><font>使用できません</font><font>。そのためReactは</font></font><code>for</code>の代わりに<code>htmlFor</code><font><font>を使用し</font><font>ます。</font></font></p>
+
+<p><font><font>ノート：</font></font></p>
+
+<ul>
+ <li><font><font>JSX属性で</font><font>ブール値（</font></font><code>true</code><font><font>および</font></font><code>false</code><font><font>）</font><font>を使用するには</font><font>、それらを中括弧で囲む必要があります。</font><font>あなたが書く場合は</font></font><code>defaultChecked="true"</code><font><font>、の値は</font></font><code>defaultChecked</code><font><font>ではなくなり、文字列リテラル</font></font><code>"true"</code><font><font>になります。覚えておいてください—これは実際にはHTMLではなくJavaScriptです！</font></font></li>
+ <li>先ほどのコードで使われたいた<code>aria-pressed</code>属性は<code>"true"</code>をもっていましたが、これはcheckedのようにブール値としてのtrueではありません。</li>
+</ul>
+
+<h3 id="スタイルを実装する"><font><font>スタイルを実装する</font></font></h3>
+
+<p><font><font>次のCSSコードをに貼り付けて、</font></font><code>src/index.css</code>を<font><font>現在あるものを置き換えます。</font></font></p>
+
+<pre>/* RESETS */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+*:focus {
+  outline: 3px dashed #228bec;
+  outline-offset: 0;
+}
+html {
+  font: 62.5% / 1.15 sans-serif;
+}
+h1,
+h2 {
+  margin-bottom: 0;
+}
+ul {
+  list-style: none;
+  padding: 0;
+}
+button {
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+}
+button::-moz-focus-inner {
+  border: 0;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+button,
+input {
+  overflow: visible;
+}
+input[type="text"] {
+  border-radius: 0;
+}
+body {
+  width: 100%;
+  max-width: 68rem;
+  margin: 0 auto;
+  font: 1.6rem/1.25 Arial, sans-serif;
+  background-color: #f5f5f5;
+  color: #4d4d4d;
+}
+@media screen and (min-width: 620px) {
+  body {
+    font-size: 1.9rem;
+    line-height: 1.31579;
+  }
+}
+/*END RESETS*/
+/* GLOBAL STYLES */
+.form-group &gt; input[type="text"] {
+  display: inline-block;
+  margin-top: 0.4rem;
+}
+.btn {
+  padding: 0.8rem 1rem 0.7rem;
+  border: 0.2rem solid #4d4d4d;
+  cursor: pointer;
+  text-transform: capitalize;
+}
+.btn.toggle-btn {
+  border-width: 1px;
+  border-color: #d3d3d3;
+}
+.btn.toggle-btn[aria-pressed="true"] {
+  text-decoration: underline;
+  border-color: #4d4d4d;
+}
+.btn__danger {
+  color: #fff;
+  background-color: #ca3c3c;
+  border-color: #bd2130;
+}
+.btn__filter {
+  border-color: lightgrey;
+}
+.btn__primary {
+  color: #fff;
+  background-color: #000;
+}
+.btn-group {
+  display: flex;
+  justify-content: space-between;
+}
+.btn-group &gt; * {
+  flex: 1 1 49%;
+}
+.btn-group &gt; * + * {
+  margin-left: 0.8rem;
+}
+.label-wrapper {
+  margin: 0;
+  flex: 0 0 100%;
+  text-align: center;
+}
+.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}
+[class*="stack"] &gt; * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.stack-small &gt; * + * {
+  margin-top: 1.25rem;
+}
+.stack-large &gt; * + * {
+  margin-top: 2.5rem;
+}
+@media screen and (min-width: 550px) {
+  .stack-small &gt; * + * {
+    margin-top: 1.4rem;
+  }
+  .stack-large &gt; * + * {
+    margin-top: 2.8rem;
+  }
+}
+.stack-exception {
+  margin-top: 1.2rem;
+}
+/* END GLOBAL STYLES */
+.todoapp {
+  background: #fff;
+  margin: 2rem 0 4rem 0;
+  padding: 1rem;
+  position: relative;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1);
+}
+@media screen and (min-width: 550px) {
+  .todoapp {
+    padding: 4rem;
+  }
+}
+.todoapp &gt; * {
+  max-width: 50rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.todoapp &gt; form {
+  max-width: 100%;
+}
+.todoapp &gt; h1 {
+  display: block;
+  max-width: 100%;
+  text-align: center;
+  margin: 0;
+  margin-bottom: 1rem;
+}
+.label__lg {
+  line-height: 1.01567;
+  font-weight: 300;
+  padding: 0.8rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+.input__lg {
+  padding: 2rem;
+  border: 2px solid #000;
+}
+.input__lg:focus {
+  border-color: #4d4d4d;
+  box-shadow: inset 0 0 0 2px;
+}
+[class*="__lg"] {
+  display: inline-block;
+  width: 100%;
+  font-size: 1.9rem;
+}
+[class*="__lg"]:not(:last-child) {
+  margin-bottom: 1rem;
+}
+@media screen and (min-width: 620px) {
+  [class*="__lg"] {
+    font-size: 2.4rem;
+  }
+}
+.filters {
+  width: 100%;
+  margin: unset auto;
+}
+/* Todo item styles */
+.todo {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.todo &gt; * {
+  flex: 0 0 100%;
+}
+.todo-text {
+  width: 100%;
+  min-height: 4.4rem;
+  padding: 0.4rem 0.8rem;
+  border: 2px solid #565656;
+}
+.todo-text:focus {
+  box-shadow: inset 0 0 0 2px;
+}
+/* CHECKBOX STYLES */
+.c-cb {
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  font-size: 1.6rem;
+  line-height: 1.25;
+  display: block;
+  position: relative;
+  min-height: 44px;
+  padding-left: 40px;
+  clear: left;
+}
+.c-cb &gt; label::before,
+.c-cb &gt; input[type="checkbox"] {
+  box-sizing: border-box;
+  top: -2px;
+  left: -2px;
+  width: 44px;
+  height: 44px;
+}
+.c-cb &gt; input[type="checkbox"] {
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  margin: 0;
+  opacity: 0;
+}
+.c-cb &gt; label {
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  display: inline-block;
+  margin-bottom: 0;
+  padding: 8px 15px 5px;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+.c-cb &gt; label::before {
+  content: "";
+  position: absolute;
+  border: 2px solid currentColor;
+  background: transparent;
+}
+.c-cb &gt; input[type="checkbox"]:focus + label::before {
+  border-width: 4px;
+  outline: 3px dashed #228bec;
+}
+.c-cb &gt; label::after {
+  box-sizing: content-box;
+  content: "";
+  position: absolute;
+  top: 11px;
+  left: 9px;
+  width: 18px;
+  height: 7px;
+  transform: rotate(-45deg);
+  border: solid;
+  border-width: 0 0 5px 5px;
+  border-top-color: transparent;
+  opacity: 0;
+  background: transparent;
+}
+.c-cb &gt; input[type="checkbox"]:checked + label::after {
+  opacity: 1;
+}</pre>
+
+<p><font><font>保存してブラウザーを確認すると、アプリに適切なスタイルが設定されているはずです。</font></font></p>
+
+<h2 id="まとめ">まとめ</h2>
+
+<p><font><font>これで、todoリストアプリはまるで実際のアプリのように見えます。</font><font>問題は、実際には何も動かないことです。</font><font>次の章で修正を始めます！</font></font></p>
+
+<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+</ul>
+
+<ul>
+ <li>
+  <ul>
+   <li></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
new file mode 100644
index 0000000000..4277a7ba9d
--- /dev/null
+++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
@@ -0,0 +1,301 @@
+---
+title: Getting started with Vue
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started
+tags:
+  - Beginner
+  - Frameworks
+  - Installation
+  - JavaScript
+  - Learn
+  - client-side
+  - vue
+translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p class="summary">Now let's introduce Vue, the third of our frameworks. In this article we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>
+    <p>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.</p>
+
+    <p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To setup a local Vue development environment, create a starter app, and understand the basics of how it works.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="より明確な_Vue">より明確な Vue</h2>
+
+<p>Vue is a modern JavaScript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use Vue to enhance existing HTML. This lets you use Vue as a drop-in replacement for a library like <a href="/en-US/docs/Glossary/jQuery">JQuery</a>.</p>
+
+<p>That being said, you can also use Vue to write entire Single Page Applications (SPAs). This allows you to create markup managed entirely by Vue, which can improve developer experience and performance when dealing with complex applications. It also allows you to take advantage of libraries for client-side routing and state management when you need to. Additionally, Vue takes a "middle ground" approach to tooling like client-side routing and state management. While the Vue core team maintains suggested libraries for these functions, they are not directly bundled into Vue. This allows you to select a different routing/state management library if they better fit your application.</p>
+
+<p>In addition to allowing you to progressively integrate Vue into your applications, Vue also provides a progressive approach to writing markup. Like most frameworks, Vue lets you create reusable blocks of markup via components. Most of the time, Vue components are written using a special HTML template syntax. When you need more control than the HTML syntax allows, you can write JSX or plain JavaScript functions to define your  components.</p>
+
+<p>As you work through this tutorial, you might want to keep the <a href="https://vuejs.org/v2/guide/">Vue guide</a> and <a href="https://vuejs.org/v2/api/">API documentation</a> open in other tabs, so you can refer to them if you want more information on any sub topic.<br>
+ For a good (but potentially biased) comparison between Vue and many of the other frameworks, see <a href="https://vuejs.org/v2/guide/comparison.html">Vue Docs: Comparison with Other Frameworks</a>.</p>
+
+<h2 id="取り付け">取り付け</h2>
+
+<p>To use Vue in an existing site, you can drop one of the following <code><a href="/en-US/docs/Web/HTML/Element/script">&lt;script&gt;</a></code> elements onto a page. This allows you to start using Vue on existing sites, which is why Vue prides itself on being a progressive framework. This is a great option when migrating an existing project using a library like JQuery to Vue. With this method, you can use a lot of the core features of Vue, such as the attributes, custom components, and data-management.</p>
+
+<ul>
+ <li>
+  <p>Development Script (Unoptimized, but includes console warnings. Great for development</p>
+
+  <pre class="brush: html notranslate">&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>
+  <p>Production Script (Optimized version, minimal console warnings. It is recommended that you specify a version number when including Vue on your site so that any framework updates do not break your live site without you knowing.)</p>
+
+  <pre class="brush: html notranslate">&lt;script src="https://cdn.jsdelivr.net/npm/vue@2"&gt;&lt;/script&gt;</pre>
+ </li>
+</ul>
+
+<p>However, this approach has some limitations. To build more complex apps, you’ll want to use the <a href="https://www.npmjs.com/package/vue">Vue NPM package</a>. This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package &amp; the CLI you will need:</p>
+
+<ol>
+ <li>Node.js 8.11+ installed.</li>
+ <li>npm or yarn.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you don't have the above installed, find out <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups">more about installing npm and Node.js</a> here.</p>
+</div>
+
+<p>To install the CLI, run the following command in your terminal:</p>
+
+<pre class="brush: bash notranslate">npm install --global @vue/cli</pre>
+
+<p>Or if you'd prefer to use yarn:</p>
+
+<pre class="brush: bash notranslate">yarn global add @vue/cli</pre>
+
+<p>Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run <code>vue create &lt;project-name&gt;</code>. The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.</p>
+
+<p>We’ll look at using this below.</p>
+
+<h2 id="新規のプロジェクトを初期化する">新規のプロジェクトを初期化する</h2>
+
+<p>To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using the Vue CLI to create a new app framework to build our app into. Follow the steps below:</p>
+
+<ol>
+ <li>In terminal, <code>cd</code> to where you'd like to create your sample app, then run <code>vue create moz-todo-vue</code>.</li>
+ <li>Use the arrow keys and <kbd>Enter</kbd> to select the "Manually select features" option.</li>
+ <li>The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press <kbd>Enter</kbd> to proceed.</li>
+ <li>Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit <kbd>Enter</kbd> again. This will help us catch common errors, but not be overly opinionated.</li>
+ <li>Next you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit <kbd>Enter</kbd> to continue.</li>
+ <li>Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's <code>package.json</code> file. Select "In dedicated config files" and push <kbd>Enter</kbd>.</li>
+ <li>Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type <kbd>y</kbd> , otherwise type <kbd>n</kbd>.</li>
+</ol>
+
+<p>The CLI will now begin scaffolding out your project, and installing all of your dependencies.</p>
+
+<p>If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag <code>--packageManager=&lt;package-manager&gt;</code>, when you run <code>vue create</code>.  So if you wanted to create the <code>moz-todo-vue</code> project with npm and you'd previously chosen yarn, you’d run <code>vue create moz-todo-vue --packageManager=npm</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: We've not gone over all of the options here, but you can <a href="https://cli.vuejs.org">find more information on the CLI</a> in the Vue docs.</p>
+</div>
+
+<h2 id="プロジェクトの構造">プロジェクトの構造</h2>
+
+<p>If everything went successfully, the CLI should have created a series of files and directories for your project. The most significant ones are as follows:</p>
+
+<ul>
+ <li><code>.eslintrc.js</code>: This is a config file for <a href="https://eslint.org/">eslint</a>. You can use this to manage your linting rules.</li>
+ <li><code>babel.config.js</code>: This is the config file for <a href="https://babeljs.io/">Babel</a>, which transforms modern JavaScript features being used in development code into older syntax that is more cross-browser compatible in production code. You can register additional babel plugins in this file.</li>
+ <li><code>.browserslistrc</code>: This is a config for <a href="https://github.com/browserslist/browserslist">Browserslist</a>. You can use this to control which browsers your tooling optimizes for.</li>
+ <li><code>public</code>: This directory contains static assets that are published, but not processed by <a href="https://webpack.js.org/">Webpack</a> during build (with one exception; <code>index.html</code> gets some processing).
+  <ul>
+   <li><code>favicon.ico</code>: This is the favicon for your app. Currently, it's the Vue logo.</li>
+   <li><code>index.html</code>: This is the template for your app. Your Vue app is run from this HTML page, and you can use lodash template syntax to interpolate values into it.
+    <div class="note"><strong>Note</strong>: this is not the template for managing the layout of your application — this template is for managing static HTML that sits outside of your Vue app. Editing this file typically only occurs in advanced use cases.</div>
+   </li>
+  </ul>
+ </li>
+ <li><code>src</code>: This directory contains the core of your Vue app.
+  <ul>
+   <li><code>main.js</code>: this is the entry point to your application. Currently, this file initializes your Vue application and signifies which HTML element in the <code>index.html</code> file your app should be attached to. This file is often where you register global components or additional Vue libraries.</li>
+   <li><code>App.vue</code>: this is the top-level component in your Vue app. See below for more explanation of Vue components.</li>
+   <li><code>components</code>: this directory is where you keep your components. Currently it just has one example component.</li>
+   <li><code>assets</code>: This directory is for storing static assets like CSS and images. Because these files are in the source directory, they can be processed by Webpack. This means you can use pre-processors like <a href="https://sass-lang.com/">Sass/SCSS</a> or <a href="https://stylus-lang.com/">Stylus</a>.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a <code>views</code> directory).</p>
+</div>
+
+<h2 id=".vue_ファイル_単一ファイルコンポーネント">.vue ファイル (単一ファイルコンポーネント)</h2>
+
+<p>Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.</p>
+
+<p>While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using <a href="https://vuejs.org/v2/guide/single-file-components.html">Single File Components</a>, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in <code>.vue</code>. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.</p>
+
+<p>As a bonus, projects created with the Vue CLI are configured to use <code>.vue</code> files with Webpack out of the box. In fact, if you look inside the <code>src</code> folder in the project we created with the CLI, you'll see your first <code>.vue</code> file: <code>App.vue</code>.</p>
+
+<p>Let's explore this now.</p>
+
+<h3 id="App.vue">App.vue</h3>
+
+<p>Open your <code>App.vue</code> file — you’ll see that it has three parts: <code>&lt;template&gt;</code>, <code>&lt;script&gt;</code>, and <code>&lt;style&gt;</code>, which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.</p>
+
+<p><code>&lt;template&gt;</code> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: By setting the <code>lang</code> attribute on the <code>&lt;template&gt;</code> tag, you can use Pug template syntax instead of standard HTML — <code>&lt;template lang="pug"&gt;</code>. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.</p>
+</div>
+
+<p><code>&lt;script&gt;</code> contains all of the non-display logic of your component. Most importantly, your <code>&lt;script&gt;</code> tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a <code>render()</code> function.</p>
+
+<p>In the case of <code>App.vue</code>, our default export sets the name of the component to <code>app</code> and registers the <code>HelloWorld</code> component by adding it into the <code>components</code> property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.</p>
+
+<pre class="brush: js notranslate">import HelloWorld from './components/HelloWorld.vue';
+
+export default {
+  name: 'app',
+  components: {
+    //You can register components locally here.
+    HelloWorld
+  }
+};</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you want to use <a href="https://www.typescriptlang.org/">TypeScript</a> syntax, you need to set the <code>lang</code> attribute on the <code>&lt;script&gt;</code> tag to signify to the compiler that you're using TypeScript — <code>&lt;script lang="ts"&gt;</code>.</p>
+</div>
+
+<p><code>&lt;style&gt;</code> is where you write your CSS for the component. If you add a <code>scoped</code> attribute — <code>&lt;style scoped&gt;</code> — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you select a CSS pre-processor when creating the project via the CLI, you can add a <code>lang</code> attribute to the <code>&lt;style&gt;</code> tag so that the contents can be processed by Webpack at build time. For example, <code>&lt;style lang="scss"&gt;</code> will allow you to use SCSS syntax in your styling information.</p>
+</div>
+
+<h2 id="アプリをローカルで実行する">アプリをローカルで実行する</h2>
+
+<p>The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a <code>serve</code> command to the project’s <code>package.json</code> file as an npm script, so you can easily run it.</p>
+
+<p>In your terminal, try running <code>npm run serve</code> (or <code>yarn serve</code> if you prefer yarn). Your terminal should output something like the following:</p>
+
+<pre class="notranslate">INFO  Starting development server...
+98% after emitting CopyPlugin
+
+ DONE  Compiled successfully in 18121ms
+
+  App running at:
+  - Local:   &lt;http://localhost:8080/&gt;
+  - Network: &lt;http://192.168.1.9:8080/&gt;
+
+  Note that the development build is not optimized.
+  To create a production build, run npm run build.</pre>
+
+<p>If you navigate to the “local” address in a new browser tab (this should be something like <code>http://localhost:8080</code> as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.</p>
+
+<p><img alt="default vue app render, with vue logo, welcome message, and some documentation links" src="https://mdn.mozillademos.org/files/17240/vue-default-app.png" style="border-style: solid; border-width: 1px; height: 779px; width: 1600px;"></p>
+
+<h2 id="いくつかの変更を加える">いくつかの変更を加える</h2>
+
+<p>Let's make our first change to the app — we’ll delete the Vue logo. Open the <code>App.vue</code> file, and delete the <code><a href="/en-US/docs/Web/HTML/Element/img">&lt;img&gt;</a></code> element from the template section:</p>
+
+<pre class="brush: html notranslate"><span class="author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z8h7gz67ziz76zcz77zz80zz71zncfz69zz69ziaz82zz71zz72zhz77zz122zz90z14mcyd">&lt;img alt="Vue logo" src="./assets/logo.png"&gt;</span></pre>
+
+<p>If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the <code>HelloWorld</code> component from our template.</p>
+
+<p>First of all delete this line:</p>
+
+<pre class="brush: html notranslate">&lt;HelloWorld msg="Welcome to Your Vue.js App"/&gt;</pre>
+
+<p>If you save your <code>App.vue</code> file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the <code>&lt;script&gt;</code> element that import and register the component:</p>
+
+<p>Delete these lines now:</p>
+
+<pre class="brush: js notranslate">import HelloWorld from './components/HelloWorld.vue'</pre>
+
+<pre class="brush: js notranslate">components: {
+  HelloWorld
+}</pre>
+
+<p>Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <code>&lt;template&gt;</code>.</p>
+
+<p>Let’s add a new <code>&lt;h1&gt;</code> inside <code>&lt;div id="app"&gt;</code>. Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:</p>
+
+<pre class="brush: html notranslate">&lt;template&gt;
+  &lt;div id="app"&gt;
+    &lt;h1&gt;To-Do List&lt;/h1&gt;
+  &lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<p><code>App.vue</code> will now show our heading, as you'd expect.</p>
+
+<h2 id="概要">概要</h2>
+
+<p>Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.</p>
+
+<p>With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.</p>
+
+<p>In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.</p>
+
+<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>
+
+<h2 id="このモジュールでは">このモジュールでは</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li>
+  </ul>
+ </li>
+</ul>