【JavaScript】 綺麗なコードを書いてみよう その理由とは…

今回はサイトの動的処理を担当するJavaScriptでのコードを綺麗に書く方法について、具体例とともに段階的に理解してみましょう。

html, cssなどの言語にも共通する考えもあります！

対象

JavaScriptを書くことのできる方にはコードを綺麗に書くことを知って欲しいです。初学者の方にはなぜ綺麗に書く必要があるのかを理解するだけで大丈夫です。

コード自体は難しいものを使いませんので、初学者でも十分に理解できると思います。

JavaScriptはサイト関連の動的処理を担当し、できることの幅を広げます。このサイトのおばけの動きもjsで作られています。

これから学習してみたい方は書籍から勉強してみましょう。

読みやすく

「どうしてプログラムを綺麗に書かなければいけないのか」

まずはこの理由を理解することが大切です。

また、具体的に何が必要かをこれからご紹介します。

どうして綺麗に書くのか

プログラム見るときに「読みやすさ」は非常に大切です。

他の方がコードを読む際に時間がかかってしまったり、コードの意図が理解できなかったりします。

実は、自分自身ですらわからないことってよくあります笑

（YouTubeの一部）

Googleのjsコードを見てみるとわかるのですが、全く読んでもわからないようになっています。おそらくセキュリティのためだと思いますが、コードごとに読みやすさがあるとわかりますね。

特に大きなプロジェクトだとコードの読みやすさは成功を左右する大きな要因となります。

具体例

どのようにして綺麗なコードにするのかを段階的に見てみましょう。

次のJavaScriptコードを見てください。

処理はサイトが読み込まれたら、１秒後に配列[1, 2, 3]の要素をそれぞれ２倍にするものとします。少し複雑さがないと差が分かりづらいと思います。

window.onload=function(){var array=[1,2,3];setTimeout(function(){for(var i=0;i<array.length;++i){array[i]=array[i]*2;}console.log(array);},1000);}

簡単なプログラムのはずですが、読みづらいことがわかります。

では、次のプログラムではどうでしょうか？

window.onload = function() {
    var array = [1, 2, 3];
    setTimeout( function() {
        for(var i = 0;i < array.length;++i) {
            array[i] *= 2;
        }
        console.log(array);
        },1000);
}

変えたことは

• インデントを行う
• 掛け算代入の簡略化
• 不等号の周りに空白を入れる
• 配列の要素内に空白を入れる

※ インデントとはプログラムの文頭に空白を入れることです。

人それぞれ空白の入れ方は異なると思いますが、僕の場合だとこのように記述します。空白入れ過ぎると逆に見づらくなることもあります。

Visual Studio Codeでは拡張機能によってかっこに色をつけることができ、よりコードが読みやすくなります。

ですが、もっと綺麗に記述する方法もあります。

実はfunction（関数）はアロー関数という記述ができます。無名関数であるため、この場合は有効ですね。僕も多用している関数で、とてもおすすめです！

これを使ってみると次のようになります。

window.onload = () => {
    var array = [1, 2, 3];
    setTimeout( () => {
        for(var i = 0;i < array.length;++i) {
            array[i] *= 2;
        }
        console.log(array);
        },1000);
}

その他にも簡略化する方法があります。

例えば、for文を別の書き方（forEach構文という。配列要素それぞれに対して行う操作を記述できる）にすると、このような違いになります。

// 通常の書き方
for(var i = 0;i < array.length;++i) {
    array[i] *= 2;
}

// forEach構文を使った書き方
array.forEach(element => {
    array[i] = element * 2
});

どちらも実行結果は同じです。

要素の番号が欲しいときには次のように書くことができます。

// iが要素の番号を表す。（index）
array.forEach((element, i) => {
    array[i] = element * 2
});

注意点として、elementそのものを２倍してもarray自体の要素は変化しません…

また、多次元配列の場合でも改行を行いましょう。

var array = [
    [1, 2, 3],
    [4, 5, 6],
    [
        [7, 8, 9],
        [10, 11, 12],
    ],
];

ファイル分け

全てのコードを同じ１つのファイルに記述してしまうと、長くなってしまってどこに処理をかいたのか見つかりづらくなります。

ただ、はてなブログでは「head要素に追加」で一つのファイルに全てを記述しなければならないため分けることができません。

ローカル環境で組み立ててからまとめることがおすすめですね。

このブログでも

• デザイン
• サイドバー
• おばけ出没
• ロード画面
• aboutページ

として分けて管理をしています。

※ おばけ出没はサイト上で動き回るキャラクターのプログラムです。

riaimu.hateblo.jp

記事を読んでいただきありがとうございます。
JavaScriptで綺麗なコードを書くためのことをご紹介しましたが、綺麗に書くことってめちゃくちゃ楽しいですよね？（僕だけかな…）数学も綺麗な式を書くことに楽しさを感じてしまいます。

また、最近の反省点として、記事の文字数が多すぎることがあります。これでは１記事読むハードルが上がってしまうので、適度な文字数を考えています…

【 おすすめ記事 】
riaimu.hateblo.jp
riaimu.hateblo.jp
riaimu.hateblo.jp

記事の内容に間違いがあった場合は、Twitterもしくはお問い合わせフォームからお伝えください。