【徹底比較】Google JavaScript Style Guide・StandardJS・TypeScript サンプルコードとその特徴・違い

ソフトウェア開発では、コードの可読性や保守性を高めるため、プロジェクトに合わせたスタイルガイドの採用が重要です。今回は、JavaScript と TypeScript に着目し、代表的な以下のスタイルガイドに沿ったサンプルコードとその特徴・違いを解説します。

Google JavaScript Style Guide
StandardJS
TypeScript（静的型付けのメリットを活かした書き方）

1. Google JavaScript Style Guide のサンプルコード

Google の JavaScript Style Guide は、厳格モードの利用、JSDoc による関数の詳細なドキュメント、伝統的な function 宣言、lowerCamelCase の命名規則、セミコロンの明示的使用などが特徴です。以下は、非負の整数の階乗を再帰的に計算するコード例です。

'use strict';

/**
 * 非負の整数 n の階乗を再帰的に計算します.
 *
 * @param {number} n - 非負の整数.
 * @return {number} n の階乗.
 * @throws {Error} n が負の場合.
 */
function factorial(n) {
  if (n < 0) {
    throw new Error('n must not be negative');
  }
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

var number = 5;
console.log('Factorial of ' + number + ' is ' + factorial(number));

2. StandardJS のサンプルコード

StandardJS はシンプルかつ設定不要で導入できる点が魅力です。特徴としては、セミコロンを省略、シングルクォートの使用、ES6 のアロー関数やテンプレートリテラルなどモダンな構文を積極的に採用することが挙げられます。以下は同じく階乗計算を行うサンプルコードです。

const factorial = n => {
  if (n < 0) {
    throw new Error('n must not be negative')
  }
  if (n === 0) {
    return 1
  }
  return n * factorial(n - 1)
}

const number = 5
console.log(`Factorial of ${number} is ${factorial(number)}`)

3. TypeScript のサンプルコード

TypeScript は静的型付けにより、コード実行前に型チェックが可能なため、開発効率と品質向上に寄与します。以下のサンプルコードでは、TypeScript の型注釈を用いて、先ほどと同様に非負の整数の階乗を計算する関数を実装しています。

/**
 * 非負の整数 n の階乗を再帰的に計算します。
 *
 * @param n - 非負の整数
 * @returns n の階乗
 * @throws Error n が負の場合にスローされます
 */
function factorial(n: number): number {
  if (n < 0) {
    throw new Error('n must not be negative');
  }
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

const number: number = 5;
console.log(`Factorial of ${number} is ${factorial(number)}`);

各スタイルの特徴・違いの比較

Google JavaScript Style Guide

記述方法:
- 'use strict'; による厳格モードの採用
- function 宣言と JSDoc コメントによる詳細なドキュメント記述
- lowerCamelCase の命名、セミコロンの明示的使用
メリット:
- 豊富なドキュメントにより、コードの意図や動作が明確になる
- 厳格モードにより、不意のバグを防止できる

StandardJS

記述方法:
- セミコロンを不要とし、よりシンプルなコード記述
- アロー関数、テンプレートリテラルなど ES6 のモダンな構文を活用
- 設定なしで即導入可能な点が魅力
メリット:
- コードがコンパクトで読みやすく、ルールがシンプルなため統一しやすい

TypeScript

記述方法:
- 静的型付けのため、変数や関数に型注釈を記述
- 型安全性により、実行前にエラーを検出可能
- JavaScript の記法を基盤としつつ、型情報を追加することで保守性と可読性を向上
メリット:
- 型エラーをコンパイル時に検出でき、実行時のバグを低減
- 開発時の補完機能など、IDEサポートが充実している

まとめ

今回紹介した各スタイルガイドは、以下のような特徴と利点を持っています。

Google JavaScript Style Guide は、徹底したドキュメント化と厳格なコード記述を通じて、大規模なエンタープライズプロジェクト向けの堅牢な実装を実現します。
StandardJS は、シンプルかつモダンな構文を活用することで、誰でも容易に導入でき、チーム全体での統一感を保つことができます。
TypeScript は、静的型付けを取り入れることで、実行前のエラー検出やIDEによる支援が受けられ、コードの保守性や拡張性を大幅に向上させます。

プロジェクトの規模や開発チームのニーズに応じて、最適なスタイルガイドを選定することで、より高品質で保守性の高いコードの実現につながります。