このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

あなたの書くコード「クソソース」になっていませんか?「クソース」と言われない為の1歩。 そのまとめ

JavaScript

2015.12.20

この記事は最終更新日から1年以上が経過しています。

lgf01a201405261800

どもです。

冒頭で申し上げておきますと、私は「クソコード」所謂「クソース」が嫌いです。

「え?当たり前でしょう?」

と言われがちですが、私の言う嫌いは

「クソコード」と一言で済ませてしまうのが嫌いです。

クソコードと呼ばれたり、そう扱われるようになるまでそこには色々な経緯、背景が必ず存在するし

誰もがクソコードを書こうと思って書いているはずもなく、

様々な条件の元、昼夜問わず、一生懸命汗を流し、作成したけど、

結果そうなってしまった場合もあるからです。

ベンチャー企業であったり、スタートアップの会社などではスピードを求められ、

こうなるケースもよくあるかと思います。

でも、スピードを求められる現場だからこそ、見通しの良い汎用性、保守性を持った

ソースコードというのは必要不可欠な事柄なのです。

「私はhtmlとcssしか書かないからあんまり関係ないかな。。」

いえ、HTML、CSSも立派なソースコードです。

webアプリケーションにおけるHTML、CSSは非常に重要な部分でもあります。

むしろ、そこから破綻するケースも稀ではないでしょう。

と、長々と説明を書いてもあれなので、まず最初に2つの例を出してみます。

2つの例

<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'] ?>">
<input class="common-input" type="text" placeholder="{{hoge.placeholder}}" ng-model="hoge">

もし、この2つのソースが同じ挙動で、同じレンダリング、同じアニメーションを行うとしたら

あなたはどちらを選択するでしょうか。

と、ちょっと極端な例を出してみましたが、全然あり得る話です。

下は、MVCフレームワークのAngular.jsを利用した場合の記述だったりします。

あなたにとって扱いやすい、ソースはどちらでしょうか。

上の方が可読性もあり、認識しやすいというのであれば、要注意かもですね。

Dom依存、CSS依存

ここで言うDom依存は、HTML要素にModelデータが紐付いている状態のことを言います。

よくある例で、Modelデータのidが紐付いている例。

<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が付与されている状態です。

<li class="js-○○○○○○○ js-○○○○○○○js-○○○○○○○"></li>

js-○○○○○○○を1個とったら動かなくなったよ!><

って経験あったりしませんか?

色々と機能をつけたくて、js-○○○○○○○がめちゃくちゃ増えてませんか?

これをさける為、親要素にidを付与する手法があります。

<ul id="js-○○○">
  <li></li>
</ul>

ですが、私は全然これがBESTとは思っておりません。

ただ、見通しの良いコードは後者の方と言えるでしょう。

母さんあれとってScript

JavaScriptを書くうえで、結構なりがちかもしれない例となります。

var setEventHandler = function() {
        ....
}

ふむふむ なるほど、eventHandlerをまとめている関数ですね。

中身を見ると、

$(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() {
....同様。

あー >< 一つの関数で色々とやってしもうてるぅー。

ここまで行くと、もう「かあさんあれとって状態」です。

あれと言ったら、あれとあれとあれと..じゃないか!!

もう分かりませんね。

私はあなたのお母さんでもありません。

あれではわかりませんので、

関数の処理は名前と一致し、より簡潔に記述するのが好ましいかと思います。

呪文化された変数名、関数名

function apOPPSetSortGet(apData, callback) {

apとはなんだろう?

appの省略かな?

「馬鹿野郎。ここは空港だからAttention Please の略ってわかるだろ。」

分かりません。

呪文を作るのは至って簡単です。

ローカルルールを省略すればすぐに出来上がります。

JavaScriptエンジニア

自分はJavaScriptエンジニアで、JavaScriptは綺麗に書いてるから関係ないかな。

って言う方も、「この機能とこの機能お願いします。」と言われ、

「このclassを付与すれば動くよ」

って経験ないでしょうか。

「おお。このclass付与で動くのですね」

「この機能もこのclassを付与で動くのですね。」

うん。待てよ。

これって、1番目や2番目の出来上がりではないでしょうか。。

<li class="js-○○○○○○○ js-○○○○○○○js-○○○○○○○"></li>

そう、その辺も考慮していかないと、すぐに出来上がるでしょう。

また、class縛りで作るっていうのは汎用性があると言いづらいので、DOMにバインドさせるイベントであれば

適応するDOMを渡すか、class名を渡すかの方が良いかと思います。

コメントメッセージ

ソースコードを書く上でコメントは重要かと思います。

世界中で自分しか読まない。

っていうのであれば関係ない話かもしれませんが、

仕事でソースを書く方はまずありえないでしょう。

また今では、Githubなども存在し様々な箇所で様々な人に読まれる可能性があります。

そういった方の為に伝えるメッセージとしてコメントを残すのがマナーとも考えております。

/*
* Author: Daisuke Takayama <takayama.daisuke@www.webcyou.com>
*/

自分が誰かを相手に伝える事は大切です。
初対面の方はあなたのことを知りません。

/*
* ほげほげコンテンツ
*/

何の処理を行っているかの説明があると、「この人は親切だな」と感じる事でしょう。

/**
* ほげほげコールバック
* @param {Function|undefined} f
* @param {string|null} err
* @param {any|string|null|boolean} data
*/

引数で受け取るパラメータの型まで書いておくと、よりできるエンジニアに近づくことが出来るでしょう。

誰も解読できないようなトリッキーなscriptを書くエンジニアさんより、コメントを残せる細かい心遣いができるエンジニアさんの方が

優れたエンジニアと私は思っております。

と、クソースと呼ばれない1例ではありましたが挙げてみました。

もう、メジャーすぎてオススメする程でもないのですが、リーダブルコードを読まれていない方は一度読まれると良いでしょう。

ではでは。

Comment

Related Article

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

フロントエンド開発が捗る JSON Serverについて

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

会社で npm Private導入して、1ヶ月で8個ほどパッケージ作成したお話。

2017.06.02

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「実装編」

2017.03.26

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」

2017.02.21

Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ!

2016.07.31

【JS】フロントでレコメンドアルゴリズムを簡単実装できるJavaScriptライブラリ「RecommendJS」を公開しました。

2016.05.30

JavaScript ビット演算・ビットマスクについてまとめてみました。

2016.03.15

マテリアルデザイン対応!タッチ、クリックでエフェクト。RippleEffectJSを公開しました!

2016.02.01

CATEGORY LIST

LATEST NEWS

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

春の大掃除。VHSに続いて、カセットテープもデジタル化!microSD保存 MP3変換プレーヤーを使ってみた。

tool

2018.03.27

Macで、VHSダビング I-O DATA ビデオキャプチャー 「アナレコ」を使ってみた。

tool

2018.03.27

ご報告

イベント

2018.02.02

明けましておめでとうございます。(遅め

イベント

2018.01.16

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US