リーダブルコード（The Art of Readable Code）の読書ノートです。今回の記事では、コードの見た目を工夫するための基本的なポイントを紹介します。
コードの改善ポイント
1. コメントの整理
例えば、以下のようなコードがあるとします：
const wifi = new TcpConnectionSimulator(
500, /* Kbps */
80, /* millisecs latency */
200, /* jitter */
1 /* packet loss % */
);
const t3_fiber = new TcpConnectionSimulator(
45000, /* Kbps */
10, /* millisecs latency */
0, /* jitter */
0 /* packet loss % */
);
const cell = new TcpConnectionSimulator(
100, /* Kbps */
400, /* millisecs latency */
250, /* jitter */
5 /* packet loss % */
);
これを、次のように整理することで、コードの構造がより明確になります：
// TcpConnectionSimulator(throughput, latency, jitter, packet_loss)
// [Kbps] [ms] [ms] [percent]
const wifi = new TcpConnectionSimulator(500, 80, 200, 1);
const t3_fiber = new TcpConnectionSimulator(45000, 10, 0, 0);
const cell = new TcpConnectionSimulator(100, 400, 250, 5);
2. 列を揃えると、見えやすくなる
似たような構造を持つコードブロックがあると、このように整理することで、変数名と値の関係が明確になります。
// 変数をイコール揃えにする
const details = request.body.details;
const location = request.body.location;
const phone = request.body.phone;
const email = request.body.email;
const url = request.body.url;
3. 順序の一貫性を保つ
コードがあるところで A、B、C と書いていると、別の場所は B、C、A と書かないでください。アルファベット順や、処理実行の順など、何らかのルールを決めて従いましょう。デバッグにも楽。
悪い例：
const details = request.body.details;
const location = request.body.location;
const phone = request.body.phone;
const email = request.body.email;
const url = request.body.url;
// 同じ順番ではない
if (details) { record.details = details; }
if (phone) { record.phone = phone; } // locationはどこであるの？
if (email) { record.email = email; }
if (url) { record.url = url; }
if (location) { record.location = location; } // なぜlocationはここにあるの？
4. 宣言をブロックにまとめる
似たような処理の変数や関数の宣言をブロックにまとめましょう。
修正前 :
class FrontendServer {
constructor() {}
ViewProfile(request) {}
OpenDatabase(location, user) {}
SaveProfile(request) {}
ExtractQueryParam(request, param) return "";
ReplyOK(request, html) {}
FindFriends(request) {}
ReplyNotFound(request, error) {}
CloseDatabase(location) {}
}
修正後 :
class FrontendServer {
constructor() {}
// リクエストハンドラ
viewProfile(request) { /* ... */ }
saveProfile(request) { /* ... */ }
findFriends(request) { /* ... */ }
// リクエスト/レスポンス
extractQueryParam(request, param) { /* ... */ }
replyOK(request, html) { /* ... */ }
replyNotFound(request, error) { /* ... */ }
// データベース
openDatabase(location, user) { /* ... */ }
closeDatabase(location) { /* ... */ }
}
5. コードで段落分けを行う
複雑なロジックがある場合、同じ処理を空白行で区切ります。
修正前 :
function suggestNewFriends(user, emailPassword) {
const friends = user.friends();
const friendEmails = new Set(friends.map(f => f.email));
const contacts = importContacts(user.email, emailPassword);
const contactEmails = new Set(contacts.map(c => c.email));
const nonFriendEmails = new Set([...contactEmails].filter(x => !friendEmails.has(x)));
const suggestedFriends = User.findAll({ where: { email: Array.from(nonFriendEmails) } });
const display = {
user,
friends,
suggestedFriends
};
return render("suggestedFriends.html", display);
}
修正後 :
function suggestNewFriends(user, emailPassword) {
// ユーザーの友達のメールアドレスを取得
const friends = user.friends();
const friendEmails = new Set(friends.map(f => f.email));
// ユーザーのメールアカウントから全てのメールアドレスをインポート
const contacts = importContacts(user.email, emailPassword);
const contactEmails = new Set(contacts.map(c => c.email));
// まだ友達ではないマッチングユーザーを見つける
const nonFriendEmails = new Set([...contactEmails].filter(x => !friendEmails.has(x)));
const suggestedFriends = User.findAll({ where: { email: Array.from(nonFriendEmails) } });
// ページに表示
const display = {
user,
friends,
suggestedFriends
};
return render("suggestedFriends.html", display);
}
6. コードの一貫性を重視する
例えば、クラスの括弧の位置について、以下の2つの書き方があるとします：
class Logger {
};
// または
class Logger
{
};
「正しい」スタイルよりも、一貫性の方が重要です。
チームで開発する場合、どちらかの書き方を選んで、それに従うことが重要です。スタイルを混在させると、コードの読みやすさが下げます。コーディングスタイルを統一しよう！
所感
ある程度デザインと同じね