【はじめての輪読会】リーダブルコード10~11章

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

1 最初に
2 10章無関係の下位問題を抽出する
3 11章一度に1つのことを
4 リーダブルコード輪読会の他のブログはこちら

最初に

こんにちは！佐々木千奈です。

輪読会も3周目に突入しましたね。今回私はリーダブルコード10章と11章をまとめていきます。

今週の輪読会はリーダブルコードは第三部、コードの再構成 を進めていきます。

10章無関係の下位問題を抽出する

関数の目的を明確にし、直接的に関係がないものは別の関数に抽出する。

無関係の下位問題を積極的に見つめて抽出する考え方

関数やコードブロックを見て、「このコードの高レベルの目標は何か？」と自問する。
コードの各行に対して、「高レベルの目標に直接効果があるのか？あるいは、無関係の下位問題を解決するのか？」自問する。
無関係の下位問題を解決しているコードが相当量あれば、それらを抽出して別の関数にする。

例 10.3 その他の汎用コード

JSのデバッグではよく、alart()でメッセージボックスをポップアップして情報を表示させる。以下の関数呼び出しではAjaxでデータをサーバに送信して、返ってきたディクショナリを表示している。

ajax_post({
	url: '<http://example.com/submit>',
	data: data,
	on_success: function(response_data){
		var str = "{\\n";
		for (var key in response_data){
			str += "" + key + "=" response_data[key] + "\\";
		}
		alart(str + "}");
		
		// 引き続き 'response_data' の処理
	}
});

上のコードの高レベルの目標は**「サーバをAjaxで呼び出してレスポンスを処理する」である。でも、このコードの大部分は「ディクショナリをキレイに印字(pretty_print)する」**という「無関係の下位問題」を解決しようとしている。

このコードを抽出して、format_pretty(obj)のような関数にする。

var format_pretty = function(obj) {
		var str = "{\\n";
		for (var key in response_data){
			str += "" + key + "=" response_data[key] + "\\";
		}
		return str + "}";
}

この関数を分離したことにより、objに期待するオブジェクト以外の文字列やundifinedなどが入った場合の例外処理なども簡単に追加することができるようになる。

その他10章メモ

無関係の下位問題を抽出して別の関数に抽出することで、コードが読みやすくなる上に個別にテストしたり再利用することが可能になる
ライブラリとして実装されていないユーティリティコードは自分で作成して使いまわすのが良い👍
1つの機能が独立した関数となることで、関数の改善が楽になる。
小さな関数を作りすぎると逆に読みにくくなってしまうためやりすぎに注意。

11章一度に1つのことを

一度に複数のことをするコードは理解しにくい。

そのため、コードは1つずつタスクを行うようにしなければいけない。

一度に1つのことを行うための手順

コードが行っている「タスク」を全て列挙する。これは「オブジェクトが妥当か判定する」から「ツリーのすべてのノードをイテレートする」まで。
タスクをできるだけ異なる関数に分割する。少なくとも異なる領域に分割する。

例 11.2 タスクは小さくできる

ブログに設置する投票用のウィジェットがある。ユーザーはUpとDownを投票できる。ユーザーの投票には以下のように3つの状態がある。これらの投票をscoreに反映させるためのコードを見てみよう。

ユーザーが投票や更新のためにボタンをクリックしたら以下のJavaScriptが呼び出される。

vote_changed(old_vote,new_vote); // 投票は”Up” or “Down”

もとのコード

var vote_changed = function(old_vote,new_vote){
	var score = get_score();

	if(new_vote !== old_vote){
		if(new_vote === 'UP'){
			score += (old_vote === 'Down' ? 2 : 1);
		} else if (new_vote ==='Down') {
			score -= (old_vote === 'Up' ? 2 : 1);
    } else if (new_vote === '') {
			score += (old_vote === 'Up' ? -1 : 1);
    }
	}
	set_score(score);
};

これは短いコードだが、前の状態から次の状態への変化により、scoreへの影響を全て考えて計算しており、複雑である。複雑であるため、間違いを見つけにくい。スコアを更新するという1つのことをやっているように見えて、実際には以下の2つの処理を行っている。

old_voteとnew_voteを数値にパースする
scoreを更新する。

これらのタスクを別々に解決すると、読みやすいコードになる。最初の（投票を数値にパースする）という処理をvote_valueという関数として切り出した場合、以下のようなコードに改善される。

一度に1つのことを行うように改善したコード

var vote_value = function(vote){
	if (vote === 'Up') {
		return +1;
	}
	if (vote === 'Down') 
		return -1
	}
	return 0;
};

var_vote_changed = function (old_vote, new_vote)  {
	var score = get_score();
	score -= vote_value(old_vote); // 古い値を削除する
	score += vote_value(new_vote); // 新しい値を追加する

	set_score(score); 
};