JSの書き方について

Javascriptの書き方は人それぞれ

こんにちは！Zackeyです。
仕事をしているとよく人の書いたコードを読む機会があると思います。
JavaやC#などコンパイル型の言語は割としっかりと書いてありますよね。
誰のを読んでもそこまで困らない。

いつも思うのはJS（jQuery）なんです！
とにかく読みづらいものから、めちゃくちゃ読みやすい書き方まであるので、
ここでは私的読みやすいコーディングを書いていこうともいます。

関数型言語なんだよ・・・

JSは関数型の言語です！
つまり実行時には基本的に関数（function）が動作するということ。
それに基づいて書いていく！ってのが我流です。

悪い例

ここでは今まで見た中でもかなり悪い例を書いていきます。

$(function () {
  $('.node').on('click', function () {
    console.log('click');
  });
});
$(function () {
  $('.node').on('change', function () {
    console.log('change');
  });
});

こんな感じ、、、
クッソきもいですね！
しかも発火タイミングが謎ですね！ぶっ〇しますよ！
これメンテしてって言われたら多分書き換えから視野に入ります。
実際に現場で結構目にする書き方なんで本当につらい。。。

私的な例

先ほどのコードをよりきれいにすっきり書いていきましょう。
まず$(function () {})ですがこれはdocument.onredyとほぼ同じなんで複数書かないでください！

$(function () {
  $('.node').on('click', function () {
    console.log('click');
  });

  $('.node').on('change', function () {
    console.log('change');
  });
});

一つにまとめました。
次に関数型の言語なわけですから、引数に毎度毎度functionって書くんじゃあねえ！
thisの考え方もまばらになりがちなので、関数は事前に定義しときましょう！

var action = function (event) {
    console.log(event.data.text);
}

$(function () {
  $('.node').on('click', { text: 'click' }, action);
  $('.node').on('change', { text: 'change' }, action);
});

だいぶましになってきました。
あとは渡すときにdataオブジェクトを前もって作っとくほうがきれいですね！

var action = function (ev) {
    console.log(ev.data.text);
}

$(function () {
  var clickOptions = {};
  var changeOptions = {};

  click.text = 'click';
  change.text = 'change';

  $('.node').on('click', clickOptions, action);
  $('.node').on('change', changeOptions, action);
});

個人的にはこれですっきり

フレームワークとTypescript

近年はWebAPPを作成する際はJSフレームワークとしてAngulerやVue、Reactなどを使ってコーディングするのが主流となっています。
どのFWもTypescriptを推奨しています。
厳格な型定義型であるTypescriptにさっと移行できるように、動けばいいJSを書くのは卒業しましょう！