Skip to content

Commit 204a335

Browse files
author
Misaki Shibata
authored
Update README.md
1 parent 7a96832 commit 204a335

File tree

1 file changed

+40
-57
lines changed

1 file changed

+40
-57
lines changed

README.md

Lines changed: 40 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -36,31 +36,31 @@ JavaScriptに対するコーディング・ガイドになります。
3636
<a href="https://www.amazon.co.jp/dp/B001GSTOAM/ref=dp-kindle-redirect?_encoding=UTF8&amp;btkr=1" taget="_blank">Clean Code</a>は著者のRobert C. Martinらが長年の経験をもとにまとめたものです。
3737
こちらの本は言語は限定されていません。
3838

39-
キレイなコードは3R(Readable、Reusable、Refactorable)になっていることを指し
40-
読みやすい、再利用可能、理解や修正がしやすいように整理されている
41-
これらを目指すためのガイドになります。
39+
キレイなコードとは3R(Readable、Reusable、Refactorable)になっているものです。
40+
・Readable 読みやすい
41+
・Reusable 再利用可能
42+
・Refactorable 理解や修正がしやすいよう
4243

4344
全てのコードは、粘土が徐々に形作られていくように、曖昧な形から始まるものです。
44-
その後でコードレビューを行い、不要なコードを削除して作りあげていくものです。
45-
とも語られているそうです。
45+
その後でコードレビューを行い、不要なコードを削除して作りあげていくものだと書かれています。
4646

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+
改めてみてみると面白い発見がありましたので個人の見解も含めて紹介したいと思います。
5050

5151
### 変更内容
52-
サンプルコードについて一部わかりにくいものについては差し替えました
53-
・業務で使うのがES6ということで、ES5関連の過去の記述方法については削除
54-
ES8や策定中の機能については削除
55-
デザインパターンについては話がややこしくなるので省略します
52+
サンプルコードについて一部わかりにくいものについては変更しました
53+
・業務で使うのがES6ということで、ES5関連の過去の記述方法については省略しました。
54+
ES8や策定中の機能については省略しました。
55+
デザインパターンやアルゴリズムについては省略しました
5656
</div>
5757

5858

5959

6060

6161
## **Variables**
62-
> 利用範囲の広い変数には意味のある名前を利用しましょう
63-
例にconst(定数)として使う場合にこれが該当します。
62+
> 利用範囲の広い変数には意味のある名前を利用しましょう
63+
> 例えばconst(定数)として使う場合にこれが該当します。
6464
6565
**Bad:**
6666
```javascript
@@ -134,7 +134,7 @@ let revision = '20171218164030';
134134
let [, year, month, day, hour, minute, second] = revision.match(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/);
135135
console.info(new Date(year, month, day, hour, minute, second)); // Thu Jan 18 2018 16:40:30 GMT+0900 (JST)
136136
```
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番目を宣言しないことで捨てています。(後述の分割代入構文が使われています)
138138

139139

