JavaScript製ソースの品質を上げるために

　現在、私は会社でフロントエンド開発に携わっている（ペーペーの）プログラマである。先輩からコードレビューを受け続ける中、また自分でググったり本を読んだりする中で知った、いくつかのコツを書き溜めておこうと思う。

JavaScript製ソースの品質を上げるために
品質の高いコードとは

品質の高いコードとは

開発者側から見た品質と、ユーザ側から見た品質とでは観点が異なる。

開発会社側にとって品質が高いソースコードとは、コストを最小限にするソースコードである。ウォーターフォールに従うと設計→開発→テスト→保守→運用という流れを追うことになる。この中で開発担当者は、後工程のテスト, 保守, 運用フェーズ其々のコストを考慮してソースコードを書かねばならない。一方、ユーザー側からするとサクサク動くことが重要である。従って以下のような観点となる。

テストがしやすい

テストのしやすさを測るには主に２つの観点がある。

疎結合であること
シンプルであること

疎結合である

シンプルである

詳しくは脚注の参考図書が非常に勉強になる。具体的にテストが容易なソースコードの事例が多く挙げられている上、「関数の中に、オブジェクトがいくつインスタンス化されているか」など定量的に把握しやすい観点が紹介されており、読んですぐに実践できる点が良い。

www.oreilly.co.jp

保守がしやすい

原則として、実装担当者が保守を担当するとは限らない。そのため、誰が読んでも理解しやすいことが重要である。保守のしやすさを測る観点は以下の通りである。

コメントをつける

例を挙げておく。プログラマたるものコメントをきちんと残すことは必須である。本やブログにタイトルがあると理解の助けになるのと同様に、ソースコードもコメントに処理の概要が書いてあると理解の助けとなる。

/** @module color/mixer */

/** The name of the module. */
export const name = 'mixer';

/** The most recent blended color. */
export var lastColor = null;

/**
 * Blend two colors together.
 * @param {string} color1 - The first color, in hexadecimal format.
 * @param {string} color2 - The second color, in hexadecimal format.
 * @return {string} The blended color.
 */
export function blend(color1, color2) {}

// convert color to array of RGB values (0-255)
function rgbify(color) {}

export {
    /**
     * Get the red, green, and blue values of a color.
     * @function
     * @param {string} color - A color, in hexadecimal format.
     * @returns {Array.<number>} An array of the red, green, and blue values,
     * each ranging from 0 to 255.
     */
    rgbify as toRgb
}

/** Class representing a point. */
class Point {
    /**
     * Create a point.
     * @param {number} x - The x value.
     * @param {number} y - The y value.
     */
    constructor(x, y) {
        // ...
    }

    /**
     * Get the x value.
     * @return {number} The x value.
     */
    getX() {
        // ...
    }

    /**
     * Get the y value.
     * @return {number} The y value.
     */
    getY() {
        // ...
    }

    /**
     * Convert a string containing two comma-separated numbers into a point.
     * @param {string} str - The string containing two comma-separated numbers.
     * @return {Point} A Point object.
     */
    static fromString(str) {
        // ...
    }
}

詳しくは、以下を参照すると良い。

JSDocコメント - Google JavaScript スタイルガイド - 日本語訳 - アットウィキ