常連

### 原因

> JSの基礎、変数、配列、DOM操作は理解しております、(完璧ではないです)

その辺りを理解しているのであれば、基礎的な知識はあるのだと思います。
こういうケースで原因として考えられるものは二つあります。

- 知識はあるが、その知識を引き出せない
- 知識はあるが、一つ一つの知識を組み合わせて、新たなものを創造できない

「プログラミングはパズルのようなもの」と例えられることがありますが、自身が持っている知識をパズルのように組み合わせて作るイメージが私の中にもあります。
この場合、必要になるのは「知識」ではなく、

- 知識を上手く引き出す方法
- 知識を上手く組み合わせる考え方

になる為、問題集で解決できる問題ではないと思います。
手っ取り早い方法としては**デザインパターン**の本を読んで、「コードの雛形を全て暗記する」という方法がありますが、教科書通りのコードだけを使っていると、新たな着想を得て自分のコードを書くことが出来なくなるので、私としては**自分で考え方を見出す方法**を推奨します。

### DRY (Don't repeat yourself)

> 最近思うことは、どうしても冗長なコードになってしまいがちです。

そのコードが冗長とまでは認識しているようですが、具体的に「コードのどの部分が冗長か」まで考えたことはあるでしょうか。
**DRY(同じ事を繰り返すな)**の原則にある通り、「同じコードを何度も繰り返すコード」が冗長なコードです。
従って、「実際に繰り返されているコード」を探せば、改善点が見つかります。