140140
### メンタルマップを避ける
@@ -169,7 +169,7 @@ locations.forEach((___location) => {
169169
});
170170
```
171171

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"/> 要するに他人が見た時に不安を煽るだけのコメントは消しましょう。
173173
forEachでループするものが___locationとしておけば迷わないよ!ということ
174174

175175
### 不必要なコンテキストを加えない
@@ -231,15 +231,12 @@ function createMicrobrewery(breweryName = 'Hipster Brew Co.') {
231231
## **Functions**
232232
### 関数の引数(2つ以下が理想的)
233233

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(分割代入構文)です。
243240

244241
**Bad:**
245242
```javascript
@@ -264,8 +261,8 @@ createMenu({
264261

265262
### 関数は1つのことを行うこと
266263

267-
これはとても重要なルールです。
268-
関数をただ1つのことをやるように分離できた場合、それらを簡単にリファクタリングしたり、コードをかなりしっかりと読むことができます。
264+
これはとても重要なルールです。
265+
関数をただ1つのことをやるように分離できた場合、それらを簡単にリファクタリングしたり、コードをかなりしっかりと読むことができます。
269266

270267
**Bad:**
271268
```javascript
@@ -321,7 +318,7 @@ addMonthToDate(1, date);
321318

322319
### 重複したコードを削除すること
323320

324-
> 重複したコードを避けるために絶対にベストを尽くしてください。
321+
> 重複したコードを避けるために絶対にベストを尽くしてください。
325322
> 重複したコードは、もし何かのロジックを変更しようとした場合、何か変更する場所が1つ以上あるという意味で悪です。
326323
327324
**Bad:**
@@ -385,7 +382,7 @@ function showEmployeeList(employees) {
385382
}
386383
```
387384

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"/> サンプルはリファクタリングとしてはいい例なのですが少々わかりにくいですね
389386
最悪なのはコピペされたコードが複数箇所に点在していることです。
390387

391388
### Object.assignでデフォルトオブジェクトを設定すること
@@ -438,11 +435,10 @@ createMenu(menuConfig);
438435
<img src="https://github.com/misak1/clean-code-javascript/blob/master/point-50.png?raw=true" width="20"/> 似ているObject.assignと分割代入構文
439436
Object.assignはオブジェクトのテンプレートを定義することに対し分割代入構文はその場でオブジェクトを作ること
440437

441-
442438
### フラグを関数の引数のように利用しない
443439

444-
> フラグは、この関数が複数のことを行うことを利用者に伝えます。
445-
> 関数は1つのことを行うべきです。関数が真偽値によって異なるコードの経路を経由する場合、その関数を分割してください。
440+
> フラグは、この関数が複数のことを行うことを利用者に伝えます。
441+
> 関数は1つのことを行うべきです。関数が真偽値によって異なるコードの経路を経由する場合、その関数を分割してください。
446442
447443
**Bad:**
448444
```javascript
@@ -466,11 +462,9 @@ function createTempFile(name) {
466462
}
467463
```
468464

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"/> これはケースバイケースかと思います。
471466

472467

473-
### Don't write to global functions
474468
### グローバル関数に書き込まない
475469

476470
> グローバルを汚染することはJavaScriptにおけるバッドプラクティスです。
@@ -523,7 +517,7 @@ if (isDOMNodePresent(node)) {
523517
}
524518
```
525519

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"/> 裏の裏は表みたいなややこしいことはしないで、基本を肯定で作りましょう
527521
何もしないブロックがあってもいいと思う(後述のコメント削除)
528522

529523

@@ -650,8 +644,8 @@ console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
650644

651645
### メソッドチェーンを利用すること
652646

653-
これは、JavaScriptの中で非常に有用なパターンで、jQueryやLodashのような多くのライブラリの中でみることができます。
654-
クラスの関数の中の全ての関数の終わりで、単純に`this`を返すことで、クラスの中にあるメソッドをチェーンすることができます。
647+
これは、JavaScriptの中で非常に有用なパターンで、jQueryやLodashのような多くのライブラリの中でみることができます。
648+
クラスの関数の中の全ての関数の終わりで、単純に`this`を返すことで、クラスの中にあるメソッドをチェーンすることができます。
655649

656650
**Bad:**
657651
```javascript
@@ -727,8 +721,8 @@ const car = new Car()
727721
## **同期処理**
728722
### コールバックではなく、Promiseを使う
729723

730-
コールバックは簡潔ではありません、そしてそれらは過剰な量のネストを引き起こします。
731-
ES2015/ES6ではPromiseがグローバルに組み込まれています。それらを使いましょう!
724+
コールバックは簡潔ではありません、そしてそれらは過剰な量のネストを引き起こします。
725+
ES2015/ES6ではPromiseがグローバルに組み込まれています。それらを使いましょう!
732726

733727
**Bad:**
734728
```javascript
@@ -772,16 +766,16 @@ get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')
772766

773767
## **Error Handling**
774768

775-
例外が発生することは良いことです!この意味は、ランタイムがあなたのプログラムが何かおかしいことを正常に突き止めたということです。
776-
それは、関数の実行を直近のスタックで停止し、そのプロセスを停止し(ノード中)、コンソールのスタックトレースを通じてあなたに知らせてくれます。
769+
例外が発生することは良いことです!この意味は、ランタイムがあなたのプログラムが何かおかしいことを正常に突き止めたということです。
770+
それは、関数の実行を直近のスタックで停止し、そのプロセスを停止し(ノード中)、コンソールのスタックトレースを通じてあなたに知らせてくれます。
777771

778772
### Don't ignore caught errors
779773
### 例外が捕らえられたことを無視しない
780774

781-
例外を捕捉して何もしないということは、あなたがそのエラーを修正したり、エラーが言ったことに対応したりすることができません。
782-
コンソール(`console.log`)にエラーを出力することは、頻繁にコンソール出力された海に埋もれてしまうため、それほど良いことではありません。
783-
コードの一部を `try/catch` で囲うということは、そこでエラー発生するかもしれないということを意味します。
784-
したがって、エラーが発生した時のために、なにかの対策をしたり、コードの行き先を作らなければなりません。
775+
例外を捕捉して何もしないということは、あなたがそのエラーを修正したり、エラーが言ったことに対応したりすることができません。
776+
コンソール(`console.log`)にエラーを出力することは、頻繁にコンソール出力された海に埋もれてしまうため、それほど良いことではありません。
777+
コードの一部を `try/catch` で囲うということは、そこでエラー発生するかもしれないということを意味します。
778+
したがって、エラーが発生した時のために、なにかの対策をしたり、コードの行き先を作らなければなりません。
785779

786780
**Bad:**
787781
```javascript
@@ -807,10 +801,7 @@ try {
807801
}
808802
```
809803

810-
### Don't ignore rejected promises
811804
### 失敗したpromiseを無視しない
812-
For the same reason you shouldn't ignore caught errors
813-
from `try/catch`.
814805

815806
同じ理由により、`try/catch`にて発生した例外を無視するべきではありません。
816807

@@ -892,9 +883,6 @@ class Alpaca {}
892883
songs、artistsがSMALLCASE?にする
893884

894885

895-
896-
897-
898886
### Function callers and callees should be close
899887
### 関数の呼び出し元と呼び出し先は近くにあること
900888

@@ -983,9 +971,7 @@ review.perfReview();
983971

984972

985973
## **Comments**
986-
## **コメント**
987974

988-
### Only comment things that have business logic complexity.
989975
### ビジネスロジックが複雑なものにのみコメントすること
990976
Comments are an apology, not a requirement. Good code *mostly* documents itself.
991977

@@ -1031,9 +1017,7 @@ function hashIt(data) {
10311017
```
10321018

10331019

1034-
### Don't leave commented out code in your codebase
10351020
### コメントアウトしたコードをコードベースに残さない
1036-
Version control exists for a reason. Leave old code in your history.
10371021

10381022
バージョン管理があることがその理由です。古いコードは履歴に残しましょう。
10391023

@@ -1051,7 +1035,6 @@ doStuff();
10511035
```
10521036

10531037

1054-
### Don't have journal comments
10551038
### 日記のようなコメントは持たない
10561039
特に日記の様なコメント。
10571040
履歴を取得するためには `git log` を使ってください!

0 commit comments

Comments
 (0)