@@ -36,31 +36,31 @@ JavaScriptに対するコーディング・ガイドになります。
36
36
<a href =" https://www.amazon.co.jp/dp/B001GSTOAM/ref=dp-kindle-redirect?_encoding=UTF8& ; btkr=1 " taget =" _blank " >Clean Code</a >は著者のRobert C. Martinらが長年の経験をもとにまとめたものです。
37
37
こちらの本は言語は限定されていません。
38
38
39
- キレイなコードは3R(Readable、Reusable、Refactorable)になっていることを指し
40
- 読みやすい、再利用可能、理解や修正がしやすいように整理されている
41
- これらを目指すためのガイドになります。
39
+ キレイなコードとは3R(Readable、Reusable、Refactorable)になっているものです。
40
+ ・Readable 読みやすい
41
+ ・Reusable 再利用可能
42
+ ・Refactorable 理解や修正がしやすいよう
42
43
43
44
全てのコードは、粘土が徐々に形作られていくように、曖昧な形から始まるものです。
44
- その後でコードレビューを行い、不要なコードを削除して作りあげていくものです。
45
- とも語られているそうです。
45
+ その後でコードレビューを行い、不要なコードを削除して作りあげていくものだと書かれています。
46
46
47
- JavaScriptは良くも悪くも、非常に自由に書ける言語です。
48
- その為、個人の技量に応じてコードが複雑になったりしやすいので、
49
- 改めてみてみると面白い発見がありましたので個人の見解も含めて紹介したいと思います。
47
+ < img src = " https://github.com/misak1/clean-code-javascript/blob/master/point-50.png?raw=true " width = " 20 " /> JavaScriptは良くも悪くも、非常に自由に書ける言語です。
48
+ その為、個人の技量に応じてコードが複雑になったりしやすいので、
49
+ 改めてみてみると面白い発見がありましたので個人の見解も含めて紹介したいと思います。
50
50
51
51
### 変更内容
52
- ・サンプルコードについて一部わかりにくいものについては差し替えました 。
53
- ・業務で使うのがES6ということで、ES5関連の過去の記述方法については削除
54
- ・ES8や策定中の機能については削除
55
- ・デザインパターンについては話がややこしくなるので省略します 。
52
+ ・サンプルコードについて一部わかりにくいものについては変更しました 。
53
+ ・業務で使うのがES6ということで、ES5関連の過去の記述方法については省略しました。
54
+ ・ES8や策定中の機能については省略しました。
55
+ ・デザインパターンやアルゴリズムについては省略しました 。
56
56
</div >
57
57
58
58
59
59
60
60
61
61
## ** Variables**
62
- > 利用範囲の広い変数には意味のある名前を利用しましょう
63
- 例にconst (定数)として使う場合にこれが該当します。
62
+ > 利用範囲の広い変数には意味のある名前を利用しましょう
63
+ > 例えばconst (定数)として使う場合にこれが該当します。
64
64
65
65
** Bad:**
66
66
``` javascript
@@ -134,7 +134,7 @@ let revision = '20171218164030';
134
134
let [, year, month, day, hour, minute, second] = revision .match (/ ^ (\d {4} )(\d {2} )(\d {2} )(\d {2} )(\d {2} )(\d {2} )/ );
135
135
console .info (new Date (year, month, day, hour, minute, second)); // Thu Jan 18 2018 16:40:30 GMT+0900 (JST)
136
136
```
137
- <img src =" https://github.com/misak1/clean-code-javascript/blob/master/point-50.png?raw=true " width =" 20 " /> match戻り値[ 0] を切り捨てる為に0番目を宣言しないことで捨てている(後述の分割代入構文 )
137
+ <img src =" https://github.com/misak1/clean-code-javascript/blob/master/point-50.png?raw=true " width =" 20 " /> match戻り値[ 0] を切り捨てる為に0番目を宣言しないことで捨てています。(後述の分割代入構文が使われています )
138
138
139
139
140
140
### メンタルマップを避ける
@@ -169,7 +169,7 @@ locations.forEach((___location) => {
169
169
});
170
170
```
171
171
172
- <img src =" https://github.com/misak1/clean-code-javascript/blob/master/point-50.png?raw=true " width =" 20 " /> 要するに他人に見せてもしょうがないコメントは不安を煽るだけだから残すなということ!?
172
+ <img src =" https://github.com/misak1/clean-code-javascript/blob/master/point-50.png?raw=true " width =" 20 " /> 要するに他人が見た時に不安を煽るだけのコメントは消しましょう。
173
173
forEachでループするものが___locationとしておけば迷わないよ!ということ
174
174
175
175
### 不必要なコンテキストを加えない
@@ -231,15 +231,12 @@ function createMicrobrewery(breweryName = 'Hipster Brew Co.') {
231
231
## ** Functions**
232
232
### 関数の引数(2つ以下が理想的)
233
233
234
- 関数の引数の数を制限することは、テストを簡単に行えるという点において非常に重要なことです。
235
- 3つ以上あるということは、それぞれ別の引数を伴った数多くの異なるケースをテストしなければならないという問題につながります。
236
-
237
- 1つか2つの場合は理想的で、3つ以上になる場合は次の手法を検討してください。
238
- ほとんどの場合、上位のオブジェクトを引数とすれば十分でしょう。
239
-
240
- JavaScriptは、多くのクラスの雛形がなくとも素早くオブジェクトを作成することができるため、もし多くの引数を必要としているとわかった場合は、オブジェクトを使うことができます。
241
-
242
- これを解決するのがES2015/ES6のdestructuring assignment(分割代入構文)です。
234
+ 関数の引数の数を制限することは、テストを簡単に行えるという点において非常に重要なことです。
235
+ 3つ以上あるということは、それぞれ別の引数を伴った数多くの異なるケースをテストしなければならないという問題につながります。
236
+
237
+ JavaScriptは、多くのクラスの雛形がなくとも素早くオブジェクトを作成することができるため、もし多くの引数を必要としているとわかった場合は、オブジェクトを使うことができます。
238
+
239
+ これを解決するのがES2015/ES6のdestructuring assignment(分割代入構文)です。
243
240
244
241
** Bad:**
245
242
``` javascript
@@ -264,8 +261,8 @@ createMenu({
264
261
265
262
### 関数は1つのことを行うこと
266
263
267
- これはとても重要なルールです。
268
- 関数をただ1つのことをやるように分離できた場合、それらを簡単にリファクタリングしたり、コードをかなりしっかりと読むことができます。
264
+ これはとても重要なルールです。
265
+ 関数をただ1つのことをやるように分離できた場合、それらを簡単にリファクタリングしたり、コードをかなりしっかりと読むことができます。
269
266
270
267
** Bad:**
271
268
``` javascript
@@ -321,7 +318,7 @@ addMonthToDate(1, date);
321
318
322
319
### 重複したコードを削除すること
323
320
324
- > 重複したコードを避けるために絶対にベストを尽くしてください。
321
+ > 重複したコードを避けるために絶対にベストを尽くしてください。
325
322
> 重複したコードは、もし何かのロジックを変更しようとした場合、何か変更する場所が1つ以上あるという意味で悪です。
326
323
327
324
** Bad:**
@@ -385,7 +382,7 @@ function showEmployeeList(employees) {
385
382
}
386
383
```
387
384
388
- <img src =" https://github.com/misak1/clean-code-javascript/blob/master/point-50.png?raw=true " width =" 20 " /> サンプルはリファクタリングとしてはいい例だと思いますが少々わかりにくいですね 。
385
+ <img src =" https://github.com/misak1/clean-code-javascript/blob/master/point-50.png?raw=true " width =" 20 " /> サンプルはリファクタリングとしてはいい例なのですが少々わかりにくいですね 。
389
386
最悪なのはコピペされたコードが複数箇所に点在していることです。
390
387
391
388
### Object.assignでデフォルトオブジェクトを設定すること
@@ -438,11 +435,10 @@ createMenu(menuConfig);
438
435
<img src =" https://github.com/misak1/clean-code-javascript/blob/master/point-50.png?raw=true " width =" 20 " /> 似ているObject.assignと分割代入構文
439
436
Object.assignはオブジェクトのテンプレートを定義することに対し分割代入構文はその場でオブジェクトを作ること
440
437
441
-
442
438
### フラグを関数の引数のように利用しない
443
439
444
- > フラグは、この関数が複数のことを行うことを利用者に伝えます。
445
- > 関数は1つのことを行うべきです。関数が真偽値によって異なるコードの経路を経由する場合、その関数を分割してください。
440
+ > フラグは、この関数が複数のことを行うことを利用者に伝えます。
441
+ > 関数は1つのことを行うべきです。関数が真偽値によって異なるコードの経路を経由する場合、その関数を分割してください。
446
442
447
443
** Bad:**
448
444
``` javascript
@@ -466,11 +462,9 @@ function createTempFile(name) {
466
462
}
467
463
```
468
464
469
- <img src =" https://github.com/misak1/clean-code-javascript/blob/master/point-50.png?raw=true " width =" 20 " /> ケースバイケースかと思います。
470
-
465
+ <img src =" https://github.com/misak1/clean-code-javascript/blob/master/point-50.png?raw=true " width =" 20 " /> これはケースバイケースかと思います。
471
466
472
467
473
- ### Don't write to global functions
474
468
### グローバル関数に書き込まない
475
469
476
470
> グローバルを汚染することはJavaScriptにおけるバッドプラクティスです。
@@ -523,7 +517,7 @@ if (isDOMNodePresent(node)) {
523
517
}
524
518
```
525
519
526
- <img src =" https://github.com/misak1/clean-code-javascript/blob/master/point-50.png?raw=true " width =" 20 " /> 裏の裏は表みたいなややこしいことはしないで、基本を肯定で作りましょう
520
+ <img src =" https://github.com/misak1/clean-code-javascript/blob/master/point-50.png?raw=true " width =" 20 " /> 裏の裏は表みたいなややこしいことはしないで、基本を肯定で作りましょう
527
521
何もしないブロックがあってもいいと思う(後述のコメント削除)
528
522
529
523
@@ -650,8 +644,8 @@ console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
650
644
651
645
### メソッドチェーンを利用すること
652
646
653
- これは、JavaScriptの中で非常に有用なパターンで、jQueryやLodashのような多くのライブラリの中でみることができます。
654
- クラスの関数の中の全ての関数の終わりで、単純に` this ` を返すことで、クラスの中にあるメソッドをチェーンすることができます。
647
+ これは、JavaScriptの中で非常に有用なパターンで、jQueryやLodashのような多くのライブラリの中でみることができます。
648
+ クラスの関数の中の全ての関数の終わりで、単純に` this ` を返すことで、クラスの中にあるメソッドをチェーンすることができます。
655
649
656
650
** Bad:**
657
651
``` javascript
@@ -727,8 +721,8 @@ const car = new Car()
727
721
## ** 同期処理**
728
722
### コールバックではなく、Promiseを使う
729
723
730
- コールバックは簡潔ではありません、そしてそれらは過剰な量のネストを引き起こします。
731
- ES2015/ES6ではPromiseがグローバルに組み込まれています。それらを使いましょう!
724
+ コールバックは簡潔ではありません、そしてそれらは過剰な量のネストを引き起こします。
725
+ ES2015/ES6ではPromiseがグローバルに組み込まれています。それらを使いましょう!
732
726
733
727
** Bad:**
734
728
``` javascript
@@ -772,16 +766,16 @@ get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')
772
766
773
767
## ** Error Handling**
774
768
775
- 例外が発生することは良いことです!この意味は、ランタイムがあなたのプログラムが何かおかしいことを正常に突き止めたということです。
776
- それは、関数の実行を直近のスタックで停止し、そのプロセスを停止し(ノード中)、コンソールのスタックトレースを通じてあなたに知らせてくれます。
769
+ 例外が発生することは良いことです!この意味は、ランタイムがあなたのプログラムが何かおかしいことを正常に突き止めたということです。
770
+ それは、関数の実行を直近のスタックで停止し、そのプロセスを停止し(ノード中)、コンソールのスタックトレースを通じてあなたに知らせてくれます。
777
771
778
772
### Don't ignore caught errors
779
773
### 例外が捕らえられたことを無視しない
780
774
781
- 例外を捕捉して何もしないということは、あなたがそのエラーを修正したり、エラーが言ったことに対応したりすることができません。
782
- コンソール(` console.log ` )にエラーを出力することは、頻繁にコンソール出力された海に埋もれてしまうため、それほど良いことではありません。
783
- コードの一部を ` try/catch ` で囲うということは、そこでエラー発生するかもしれないということを意味します。
784
- したがって、エラーが発生した時のために、なにかの対策をしたり、コードの行き先を作らなければなりません。
775
+ 例外を捕捉して何もしないということは、あなたがそのエラーを修正したり、エラーが言ったことに対応したりすることができません。
776
+ コンソール(` console.log ` )にエラーを出力することは、頻繁にコンソール出力された海に埋もれてしまうため、それほど良いことではありません。
777
+ コードの一部を ` try/catch ` で囲うということは、そこでエラー発生するかもしれないということを意味します。
778
+ したがって、エラーが発生した時のために、なにかの対策をしたり、コードの行き先を作らなければなりません。
785
779
786
780
** Bad:**
787
781
``` javascript
@@ -807,10 +801,7 @@ try {
807
801
}
808
802
```
809
803
810
- ### Don't ignore rejected promises
811
804
### 失敗したpromiseを無視しない
812
- For the same reason you shouldn't ignore caught errors
813
- from ` try/catch ` .
814
805
815
806
同じ理由により、` try/catch ` にて発生した例外を無視するべきではありません。
816
807
@@ -892,9 +883,6 @@ class Alpaca {}
892
883
songs、artistsがSMALLCASE?にする
893
884
894
885
895
-
896
-
897
-
898
886
### Function callers and callees should be close
899
887
### 関数の呼び出し元と呼び出し先は近くにあること
900
888
@@ -983,9 +971,7 @@ review.perfReview();
983
971
984
972
985
973
## ** Comments**
986
- ## ** コメント**
987
974
988
- ### Only comment things that have business logic complexity.
989
975
### ビジネスロジックが複雑なものにのみコメントすること
990
976
Comments are an apology, not a requirement. Good code * mostly* documents itself.
991
977
@@ -1031,9 +1017,7 @@ function hashIt(data) {
1031
1017
```
1032
1018
1033
1019
1034
- ### Don't leave commented out code in your codebase
1035
1020
### コメントアウトしたコードをコードベースに残さない
1036
- Version control exists for a reason. Leave old code in your history.
1037
1021
1038
1022
バージョン管理があることがその理由です。古いコードは履歴に残しましょう。
1039
1023
@@ -1051,7 +1035,6 @@ doStuff();
1051
1035
```
1052
1036
1053
1037
1054
- ### Don't have journal comments
1055
1038
### 日記のようなコメントは持たない
1056
1039
特に日記の様なコメント。
1057
1040
履歴を取得するためには ` git log ` を使ってください!
0 commit comments