- [冗長なコード - JSFiddle](https://jsfiddle.net/03z8k9gf/)

> ```JavaScript
> $(function(){
> $('.js-hoge > li > a:eq(0)').on('click',function(){
> $('.js-hoge0').fadeIn();
> $('.hoge1, .hoge2, .hoge3').fadeOut();
> });
>
> $('.js-hoge > li > a:eq(1)').on('click',function(){
> $('.hoge1').fadeIn();
> $('.hoge0, .hoge2, .hoge3').fadeOut();
> });
>
> $('.js-hoge > li > a:eq(2)').on('click',function(){
> $('.hoge2').fadeIn();
> $('.hoge1, .hoge0, .hoge3').fadeOut();
> });
>
> $('.js-hoge > li > a:eq(3)').on('click',function(){
> $('.hoge3').fadeIn();
> $('.hoge0, .hoge1, .hoge2').fadeOut();
> });
> });
> ```

このコード上で「繰り返されているコード」は次の4箇所です。
(`$('.js-hoge0').fadeIn()` は他とclass名が異なる為、`$('.hoge0').fadeIn()` が正しい、と仮定します)

- `$('.js-hoge > li > a:eq(0)')` (`:eq()` のindex値は異なる)
- `.on('click',function(){}`
- `$('.hoge0').fadeIn()` (`.hoge0` のindex値は異なる)
- `$('.hoge0, .hoge1, .hoge2').fadeOut();` (`.hoge0` のindex値は異なる)

「繰り返されているコード」から「繰り返されないコード」にするには大別して、二つの対処法があります。

- `for` 文などの反復処理と配列を組み合わせて、反復させる
- 共通処理を関数に追い出してから、関数呼び出し

※ただし、これらは対処療法であり、これだけでスマートなコードが書けるわけではありません。
設計面から見直した方が良いケースもあります。

### DRY (同じコードを繰り返し書くな)

前節の方法に従って修正すると、次のように書けます。

- [DRY(同じコードを繰り返し書くな) - JSFiddle](https://jsfiddle.net/03z8k9gf/1/)

```HTML
<ul class="js-hoge">
 <li>
 <a href="#">hoge0</a>
 <a href="#">hoge1</a>
 <a href="#">hoge2</a>
 </li>
</ul>

hoge0 contents
hoge1 contents
hoge2 contents

<script>
'use strict';
jQuery(function (jQuery) {
 for (let i = 0, classTokens = []; i < 3; ++i) {
 classTokens.push('.hoge' + i);

 jQuery('.js-hoge > li > a:eq(' + i + ')').on('click', function () {
 jQuery('.hoge' + i).fadeIn();
 jQuery(classTokens.filter(c => c !== '.hoge' + i).join()).fadeOut();
 });
 }
});
</script>
```

このコードは関数式を3回使って同じ関数オブジェクトを3回生成しており、**「DRY(同じ関数オブジェクトを繰り返し生成するな)」**の原則に違反している為、次のように修正します。

- [DRY(同じコードを繰り返し書くな rev.2) - JSFiddle](https://jsfiddle.net/03z8k9gf/2/)

```JavaScript
'use strict';
jQuery(function (jQuery) {
 function handleClick (event) {
 var data = event.data,
 className = '.hoge' + data.i;

 jQuery(className).fadeIn();
 jQuery(data.classTokens.filter(c => c !== className).join()).fadeOut();
 }

 for (let i = 0, classTokens = []; i < 3; ++i) {
 classTokens.push('.hoge' + i);

 jQuery('.js-hoge > li > a:eq(' + i + ')').on('click', {i: i, classTokens: classTokens}, handleClick);
 }
});
```

関数を外に追い出した影響で `i`, `classTokens` が変数スコープ外になってしまった為、`event.data` で渡しています。

`.filter()` 部分でも `click` イベントハンドラが発火する度にアロー関数式を生成していますが、GC(ガベージコレクション)で回収される範疇なので、ここではそのままとしました。
パフォーマンス的観点でDRY(同じ関数オブジェクトを繰り返し生成するな)を貫くのであれば、ここもコールバック関数を外へ追い出してキャッシュしたり、関数を生成しない `for` 文などで書くべきですが、余談なのでここでは置いておきます。

### DRY (同じイベントを繰り返し定義するな)

前節のコードではイベントを3回定義しましたが、実は1回で済みます。
jQuery では DOM Events の世界でイベントを定義しており、**イベントバブリング**という機構によって、親ノードへイベントが伝播している為、親ノードでイベントを捕まえれば良いのです。

- [DRY (同じイベントを繰り返し定義するな) - JSFiddle](https://jsfiddle.net/03z8k9gf/3/)

```JavaScript
<ul class="js-hoge">
 <li>
 <a href="#" data-i="0">hoge0</a>
 <a href="#" data-i="1">hoge1</a>
 <a href="#" data-i="2">hoge2</a>
 </li>
</ul>

hoge0 contents
hoge1 contents
hoge2 contents

<script>
'use strict';
jQuery(function (jQuery) {
 function handleClick (event) {
 var a = event.target,
 currentIndex = +a.getAttribute('data-i'),
 classTokens = [];

 for (var i = 0, len = a.parentNode.children.length; i < len; ++i) {
 if (currentIndex !== i) {
 classTokens.push('.hoge' + i);
 }
 }

 jQuery('.hoge' + currentIndex).fadeIn();
 jQuery(classTokens.join()).fadeOut();
 }

 jQuery('.js-hoge > li').on('click', 'a', handleClick);
});
```

この書き方によって、コード制作者はHTML上でコンテンツを増やしてもJavaScriptコードに修正を加える必要がなくなりました。
コンテンツを追加する際には、`<a href="#" data-i="3">hoge3</a>` と `hoge3 contents` を追加すればよく、JavaScriptコードを変更する必要はありません。
**保守性**が向上しています。

### DRY (同じような名前のclass名を繰り返し定義するな)

前節のコードでは、`.fadeOut()` の対象ノード群の class セレクタを生成する為に面倒な処理が必要でした。
これはHTML上のclass名にindex値を含めている事が原因で、class名にindex値を含めなければ、もっとスマートに書けます。

```HTML
<ul class="js-hoge">
 <li>
 <a href="#" data-i="0">hoge0</a>
 <a href="#" data-i="1">hoge1</a>
 <a href="#" data-i="2">hoge2</a>
 </li>
</ul>

hoge[0] contents
hoge[1] contents
hoge[2] contents

<script>
'use strict';
jQuery(function (jQuery) {
 function handleClick (event) {
 var currentIndex = event.target.getAttribute('data-i');

 jQuery('.hoge[data-i="' + currentIndex + '"]').fadeIn();
 jQuery('.hoge:not([data-i="' + currentIndex + '"])').fadeOut();
 }

 jQuery('.js-hoge > li').on('click', 'a', handleClick);
});
```

### 原理を解釈する重要性

ここまでコードの改善案を書いてきましたが、私がいいたいことは「この改善案を使ってコードを改善して下さい」という事では**ありません**。
勿論、紹介したコードは全て私が良いと判断したコードですが、コードの外側だけを読んで「良いコードの参考例」として読まないでほしいと思っています。
「イディオム」や「デザインパターン」のコードを有難がって、そのコードだけを書いていく人をたまに見かけますが、重要なのはそのコードが持つ**「原理」**と**「原理を応用する考え方」**であって、コードは結果に過ぎません。

例えば、「グローバルスコープ上にコードを書くとグローバル汚染が起きるので、次のイディオムを使ってコードを書きましょう」という説明があったとします。

```JavaScript
(function () {
 // ここにコードを書きましょう
}());
```

結果としてはその通りですが、そこにはこのコードが持つ原理/説明が抜けています。
「とりあえず、このコードを使えばグローバル汚染が防げる」という結果だけを持って満足してしまった場合、理解に乏しい為、知識を組み合わせて応用する事が出来なくなってしまいます。
これは「原因」の節で述べた「知識はあるが、一つ一つの知識を組み合わせて、新たなものを創造できない」の状態ではありません。
「**知識がないから引き出すことが出来ない**」のです。

原理を理解する重要性を知っている人は、未知の「イディオム」や「デザインパターン」を読んだ時、「こんな書き方があるのか！」とは思いません。
「これはどういう原理で動いているんだ？...(調査後)...なるほど。このコードは～の原理を利用して動いているのか。この組み合わせは覚えておこう。」のように考えます。

それを踏まえて、私がいいたいことは「**DRY の原理を理解すること**」です。
DRYを知った当時の私は衝撃を受けました。
とても簡単な原理ですが、だからこそ応用範囲の広い考え方だと思います。
私が考えたDRYの応用法は概ね説明していますが、他の場面でもDRYの原理を応用できる場面はあるでしょう。
ですので、yuyuuyu さんご自身でも DRY を応用できないか、考えてみて下さい。
それによって、冗長なコードを書く状況は大きく減ると私は思います。

あと、これまで説明してきた中で、yuyuuyu さんが知らないかもしれない原理に「**イベントバブリング**」があります。
これについては、uhyohyo.netが詳しいです。

- [三章第三回　イベントバブリング — JavaScript初級者から中級者になろう — uhyohyo.net](http://uhyohyo.net/javascript/3_3.html)

他にも知らない原理があれば、積極的に学んでみて下さい。
jQuery は公式リファレンスが詳しく、日本語の資料(個人サイト)では触りしか書いてない事が多々あります。

- [jQuery API Documentation](https://api.jquery.com/)

Re: yuyuuyu さん

### 原因

> JSの基礎、変数、配列、DOM操作は理解しております、(完璧ではないです)

その辺りを理解しているのであれば、基礎的な知識はあるのだと思います。
こういうケースで原因として考えられるものは二つあります。

- 知識はあるが、その知識を引き出せない
- 知識はあるが、一つ一つの知識を組み合わせて、新たなものを創造できない

「プログラミングはパズルのようなもの」と例えられることがありますが、自身が持っている知識をパズルのように組み合わせて作るイメージが私の中にもあります。
この場合、必要になるのは「知識」ではなく、

- 知識を上手く引き出す方法
- 知識を上手く組み合わせる考え方

になる為、問題集で解決できる問題ではないと思います。
手っ取り早い方法としては**デザインパターン**の本を読んで、「コードの雛形を全て暗記する」という方法がありますが、教科書通りのコードだけを使っていると、新たな着想を得て自分のコードを書くことが出来なくなるので、私としては**自分で考え方を見出す方法**を推奨します。

### DRY (Don't repeat yourself)

> 最近思うことは、どうしても冗長なコードになってしまいがちです。

そのコードが冗長とまでは認識しているようですが、具体的に「コードのどの部分が冗長か」まで考えたことはあるでしょうか。
**DRY(同じ事を繰り返すな)**の原則にある通り、「同じコードを何度も繰り返すコード」が冗長なコードです。
従って、「実際に繰り返されているコード」を探せば、改善点が見つかります。

- [冗長なコード - JSFiddle](https://jsfiddle.net/03z8k9gf/)

> ```JavaScript
> $(function(){
> $('.js-hoge > li > a:eq(0)').on('click',function(){
> $('.js-hoge0').fadeIn();
> $('.hoge1, .hoge2, .hoge3').fadeOut();
> });
>
> $('.js-hoge > li > a:eq(1)').on('click',function(){
> $('.hoge1').fadeIn();
> $('.hoge0, .hoge2, .hoge3').fadeOut();
> });
>
> $('.js-hoge > li > a:eq(2)').on('click',function(){
> $('.hoge2').fadeIn();
> $('.hoge1, .hoge0, .hoge3').fadeOut();
> });
>
> $('.js-hoge > li > a:eq(3)').on('click',function(){
> $('.hoge3').fadeIn();
> $('.hoge0, .hoge1, .hoge2').fadeOut();
> });
> });
> ```

このコード上で「繰り返されているコード」は次の4箇所です。
(`$('.js-hoge0').fadeIn()` は他とclass名が異なる為、`$('.hoge0').fadeIn()` が正しい、と仮定します)

- `$('.js-hoge > li > a:eq(0)')` (`:eq()` のindex値は異なる)
- `.on('click',function(){}`
- `$('.hoge0').fadeIn()` (`.hoge0` のindex値は異なる)
- `$('.hoge0, .hoge1, .hoge2').fadeOut();` (`.hoge0` のindex値は異なる)

「繰り返されているコード」から「繰り返されないコード」にするには大別して、二つの対処法があります。

- `for` 文などの反復処理と配列を組み合わせて、反復させる
- 共通処理を関数に追い出してから、関数呼び出し

※ただし、これらは対処療法であり、これだけでスマートなコードが書けるわけではありません。
設計面から見直した方が良いケースもあります。

### DRY (同じコードを繰り返し書くな)

前節の方法に従って修正すると、次のように書けます。

- [DRY(同じコードを繰り返し書くな) - JSFiddle](https://jsfiddle.net/03z8k9gf/1/)

```HTML
<ul class="js-hoge">
 <li>
 <a href="#">hoge0</a>
 <a href="#">hoge1</a>
 <a href="#">hoge2</a>
 </li>
</ul>

hoge0 contents
hoge1 contents
hoge2 contents

<script>
'use strict';
jQuery(function (jQuery) {
 for (let i = 0, classTokens = []; i < 3; ++i) {
 classTokens.push('.hoge' + i);

 jQuery('.js-hoge > li > a:eq(' + i + ')').on('click', function () {
 jQuery('.hoge' + i).fadeIn();
 jQuery(classTokens.filter(c => c !== '.hoge' + i).join()).fadeOut();
 });
 }
});
</script>
```

このコードは関数式を3回使って**同じ関数オブジェクトを3回生成**しており、DRY(同じ関数オブジェクトを繰り返し生成するな)の原則に違反している為、次のように修正します。

- [DRY(同じコードを繰り返し書くな rev.2) - JSFiddle](https://jsfiddle.net/03z8k9gf/2/)

```JavaScript
'use strict';
jQuery(function (jQuery) {
 function handleClick (event) {
 var data = event.data,
 className = '.hoge' + data.i;

 jQuery(className).fadeIn();
 jQuery(data.classTokens.filter(c => c !== className).join()).fadeOut();
 }

 for (let i = 0, classTokens = []; i < 3; ++i) {
 classTokens.push('.hoge' + i);

 jQuery('.js-hoge > li > a:eq(' + i + ')').on('click', {i: i, classTokens: classTokens}, handleClick);
 }
});
```

関数を外に追い出した影響で `i`, `classTokens` が変数スコープ外になってしまった為、`event.data` で渡しています。

`.filter()` 部分でも `click` イベントハンドラが発火する度にアロー関数式を生成していますが、GC(ガベージコレクション)で回収される範疇なので、ここではそのままとしました。
パフォーマンス的観点でDRY(同じ関数オブジェクトを繰り返し生成するな)を貫くのであれば、ここもコールバック関数を外へ追い出してキャッシュしたり、関数を生成しない `for` 文などで書くべきですが、余談なのでここでは置いておきます。

### DRY (同じイベントを繰り返し定義するな)

前節のコードではイベントを3回定義しましたが、実は1回で済みます。
jQuery では DOM Events の世界でイベントを定義しており、**イベントバブリング**という機構によって、親ノードへイベントが伝播している為、親ノードでイベントを捕まえれば良いのです。

- [DRY (同じイベントを繰り返し定義するな) - JSFiddle](https://jsfiddle.net/03z8k9gf/3/)

```JavaScript
<ul class="js-hoge">
 <li>
 <a href="#" data-i="0">hoge0</a>
 <a href="#" data-i="1">hoge1</a>
 <a href="#" data-i="2">hoge2</a>
 </li>
</ul>

hoge0 contents
hoge1 contents
hoge2 contents

<script>
'use strict';
jQuery(function (jQuery) {
 function handleClick (event) {
 var a = event.target,
 currentIndex = +a.getAttribute('data-i'),
 classTokens = [];

 for (var i = 0, len = a.parentNode.children.length; i < len; ++i) {
 if (currentIndex !== i) {
 classTokens.push('.hoge' + i);
 }
 }

 jQuery('.hoge' + currentIndex).fadeIn();
 jQuery(classTokens.join()).fadeOut();
 }

 jQuery('.js-hoge > li').on('click', 'a', handleClick);
});
```

この書き方によって、コード制作者はHTML上でコンテンツを増やしてもJavaScriptコードに修正を加える必要がなくなりました。
コンテンツを追加する際には、`<a href="#" data-i="3">hoge3</a>` と `hoge3 contents` を追加すればよく、JavaScriptコードを変更する必要はありません。
**保守性**が向上しています。

### DRY (同じような名前のclass名を繰り返し定義するな)

前節のコードでは、`.fadeOut()` の対象ノード群の class セレクタを生成する為に面倒な処理が必要でした。
これはHTML上のclass名にindex値を含めている事が原因で、class名にindex値を含めなければ、もっとスマートに書けます。

```HTML
<ul class="js-hoge">
 <li>
 <a href="#" data-i="0">hoge0</a>
 <a href="#" data-i="1">hoge1</a>
 <a href="#" data-i="2">hoge2</a>
 </li>
</ul>

hoge[0] contents
hoge[1] contents
hoge[2] contents

<script>
'use strict';
jQuery(function (jQuery) {
 function handleClick (event) {
 var currentIndex = event.target.getAttribute('data-i');

 jQuery('.hoge[data-i="' + currentIndex + '"]').fadeIn();
 jQuery('.hoge:not([data-i="' + currentIndex + '"])').fadeOut();
 }

 jQuery('.js-hoge > li').on('click', 'a', handleClick);
});
```

### 原理を解釈する重要性

ここまでコードの改善案を書いてきましたが、私がいいたいことは「この改善案を使ってコードを改善して下さい」という事では**ありません**。
勿論、紹介したコードは全て私が良いと判断したコードですが、コードの外側だけを読んで「良いコードの参考例」として読まないでほしいと思っています。
「イディオム」や「デザインパターン」のコードを有難がって、そのコードだけを書いていく人をたまに見かけますが、重要なのはそのコードが持つ**「原理」**と**「原理を応用する考え方」**であって、コードは結果に過ぎません。

例えば、「グローバルスコープ上にコードを書くとグローバル汚染が起きるので、次のイディオムを使ってコードを書きましょう」という説明があったとします。

```JavaScript
(function () {
 // ここにコードを書きましょう
}());
```

結果としてはその通りですが、そこにはこのコードが持つ原理/説明が抜けています。
「とりあえず、このコードを使えばグローバル汚染が防げる」という結果だけを持って満足してしまった場合、理解に乏しい為、知識を組み合わせて応用する事が出来なくなってしまいます。
これは「原因」の節で述べた「知識はあるが、一つ一つの知識を組み合わせて、新たなものを創造できない」の状態ではありません。
「**知識がないから引き出すことが出来ない**」のです。

原理を理解する重要性を知っている人は、未知の「イディオム」や「デザインパターン」を読んだ時、「こんな書き方があるのか！」とは思いません。
「これはどういう原理で動いているんだ？...(調査後)...なるほど。このコードは～の原理を利用して動いているのか。この組み合わせは覚えておこう。」のように考えます。

それを踏まえて、私がいいたいことは「**DRY の原理を理解すること**」です。
DRYを知った当時の私は衝撃を受けました。
とても簡単な原理ですが、だからこそ応用範囲の広い考え方だと思います。
私が考えたDRYの応用法は概ね説明していますが、他の場面でもDRYの原理を応用できる場面はあるでしょう。
ですので、yuyuuyu さんご自身でも DRY を応用できないか、考えてみて下さい。
それによって、冗長なコードを書く状況は大きく減ると私は思います。

あと、これまで説明してきた中で、yuyuuyu さんが知らないかもしれない原理に「**イベントバブリング**」があります。
これについては、uhyohyo.netが詳しいです。

- [三章第三回　イベントバブリング — JavaScript初級者から中級者になろう — uhyohyo.net](http://uhyohyo.net/javascript/3_3.html)

他にも知らない原理があれば、積極的に学んでみて下さい。
jQuery は公式リファレンスが詳しく、日本語の資料(個人サイト)では触りしか書いてない事が多々あります。

- [jQuery API Documentation](https://api.jquery.com/)

Re: yuyuuyu さん

@@ -204,7 +204,7 @@
-このコードは関数式を3回使って**同じ関数オブジェクトを3回生成**しており、DRY(同じ関数オブジェクトを繰り返し生成するな)の原則に違反している為、次のように修正します。
+このコードは関数式を3回使って同じ関数オブジェクトを3回生成しており、**「DRY(同じ関数オブジェクトを繰り返し生成するな)」**の原則に違反している為、次のように修正します。

回答編集履歴