From 4ebd4d6726ef91b985f2cd3d1ca22eb19525ad06 Mon Sep 17 00:00:00 2001 From: Yuki Shindo Date: Sun, 25 Jul 2021 20:03:22 +0900 Subject: Fix Japanese text (React ToDoリストをはじめる) (#1685) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Remove font tag * Fix text(React_todo_list_beginning - ja) --- .../react_todo_list_beginning/index.html | 116 ++++++++++----------- 1 file changed, 58 insertions(+), 58 deletions(-) (limited to 'files/ja/learn') 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 index 6aefd2dc02..7facbcb5ef 100644 --- 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 @@ -11,78 +11,78 @@ translation_of: >-

{{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")}}

-

たとえば、Reactで概念実証を作成する必要があるとします。これは、ユーザーが作業したいタスクを追加、編集、削除したり、タスクを削除せずに完了としてマークしたりできるアプリです。この記事では、基本的なAppコンポーネントの構造とスタイルを設定し、個々のコンポーネントの定義と変更に対応できるようにします。これについては後で追加します。

+

例えば、React でアイディアを検証するためにアプリを試作してみることになったとします(いわゆる、Proof of Concept - 概念実証)。ユーザーが作業したいタスクを追加、編集、削除することができ、また、タスクを削除せずに完了とすることができるアプリです。この記事では、基本的な App コンポーネントの構造とスタイルを整え、後から追加する個々のコンポーネントの定義とインタラクティブな機能の準備を行っていきます。

-

注：コードをGoogleのバージョンと照合する必要がある場合は、todo-reactリポジトリでサンプルのReactアプリコードの完成版を見つけることができます。実行中のバージョンについては、https：//mdn.github .io / todo-react-build /を参照してください。

+

注：コードを我々のバージョンと照らし合わせる必要がある場合は、我々の todo-react リポジトリからサンプルの React アプリコードの完成版を確認することができます。実際に動作しているアプリのバージョンについては、https://mdn.github.io/todo-react-build/ を参照してください。

- + - - + +
前提条件：前提条件： -

コアHTML、CSS、JavaScriptの言語に精通していること、ターミナル/マンドコラインに関すてる知識。

+

HTML 、CSS 、JavaScript の基本的な知識を持っていること。また ターミナル/コマンドライン に関する知識を持っていること。
目的：todoリストのケーススタディを紹介し、基本的なApp構造とスタイルを整える。目的：todoリストの実際の利用例を紹介し、基本的なアプリの構造とスタイルを整えていきます。
-

アプリの「ユーザーストーリー」

+

アプリの「ユーザーストーリー」

-

ソフトウェア開発では、ユーザーストーリーはユーザーの観点から実行可能な目標を指します。作業を開始する前にユーザーストーリーを定義すると、作業に集中することができます。今回、私たちのアプリは以下のストーリーを実現する必要があります：

+

ソフトウェア開発においてユーザーストーリーとは、ユーザーの視点から見た実行可能な目標のことを指します。作業を始める前にユーザーストーリーを定義することで、作業に集中することができます。私たちのアプリは、次のようなストーリーを満たす必要があります：

-

ユーザーができること

+

ユーザーができること

-

これらのストーリーに1つずつ取り組みます。

+

これらのストーリーに1つずつ取り組んでいきます。

-

プロジェクトに入る前に現状整理

+

プロジェクトに入る前に現状整理

-

create-react-appは、プロジェクトでまったく使用しないファイルをいくつか作成しています。

+

create-react-app を用いた場合、今回のプロジェクトでは使用しないファイルがいくつか作られます。

-

次に、以下のコマンドをコピーしてターミナルに貼り付け、不要なファイルをいくつか削除します。アプリのルートディレクトリから開始していることを確認してください。

+

次に、以下のコマンドをコピーしてターミナルに貼り付け、不要なファイルをいくつか削除します。アプリのルートディレクトリから開始していることを確認してください。

-
# Move into the src directory of your project
+
# 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 ..

 
-
ノート：

+
注意点：

 
 
 
-
はじめのプロジェクトコード

+
プロジェクトの出発地点のコード

 
-
このプロジェクトの開始点として、次の2つを提供します。現在持っているものを置き換えるApp関数と、アプリのスタイルを設定するCSSです。

+
このプロジェクトの出発地点として、次の2つを用意します。今あるものを置き換えた App() 関数と、アプリのスタイルを設定するための CSS です。

 
-
JSX

+
JSX

 
-
次のスニペットをクリップボードにコピーして貼り付けApp.js、既存のApp()関数を置き換えます。

+
次のスニペットをクリップボードにコピーして App.js に貼り付け、既存の App() 関数を置き換えます。

 
-
function App(props) {
+
function App(props) {
   return (
     <div className="todoapp stack-large">
       <h1>TodoMatic</h1>
@@ -181,74 +181,74 @@ cd ..

   );
 }

 
-
次にpublic/index.htmlを開いて、<title>要素のテキストを開いてTodoMaticに変更します。こうすることでアプリ上部の<h1>と一致します。

+
次に public/index.html を開いて、<title>要素のテキストを TodoMatic に変更します。こうすることでアプリ上部の <h1> と一致します。

 
-
<title>TodoMatic</title>

+
<title>TodoMatic</title>

 
-
ブラウザが更新されると、次のように表示されます。

+
ブラウザを更新すると、次のように表示されます。

 
 
todo-maticアプリ、スタイルなし、乱雑なラベル、入力、ボタンの混乱を表示

 
-
まだ見た目が整っていなくて、機能もしていませんが、一旦問題はありません。すぐにスタイルを設定します。まず、このJSXと、それがユーザーストーリーにどのように対応するかを考えます。

+
まだ見た目が整っていなくて、機能もしていませんが、一旦問題はありません。すぐにスタイルを設定します。まず現在の JSX と、それがユーザーストーリーにどのように対応しているかを考えてみます。

 
 
 
-
このフォームにより、タスクを作成できます。また、ボタンでフィルタリングもできます。見出しとリストは、それらを読むためのものです。現在のところ、タスクを編集するためのUIはあまりよくありません。大丈夫です。後ほど書き足していきます。

+
フォームはタスクを作成するためのもので、ボタンはタスクをフィルタリングするためのもの、また見出しとリストはタスクを読むためのものです。今のところタスクを編集するための UI は分かりづらいですが、そちらについては後でコードを書き足していきます。

 
-
アクセシビリティ

+
アクセシビリティ

 
-
ここでいくつかの変わった属性に気付くかもしれません。例えば：

+
ここでいくつかの珍しい属性に気付くかもしれません。例えば：

 
-
<button type="button" className="btn toggle-btn" aria-pressed="true">
+
<button type="button" className="btn toggle-btn" aria-pressed="true">
   <span className="visually-hidden">Show </span>
   <span>all</span>
   <span className="visually-hidden"> tasks</span>
 </button>

 
-
ここでは、aria-pressedボタンは2つの状態のいずれかであることができることを（スクリーンリーダーなど）技術的に伝えます(pressedかunpressed)。onとoffの切替のように考えられます。trueの値を設定すると、デフォルトでボタンが押されます。

+
aria-pressed は支援技術（スクリーン・リーダーなど）に対して、ボタンが押された状態と押されていない状態の2つの状態のうちの1つであることを伝えます。これは on と off (あるいは pressed か unpressed )を切り替えるようなものだと考えてください。 true の値を設定すると、デフォルトでボタンが押された状態となります。

 
-
CSSが含まれていないため、このvisually-hiddenクラスはまだ意味がありません。ただし、スタイルを設定すると、このクラスの要素はすべて、目の見えるユーザーからは隠され、スクリーンリーダーのユーザーは引き続き使用できます。これは、目の見えるユーザーがこれらの単語を必要としないためです。それらは、ボタンを使用してスクリーンリーダーのユーザーに役立つ追加の視覚的コンテキストがないユーザーのために、ボタンの機能に関する詳細情報を提供するためにあります。

+
visually-hidden というクラスについては、CSS を記述していないので、まだ意味はありません。ただし、スタイルを設定すると、このクラスの要素はすべて目の見えるユーザーからは隠され、スクリーンリーダーのユーザーは引き続き使用できるようになります。これらの単語は、目の見えるユーザーには必要ありません。視覚的な文脈を持たないスクリーンリーダーのユーザーに、ボタンが何をするのかという情報を提供するためにあります。

 
-
さらに下には<ul>要素があります：

+
さらに下には <ul> 要素があります：

 
-
<ul
+
<ul
   role="list"
   className="todo-list stack-large stack-exception"
   aria-labelledby="list-heading"
 >

 
-
role属性は、タグが表す要素の種類を説明するのに役立ちます。<ul>はデフォルトではリストのように扱われますが、これから追加するスタイルはその機能を壊します。この役割は、<ul>  要素の「リスト」の意味を復元します。これが必要な理由について詳しく知りたい場合は、Scott O'Haraの記事「Fixing Lists」をチェックしてください。

+
role属性は、タグがどのような要素を表しているのかを説明するのに役立ちます。 <ul> はデフォルトではリストのように扱われますが、これから追加するスタイルはその機能を壊します。この role 属性は、<ul>  要素に「リスト」であることを再度伝えます。なぜこれが必要な理由なのか詳しく知りたい方は、Scott O'Haraの記事「Fixing Lists」 をご覧ください。

 
-
このaria-labelledby属性は、リストの見出しをその下にあるリストの目的を説明するラベルとして扱っていることを伝えます。この関連付けを行うと、リストの情報が豊富になり、スクリーンリーダーを通じてユーザーがリストの目的を理解しやすくなります。

+
aria-labelledby 属性は、リストの見出しをその下にあるリストの目的を説明するラベルとして扱っていることを支援技術に伝えます。この関連付けを行うことで、リストの情報がより豊富になり、スクリーンリーダーのユーザーがリストの目的をよりよく理解できるようになります。

 
-
最後に、リスト項目のラベルと入力には、JSXに固有のいくつかの属性があります。

+
最後に、リスト項目のラベルと入力には、JSX特有の属性がいくつかあります。

 
-
<input id="todo-0" type="checkbox" defaultChecked={true} />
+
<input id="todo-0" type="checkbox" defaultChecked={true} />
 <label className="todo-label" htmlFor="todo-0">
   Eat
 </label>

 
-
<input/ >タグのdefaultChecked属性は、デフォルトでこのチェックボックスをチェックするようにReactに指示します。通常のHTMLの場合と同様に、checkedを使用すると、Reactは、チェックボックスでのイベントの処理に関する警告をブラウザーコンソールに表示しますが、これは望ましくありません。とりあえず、これについてあまり心配しないでください。後でイベントを使用するときにこれについて説明します。

+
<input/ > タグの defaultChecked 属性は、React にこのチェックボックスを最初にチェックするように指示します。通常の HTML のように checked を使用した場合、React はチェックボックスのイベント処理に関連する警告をブラウザコンソールに表示させます。今のところは気にしないで大丈夫です。後ほどイベントを使用するときにこれについては説明します。

 
-
このhtmlFor属性は、HTMLで使用されるfor属性に対応しています。forは予約語であるため、JSXでは属性として使用できません。そのためReactはforの代わりにhtmlForを使用します。

+
また htmlFor 属性は、HTMLで使用されている for 属性に対応しています。 JSX では for は予約語であるため、属性として使用できません。そのため React は for の代わりに htmlFor を使用します。

 
-
ノート：

+
注意点：

 
 
    
- 
  • JSX属性でブール値（trueおよびfalse）を使用するには、それらを中括弧で囲む必要があります。あなたが書く場合はdefaultChecked="true"、の値はdefaultCheckedではなくなり、文字列リテラル"true"になります。覚えておいてください—これは実際にはHTMLではなくJavaScriptです！
    • 
- 
  • 先ほどのコードで使われたいたaria-pressed属性は"true"をもっていましたが、これはcheckedのようにブール値としてのtrueではありません。
    • 
+ 
  • JSX の属性でブール値（ true および false ）を使用するには、それらを中括弧で囲む必要があります。もし defaultChecked="true" と書いた場合、defaultChecked の値は文字列リテラルである "true" になります。これは実際には HTML ではなく JavaScript であることを忘れないでください。
    • 
+ 
  • 先ほどのコードで使われていた aria-pressed 属性は "true" でしたが、これは checked のようにブール値としての true とは扱われないためです。
    • 
 

 
-
スタイルを実装する

+
スタイルを実装する

 
-
次のCSSコードをに貼り付けて、src/index.cssを現在あるものを置き換えます。

+
次のCSSコードを src/index.css に貼り付けて、現在のコードを置き換えてください。

 
-
/* RESETS */
+
/* RESETS */
 *,
 *::before,
 *::after {
@@ -541,11 +541,11 @@ body {
   opacity: 1;
 }

 
-
保存してブラウザーを確認すると、アプリに適切なスタイルが設定されているはずです。

+
保存してブラウザーを確認すると、アプリに適切なスタイルが設定されているはずです。

 
 
まとめ

 
-
これで、todoリストアプリはまるで実際のアプリのように見えます。問題は、実際には何も動かないことです。次の章で修正を始めます！

+
これで、私達の todoリストアプリは実際のアプリのようになりました。ただし、まだ実際には何も動きません。次の章で修正をしていきます。

 
 
{{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")}}

 
-- 
cgit v1.2.3-54-g00ecf