DRY(Don't Repeat Yourself)、実践してみました。

挨拶

はじめまして、WHIの新卒でエンジニアをやらせている姜（かん）です。
最近『プリンシプル オブ プログラミング ３年目までに身に着けたい一生役立つ１０１の原理原則』、上田勲、秀和システム、2016年』という、プログラマーが守るべく101の原則を紹介している本をよんでいます。
そのなか、DRYという原則に出会って、すごく勉強になったので、共有してみたいとおもいました。
そして研修中作ったプログラムに、さっそく適用してみましたので少しお見せします。

DRYとは

DRYとは、タイトルにも書いておきましたが、Don't Repeat Yourselfの頭文字で、和訳すると**繰り返すな。**という意味です。

どいういうことかといいますと、同じコードをコピペする（繰り返す）ことをしないこと、という意味です。

func A() {  |   func B () {
Proc 1      |   Proc 4
Proc 2      |   Proc 2
Proc 3      |   Proc 5
}           |  {

例えば上記のように、関数Aで使ったロジックを、関数Bでそのままコピペして使用するケースです。

本書ではコードの重複がよくない理由を列挙していますが、私が理解したことは二つです。

1. コードを読む作業が難しくなる
2. コードを修正することが難しくなる

　上記の例でいうと、仮に「Proc 2」が500行あるとしたら、Proc 1を修正したり、新しいロジックを追加したりするとき、500行分圧迫されます。量的により多くなり、質的により複雑になります。
　そして「Proc 2」の中身を修正しようとしたら、「func A」「func B」の中のそれぞれの「Proc 2」を修正しなければなりません。仮に「Proc 2」が「func A」~「func Z」全部使用されているとしてら、面倒すぎる手間がかかりすぎますね。

コードを抽象化する

コードを抽象化すると、重複が解決できます。
処理のまとまりに名前を付けて、「関数化」「モジュール化」をして使用することで次のメリットが生まれます。

1. コードの量が減り、読む量が減る
2. ロジックに名前が付くのでコードが読みやすくなる
3. 同じコードが一箇所に集約され、修正も一箇所で済む
4. 再利用しやすくなる

DRYの実践

ということで、さっさと実践してみました。
私は今研修を受けてまして、課題でウェブアプリケーションを作っています。
そのなか、jsコードが重複している状況でした。

add.html  |detail.html |edit.html 
head      |head        |head 
body      |body        |body
<script   |<script     |<script
コ        |コ          |コ
|         ||           ||
ド　　　　｜ド          |ド
script/> ｜script/> 　｜script/>

見ずらいと思いますが、中身は全く気にしないでいただいても大丈夫です。
上部の、「add.html」「detail.html」「edit.html」のファイルに、それぞれ同じ＜script＞タグをコピペしてつかった状態です。

scriptタグの中身を外部のJSファイルに移して、それぞれのhtmlファイルに繋ぎました。
その結果、

add.html  |detail.html |edit.html | memo.js
head      |head        |head      |コード 
body      |body        |body
<script   |<script     |<script
script/>  |script/> 　 |script/>

jsファイルが60行あるので、その分３つのhtmlファイルのコードが減りました。
だいぶ簡潔になりましたね。
今までは一つの機能を修正すると、それぞれのファイルを修正しないといけなかったですけれども、これからは一つのファイルだけ修正することで済みますね。

DRY素晴らしい考え方ではないでしょうか。

おわりに

実は本記事は経験豊富なエンジニアの方であれば当たり前にできている内容かなと思います。
でも私みたいな新参ものには、すぐ身に着けることが難しいかもしれません。
きっと誰かに役立つことを願いながら、ここらへんで終わりにします。

お読みいただいてありがとうございます！