2024/2/15更新
概要
リーダブルコードを読んでいて、JavaやC++、Pythonの事例も混じっているのと割とレガシーな例題が多いなーと感じました。
React.js、Next.js、TypeScriptをメインにフロントエンドエンジニアとして仕事をしている自分用に、後で見返せるよう2024年JavaScript版リーダブルコードのチートシート的なものを改めて読み返しながら随時更新していきます。
そもそもリーダブルコードとは
ダスティン・ボスウェル著書の良いコードを書くための技術書です。
エンジニアになったら1度は目を通した方が良いとされる代表格の技術書ではないでしょうか？
意味としてのリーダブル(readable)コード(code)とは、「読みやすいコード」と直訳できます。
チーム開発ではスムーズな開発や保守性を担保するために読みやすいコードが必要とされます。
リーダブルコードではそんな読みやすいという曖昧な表現を具体化してくれる良書なので未読の方はぜひ一度読んでみてください。
また本記事も一緒に読み進めていけるようにリーダブルコードと同じ構成で書いていきます！
続編リンク
1章 理解しやすいコード(1p~)
コードは他の人が最短で理解できるように書く
//短ければいいってもんじゃない
-useEffect(() => {if (loginUser && loginUser.avatar_url{setAvatarUrl(loginUser.avatar_url)}
-}, [loginUser])
+useEffect(() => {
+ if (loginUser && loginUser.avatar_url) {
+ setAvatarUrl(loginUser.avatar_url)
+ }
+}, [loginUser])
2章 名前に情報を詰め込む(9p~)
明確な単語を選ぶ
「get」という単語からは何も伝わってこない
const getPage = (url) => {}
APIから取得するのではれば「fetch」の方がより明確
- const getPage = (url) => {}
+ const fetchPage = (url) => {}
3章 誤解されない名前(29p~)
3.1 例:filter()
// データベースから取得したオブジェクトの配列を模擬
const allObjects = [
{ id: 1, name: 'Object A', year: 2010 },
{ id: 2, name: 'Object B', year: 2012 },
{ id: 3, name: 'Object C', year: 2009 },
// 他のオブジェクト
];
これだとfilterの表現が曖昧
// 2011年オブジェクトだけを除外するフィルタリング
const filterObjects = allObjects.filter(obj => obj.year !== 2011);
excludedだと合間な表現が明確になる
- const filterObjects = allObjects.filter(obj => obj.year !== 2011);
+ const excludedObjects = allObjects.filter(obj => obj.year !== 2011);
3.2例:clip(text,length)
/*
clipの動作は2つ考えられる
・最後からlengthの文字を削除
・最大length文字まで切り詰める
*/
- const clip = (text,length) =>{
-
- }
//仮にtextをlength分削除するとしたら下記の方がわかりやすい
+ const removeChars = (text: string,length: number) =>{
+
+ }
意外とlength使ってしまう気がするから気をつけよ！
3.3限界値を求めるときはminとmaxを使う
3.4範囲を指定するときはfirstとlastを使う
3.5包含/排他的範囲にはbeginとendを使う
beginだとあまりしっくりこないためbeginはstartにしている
const printEventsInRange = (startDateTime, endDateTime) => {
// 関数の実装: startDateTimeからendDateTimeまでのイベントを印刷
}
3.6ブール値の名前
readPassword = true
上記の例は2つの解釈ができてしまうため曖昧な表現となる
- パスワードを読み取る必要がある
- パスワードを読み取っている
この2つを明確にするのであれば下記のようにするとわかりやすい
//パスワードを読み取る必要がある
- readPassword = true
+ isNeedPassword = true
//パスワードを読み取っている
- readPassword = true
+ isReadingPassword = true
3.7ユーザの期待に合わせる
例)get()
getMean関数に渡したsampleデータが膨大な量だったら高コスト
その上値を取得するのではなく計算するためgetは不適切。
- const getMean = (sampleData:data[])=>{
- //全てのサンプルをイテレートして、totla /num_samplesを返す
- }
//この場合はcomputeMeanの方が適切
+ const computeMean = (sampleData:data[])=>{
+ //全てのサンプルをイテレートして、totla /num_samplesを返す
+ }
3.8 例:複数の名前を検討する
再利用したいIDを複数の名前で検討する
[再利用したい実験のID]: 100;
let template = 100;
let reuse: 100;
let copy: 100;
template
「テンプレート」なのか「このテンプレートを使っている」のか曖昧でtemplate自体も抽象的な表現なのでここで使うには微妙
reuse(直訳:再利用)
//再利用できる回数なのか再利用するためのIDが100なのか曖昧なためIdを追加
- let reuse = 100
+ let reuseId = 100
copy
//100回目のコピーか100回コピーするのか曖昧なのでExperimentを追加
- let copy = 100;
+ let copyExperiment = 100
続きはこちら