👏

クリーンコード変数定義編

2023/05/27に公開

JavaScript

クリーンコード

tech

初めに

「プログラミング中級者になりたい人のためのクリーンコード入門」講座を受講して、個人的に参考になったところを簡単にまとめたいと思います。今回は変数定義についてです。本当にさらっと、、

分割代入

配列は添字ではなく分割代入を使用し参照する

// ダメな例
const coordinates = [35.652832, 139.839478]
console.log(`東京の緯度は${coordinates[0]}、経度は${coordinates[1]}です。`)

// 良い例
const [latitude, longitude] = [35.652832, 139.839478]
console.log(`東京の緯度は${latitude}、経度は${longitude}です。`)

添字を使用するよりも分割代入を使用して、名前をつける方が明確でわかりやすいです

オブジェクトの一部のプロパティを取得する場合も分割代入を使用することができる

function getUser() {
    const user = {
        name: 'John',
        email: 'xxx@hoge.com'
    }
    return user
}

async function buildUserPage() {
  const currentUser = getUser();
  const username = currentUser.name;
	...
  // usernameしか使われない処理
}

この場合、buildUserPage()内では、userオブジェクトのnameの値のみ必要なため、丸ごとuserを取得する必要はないです。他の開発者がこのコードを見たときに、「オブジェクトを取得しているから、後でemailの値も参照するのか？」と疑問が生まれ、より注意してコードを読むことに繋がりそうです……

このような場合でも分割代入で必要な値のみを取得するようにできます。

async function buildUserPage() {
  const { name } = getUser();
  ...
	// usernameしか使われない処理
}

この書き方であれば、後続の処理でもnameしか使われていないことは自明ですね

スコープ

グローバルスコープは使用しない

JavaScriptファイル内で直接変数宣言をすると、グローバルスコープになり、同じ変数が宣言されているとエラーが起きます。

例えば以下のようなHTMLファイルでhoge.jsと、fuga.jsを読み込んでいるとします

<body>
  <script src='scripts/hoge.js'></script>
  <script src='scripts/fuga.js'></script>
</body>

以下各jsファイルで、同じ変数名で宣言するとエラーが起きます。

scripts/hoge.js

const user = 'John';
const age = 26;
...

scripts/fuga.js

const user = 'Bob';
const age = 28;
...

エラー

Uncaught SyntaxError: Identifier 'user' has already been declared

対処方法

関数の中に変数宣言をしたり、scriptタグにtype=moduleを使用するなどが挙げられます。また以下の例のように即時関数を使用することでも、名前がかぶることを気にせず定義することができます。

(function() {
    const user =  'John'
    const age = 26
})

参考

プログラミング中級者になりたい人のためのクリーンコード入門

初めに