常連

## 以下2冊の書籍は何が違うのでしょうか？
[レガシーコード改善ガイド](https://www.amazon.co.jp/%E3%83%AC%E3%82%AC%E3%82%B7%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%89%E6%94%B9%E5%96%84%E3%82%AC%E3%82%A4%E3%83%89-Object-Oriented-SELECTION-%E3%83%9E%E3%82%A4%E3%82%B1%E3%83%AB%E3%83%BBC%E3%83%BB%E3%83%95%E3%82%A7%E3%82%B6%E3%83%BC%E3%82%BA/dp/4798116831/ref=sr_1_6?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=OKJQ8EEMCV1W&dib=eyJ2IjoiMSJ9.rXi1FV68io0CF63Bcn6Zr9y91bwm9df7lMFlGbqQVZZ2WW9u2qvOaWWjUq5_ANT0IBHvp820gYCJZxlxD1FIZFp7MVgR34ThRtfJ9bRnZ66mRl-tgsTQmajRldLfaFOsZb0m549-FJLJtGI0f2kwqeqQdz8ryNUv2FZ5xxYszeLGbkGE6_t8M-a46HY2h9cY1GyYMvgRm66RHk67FLz6Vl0Uunmu-pSArlZVSCC72W_17FWQiAkS-SrN4dc48EccX8DQdj-8d5JwtyzPeuCf779j7Y3vJYy4VJmIkMDfZyk._w91rHtVo0c6083hk4CbjW8QvEAsnlHNZzk7zLmauC4&dib_tag=se&keywords=%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0&qid=1713530116&sprefix=%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0%2Caps%2C211&sr=8-6)
[新装版 リファクタリング](https://www.amazon.co.jp/%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0%E2%80%95%E6%97%A2%E5%AD%98%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E5%AE%89%E5%85%A8%E3%81%AB%E6%94%B9%E5%96%84%E3%81%99%E3%82%8B%E2%80%95-OBJECT-TECHNOLOGY-Martin-Fowler/dp/427405019X/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=OKJQ8EEMCV1W&dib=eyJ2IjoiMSJ9.rXi1FV68io0CF63Bcn6Zr9y91bwm9df7lMFlGbqQVZZ2WW9u2qvOaWWjUq5_ANT0IBHvp820gYCJZxlxD1FIZFp7MVgR34ThRtfJ9bRnZ66mRl-tgsTQmajRldLfaFOsZb0m549-FJLJtGI0f2kwqeqQdz8ryNUv2FZ5xxYszeLGbkGE6_t8M-a46HY2h9cY1GyYMvgRm66RHk67FLz6Vl0Uunmu-pSArlZVSCC72W_17FWQiAkS-SrN4dc48EccX8DQdj-8d5JwtyzPeuCf779j7Y3vJYy4VJmIkMDfZyk._w91rHtVo0c6083hk4CbjW8QvEAsnlHNZzk7zLmauC4&dib_tag=se&keywords=%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0&qid=1713530116&sprefix=%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0%2Caps%2C211&sr=8-1)

## 期待していること

リファクタリングについて勉強したく検索したところ上記2冊の評判が大変良く、購入も視野に入れて検討しています。しかしながら、どちらもリファクタリングについての本であることは題名から察することができますが、それ以外の情報が手に入れることができていないため、決断できずにいます。どちらの方が読み易いか、初学者向けか、など感想や意見を頂戴したいです。
「2冊とも止めてこの本を買うべき」や「2冊とも買うべき」などの第三の意見も歓迎です。



【リファクタリング】これらの書籍は何が違うのでしょうか？



### 試してみたこと

いつもお世話になっております。
現在、C#にて8bit(8入力)のデジタル入力を検知するプログラムを作成しています。

TOP16というI/Oボードを使用しており、提供されたDLLからI/Oの入力状態を監視し（該当の入力があったらアクションを）させようとしています。

入力される値は以下のように10進数で取得することができます。（悩んで悩んで・・やっと分かりました）
例として一部を記載します。

無入力であれば　**255** (11111111)
Input1が入れば　**254**(1111111**0**)
Input2のみが入れば　**253**(111111**0**1)
Input4のみが入れば　**247**(1111**0**111)
Input1と3が入っていれば　**250**(11111**0**1**0**)

8入力なので2進数の1桁目がInput1で8桁目がInput8となります。

同時に複数のInputが入っていることも想定し、若いInput入力でbreak;をせず全Inputの状態を取得したいです。
実際に複数の入力があった場合、Input1が入っていることを条件にInput3はアクション可能というような使い方も想定しています。

そこでここ3日ほど、乏しい経験と無い頭をフル稼働し自分でプログラムを作ってみて一段落したと思ったのですが、

ふと。もっと良い書き方、例えば配列を使ったりする方法もあるのではないか？と思った次第です・・・

ここで別の手法を使って同じ結果を出せるようになれば一皮むける気がしているのですが、
苦渋の決断で経験豊富な先輩方の知恵をお借りできればと思い、こちらで相談させて頂くことにしました。

稚拙なプログラムで公開するのは恥ずかしいのですが私の考えたものを記載したいと思います。
どうか皆様のお知恵、アイデア、アドバイスを頂けませんでしょうか？
どうぞ宜しくお願い致します。

### 作成したソースコード

```C#
        //タイマーを使って入力を監視します。
        private void timer1_Tick(object sender, EventArgs e)
        {
            //デジタルインプット(8bit)を取得
            int xInput = Top16.GetInputs(handle);

            //10進数を2進数に変換する
            string binaryStr = Convert.ToString(xInput, 2);

            //カウンターを初期化
            int count = 0;

            //binaryStrの文字列でカウントダウンをさせる
            for (int i = binaryStr.Length - 1; i >= 0; i--)
            {
                char inputBinaryNum = binaryStr[i]; //binaryStrの[i]番目の文字列の切り出し
                count++;

                if (inputBinaryNum == '0') //inputBinaryNumが'0'だった時
                {
                    if (count == 1)
                    {
                     //Input1が入ったときのアクション内容を書く
                    }
                    else if (count == 2)
                    {
                     //Input2が入ったときのアクション内容を書く
                    }
                    else if (count == 3)
                    {
                     //Input3が入ったときのアクション内容を書く
                    }
                    else if(count == 4)
                    {
                     //Input4が入ったときのアクション内容を書く
                    }
                    else if(count == 5)
                    {
                     //Input5が入ったときのアクション内容を書く
                    }
                    else if(count == 6)
                    {
                     //Input6が入ったときのアクション内容を書く
                    }
                    else if(count == 7)
                    {
                     //Input7が入ったときのアクション内容を書く
                    }
                    else if (count == 8)
                    {
                     //Input8が入ったときのアクション内容を書く
                    }
                }
            }
         }
```


8bitの2進数でタイムリーに0を検知するプログラムについて

### 前提・実現したいこと

`golang`でサーバーサイドを作成していました。
main.goに全てのロジックを書いていたのですが、リファクタリング目的で分割することにしました。
新たに`package controller`を作成して、`main.go`にimportしようとしたのですがうまくいきませんでした。

### 発生している問題・エラーメッセージ

`package controller`を`main.go`にimportしても以下のエラーが出ます。
```
undefined: controller
```

### 該当のソースコード

フォルダ構成
```
article
  ├ client
  ├ api
  │  ├ main.go
  │  └ contoroller
  │       └ contoroller.go
  ├ nginx
  └ docker-compose.yml
```

main.go
```go
package main

import (
//省略

//↓を書いてvscodeで保存すると自動的に消える
"./contoroller"
)

//省略

	controller := controller.controller{}

	api := router.Group("/api")
	{
		api.GET("/articles", func(c *gin.Context) {
			controller.getArticleController(c, db)
		})
	}

	router.Run(":2345")
}
```
contoroller.go
```go
package controller

import (
//省略
)

func getArticleController(c *gin.Context, db *sql.DB) {
//省略
}



```

### 補足情報（FW/ツールのバージョンなど）
```
・client: react/axios
・api: golang/gin
・web-server: nginx
・db: mysql
・container: docker
・ci-tool: travis
・deploy: aws elastic beanstalk
```
以上、お手数ですがご教授いただけると幸いです。よろしくお願いいたします。

自作のパッケージをmain.goにimportする方法を教えてください

### 前提・実現したいこと

JavaScript初心者です。
JavaScriptの実装演習として4択クイズアプリケーションを制作中です。
ボタンを押すと正誤判定のロジックが回り、正解か不正解か表示するロジックを組んでいます。

### 発生している問題・エラーメッセージ
もし、4択のボタンのうちテキスト内容（textContent）が同じならば正解、それ以外なら不正解というロジックを各ボタン（4個）それぞれにコーディングしたのですが同じような命令が4つ並んでいたのでwhile文で一つにまとめよう（リファクタリングしよう）と思いコードを修正していたところ以下のエラーが発生してしまいました。
```
Uncaught TypeError: Cannot read property 'textContent' of undefined
    at HTMLDivElement.<anonymous> (quiz.js:99)
```
while文に直す前は正常に動いていたのですが、wihleの中に入れたらエラーになってしまいました。
### 該当のソースコード

```JavaScript
    const $answer_block_js = document.getElementsByClassName("answer-block");
    const $answer_text_js = document.getElementsByClassName("answer-text");
    let click_counter = 0;
/*リファクタリング前（問題なく動いていた）
    $answer_block_js[0].addEventListener("click",() => {
                                            if(quiz_contents[0].correct === $answer_text_js[0].textContent)
                                               {
                                                    window.alert("正解！");
                                               }
                                            else
                                               {
                                                    window.alert("不正解！");
                                               }
                                            });

     $answer_block_js[1].addEventListener("click",() => {
                                            if(quiz_contents[0].correct === $answer_text_js[1].textContent)
                                               {
                                                    window.alert("正解！");
                                               }
                                            else
                                               {
                                                    window.alert("不正解！");
                                               }
                                            });

     $answer_block_js[2].addEventListener("click",() => {
                                            if(quiz_contents[0].correct === $answer_text_js[2].textContent)
                                               {
                                                    window.alert("正解！");
                                               }
                                            else
                                               {
                                                    window.alert("不正解！");
                                               }
                                            });

     $answer_block_js[3].addEventListener("click",() => {
                                            if(quiz_contents[0].correct === $answer_text_js[3].textContent)
                                               {
                                                    window.alert("正解！");
                                               }
                                            else
                                               {
                                                    window.alert("不正解！");
                                               }
                                            });

    */
    //リファクタリング後（ifの条件でエラー）
    while(click_counter<$answer_block_js.length)
        {
            $answer_block_js[click_counter].addEventListener("click",() => {
                                            if(quiz_contents[0].correct === $answer_text_js[click_counter].textContent)
                                               {
                                                    window.alert("正解！");
                                               }
                                            else
                                               {
                                                    window.alert("不正解！");
                                               }
                                            });

            console.log($answer_block_js[click_counter]);
            console.log($answer_text_js[click_counter].textContent);
            
            click_counter++;
        }
        
        console.log(quiz_contents[0].correct);

```

```HTML
                    <div class="answer-block px-3 py-2 m-2">
                        <p class="answer-text"></p>
                    </div>
                        <div class="answer-block px-3 py-2 m-2">
                        <p class="answer-text"></p>
                    </div>
                    <div class="answer-block px-3 py-2 m-2">
                        <p class="answer-text"></p>
                    </div>
                    <div class="answer-block px-3 py-2 m-2">
                        <p class="answer-text"></p>
                    </div>
```

### 試したこと

Uncaught TypeError: Cannot read property 'textContent' of undefinedであったので、textContentを取得するものがないのかと思い、
```JavaScript
console.log($answer_block_js[click_counter]);
console.log($answer_text_js[click_counter].textContent);
```
を試したのですがどちらも正常に取得出来ました。
どこを修正すればよいのかエラーが直るのか詰まってしまいました。。。

### 補足情報（FW/ツールのバージョンなど）

どうぞよろしくお願いいたします。

【JavaScript：エラー対処法】Uncaught TypeError: Cannot read property '' of undefined

### 前提
JavaScriptでモーダルウィンドウを実装したいと考えています。


### 実現したいこと
HTML上のclass名は同一の、モーダルウィンドウを複数用意し、
個別にクリックイベントの処理を行いたいです。

class名を個別につけて、その都度JSを書いて実装することはできるのですが、
同じソースコードの羅列になり後から見にくいので
まとめてしまいたいです。

### 発生している問題・エラーメッセージ
3つのモーダルウィンドウを用意して試したところ、
現在のコードではクリックした際、3つすべての要素を取得してしまい
すべてが重なって表示されてしまいます。
（結果最後の要素で指定した画像が最上面となり表示されます）

### 該当のソースコード

```HTML
    <body>
        <div class="second-area">
            
            <div class="modalOpen other-img">
                <img src="image/column1.jpg">
            </div>
                
                    <div class="easyModal modal">
                        <div class="modalScale modal-scale">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <span class="modalClose toggle"></span>
                                </div>
                                <div class="modal-body">
                                    <img src="image/column1.jpg">
                                </div>
                                <p>Lorem ipsum dolor sit amet.</p>
                            </div>
                        </div>
                    </div>
            
            <div class="modalOpen other-img">
                <img src="image/column2.jpg">
            </div> 
                
                    <div class="easyModal modal">
                        <div class="modalScale modal-scale">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <span class="modalClose toggle"></span>
                                </div>
                                <div class="modal-body">
                                    <img src="image/column2.jpg">
                                </div>
                                <p>Lorem ipsum dolor sit amet.</p>
                            </div>
                        </div>
                    </div>
            
            <div class="modalOpen other-img">
                <img src="image/column3.jpg">
            </div>
                
                    <div class="easyModal modal">
                        <div class="modalScale modal-scale">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <span class="modalClose toggle"></span>
                                </div>
                                <div class="modal-body">
                                    <img src="image/column3.jpg">
                                </div>
                                <p>Lorem ipsum dolor sit amet.</p>
                            </div>
                        </div>
                    </div>
        </div>
</body>
```
```SCSS
@charset "utf-8";
// 共通スタイル
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    &::before,
    &::after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}
html {
    font-size: 62.5%;
    overflow: auto;
}
img {
    max-width: 100%;
}
body {
    overflow: hidden;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


// スタイル
.second-area {
    width: 80%;
    display: flex;
    gap: 20px;
    .other-img {
        flex-grow: 1;
        cursor: pointer;
    }
    .easyModal {
        display: none;
    }
    .modal {
        z-index: 20;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        overflow: auto;
        .modal-scale {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            .modal-content {
                background: #f4f4f4;
                width: 40vw;
                height: 40vw;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 10px;
                position: relative;
                box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2),
                            5px 5px 10px rgba(0, 0, 0, 0.17);
                animation-name: modalopen;
                animation-duration: 1s;
                @keyframes modalopen {
                    from {
                        opacity: 0;
                    }
                    to {
                        opacity: 1;
                    }
                }
                .modal-header {
                    position: absolute;
                    top: 10px; right: 10px;
                    cursor: pointer;
                    .toggle {
                        display: block;
                        position: relative;
                        width: 30px;
                        height: 30px;
                        border: 2px solid #333;
                        border-radius: 50%;
                        background: #fff;
                        &::before,
                        &::after {
                            content: "";
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            width: 3px;
                            height: 22px;
                            background: #333;
                        }
                        &::before {
                            transform: translate(-50%, -50%) rotate(45deg);
                        }
                        &::after {
                            transform: translate(-50%, -50%) rotate(-45deg);
                        }
                    }
                }
                .modal-body {
                    width: 80%;
                    img {
                        border-radius: 4px;
                    }
                }
                p {
                    font-size: 1.5rem;
                    letter-spacing: 2px;
                }
            }
        }
    }
}
```
```JavaScript
window.addEventListener('DOMContentLoaded', function() {

    window.onload = function() {

        let buttonOpen = document.querySelectorAll('.modalOpen');
        let modal = document.querySelectorAll('.easyModal');
        let buttonClose = document.querySelectorAll('.modalClose');
        let modalScale = document.querySelectorAll('.modalScale');

        // ボタンがクリックされた時
        buttonOpen.forEach(x => {
            x.addEventListener('click', modalOpen);
            function modalOpen() {
                modal.forEach(y => {
                    y.style.display = "block";
                });
            }
        });

        // トグルがクリックされた時
        buttonClose.forEach(x => {
            x.addEventListener('click', modalClose);
            function modalClose() {
                modal.forEach(y => {
                    y.style.display = "none";
                });
            }
        });

        // モーダルコンテンツ以外がクリックされた時
        modalScale.forEach(x => {
            x.addEventListener('click', outsideClose);
            function outsideClose(e) {
                modalScale.forEach(y => {
                    if(e.target == y) {
                        modal.forEach(z => {
                            z.style.display = "none";
                        });
                    }
                });
            }
        });
    }
});
```
### 試したこと
for文での記述も試したのですが、上記のコードと
同じ結果になってしまいました。
```JavaScript
window.addEventListener('DOMContentLoaded', function() {

    // ボタンがクリックされた時
    for( let i=0; i<buttonOpen.length; i++ ) {
        buttonOpen[i].addEventListener('click', modalOpen);
        function modalOpen() {
            for( let i=0; i<modal.length; i++ ) {
            modal[i].style.display = "block";
            }
        }
    }

    // トグルがクリックされた時
    for( let i=0; i<buttonClose.length; i++ ) {
        buttonClose[i].addEventListener('click', modalClose);
        function modalClose() {
            for( let i=0; i<modal.length; i++ ) {
            modal[i].style.display = "none";
            }
        }
    }

    // モーダルコンテンツ以外がクリックされた時
    for( let i=0; i<modalScale.length; i++ ) {
        modalScale[i].addEventListener('click', outsideClose);
        function outsideClose(event) {
            if(event.target == modalScale[i]) {
                for( let i=0; i<modal.length; i++ ) {
                    modal[i].style.display = "none";
                }
            }
        }
    }

});
```
何卒宜しくお願い致します。

【JavaScript】同じクラス名を持つ複数の要素にクリックイベントを適用させたい

### 前提・実現したいこと

仕事で、外部サイトに埋め込まれるHTMLタグのCSSを作成する仕事をしています。
結果的にはstyleタグで出力されますが、その部分は社内システムで自動化しているため、単なるCSSの質問として考えて構いません。

社内システムで、枠組みとなるデフォルトCSSが用意されており、不足する部分を追加CSSで補っています。
このデフォルトCSSの仕組みが作られたのが最近で、その前は全て手書きCSSでスタイルを指定していたため、
過去作成されたCSSは、多くの部分がデフォルトCSSと重複しています。

保守性の向上のため、過去のCSSから、デフォルトCSSと重複している項目を削除する必要があるのですが、
この作業が全て目視と手作業で実行している状況です。
部分的にでも自動化して、取りこぼしの削減や、作業時間の短縮をしたいです。
よいツールや手法を教えてください。

### 試したこと

GoogleでCSSの整形ツールを沢山調べたのですが、
重複する部分を統合してくれるツールは沢山ありましたが、重複する部分を削除してくれるツールが見つかりませんでした。
（統合してしまうと、今度は重複しなかった部分が追加CSSに含まれてしまうので、目的に合いません。）

長時間かけて、デフォルトCSSのプロパティをエディタで無意味な文字に置換して、追加CSSの前部にペーストして、
整形ツールで統合してから、プロパティが無意味な文字になっている行だけ削除する、みたいな手法を考えてみたのですが、
それは最終的にただ単に追加CSSで（重複する部分も含めて）全て上書きするだけの結果になってしまい、時間を無駄にしてしまったことを後悔しています。

#### 具体的に試してみたサービス
(仕事中は見つけたものを手当たり次第試してたので、思い出せる範囲内で記録。)

- [W3C CSS Validation Service](https://jigsaw.w3.org/css-validator/) - 重複していても、「おめでとうございます！エラーはありません」という結果になる。
- [CSSO](https://css.github.io/csso/csso.html),[cssnano](https://cssnano.co/) - デフォルトCSSと追加CSSが統合されてしまい、追加CSSの分だけ取り出すことが出来ず失敗。
- [difff](https://difff.jp/) - 単純な文章の差分を探すサービスなので、重複しているスタイルなどは抽出できず失敗。
- [CSS LINT](http://csslint.net/),[SYNCER](https://lab.syncer.jp/Tool/CSS-PrettyPrint/),[WebTools](http://tm-webtools.com/Tools/CssBeauty),[CSS Portal](https://www.cssportal.com/format-css/) - インデントや改行の整形機能のみだったため失敗。
- [Pretty Diff](https://prettydiff.com/) - 英語かつ、構成が難解で、目的の機能を達成しているかどうかのテストすら難しい。実行結果のどこをコピーしていけば目的の部分を抽出できるのか分からず、実用的じゃない。
- [WinMerge](https://forest.watch.impress.co.jp/library/software/winmerge/) - Mac非対応のためテスト不可。
- [Diff Checker](https://www.diffchecker.com/diff) - 左方に !important を入れたり、右方に書いてないセレクタを左方に書いても左方が赤く表示されるので目的の機能ではない。

#### 勉強会で相談してみた結果
- 未使用のCSSを削除してくれるサービスを使って、重複している項目をリストアップする方法を提案されました。
→この方法だと、追加CSSで値を上書きしているプロパティまで、デフォルトCSSで未使用と判断されてリストアップされてしまう。結局重複してるのか上書きしているのかを目視で確認する必要がある。


### 補足情報
作業環境はMac OSXです。
デフォルトCSSを取得することはできますが、削除することはできません。
デフォルトCSSを追加CSSで上書きすることは出来るので、必要があれば日常的に上書きしています。
外部サイトに埋め込まれるHTMLタグは、ひとつひとつは小さいものですが、数は沢山あります。
埋め込む対象の外部サイトというのも、不特定多数のサイトです。

CSS 既存のスタイルに重複する項目を削除したい。

### 前提・実現したいこと

jsでif文を使用して条件分岐させているのですが、
そこで発生している共通処理をどうにかしてリファクタリングしたいのですが、
調べてもどうしても分かりません。

条件分岐からさらに分岐するelse ifのnumにゼロを入れる処理が
三つあり共通処理となっております。

どなたかご教示して頂けましたら幸いです。

### 該当のソースコード

```js

function test(num, id){
    if(id === 'aiueo') {
        if (num > 4) {
            num = 4;
        }else if(value < 0){
            num = 0;
        }
    }else if(id === 'kakiku'){
        if(num > value){
            num = value;
        }else if(num < 0){
            num = 0;
        }
    }else if(id === 'sasisu'){
        if (num > obj.test) {
            num = obj.test;
        }else if(num < 0){
            num = 0;
        }
    }
    return num;
}

```

if文の共通処理をリファクタリングする方法がどうしてもわかりません

### 前提・実現したいこと

Javascriptを綺麗に書くことに関する質問です。
レンジスライダーを3つ使用し、それぞれのスライダーの横にレンジの値を表示させています。
ソースコードに同じ処理を3つずつ書いており、一つにまとめたいのですがわかりません。
初心者ですみませんが、よろしくお願いいたします。

### 該当のソースコード
```HTML
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>数値入力のサンプル</title>
  <script src="js/main.js" charset="utf-8"></script>
</head>

<body>

  <input type="range" id="range1" class="range" min="0" max="255" step="1" value="0">
  <span id="value1" class="value">0</span>
  <input type="range" id="range2" class="range" min="0" max="255" step="1" value="0">
  <span id="value2" class="value">0</span>
  <input type="range" id="range3" class="range" min="0" max="255" step="1" value="0">
  <span id="value3" class="value">0</span>

</body>

</html>
```


```Javascript
(window.onload = function() {
  'use strict';

  var range1 = document.getElementById('range1');
  var value1 = document.getElementById('value1');
  var rangeValue1 = function(){
    value1.innerHTML = range1.value;
  };

  var range2 = document.getElementById('range2');
  var value2 = document.getElementById('value2');
  var rangeValue2 = function(){
    value2.innerHTML = range2.value;
  };

  var range3 = document.getElementById('range3');
  var value3 = document.getElementById('value3');
  var rangeValue3 = function(){
    value3.innerHTML = range3.value;
  };

  range1.addEventListener('input', rangeValue1);
  range2.addEventListener('input', rangeValue2);
  range3.addEventListener('input', rangeValue3);

})();
```

### 試したこと

```Javascript
(window.onload = function() {
  'use strict';

  var range = document.getElementsByClassName('range');
  
  range.addEventListener('input', function(){
    this.nextElementSibling.innerHTML = this.value;
  });

})();
```
試したことを実行した結果、レンジの値が表示されませんでした。
開発ツールでは、Uncaught TypeError: range.addEventListener is not a functionと表示されます。

以上、よろしくお願いいたします。