はじめに
今回は、エンジニアになるのであれば必要なスキルになる、読みやすいコードを書く方法についてアウトプットしていこうと思います！
なぜ読みやすいコードを書くのか
コードを読みやすこ書くことがなぜ必要であるのか、そのメリットについては以下のようなことが挙げられます！
- 個人・組織の生産性が上がる
- 保守性が上がる
- 柔軟な開発環境が構築できる
このようなことを実現するためにエンジニアはリファクタリングを行う必要が、開発中・開発後にあります！
リファクタリング
リファクタリングとは、実装した機能に影響を与えずに、ソースコードを読みやすい状態に改善することです！
これをすることで、開発に携わる全ての人にとって、実装されているコードの理解や修正が容易になります！
では、読みやすいコードにするための方法やポイントについてまとめていこうと思います！
分かりやすい関数、変数名を使う
変数や関数の名前を定義するときには自分以外の人にも分かりやすい名前をつけることを心がけましょう！
そうすることで、チームのメンバー、自分の負担を減らすことができます！
では、分かりやすい名前をつけるときに気をつけることはなんでしょうか？
それは、抽象的な名前をさけ、具体的な名前をつけることを心がけましょう！
抽象的な名前にすると、読み手は変数に代入されている値の役割を把握できず、理解することに時間がかかってしまうからです！
悪い例といい例を紹介します！
悪い例 const one = 1; いい例 const user_id = 1;
関数についても同様のことが言えます！
関数の場合は名詞＋動詞にすることで関数の意味を分かりやすいものにしましょう！
例として以下のようなものがあります！
const addTask = () => {
}
こんな感じです！
ロジックは単純化する
実装の中で、ネストされているコードの中にネストの記述をする場合があります！
しかし、これでは複雑すぎます！
なので、これをリファクタリングする方法について紹介します！
ネストの中にネストは避ける
ネストの中にネストを入れていますことは非常に複雑なコードになってしまいます！
この読みずらさを解消するために以下のようなことを気を付けていく必要があります！
- 早い段階で戻り値を返し、処理自体を小分けにする
- 論理演算子を使う
以下のようにやります！
const getYear = (year) => {
if (year % 4 == 0){
if (year % 100 == 0 && year % 400 != 0){ console.log(`${year}年は閏年ではありません`);
} else {
console.log(`${year}年は閏年です`);
}
}else { console.log(`${year}年は閏年ではありません`); }
};
このような感じでネストにネストが入っているコードを
const getYear = (year) => {
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
console.log(`${year}年は閏年です`);
} else {
console.log(`${year}年は閏年ではありません`);
}
};
というように論理演算子などを用いることによって読みやすいものにすることができます！
条件式は簡潔に
条件式についてもきを付けないといけません！
これも長くなってしますと、読みにくくなってしまう大きな原因の１つになってしまうからです！
条件式は予め関数化しておき、その関数を呼び出す記述様式にします！
const isLeapYear? = (year) => {
return year % 4 == 0 && year % 100 != 0 || year % 400 == 0; };
if (isLeapYear?(year)) {
console.log(`${year}年は閏年です`);
} else {
console.log(`${year}年は閏年ではありません`);
}
複雑な条件を分解する
関数化した処理はまだ読みづらさが残っていまうことがあります！
処理の内容を把握するのに少し時間がかかってしまいます！
そのため、条件式を分解するとより読みやすくなります！
const isLeapYear? = (year) => {
if (year % 400 == 0) {
return true;
}
if (year % 100 == 0) {
return false;
}
if (year % 4 ==0) {
return true;
}
return false;
};
if (isLeapYear?(year)) {
console.log(`${year}年は閏年です`);
} else {
console.log(`${year}年は閏年ではありません`);
}
こんな感じに複数のif文を使って分解します！
コメントで正確な情報を与える
コメントをつけることによって、実装者の糸を読み手に伝えることができます！
// yearが閏年かどうかを判定する関数
const isLeapYear? = (year) => {
if (year % 400 == 0) {
// 400で割り切れる年は閏年
return true;
}
このような感じでコメントをすることでより正確に伝えることができます！
コメントを残さない場面
コメントは全てに残すわけではなく、残さないほうがいい場面も存在します！
例として
- コメントの補足コメント
- 酷いコードに補う補助的なコメント
などがあります！
コメント