あなたの書くコード「クソソース」になっていませんか？「クソース」と言われない為の1歩。 そのまとめ
2015.12.20
この記事は最終更新日から1年以上が経過しています。
どもです。
冒頭で申し上げておきますと、私は「クソコード」所謂「クソース」が嫌いです。
「え？当たり前でしょう？」
と言われがちですが、私の言う嫌いは
「クソコード」と一言で済ませてしまうのが嫌いです。
クソコードと呼ばれたり、そう扱われるようになるまでそこには色々な経緯、背景が必ず存在するし
誰もがクソコードを書こうと思って書いているはずもなく、
様々な条件の元、昼夜問わず、一生懸命汗を流し、作成したけど、
結果そうなってしまった場合もあるからです。
ベンチャー企業であったり、スタートアップの会社などではスピードを求められ、
こうなるケースもよくあるかと思います。
でも、スピードを求められる現場だからこそ、見通しの良い汎用性、保守性を持った
ソースコードというのは必要不可欠な事柄なのです。
「私はhtmlとcssしか書かないからあんまり関係ないかな。。」
いえ、HTML、CSSも立派なソースコードです。
webアプリケーションにおけるHTML、CSSは非常に重要な部分でもあります。
むしろ、そこから破綻するケースも稀ではないでしょう。
と、長々と説明を書いてもあれなので、まず最初に2つの例を出してみます。
2つの例
1 | <input id="<?php hogehoge_hoge['id'] ?>" name="<?php hogehoge_hoge['name']?>" class="common-input js-disable js-commma js-search-value" type="text" value="<?php hogehoge['value']?>" placeholder="<?php hogehoge_hoge['placeholder'] ?>" min="<?php hogehoge_hoge['min_num_size'] ?>" max="<?php hogehoge_hoge['max_num_size'] ?>"> |
1 | <input class="common-input" type="text" placeholder="{{hoge.placeholder}}" ng-model="hoge"> |
もし、この2つのソースが同じ挙動で、同じレンダリング、同じアニメーションを行うとしたら
あなたはどちらを選択するでしょうか。
と、ちょっと極端な例を出してみましたが、全然あり得る話です。
下は、MVCフレームワークのAngular.jsを利用した場合の記述だったりします。
あなたにとって扱いやすい、ソースはどちらでしょうか。
上の方が可読性もあり、認識しやすいというのであれば、要注意かもですね。
Dom依存、CSS依存
ここで言うDom依存は、HTML要素にModelデータが紐付いている状態のことを言います。
よくある例で、Modelデータのidが紐付いている例。
1 | <li data-id="<?php hogehoge['id'] ?>" id="<?php hogehoge['id'] ?>"></li> |
いけない訳ではないのですが、ここから JavaScriptやjQueryとかでDOMからidを参照し、
それをサーバーサイドに送り、レスポンスのidからDOMを参照して…
とDOMもscriptも冗長となり解読が困難になっていくことが想定できます。
これを、「ソートしたり、色々動かしたりしてよ。」と言われても結構フロントエンド側でお手上げ状態だったりします。
より、容易で、インタラクティブに扱うためにも、ModelとViewの分離が好ましいことでしょう。
もう、2016年も近づいていることもあり、そういった手段、フレームワークは多く存在します。
また、ここで言うclass依存というのは、JavaScriptの処理の為に、htmlのclassが付与されている状態です。
1 | <li class="js-○○○○○○○ js-○○○○○○○js-○○○○○○○"></li> |
js-○○○○○○○を1個とったら動かなくなったよ！＞＜
って経験あったりしませんか？
色々と機能をつけたくて、js-○○○○○○○がめちゃくちゃ増えてませんか？
これをさける為、親要素にidを付与する手法があります。
1 2 3 | <ul id="js-○○○"> <li></li></ul> |
ですが、私は全然これがBESTとは思っておりません。
ただ、見通しの良いコードは後者の方と言えるでしょう。
母さんあれとってScript
JavaScriptを書くうえで、結構なりがちかもしれない例となります。
1 2 3 | var setEventHandler = function() { ....} |
ふむふむ なるほど、eventHandlerをまとめている関数ですね。
中身を見ると、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(document).on('click', '.hoge', function() { var $elem = $(e.currentTarget), id = $elem.data('hoge-id'), posY = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft, data = null; if($elem.data('hogehoge-id')) { data = { hoge: "hoge" }....省略$(document).on('click', '.hoge2', function() {....同様。 |
あー ＞＜ 一つの関数で色々とやってしもうてるぅー。
ここまで行くと、もう「かあさんあれとって状態」です。
あれと言ったら、あれとあれとあれと..じゃないか！！
もう分かりませんね。
私はあなたのお母さんでもありません。
あれではわかりませんので、
関数の処理は名前と一致し、より簡潔に記述するのが好ましいかと思います。
呪文化された変数名、関数名
1 | function apOPPSetSortGet(apData, callback) { |
apとはなんだろう？
appの省略かな？
「馬鹿野郎。ここは空港だからAttention Please の略ってわかるだろ。」
分かりません。
呪文を作るのは至って簡単です。
ローカルルールを省略すればすぐに出来上がります。
JavaScriptエンジニア
自分はJavaScriptエンジニアで、JavaScriptは綺麗に書いてるから関係ないかな。
って言う方も、「この機能とこの機能お願いします。」と言われ、
「このclassを付与すれば動くよ」
って経験ないでしょうか。
「おお。このclass付与で動くのですね」
「この機能もこのclassを付与で動くのですね。」
うん。待てよ。
これって、1番目や2番目の出来上がりではないでしょうか。。
1 | <li class="js-○○○○○○○ js-○○○○○○○js-○○○○○○○"></li> |
そう、その辺も考慮していかないと、すぐに出来上がるでしょう。
また、class縛りで作るっていうのは汎用性があると言いづらいので、DOMにバインドさせるイベントであれば
適応するDOMを渡すか、class名を渡すかの方が良いかと思います。
コメントメッセージ
ソースコードを書く上でコメントは重要かと思います。
世界中で自分しか読まない。
っていうのであれば関係ない話かもしれませんが、
仕事でソースを書く方はまずありえないでしょう。
また今では、Githubなども存在し様々な箇所で様々な人に読まれる可能性があります。
そういった方の為に伝えるメッセージとしてコメントを残すのがマナーとも考えております。
1 2 3 | /** Author: Daisuke Takayama <takayama.daisuke@www.webcyou.com>*/ |
自分が誰かを相手に伝える事は大切です。
初対面の方はあなたのことを知りません。
1 2 3 | /** ほげほげコンテンツ*/ |
何の処理を行っているかの説明があると、「この人は親切だな」と感じる事でしょう。
1 2 3 4 5 6 | /*** ほげほげコールバック* @param {Function|undefined} f* @param {string|null} err* @param {any|string|null|boolean} data*/ |
引数で受け取るパラメータの型まで書いておくと、よりできるエンジニアに近づくことが出来るでしょう。
誰も解読できないようなトリッキーなscriptを書くエンジニアさんより、コメントを残せる細かい心遣いができるエンジニアさんの方が
優れたエンジニアと私は思っております。
と、クソースと呼ばれない1例ではありましたが挙げてみました。
もう、メジャーすぎてオススメする程でもないのですが、リーダブルコードを読まれていない方は一度読まれると良いでしょう。
ではでは。
