純粋なJavaScriptテスト。 書式設定 コメント

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(); // ... } perfReview() { this.getPeerReviews(); this.getManagerReview(); this.getSelfReview(); } getManagerReview() { const manager = this.lookupManager(); } getSelfReview() { // ... } } const review = new PerformanceReview(user); review.perfReview();
      
      





良い:



 class PerformanceReview { constructor(employee) { this.employee = employee; } perfReview() { this.getPeerReviews(); this.getManagerReview(); this.getSelfReview(); } getPeerReviews() { const peers = this.lookupPeers(); // ... } lookupPeers() { return db.lookup(this.employee, 'peers'); } getManagerReview() { const manager = this.lookupManager(); } lookupManager() { return db.lookup(this.employee, 'manager'); } getSelfReview() { // ... } } const review = new PerformanceReview(employee); review.perfReview();
      
      







コメント



複雑なビジネスロジックを記述するコードのみにコメントする



コメントはオプションです。 良いコードはそれ自身を説明しています。



悪い:



 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; //   32-  hash &= hash; } }
      
      





良い:



 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; //   32-  hash &= hash; } }
      
      





不要なコードにはコメントしないでください



これにはバージョン管理システムがあります。 バージョン管理システムの履歴に古いコードを残します。



悪い:



 doStuff(); // doOtherStuff(); // doSomeMoreStuff(); // doSoMuchStuff();
      
      





良い:



 doStuff();
      
      





コメント日記をつけないでください



注意:バージョン管理システムを使用する必要があります! 実行不可能なコード、コメントアウトされたコード、特にコメントジャーナルには不要です。

git logを使用してストーリーを取得してください!



悪い:



 /** * 2016-12-20: Removed monads, didn't understand them (RM) * 2016-10-01: Improved using special monads (JP) * 2016-02-03: Removed type-checking (LI) * 2015-03-14: Added combine with type-checking (JR) */ function combine(a, b) { return a + b; }
      
      





良い:



 function combine(a, b) { return a + b; }
      
      





位置マーカーを避ける



彼らは通常、邪魔をします。 関数と変数名を、対応する深化とフォーマットとともに、コードの視覚的構造を与えます。



悪い:



 //////////////////////////////////////////////////////////////////////////////// // Scope Model Instantiation //////////////////////////////////////////////////////////////////////////////// $scope.model = { menu: 'foo', nav: 'bar' }; //////////////////////////////////////////////////////////////////////////////// // Action setup //////////////////////////////////////////////////////////////////////////////// const actions = function() { // ... };
      
      





良い:



 $scope.model = { menu: 'foo', nav: 'bar' }; const actions = function() { // ... };
      
      






All Articles