Habrahabrの読者に、Ryan McDermottの
本Clean-code-javascriptの翻訳を提供します。
目次
テスト中
テストは開発の非常に重要な部分です。 テストを受けていない、または十分ではない場合、何も壊さないことをどのように確認できますか？ チームはテストでカバーされるコードの量を自分で決定する必要がありますが、テストでカバーされるコードが多いほど、開発者は静かに眠ります。 つまり、優れたテストツールに加えて、優れたテストツールを使用し
てコードカバレッジをテストする必要があり
ます 。 テストを書かない理由はありません。
優れたテストツールの選択を次に示します。 チームにとって便利なものを選択したら、新しいモジュールまたは機能ごとにテストを作成します。 テスト駆動開発TDDを選択した場合は問題ありませんが、主なことは、新しいコードを開発したり、既存のコードをリファクタリングする前に、テストがすべての目標を確実に満たすようにすることです。
1つのテスト-1つの説明。
悪い：
const assert = require('assert'); describe('MakeMomentJSGreatAgain', () => { it(' ', () => { let date; date = new MakeMomentJSGreatAgain('1/1/2015'); date.addDays(30); date.shouldEqual('1/31/2015'); date = new MakeMomentJSGreatAgain('2/1/2016'); date.addDays(28); assert.equal('02/29/2016', date); date = new MakeMomentJSGreatAgain('2/1/2015'); date.addDays(28); assert.equal('03/01/2015', date); }); });
良い：
const assert = require('assert'); describe('MakeMomentJSGreatAgain', () => { it(' 30 ', () => { const date = new MakeMomentJSGreatAgain('1/1/2015'); date.addDays(30); date.shouldEqual('1/31/2015'); }); it(' ', () => { const date = new MakeMomentJSGreatAgain('2/1/2016'); date.addDays(28); assert.equal('02/29/2016', date); }); it(' ', () => { const date = new MakeMomentJSGreatAgain('2/1/2015'); date.addDays(28); assert.equal('03/01/2015', date); }); });
書式設定
フォーマットは主観的です。 従わなければならない厳しい規則はありません。 主なルールは、フォーマットについて議論することではありません。 これを自動化する
ツールは
たくさんあります 。 1つだけを使用してください！
フォーマットの議論は、開発者にとって時間とお金の無駄です。
自動書式設定の範囲に入らないもの（インデント、タブまたはスペース、二重引用符または一重引用符など）については、マニュアルを参照してください。
1つの命名規則を使用します
JavaScriptは型付けされていないため、変数、関数などに名前を付けると、それらについて多くのことがわかります。 これらのルールは主観的であるため、チームは必要なオプションを選択できます。 どのオプションを選択しても、選択に固執します。
悪い：
const DAYS_IN_WEEK = 7; const daysInMonth = 30; const songs = ['Back In Black', 'Stairway to Heaven', 'Hey Jude']; const Artists = ['ACDC', 'Led Zeppelin', 'The Beatles']; function eraseDatabase() {} function restore_database() {} class animal {} class Alpaca {}
良い：
const DAYS_IN_WEEK = 7; const DAYS_IN_MONTH = 30; const songs = ['Back In Black', 'Stairway to Heaven', 'Hey Jude']; const artists = ['ACDC', 'Led Zeppelin', 'The Beatles']; function eraseDatabase() {} function restoreDatabase() {} class Animal {} class Alpaca {}
関連する機能は近くにある必要があります
関数が別の関数を呼び出す場合、これらの関数をソースファイルに垂直方向に近い場所に保存します。 理想的には、別の関数を使用する関数はそのすぐ上にある必要があります。 私たちは新聞のように上から下にコードを読む傾向があります。 このため、この方法でコードを配置すると便利です。
悪い：
class PerformanceReview { constructor(employee) { this.employee = employee; } lookupPeers() { return db.lookup(this.employee, 'peers'); } lookupManager() { return db.lookup(this.employee, 'manager'); } getPeerReviews() { const peers = this.lookupPeers();
良い：
class PerformanceReview { constructor(employee) { this.employee = employee; } perfReview() { this.getPeerReviews(); this.getManagerReview(); this.getSelfReview(); } getPeerReviews() { const peers = this.lookupPeers();
コメント
複雑なビジネスロジックを記述するコードのみにコメントする
コメントはオプションです。 良いコードはそれ自身を説明しています。
悪い：
function hashIt(data) {
良い：
function hashIt(data) { let hash = 0; const length = data.length; for (let i = 0; i < length; i++) { const char = data.charCodeAt(i); hash = ((hash << 5) - hash) + char;
不要なコードにはコメントしないでください
これにはバージョン管理システムがあります。 バージョン管理システムの履歴に古いコードを残します。
悪い：
doStuff();
良い：
doStuff();
コメント日記をつけないでください
注意：バージョン管理システムを使用する必要があります！ 実行不可能なコード、コメントアウトされたコード、特にコメントジャーナルには不要です。
git logを使用してストーリーを取得してください！
悪い：
function combine(a, b) { return a + b; }
良い：
function combine(a, b) { return a + b; }
位置マーカーを避ける
彼らは通常、邪魔をします。 関数と変数名を、対応する深化とフォーマットとともに、コードの視覚的構造を与えます。
悪い：
良い：
$scope.model = { menu: 'foo', nav: 'bar' }; const actions = function() {