|
83 | 83 |
|
84 | 84 | **[⬆ ページのTopへ戻る](#table-of-contents)**
|
85 | 85 |
|
86 |
| -## 参照(References) -> 変数?? |
| 86 | +## 参照(References) |
87 | 87 |
|
88 | 88 | - [2.1](#2.1) <a name='2.1'></a> Use `const` for all of your references; avoid using `var`.
|
89 | 89 | - [2.1](#2.1) <a name='2.1'></a> すべての参照は `const` を使用し、`var` を使用しないでください。
|
90 | 90 |
|
91 | 91 | > Why? This ensures that you can't reassign your references, which can lead to bugs and difficult to comprehend code.
|
| 92 | +
|
92 | 93 | > なぜ? This ensures that you can't reassign your references, which can lead to bugs and difficult to comprehend code.
|
93 | 94 |
|
94 | 95 | ```javascript
|
|
106 | 107 |
|
107 | 108 | > Why? `let` is block-scoped rather than function-scoped like `var`.
|
108 | 109 |
|
| 110 | + > なぜ? 関数スコープの `var` よりむしろ、ブロックスコープの `let` |
| 111 | + |
109 | 112 | ```javascript
|
110 | 113 | // bad
|
111 | 114 | var count = 1;
|
|
189 | 192 |
|
190 | 193 | <a name="es6-computed-properties"></a>
|
191 | 194 | - [3.4](#3.4) <a name='3.4'></a> Use computed property names when creating objects with dynamic property names.
|
| 195 | + - [3.4](#3.4) <a name='3.4'></a> 動的にプロパティ名を持つオブジェクトを作成する場合、計算されたプロパティ名(computed property names)を利用してください。 |
192 | 196 |
|
193 | 197 | > Why? They allow you to define all the properties of an object in one place.
|
194 | 198 |
|
| 199 | + > なぜ? こうすることで、オブジェクトのプロパティを1箇所で定義することができます。 |
| 200 | + |
195 | 201 | ```javascript
|
196 | 202 |
|
197 | 203 | function getKey(k) {
|
|
215 | 221 |
|
216 | 222 | <a name="es6-object-shorthand"></a>
|
217 | 223 | - [3.5](#3.5) <a name='3.5'></a> Use object method shorthand.
|
| 224 | + - [3.5](#3.5) <a name='3.5'></a> メソッドの短縮構文を利用してください。 |
218 | 225 |
|
219 | 226 | ```javascript
|
220 | 227 | // bad
|
|
238 | 245 |
|
239 | 246 | <a name="es6-object-concise"></a>
|
240 | 247 | - [3.6](#3.6) <a name='3.6'></a> Use property value shorthand.
|
| 248 | + - [3.6](#3.6) <a name='3.6'></a> プロパティの短縮構文を利用してください。 |
241 | 249 |
|
242 | 250 | > Why? It is shorter to write and descriptive.
|
243 | 251 |
|
| 252 | + > Why? 記述や説明が簡潔になるからです。 |
| 253 | + |
244 | 254 | ```javascript
|
245 | 255 | const lukeSkywalker = 'Luke Skywalker';
|
246 | 256 |
|
|
256 | 266 | ```
|
257 | 267 |
|
258 | 268 | - [3.7](#3.7) <a name='3.7'></a> Group your shorthand properties at the beginning of your object declaration.
|
| 269 | + - [3.7](#3.7) <a name='3.7'></a> プロパティの短縮構文はオブジェクト宣言の先頭にまとめてください。 |
259 | 270 |
|
260 | 271 | > Why? It's easier to tell which properties are using the shorthand.
|
261 | 272 |
|
| 273 | + > なぜ? どのプロパティが短縮構文を利用しているか分かりやすいからです。 |
| 274 | +
|
262 | 275 | ```javascript
|
263 | 276 | const anakinSkywalker = 'Anakin Skywalker';
|
264 | 277 | const lukeSkywalker = 'Luke Skywalker';
|
|
396 | 409 | // bad
|
397 | 410 | function processInput(input) {
|
398 | 411 | // then a miracle occurs
|
| 412 | + // その後、奇跡が起こります。 |
399 | 413 | return [left, right, top, bottom];
|
400 | 414 | }
|
401 | 415 |
|
402 | 416 | // the caller needs to think about the order of return data
|
| 417 | + // 呼び出し者で返却されるデータの順番を考慮する必要があります。 |
403 | 418 | const [left, __, top] = processInput(input);
|
404 | 419 |
|
405 | 420 | // good
|
406 | 421 | function processInput(input) {
|
407 | 422 | // then a miracle occurs
|
| 423 | + // その後、奇跡が起こります。 |
408 | 424 | return { left, right, top, bottom };
|
409 | 425 | }
|
410 | 426 |
|
411 | 427 | // the caller selects only the data they need
|
| 428 | + // 呼び出し元は必要なデータのみ選択すればいい。 |
412 | 429 | const { left, right } = processInput(input);
|
413 | 430 | ```
|
414 | 431 |
|
|
482 | 499 | ## 関数(Functions)
|
483 | 500 |
|
484 | 501 | - [7.1](#7.1) <a name='7.1'></a> Use function declarations instead of function expressions.
|
| 502 | + - [7.1](#7.1) <a name='7.1'></a> 関数式より関数宣言を利用してください。 |
485 | 503 |
|
486 | 504 | > Why? Function declarations are named, so they're easier to identify in call stacks. Also, the whole body of a function declaration is hoisted, whereas only the reference of a function expression is hoisted. This rule makes it possible to always use [Arrow Functions](#arrow-functions) in place of function expressions.
|
487 | 505 |
|
| 506 | + > なぜ? Function declarations are named, so they're easier to identify in call stacks. Also, the whole body of a function declaration is hoisted, whereas only the reference of a function expression is hoisted. This rule makes it possible to always use [Arrow Functions](#arrow-functions) in place of function expressions. |
| 507 | + |
488 | 508 | ```javascript
|
489 | 509 | // bad
|
490 | 510 | const foo = function () {
|
|
676 | 696 | ```
|
677 | 697 |
|
678 | 698 | - [8.2](#8.2) <a name='8.2'></a> If the function body consists of a single expression, feel free to omit the braces and use the implicit return. Otherwise use a `return` statement.
|
| 699 | + - [8.2](#8.2) <a name='8.2'></a> 関数の本体が1つの式で構成されている場合は、中括弧({})を省略し、暗黙のreturnを利用することができます。それ以外は `return` 文を利用してください。 |
679 | 700 |
|
680 | 701 | > Why? Syntactic sugar. It reads well when multiple functions are chained together.
|
681 | 702 |
|
| 703 | + > なぜ? 糖衣構文(読みやすさのために導入される構文)だからです。複数の関数が連結される場合に読みやすくなります。 |
| 704 | +
|
682 | 705 | > Why not? If you plan on returning an object.
|
683 | 706 |
|
| 707 | + > 使うべきではない? オブジェクトを返す場合は。 |
| 708 | +
|
684 | 709 | ```javascript
|
685 | 710 | // good
|
686 | 711 | [1, 2, 3].map(number => `A string containing the ${number}.`);
|
|
699 | 724 | ```
|
700 | 725 |
|
701 | 726 | - [8.3](#8.3) <a name='8.3'></a> In case the expression spans over multiple lines, wrap it in parentheses for better readability.
|
| 727 | + - [8.3](#8.3) <a name='8.3'></a> 式の全長が複数行にまたがる場合は、可読性をより良くするため丸括弧()で囲ってください。 |
702 | 728 |
|
703 | 729 | > Why? It shows clearly where the function starts and ends.
|
704 | 730 |
|
| 731 | + > なぜ? 関数の開始と終了部分が分かりやすく見えるためです。 |
| 732 | +
|
705 | 733 | ```js
|
706 | 734 | // bad
|
707 | 735 | [1, 2, 3].map(number => 'As time went by, the string containing the ' +
|
|
718 | 746 |
|
719 | 747 |
|
720 | 748 | - [8.4](#8.4) <a name='8.4'></a> If your function only takes a single argument, feel free to omit the parentheses.
|
| 749 | + - [8.4](#8.4) <a name='8.4'></a> 関数の引数が1つの場合、丸括弧()を省略することができます。 |
721 | 750 |
|
722 | 751 | > Why? Less visual clutter.
|
723 | 752 |
|
| 753 | + > なぜ? あまり見難くないからです。 |
| 754 | +
|
724 | 755 | ```js
|
725 | 756 | // good
|
726 | 757 | [1, 2, 3].map(x => x * x);
|
|
855 | 886 | ## モジュール(Modules)
|
856 | 887 |
|
857 | 888 | - [10.1](#10.1) <a name='10.1'></a> Always use modules (`import`/`export`) over a non-standard module system. You can always transpile to your preferred module system.
|
858 |
| - - [10.1](#10.1) <a name='10.1'></a> Always use modules (`import`/`export`) over a non-standard module system. You can always transpile to your preferred module system. |
| 889 | + - [10.1](#10.1) <a name='10.1'></a> 非標準のモジュールシステムではなく、常に (`import`/`export`) を利用してください。こうすることで好みのモジュールシステムへいつでもトランスパイルすることでできます。 |
859 | 890 |
|
860 | 891 | > Why? Modules are the future, let's start using the future now.
|
861 | 892 |
|
|
910 | 941 |
|
911 | 942 | **[⬆ ページのTopへ戻る](#table-of-contents)**
|
912 | 943 |
|
913 |
| -## Iterators and Generators |
| 944 | +## イテレータとジェネレータ(Iterators and Generators) |
914 | 945 |
|
915 | 946 | - [11.1](#11.1) <a name='11.1'></a> Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`.
|
| 947 | + - [11.1](#11.1) <a name='11.1'></a> iteratorsを利用しないでください。`for-of` ループの代わりに `map()` や `reduce()` のようなJavascriptの高級関数(higher-order functions)を利用してください。 |
916 | 948 |
|
917 | 949 | > Why? This enforces our immutable rule. Dealing with pure functions that return values is easier to reason about than side-effects.
|
918 | 950 |
|
| 951 | + > なぜ? これはimmutable(不変)ルールを適用します。値を返ような関数の中身の処理を気にするより副作用について推測するほうが簡単です。 |
| 952 | +
|
919 | 953 | ```javascript
|
920 | 954 | const numbers = [1, 2, 3, 4, 5];
|
921 | 955 |
|
|
938 | 972 | ```
|
939 | 973 |
|
940 | 974 | - [11.2](#11.2) <a name='11.2'></a> Don't use generators for now.
|
| 975 | + - [11.2](#11.2) <a name='11.2'></a> 現時点ではgeneratorsは利用しないでください。 |
941 | 976 |
|
942 | 977 | > Why? They don't transpile well to ES5.
|
943 | 978 |
|
| 979 | + > なぜ? ES5にうまくトランスパイルできないから。 |
| 980 | +
|
944 | 981 | **[⬆ ページのTopへ戻る](#table-of-contents)**
|
945 | 982 |
|
946 | 983 |
|
|
1020 | 1057 | ```
|
1021 | 1058 |
|
1022 | 1059 | - [13.3](#13.3) <a name='13.3'></a> Group all your `const`s and then group all your `let`s.
|
| 1060 | + - [13.3](#13.3) <a name='13.3'></a> まず `const` をグループ化して、その後 `let` をグループ化してください。 |
1023 | 1061 |
|
1024 | 1062 | > Why? This is helpful when later on you might need to assign a variable depending on one of the previous assigned variables.
|
1025 | 1063 |
|
| 1064 | + > なぜ? 以前に割り当てた変数に応じて、後で新しい変数を追加する場合に有用だからです。 |
| 1065 | +
|
1026 | 1066 | ```javascript
|
1027 | 1067 | // bad
|
1028 | 1068 | let i, len, dragonball,
|
|
1045 | 1085 | ```
|
1046 | 1086 |
|
1047 | 1087 | - [13.4](#13.4) <a name='13.4'></a> Assign variables where you need them, but place them in a reasonable place.
|
| 1088 | + - [13.4](#13.4) <a name='13.4'></a> 変数を割り当てる際は、必要かつ合理的な場所で行ってください。 |
1048 | 1089 |
|
1049 | 1090 | > Why? `let` and `const` are block scoped and not function scoped.
|
1050 | 1091 |
|
| 1092 | + > なぜ? `let` と `const` はブロックスコープだからです。関数スコープではありません。 |
| 1093 | +
|
1051 | 1094 | ```javascript
|
1052 | 1095 | // good
|
1053 | 1096 | function() {
|
|
1539 | 1582 |
|
1540 | 1583 | - [18.6](#18.6) <a name='18.6'></a> Use indentation when making long method chains. Use a leading dot, which
|
1541 | 1584 | emphasizes that the line is a method call, not a new statement.
|
| 1585 | + - [18.6](#18.6) <a name='18.6'></a> 長くメソッドを連結する場合はインデントを利用してください。行がメソッド呼び出しではなく、新しい文であることを強調するために先頭にドット(.)を配置してください。 |
1542 | 1586 |
|
1543 | 1587 | ```javascript
|
1544 | 1588 | // bad
|
|
1578 | 1622 | ```
|
1579 | 1623 |
|
1580 | 1624 | - [18.7](#18.7) <a name='18.7'></a> Leave a blank line after blocks and before the next statement.
|
| 1625 | + - [18.7](#18.7) <a name='18.7'></a> 文の前とブロックの後には改行を残してください。 |
1581 | 1626 |
|
1582 | 1627 | ```javascript
|
1583 | 1628 | // bad
|
|
1635 | 1680 | ```
|
1636 | 1681 |
|
1637 | 1682 | - [18.8](#18.8) <a name='18.8'></a> Do not pad your blocks with blank lines.
|
| 1683 | + - [18.8](#18.8) <a name='18.8'></a> ブロックに空行を挟み込まないでください。 |
1638 | 1684 |
|
1639 | 1685 | ```javascript
|
1640 | 1686 | // bad
|
|
1667 | 1713 | ```
|
1668 | 1714 |
|
1669 | 1715 | - [18.9](#18.9) <a name='18.9'></a> Do not add spaces inside parentheses.
|
| 1716 | + - [18.9](#18.9) <a name='18.9'></a> 丸括弧()の内側にスペースを追加しないでください。 |
1670 | 1717 |
|
1671 | 1718 | ```javascript
|
1672 | 1719 | // bad
|
|
1691 | 1738 | ```
|
1692 | 1739 |
|
1693 | 1740 | - [18.10](#18.10) <a name='18.10'></a> Do not add spaces inside brackets.
|
| 1741 | + - [18.10](#18.10) <a name='18.10'></a> 角括弧([])の内側にスペースを追加しないでください。 |
1694 | 1742 |
|
1695 | 1743 | ```javascript
|
1696 | 1744 | // bad
|
|
1703 | 1751 | ```
|
1704 | 1752 |
|
1705 | 1753 | - [18.11](#18.11) <a name='18.11'></a> Add spaces inside curly braces.
|
| 1754 | + - [18.11](#18.11) <a name='18.11'></a> 中括弧({})の内側にスペースを追加しないでください。 |
1706 | 1755 |
|
1707 | 1756 | ```javascript
|
1708 | 1757 | // bad
|
|
1756 | 1805 |
|
1757 | 1806 | > Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don't have to worry about the [trailing comma problem](es5/README.md#commas) in legacy browsers.
|
1758 | 1807 |
|
| 1808 | + > なぜ? これはクリーンなgitの差分につながります。また、Babelの様なトランスパイラはトランスパイルする際に末尾の余計なカンマを除去します。これは、レガシーブラウザでの[余計なカンマ問題](es5/README.md#commas)を心配する必要がないことを意味します。 |
| 1809 | +
|
1759 | 1810 | ```javascript
|
1760 | 1811 | // bad - git diff without trailing comma
|
1761 | 1812 | const hero = {
|
|
2014 | 2065 | ```
|
2015 | 2066 |
|
2016 | 2067 | - [22.6](#22.6) <a name='22.6'></a> If your file exports a single class, your filename should be exactly the name of the class.
|
| 2068 | + - [22.6](#22.6) <a name='22.6'></a> ファイルを1つのクラスとしてexportする場合、ファイル名はクラス名と完全に一致させなければなりません。 |
2017 | 2069 |
|
2018 | 2070 | ```javascript
|
2019 | 2071 | // file contents
|
|
2034 | 2086 | ```
|
2035 | 2087 |
|
2036 | 2088 | - [22.7](#22.7) <a name='22.7'></a> Use camelCase when you export-default a function. Your filename should be identical to your function's name.
|
| 2089 | + - [22.7](#22.7) <a name='22.7'></a> Default exportが関数の場合、キャメルケース(小文字から始まる)を利用してください。ファイル名は関数名と同じにしなければなりません。 |
2037 | 2090 |
|
2038 | 2091 | ```javascript
|
2039 | 2092 | function makeStyleGuide() {
|
|
2043 | 2096 | ```
|
2044 | 2097 |
|
2045 | 2098 | - [22.8](#22.8) <a name='22.8'></a> Use PascalCase when you export a singleton / function library / bare object.
|
| 2099 | + - [22.8](#22.8) <a name='22.8'></a> シングルトン / function library / 単なるオブジェクトをexportする場合、パスカルケース(大文字から始まる)を利用してください。 |
2046 | 2100 |
|
2047 | 2101 | ```javascript
|
2048 | 2102 | const AirbnbStyleGuide = {
|
|
0 commit comments