From 7cf251b3cbe65d9558276ca28123e505211d03c4 Mon Sep 17 00:00:00 2001 From: Yuuki Ebihara Date: Wed, 30 Dec 2020 19:26:58 +0900 Subject: [PATCH 1/6] translate 1-data-types into japanese --- .../1-data-types/translations/README.ja.md | 196 ++++++++++++++++++ 2-js-basics/translations/README.ja.md | 14 ++ 2 files changed, 210 insertions(+) create mode 100644 2-js-basics/1-data-types/translations/README.ja.md create mode 100644 2-js-basics/translations/README.ja.md diff --git a/2-js-basics/1-data-types/translations/README.ja.md b/2-js-basics/1-data-types/translations/README.ja.md new file mode 100644 index 00000000..9892d509 --- /dev/null +++ b/2-js-basics/1-data-types/translations/README.ja.md @@ -0,0 +1,196 @@ +# JavaScript の基本: データ型 + +![JavaScript Basics - Data types](images/webdev101-js-datatypes.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## レクチャー前クイズ +[レクチャー前クイズ](.github/pre-lecture-quiz.md) + +このレッスンでは、Web 上でインタラクティブな機能を提供する言語である JavaScript の基礎を学びます。 + +[![Data types in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript") + + +まず、変数とそれを埋めるデータ型について説明しましょう! + +## 変数 + +変数には、コード全体で使用したり変更したりできる値が格納されています。 + +変数の作成と **宣言** には、次のような構文 **[キーワード] [名前]** があります。の2つの部分で構成されています。 + +- **キーワード**。キーワードは `let` または `var` です。 + + > 注: `let` というキーワードは ES6 で導入されたもので、変数に _ブロックスコープ_ と呼ばれるものを与えます。`var` よりも `let` を使うことをお勧めします。ブロックスコープについては、今後のパートで詳しく説明します。 +- **変数名**、これは自分で選んだ名前です。 + +### タスク - 変数を使って作業する + +1. **変数の宣言**. `let` キーワードを使って変数を宣言してみましょう。 + + ```javascript + let myVariable; + ``` + + `myVariable` は `let` キーワードを使用して宣言されました。これは現在のところ値を持っていません。 + +1. **値を代入します**。値を `=` 演算子で変数に格納し、その後に期待される値を指定します。 + + ```javascript + myVariable = 123; + ``` + + > 注: このレッスンで `=` を使うということは、変数に値を設定するために使われる「代入演算子」を使うことを意味します。これは平等を示すものではありません。 + + `myVariable` は値 123 で *初期化* されました。 + +1. **リファクタ**。コードを以下の文に置き換えてください。 + + ```javascript + let myVariable = 123; + ``` + + 上記のように変数が宣言され、同時に値が代入されることを _明示的初期化_ といいます。 + +1. **変数の値を変更します**。以下の方法で変数値を変更します。 + + ```javascript + myVariable = 321; + ``` + + 一度変数が宣言されると、`=` 演算子と新しい値を使って、コードのどの時点でもその値を変更することができます。 + + ✅ お試しください ブラウザで JavaScript を書くことができます。ブラウザのウィンドウを開き、開発者ツールに移動します。コンソールにプロンプトが表示されるので、`let myVariable = 123` と入力して return を押し、`myVariable` と入力します。どうなりますか？これらの概念については、後のレッスンで詳しく説明します。 + +## 定数 + +定数の宣言と初期化は、`const` キーワードを除いて、変数と同じ概念に従います。定数は通常、すべて大文字で宣言されます。 + +```javascript +const MY_VARIABLE = 123; +``` + +定数は変数と似ていますが、2つの例外があります。 + +- **値を持つ必要があります**。定数を初期化しておかないと、コード実行時にエラーが発生します。 +- **参照は変更できません**。定数の参照は、一度初期化すると変更できません。そうしないと、コードを実行するときにエラーが発生します。2つの例を見てみましょう。 + - **単純な値**です。以下は許可されていません。 + + ```javascript + const PI = 3; + PI = 4; // 不許可 + ``` + + - **オブジェクト参照は保護されています**。以下は許可されていません。 + + ```javascript + const obj = { a: 3 }; + obj = { b: 5 } // 不許可 + ``` + + - **オブジェクトの値は保護されていません**。以下は許可されています。 + + ```javascript + const obj = { a: 3 }; + obj.a = 5; // 許可 + ``` + + 上記ではオブジェクトの値を変更していますが、参照自体は変更できません。 + + > 注: `const` は参照が再割り当てから保護されていることを意味します。しかし、値は _不変_ ではなく、特にオブジェクトのような複雑な構造体であれば、変更される可能性があります。 + +## データ型 + +変数は、数値やテキストなど、多くの異なるタイプの値を格納することができます。これらのさまざまなタイプの値は、**データ型**として知られています。データ型は、開発者がコードをどのように書くべきか、ソフトウェアをどのように実行するべきかを決定するのに役立つため、ソフトウェア開発において重要な役割を果たします。さらに、データ型の中には、値の中の付加的な情報を変換したり抽出したりするのに役立つ独自の機能を持つものもあります。 + +✅ データ型は、言語によって提供される最低レベルのデータ型であるため、JavaScript のデータプリミティブとも呼ばれています。プリミティブデータ型には、string、number、bigint、boolean、undefined、symbol の6つのデータ型があります。これらのプリミティブのそれぞれが何を表しているかを可視化してみましょう。`zebra` は何でしょうか？ `0` はどうでしょうか？ `true` はどうでしょうか? + +### 数値 + +前のセクションでは、`myVariable` の値は数値データ型でした。 + +`let myVariable = 123;` + +変数は、小数や負の数を含むあらゆるタイプの数値を格納することができます。数値は、[次のセクション](#operators)で説明する算術演算子と一緒に使用することもできます。 + +### 算術演算子 + +算術関数を実行する際に使用する演算子にはいくつかの種類があり、ここではいくつかを紹介します。 + +| シンボル | 説明 | 例 | +| ------ | ------------------------------------------------------------------------ | -------------------------------- | +| `+` | **加算**: 2つの数値の和を計算します。 | `1 + 2 //期待される答えは 3 です。` | +| `-` | **減算**: 2つの数値の差を計算します。 | `1 - 2 //期待される答えは -1 です。` | +| `*` | **乗算**: 2つの数値の積を計算します。 | `1 * 2 //期待される答えは 2 です。` | +| `/` | **除算**: 2つの数値の商を計算します。 | `1 / 2 //期待される答えは 0.5 です。` | +| `%` | **余り**: 2つの数値の割り算から余りを計算します | `1 % 2 //期待される答えは 1 です。` | + +✅ 試してみましょう! ブラウザのコンソールで算術を試してみてください。驚きの結果が出ましたか？ + +### 文字列 + +文字列は、一重引用符または二重引用符の間に存在する文字の集合です。 + +- `'This is a string'` +- `"This is also a string"` +- `let myString = 'This is a string value stored in a variable';` + +文字列を書くときには引用符を使うことを忘れないでください。そうしないと、JavaScript はそれを変数名とみなします。 + +### 文字列のフォーマット + +文字列はテキストであり、時々フォーマットが必要になります。 + +2 つ以上の文字列を **連結** したり、結合したりするには、`+` 演算子を使用します。 + +```javascript +let myString1 = "Hello"; +let myString2 = "World"; + +myString1 + myString2 + "!"; //HelloWorld! +myString1 + " " + myString2 + "!"; //Hello World! +myString1 + ", " + myString2 + "!"; //Hello, World! + +``` + +✅ JavaScript では `1 + 1 = 2` なのに、`'1' + '1' = 11` なのはなぜでしょうか? `'1' + 1` はどうでしょうか？ + +**テンプレートリテラル** は文字列をフォーマットするもう一つの方法ですが、引用符の代わりにバックスティックを使用します。プレーンテキストではないものはすべてプレースホルダー `${ }` の中に入れなければなりません。これには、文字列である可能性のある変数も含まれます。 + +```javascript +let myString1 = "Hello"; +let myString2 = "World"; + +`${myString1} ${myString2}!` //Hello World! +`${myString1}, ${myString2}!` //Hello, World! +``` + +どちらの方法でも書式設定の目標を達成することができますが、テンプレートリテラルはスペースや改行を尊重します。 + +✅ テンプレートリテラルとプレーンな文字列を使用するのはいつですか？ + +### ブール値 + +ブール値は2つの値だけを持つことができます。`true` か `false` です。ブール値は、特定の条件が満たされたときにどの行のコードを実行するかを決定するのに役立ちます。多くの場合、[演算子](#operators) がブール値の設定を支援し、変数が初期化されたり、演算子で値が更新されたりしていることに気付いたり、書いたりすることが多いでしょう。 + +- `let myTrueBool = true` +- `let myFalseBool = false` + +✅ 変数の評価値がブール値 `true` であれば、変数は 'truthy' とみなされます。興味深いことに、JavaScript では、[falsy として定義されていない限り、すべての値は truthy です](https://developer.mozilla.org/ja/docs/Glossary/Truthy)。 + +--- + +## 🚀 チャレンジ + +JavaScript は、たまにデータ型を扱う際の意外な方法で悪名高いです。これらの 'gotchas' について少し調べてみてください。例えば: 大文字小文字の区別でつまずくことがあります! コンソールで以下のようにしてみてください。`let age = 1; let Age = 2; age == Age` (解決は `false` -- なぜ?) 他にどのような gotchas があるでしょうか? + +## レクチャー後クイズ +[レクチャー後クイズ](.github/post-lecture-quiz.md) + +## 復習と自己学習 + +この [JavaScript の練習問題リスト](https://css-tricks.com/snippets/javascript/)を見て、1つ試してみてください。何を学びましたか？ + +## 課題 + +[データ型の練習](assignment.md) diff --git a/2-js-basics/translations/README.ja.md b/2-js-basics/translations/README.ja.md new file mode 100644 index 00000000..246a1737 --- /dev/null +++ b/2-js-basics/translations/README.ja.md @@ -0,0 +1,14 @@ +# JavaScript 入門 + +JavaScript は Web の言語です。この4つのレッスンでは、その基本を学びます。 + +### トピック + +1. [変数とデータ型](1-data-types/README.md) +2. [関数とメソッド](2-functions-methods/README.md) +3. [JavaScript での意思決定](3-making-decisions/README.md) +4. [配列とループ](4-arrays-loops/README.md) + +### Credits + +These lessons were written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring) \ No newline at end of file From 23ef25dc696defcad6a5c0ba600aa23f41aa15e4 Mon Sep 17 00:00:00 2001 From: Yuuki Ebihara Date: Wed, 30 Dec 2020 21:24:22 +0900 Subject: [PATCH 2/6] translate 1-data-types assignment into japanese --- .../1-data-types/translations/assignment.ja.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 2-js-basics/1-data-types/translations/assignment.ja.md diff --git a/2-js-basics/1-data-types/translations/assignment.ja.md b/2-js-basics/1-data-types/translations/assignment.ja.md new file mode 100644 index 00000000..1ade0bff --- /dev/null +++ b/2-js-basics/1-data-types/translations/assignment.ja.md @@ -0,0 +1,11 @@ +# データ型の練習 + +## 説明書 + +あなたがショッピングカートを構築していると想像してください。ショッピング体験を完成させるために必要なデータ型について、いくつかの文書を書いてください。どのようにして選択にたどり着いたのでしょうか？ + +## ルーブリック + +基準 | 模範的な例 | 適切な | 改善が必要 +--- | --- | --- | -- | +||6つのデータタイプをリストアップして詳細に調査し、その使用法を文書化しています。|4つのデータ型が探索されています。|2つのデータタイプが探索されています。| \ No newline at end of file From 2532ef8263c76d6f367f9293c0bc9cc5585a1002 Mon Sep 17 00:00:00 2001 From: Yuuki Ebihara Date: Wed, 30 Dec 2020 22:21:03 +0900 Subject: [PATCH 3/6] translate 2-functions-methods into japanese --- .../translations/README.ja.md | 192 ++++++++++++++++++ .../translations/assignment.ja.md | 13 ++ 2 files changed, 205 insertions(+) create mode 100644 2-js-basics/2-functions-methods/translations/README.ja.md create mode 100644 2-js-basics/2-functions-methods/translations/assignment.ja.md diff --git a/2-js-basics/2-functions-methods/translations/README.ja.md b/2-js-basics/2-functions-methods/translations/README.ja.md new file mode 100644 index 00000000..799da35a --- /dev/null +++ b/2-js-basics/2-functions-methods/translations/README.ja.md @@ -0,0 +1,192 @@ +# JavaScript の基本: メソッドと関数 + +![JavaScript Basics - Functions](images/webdev101-js-functions.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## レクチャー前クイズ +[レクチャー前クイズ](.github/pre-lecture-quiz.md) + +コードを書くことを考えるとき、私たちは常にコードが読みやすいようにしたいと考えています。直感的ではないように聞こえるかもしれませんが、コードは書かれた回数よりも何度も読まれます。コードを確実にメンテナンスできるようにするための開発者のツールボックスの中心的なツールの一つが **関数** です。 + +[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions") + +## 関数 + +コアとなるのは、関数は必要に応じて実行できるコードのブロックです。これは、同じタスクを何度も実行する必要がある場合に最適です。ロジックを複数の場所に複製するのではなく (時間が来たときに更新するのが困難になります)、1つの場所に集中させ、実行する操作が必要なときにいつでも呼び出すことができます - 他の関数から関数を呼び出すこともできます! + +他の関数から関数を呼び出すこともできます！同じくらい重要なのは、関数に名前を付ける機能です。これは些細なことのように思われるかもしれませんが、名前をつけることでコードのセクションを簡単に文書化することができます。これはボタンのラベルのようなものと考えることができます。もし "Cancel timer" と書かれたボタンをクリックすると、それが時計の動作を止めようとしていることがわかります。 + +## 関数の作成と呼び出し + +関数の構文は次のようになります: + +```javascript +function nameOfFunction() { // 関数の定義 + // 関数の定義/中身 +} +``` + +挨拶を表示する関数を作ろうと思ったら、こんな感じになるかもしれません: + +```javascript +function displayGreeting() { + console.log('Hello, world!'); +} +``` + +関数を直接呼び出したい (または別スレッド、別コンテキストの関数を呼び出したい) ときはいつでも、関数名の後に `()` をつけます。関数を呼び出す前に定義しても後に定義してもよいという事実は注目に値します; JavaScript コンパイラがそれを見つけてくれます。 + +```javascript +// 関数の呼び出し +displayGreeting(); +``` + +> **注:** **メソッド** として知られている特殊なタイプの関数がありますが、これはすでに使ったことがあるでしょう！実際、上のデモではこれを見ました。実際、上のデモでは `console.log` を使っています。メソッドが関数と異なるのは、メソッドがオブジェクト (この例では `console`) にアタッチされているのに対し、関数はフリーフローティングです。多くの開発者がこれらの用語を互換性を持って使っているのを耳にするでしょう。 + +### 関数のベストプラクティス + +機能を作成する際に留意すべきベストプラクティスがいくつかあります。 + +- いつものように、関数が何をするのかがわかるように、記述的な名前を使用します +- **キャメルケーシング** を使用して単語を組み合わせます +- 関数を特定のタスクに集中させます + +## 関数への情報の受け渡し + +関数をより再利用可能なものにするためには、情報を渡したいことがよくあります。上の `displayGreeting` の例を考えてみると、**Hello, world!** しか表示されません。これでは、作成できる関数の中で最も有用なものとは言えません。挨拶する相手の名前を指定できるようにするなど、もう少し柔軟にしたい場合は、**パラメータ** を追加することができます。パラメータ (**引数** と呼ばれることもあります) は、関数に送られる追加情報です。 + +パラメータは定義部分に括弧内に記載されており、以下のようにカンマで区切られています: + +```javascript +function name(param, param2, param3) { + +} +``` + +名前を受け付けてそれを表示するように `displayGreeting` を更新することができます。 + +```javascript +function displayGreeting(name) { + const message = `Hello, ${name}!`; + console.log(message); +} +``` + +関数を呼び出してパラメータを渡すときは、括弧内で指定します。 + +```javascript +displayGreeting('Christopher'); +// 実行時に "Hello, Christopher!" と表示される +``` + +## 初期値 + +より多くのパラメータを追加することで、関数をさらに柔軟にすることができます。しかし、すべての値を指定する必要がない場合はどうでしょうか？挨拶の例に倣って、名前は必須のままにしておくこともできますが (誰に挨拶しているのかを知る必要があります)、挨拶自体は必要に応じてカスタマイズできるようにしたいと考えています。誰かがカスタマイズしたくない場合は、代わりにデフォルト値を指定します。パラメータにデフォルト値を設定するには、変数に値を設定するのと同じ方法 - `parameterName = 'defaultValue'` でパラメータを設定します。完全な例を見るには、以下を参照してください。 + +```javascript +function displayGreeting(name, salutation='Hello') { + console.log(`${salutation}, ${name}`); +} +``` + +関数を呼び出すときに、`salutation` に値を設定するかどうかを決めることができます。 + +```javascript +displayGreeting('Christopher'); +// "Hello, Christopher" と表示されます。 + +displayGreeting('Christopher', 'Hi'); +// "Hi, Christopher" と表示されます。 +``` + +## 戻り値 + +今までは、私たちが作った関数は常に [console](https://developer.mozilla.org/ja/docs/Web/API/console) に出力されていました。特に他のサービスを呼び出す関数を作成する場合には、これがまさに求めているものになることがあります。しかし、計算を実行するヘルパー関数を作成して値を返し、それを他の場所で使えるようにしたい場合はどうしたらいいでしょうか？ + +これを行うには、**戻り値** を使用します。戻り値は関数から返され、文字列や数値などのリテラル値を格納するのと同じように変数に格納することができます。 + +関数が何かを返す場合は、キーワード `return` が使用されます。キーワード `return` は、以下のように返されるものの値や参照を期待しています: + +```javascript +return myVariable; +``` + +挨拶メッセージを作成して、その値を呼び出し元に返す関数を作成することができます。 + +```javascript +function createGreetingMessage(name) { + const message = `Hello, ${name}`; + return message; +} +``` + +この関数を呼び出すときには、変数に値を格納します。これは、(`const name = 'Christopher'` のように) 変数に静的な値を設定するのと同じ方法です。 + +```javascript +const greetingMessage = createGreetingMessage('Christopher'); +``` + +## 関数のパラメータとしての関数 + +プログラミングのキャリアを積んでいくと、関数をパラメータとして受け入れる関数に出くわすようになります。この巧妙なトリックは、何かがいつ発生するか、または完了するかわからないが、レスポンスとして操作を実行する必要があることがわかっている場合によく使われます。 + +例として、タイマーを開始し、タイマーが完了したらコードを実行する [setTimeout](https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) を考えてみましょう。どのようなコードを実行したいかを伝える必要があります。関数としては完璧な仕事のように聞こえます。 + +以下のコードを実行すると、3秒後に **3秒が経過しました** というメッセージが表示されます。 + +```javascript +function displayDone() { + console.log('3秒が経過しました'); +} +// タイマーの値はミリ秒単位 +setTimeout(displayDone, 3000); +``` + +### 匿名関数 + +もう一度、作ったものを見てみましょう。一度だけ使用される名前の関数を作成しています。アプリケーションが複雑になるにつれて、一度しか呼ばれない関数をたくさん作ることになるでしょう。これは理想的ではありません。しかし、常に名前を指定する必要はありません。 + +パラメータとして関数を渡すときは、事前に関数を作成する必要はなく、代わりにパラメータの一部として関数を作成することができます。同じ `function` キーワードを使用しますが、代わりにパラメータとしてビルドします。 + +上のコードを書き換えて、匿名の関数を使用してみましょう。 + +```javascript +setTimeout(function() { + console.log('3秒が経過しました'); +}, 3000); +``` + +新しいコードを実行すると、同じ結果が得られることに気づくでしょう。関数を作りましたが、名前をつける必要はありませんでした。 + +### ファットアロー関数 + +多くのプログラミング言語 (JavaScript を含む) に共通するショートカットは、**アロー** または **ファットアロー** 関数と呼ばれるものを使用することです。これは、矢印のように見える `=>` という特殊なインジケータを使用します。`=>` を使うことで、`function` キーワードを省略することができます。 + +ファットアロー関数を使って、もう一度コードを書き換えてみましょう。 + +```javascript +setTimeout(() => { + console.log('3 seconds has elapsed'); +}, 3000); +``` + +### それぞれの戦略を使うとき + +関数をパラメータとして渡すには3つの方法があることがわかりましたが、それぞれをいつ使うか迷っているかもしれません。関数を複数回使用することがわかっているのであれば、通常通りに作成してください。1 つの場所だけで使用する場合は、一般的には匿名関数を使用するのがベストです。太いアロー関数を使うか、より伝統的な `function` 構文を使うかはあなた次第ですが、最近の開発者の多くは `=>` を好んでいることに気づくでしょう。 + +--- + +## 🚀 チャレンジ + +関数とメソッドの違いを一文で表現できますか？試してみてください。 + +## レクチャー後クイズ +[レクチャー後クイズ](.github/post-lecture-quiz.md) + +## 復習と自己学習 + +コードベースで使われることが多くなってきているアロー関数については、[もう少し読み込んでみる](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)価値があると思います。この構文で関数を書いて、それを書き換える練習をしてみましょう。 + +## 課題 + +[関数で楽しむ](assignment.md) \ No newline at end of file diff --git a/2-js-basics/2-functions-methods/translations/assignment.ja.md b/2-js-basics/2-functions-methods/translations/assignment.ja.md new file mode 100644 index 00000000..0c865e4c --- /dev/null +++ b/2-js-basics/2-functions-methods/translations/assignment.ja.md @@ -0,0 +1,13 @@ +# 関数で楽しむ + +## 説明書 + +何かを返す関数と何も返さない関数の両方の異なる関数を作成します。 + +デフォルト値を持つパラメータとパラメータが混在した関数を作成できるかどうかを見てみましょう。 + +## ルーブリック + +| 基準 | 模範的な例 | 適切な | 改善が必要 | +| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- | +| | ソリューションは、多様なパラメータを持つ2つ以上の関数で提供されます。 | ワーキングソリューションは、1つの関数と少数のパラメータで提供されます。 | ソリューションにはバグがあります。 | \ No newline at end of file From 1c09476a66bfc29aa5191d9747e1795a873cffe1 Mon Sep 17 00:00:00 2001 From: Yuuki Ebihara Date: Thu, 31 Dec 2020 14:49:49 +0900 Subject: [PATCH 4/6] translate 3-making-decisions into japanese --- .../translations/README.ja.md | 175 ++++++++++++++++++ .../translations/assignment.ja.md | 40 ++++ 2 files changed, 215 insertions(+) create mode 100644 2-js-basics/3-making-decisions/translations/README.ja.md create mode 100644 2-js-basics/3-making-decisions/translations/assignment.ja.md diff --git a/2-js-basics/3-making-decisions/translations/README.ja.md b/2-js-basics/3-making-decisions/translations/README.ja.md new file mode 100644 index 00000000..9d9ca671 --- /dev/null +++ b/2-js-basics/3-making-decisions/translations/README.ja.md @@ -0,0 +1,175 @@ +# JavaScript の基本: 意思決定 + +![JavaScript Basics - Making decisions](images/webdev101-js-decisions.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## +レクチャー前クイズ +[レクチャー前クイズ](.github/pre-lecture-quiz.md) + +意思決定を行い、コードの実行順序を制御することで、コードを再利用可能で堅牢なものにします。このセクションでは、JavaScript のデータフローを制御するための構文と、ブール値データ型で使用される場合の意味について説明します。 + +[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions") + +## ブール値の簡単なまとめ + +ブール値は2つの値だけを持つことができます。`true` か `false` です。ブール値は、特定の条件が満たされたときにどの行のコードを実行するかを決定するのに役立ちます。 + +以下のように、ブール値を true か false に設定します: + +`let myTrueBool = true` +`let myFalseBool = false` + +✅ ブール値は、イギリスの数学者、哲学者、論理学者のジョージ・ブール (1815-1864) にちなんで名づけられました。 + +## 比較演算子とブール値 + +演算子は、ブール値を生成するような比較をして条件を評価するために使用されます。以下に、よく使われる演算子の一覧を示します。 + +| シンボル | 説明 | 例 | +| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | +| `<` | **小なり**: 2つの値を比較し、左側の値が右側の値よりも小さい場合は `true` のブール値を返します。 | `5 < 6 // true` | +| `<=` | **小なりイコール**: 2つの値を比較し、左側の値が右側の値以下の場合は `true` のブール値を返します。 | `5 <= 6 // true` | +| `>` | **大なり**: 2つの値を比較し、左側の値が右側の値よりも大きい場合は `true` のブール値を返します。 | `5 > 6 // false` | +| `>=` | **大なりイコール**: 2つの値を比較し、左辺の値が右辺の値以上の場合は `true` のブール値を返します。 | `5 >= 6 // false` | +| `===` | **同値**: 2つの値を比較し、右と左の値が等しく、かつ同じデータ型であれば `true` のブール値を返します。 | `5 === 6 // false` | +| `!==` | **非同値**: 2つの値を比較し、厳密な平等演算子が返す値の反対のブール値を返します。 | `5 !== 6 // true` | + +✅ ブラウザのコンソールに比較を書き込んで、自分の知識を確認してみてください。返ってきたデータに驚きはありませんか？ + +## If 文 + +if 文は、条件が true であればブロック間でコードを実行します。 + +```javascript +if (condition){ + //条件は true でした。このブロック内のコードが実行されます。 +} +``` + +論理演算子は、条件を形成するためによく使われます。 + +```javascript +let currentMoney; +let laptopPrice; + +if (currentMoney >= laptopPrice){ + //条件は true でした。このブロック内のコードが実行されます。 + console.log("新しいノートパソコンを手に入れよう!"); +} +``` + +## IF..Else 文 + +`else` 文は、条件が false の場合にブロック間でコードを実行します。これは `if` 文ではオプションです。 + +```javascript +let currentMoney; +let laptopPrice; + +if (currentMoney >= laptopPrice){ + //条件は true でした。このブロック内のコードが実行されます。 + console.log("新しいノートパソコンを手に入れよう!"); +} +else{ + //条件は false でした。このブロック内のコードが実行されます。 + console.log("新しいノートパソコンを買う余裕はまだない!"); +} +``` + +✅ ブラウザのコンソールで実行して、このコードと次のコードの理解度をテストしてください。currentMoney 変数と laptopPrice 変数の値を変更して、返される `console.log()` を変更します。 + +## 論理演算子とブール値 + +意思決定には複数の比較が必要な場合があり、論理演算子を使ってブール値を生成することができます。 + +| シンボル | 説明 | 例 | +| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | +| `&&` | **論理積**: 2つのブール式を逆さにします。両辺が真の場合 **のみ** true を返します。 | `(5 > 6) && (5 < 6 ) //片方が false、もう片方が true です。false を返します。` | +| `||` | **論理和**: 2つのブール式を比較します。少なくとも片方が true であれば true を返します。 | `(5 > 6) || (5 < 6) //片方が false、もう片方が true です。true を返します。` | +| `!` | **論理否定**: ブール式の反対の値を返します。 | `!(5 > 6) // 5は6より大きくないが、"!" は true を返す` | + +## 論理演算子を用いた条件と決定 + +論理演算子は、if...else 文で条件を形成するために使用できます。 + +```javascript +let currentMoney; +let laptopPrice; +let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //ノートパソコンの価格が20％オフ + +if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){ + //条件は true でした。このブロック内のコードが実行されます。 + console.log("新しいノートパソコンを手に入れよう!"); +} +else { + //条件は false でした。このブロック内のコードが実行されます。 + console.log("新しいノートパソコンを買う余裕はまだない!"); +} +``` + +### 否定演算子 + +ここまでで、条件付きロジックを作成するために `if...else` 文を使用する方法を見てきました。`if` に入るものはすべて true/false を評価する必要があります。演算子 `!` を使用すると、式を _否定_ することができます。以下のようになります。 + +```javascript +if (!condition) { + // 条件が false の場合に実行されます。 +} else { + // 条件が true の場合に実行されます。 +} +``` + +### 三項式 + +意思決定ロジックを表現する方法は `if...else` だけではありません。三項演算子と呼ばれるものを使うこともできます。その構文は次のようになります。 + +```javascript +let variable = condition ? : ` +``` + +以下でより具体的な例を挙げてみます。 + +```javascript +let firstNumber = 20; +let secondNumber = 10 +let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber; +``` + +✅ このコードを数回読むのに時間をかけてください。これらの演算子がどのように動作するか理解できましたか？ + +上の例では次のようになっています。 +- `firstNumber` が `secondNumber` よりも大きければ +- `biggestNumber` に `firstNumber` を代入し、 +- そうでなければ `secondNumber` に代入する + +三項式は、以下のコードをコンパクトに書くだけです。 + +```javascript +let biggestNumber; +if (firstNumber > secondNumber) { + biggestNumber = firstNumber; +} else { + biggestNumber = secondNumber; +} +``` + +--- + +## 🚀 チャレンジ + +最初に論理演算子を使ってプログラムを作成し、それを三項式で書き換えます。お好みの構文は？ + +## レクチャー後クイズ + +[レクチャー後クイズ](.github/post-lecture-quiz.md) + +## 復習と自己学習 + +ユーザーが利用できる多くの演算子についての詳細は [mdn](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators) をご覧ください。 + +Josh Comeau の素晴らしい [operator lookup](https://joshwcomeau.com/operator-lookup/) をご覧ください! + +## 課題 + +[演算子](assignment.md) diff --git a/2-js-basics/3-making-decisions/translations/assignment.ja.md b/2-js-basics/3-making-decisions/translations/assignment.ja.md new file mode 100644 index 00000000..9a27828e --- /dev/null +++ b/2-js-basics/3-making-decisions/translations/assignment.ja.md @@ -0,0 +1,40 @@ +# 演算子 + +## 説明書 + +演算子で遊んでみる。あなたが実装できるプログラムの提案です。 + +あなたは2つの異なる成績評価システムの学生のセットを持っています。 + +### ファーストグレーディングシステム + +1つの成績評価システムは、1～5までの成績で、3以上の成績は合格を意味すると定義されています。 + +### セカンドグレーディングシステム + +もう一つのグレードシステムは、`A, A-, B, B-, C, C-` というグレードがあり、`A` が最高グレード、`C` が最低合格グレードです。 + +### タスク + +すべての学生とその成績を表す以下の配列 `allStudents` が与えられた場合、合格した学生を含む新しい配列 `studentsWhoPass` を作成します。 + +> ヒント: for ループと if...else と比較演算子を使用します。 + +```javascript +let allStudents = [ + 'A', + 'B-' + 1, + 4 + 5, + 2 +] + +let studentsWhoPass = []; +``` + +## ルーブリック + +| 基準 | 模範的な例 | 適切な | 改善が必要 | +| -------- | ------------------------------ | ----------------------------- | ------------------------------- | +| | 完全なソリューションを提示 | 部分的な解決策を提示 | バグがある解決策を提示 | From dd921f9097508f79b36dddf0be388b5551ec3851 Mon Sep 17 00:00:00 2001 From: Yuuki Ebihara Date: Thu, 31 Dec 2020 17:29:02 +0900 Subject: [PATCH 5/6] translate 4-arrays-loops into japanese --- .../4-arrays-loops/translations/README.ja.md | 124 ++++++++++++++++++ .../translations/assignment.ja.md | 13 ++ 2 files changed, 137 insertions(+) create mode 100644 2-js-basics/4-arrays-loops/translations/README.ja.md create mode 100644 2-js-basics/4-arrays-loops/translations/assignment.ja.md diff --git a/2-js-basics/4-arrays-loops/translations/README.ja.md b/2-js-basics/4-arrays-loops/translations/README.ja.md new file mode 100644 index 00000000..2b378ca4 --- /dev/null +++ b/2-js-basics/4-arrays-loops/translations/README.ja.md @@ -0,0 +1,124 @@ +# JavaScript の基本: 配列とループ + +![JavaScript Basics - Arrays](images/webdev101-js-arrays.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## レクチャー前クイズ +[レクチャー前クイズ](.github/pre-lecture-quiz.md) + +このレッスンでは、Web 上でインタラクティブな機能を提供する言語である JavaScript の基礎を学びます。このレッスンでは、データを操作するために使用される配列とループについて学びます。 + +[![Arrays and Loops](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops") + +## 配列 + +データを扱うのはどの言語でも共通の作業ですが、データが配列のような構造的な形式で整理されている場合は、より簡単な作業となります。配列では、データはリストに似た構造で保存されます。配列の大きな利点の1つは、1つの配列に異なるタイプのデータを格納できることです。 + +✅ 配列は身近なところにある!? 太陽光パネルの配列など、実際の配列の例を思い浮かべることができますか？ + +配列の構文は角括弧のペアです。 + +`let myArray = [];` + +これは空の配列ですが、配列はすでにデータを埋めた状態で宣言することができます。配列内の複数の値はカンマで区切られます。 + +`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];` + +配列の値には、**インデックス** と呼ばれる一意の値が割り当てられ、配列の先頭からの距離に基づいて整数が割り当てられます。上の例では、文字列の値 "Chocolate" のインデックスは 0 で、"Rocky Road" のインデックスは 4 です。 配列の値を取得、変更、挿入するには、角括弧付きのインデックスを使用します。 + +✅ 配列のインデックスが 0 から始まるのは驚きですか？いくつかのプログラミング言語では、インデックスは1から始まります。これには興味深い歴史があり、[ウィキペディア](https://en.wikipedia.org/wiki/Zero-based_numbering) で読むことができます。 + +```javascript +let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; +iceCreamFlavors[2]; //"Vanilla" +``` + +このように、インデックスにレバレッジをかけて値を変更することができます。 + +```javascript +iceCreamFlavors[4] = "Butter Pecan"; //"Rocky Road" を "Butter Pecan" に変更 +``` + +そして、このように与えられたインデックスに新しい値を挿入することができます。 + +```javascript +iceCreamFlavors[5] = "Cookie Dough"; //"Cookie Dough" を追加しました。 +``` + +✅ 値を配列にプッシュするより一般的な方法は、 array.push() のような配列演算子を使用することです。 + +配列の中に何個の項目があるかを調べるには、`length` プロパティを使用します。 + +```javascript +let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; +iceCreamFlavors.length; //5 +``` + +✅ 自分で試してみましょう。ブラウザのコンソールを使って、自分で作成した配列を作成して操作してみましょう。 + +## ループ + +ループは、反復または**イテレーション**のタスクを可能にし、多くの時間とコードを節約することができます。各反復は、その変数、値、条件を変えることができます。JavaScript には異なるタイプのループがあり、小さな違いはありますが、基本的には同じことをします。 + +### For ループ + +`for`ループは反復するために3つの部分を必要とする。 + - `counter` 典型的には反復回数をカウントする数値で初期化される変数 + - `condition` 比較演算子を用いて、`false` のときにループを停止させる式 + - `iteration-expression` 各反復の最後に実行され，通常はカウンタの値を変更するために使用されます + +```javascript + //10までカウントアップ + for (let i = 0; i < 10; i++) { + console.log(i); + } +``` + +✅ このコードをブラウザのコンソールで実行してください。カウンタ、条件、反復式に小さな変更を加えるとどうなりますか？カウントダウンを作成して逆走させることはできますか？ + +### While ループ + +`for` ループの構文とは異なり、`while` ループは `false` のときにループを停止する条件を必要とするだけです。ループ内の条件は通常、カウンタのような他の値に依存しており、ループ中に管理しなければなりません。カウンタの開始値はループの外で作成しなければならず、カウンタの変更を含めて条件を満たすための式はすべてループ内で維持しなければなりません。 + +```javascript +//10までカウントアップ +let i = 0; +while (i < 10) { + console.log(i); + i++; +} +``` + +✅ for loop と while loop のどちらかを選ぶ理由は何ですか? 17K の視聴者が StackOverflow で同じ質問をしていましたが、その意見の中には[あなたにとって興味深いものもあるかもしれません](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。 + +## ループと配列 + +ほとんどの条件がループを止めるために配列の長さを必要とし、インデックスはカウンタの値になることもあるため、配列はループと一緒によく使われます。 + +```javascript +let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; + +for (let i = 0; i < iceCreamFlavors.length; i++) { + console.log(iceCreamFlavors[i]); +} //すべてのフレーバーがプリントされた時点で終了 +``` + +✅ ブラウザのコンソールで、自分で作った配列をループさせてみてください。 + +--- + +## 🚀 チャレンジ + +配列をループする方法は for ループと while ループ以外にもあります。[forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of)、[map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) があります。これらのテクニックのいずれかを使って、配列のループを書き換えてください。 + +## レクチャー後クイズ +[レクチャー後クイズ](.github/post-lecture-quiz.md) + + +## 復習と自己学習 + +JavaScript の配列には多くのメソッドがあり、データ操作に非常に便利です。[これらのメソッドを読んでください](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)。そして、あなたが作成した配列でそれらのいくつか (push, pop, slice, splice など) を試してみてください。 + +## 課題 + +[配列のループ](assignment.md) diff --git a/2-js-basics/4-arrays-loops/translations/assignment.ja.md b/2-js-basics/4-arrays-loops/translations/assignment.ja.md new file mode 100644 index 00000000..d2102ff3 --- /dev/null +++ b/2-js-basics/4-arrays-loops/translations/assignment.ja.md @@ -0,0 +1,13 @@ +# 配列のループ + +## 説明書 + +1～20の間の3番目の数字をすべてリストアップしてコンソールに表示するプログラムを作成します。 + +> TIP: for-loop を使用して、反復式を変更します。 + +## ルーブリック + +| 基準 | 模範的な例 | 適切な | 改善が必要 | +| -------- | --------------------------------------- | ------------------------ | ------------------------------ | +| | プログラムが正常に動作し、コメントが表示される | プログラムはコメントをしていない | プログラムが不完全であるか、バグがある | \ No newline at end of file From 390010e2be5c22d59b954ae2afe8f852c217b7eb Mon Sep 17 00:00:00 2001 From: Yuuki Ebihara Date: Fri, 1 Jan 2021 03:09:13 +0900 Subject: [PATCH 6/6] Fix assignment path --- 2-js-basics/1-data-types/translations/README.ja.md | 2 +- 2-js-basics/2-functions-methods/translations/README.ja.md | 2 +- 2-js-basics/3-making-decisions/translations/README.ja.md | 2 +- 2-js-basics/4-arrays-loops/translations/README.ja.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/2-js-basics/1-data-types/translations/README.ja.md b/2-js-basics/1-data-types/translations/README.ja.md index 9892d509..e8a780ec 100644 --- a/2-js-basics/1-data-types/translations/README.ja.md +++ b/2-js-basics/1-data-types/translations/README.ja.md @@ -193,4 +193,4 @@ JavaScript は、たまにデータ型を扱う際の意外な方法で悪名高 ## 課題 -[データ型の練習](assignment.md) +[データ型の練習](assignment.ja.md) diff --git a/2-js-basics/2-functions-methods/translations/README.ja.md b/2-js-basics/2-functions-methods/translations/README.ja.md index 799da35a..0b6adb53 100644 --- a/2-js-basics/2-functions-methods/translations/README.ja.md +++ b/2-js-basics/2-functions-methods/translations/README.ja.md @@ -189,4 +189,4 @@ setTimeout(() => { ## 課題 -[関数で楽しむ](assignment.md) \ No newline at end of file +[関数で楽しむ](assignment.ja.md) \ No newline at end of file diff --git a/2-js-basics/3-making-decisions/translations/README.ja.md b/2-js-basics/3-making-decisions/translations/README.ja.md index 9d9ca671..7a836262 100644 --- a/2-js-basics/3-making-decisions/translations/README.ja.md +++ b/2-js-basics/3-making-decisions/translations/README.ja.md @@ -172,4 +172,4 @@ Josh Comeau の素晴らしい [operator lookup](https://joshwcomeau.com/operato ## 課題 -[演算子](assignment.md) +[演算子](assignment.ja.md) diff --git a/2-js-basics/4-arrays-loops/translations/README.ja.md b/2-js-basics/4-arrays-loops/translations/README.ja.md index 2b378ca4..b62e12b6 100644 --- a/2-js-basics/4-arrays-loops/translations/README.ja.md +++ b/2-js-basics/4-arrays-loops/translations/README.ja.md @@ -121,4 +121,4 @@ JavaScript の配列には多くのメソッドがあり、データ操作に非 ## 課題 -[配列のループ](assignment.md) +[配列のループ](assignment.ja.md)