はじめに

基本的にはワタクシ様はPHPを書いて日々過ごしているのですが、たまにjsを書いたりすることもあります。
さて業界では未だに js = jQuery みたいな方も少なくなく、jQueryでjsを覚えてそのままAngularとかに手を出さずCoffeeScriptとか通らなかった方はなんでか知りませんが、古文のようなES5以前のjsを書くことが多い印象があります。
ES6(ES2015)が世に爆誕してから5年も経つと便利さ、書きやすさが桁違いにUPします。
ES5があまりにも書きづらくてCoffeeScriptやTypeScriptやDartや Reactに関係ない方のJSX などといったaltJSと呼ばれるものが2010年頃からポコポコ生まれていったわけですが、それらの影響を受け、格段に書きやすくなった今どきなjsの書き方をふたつばかり紹介していきたいと思います。

varからの卒業

// ES5以前
var hoge = ''; // よくない

// ES6以後
const hoge = ''; // 中身が変わらない予定ならこっち（そのうち書き換えが効かなくなると思う）
let hoge = ''; // 書き換わるならこっち

var で変数宣言をする時代は終わりです。今は const と let です。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const

varがダメなわけではないのですが、varは関数全体だったりとかグローバル全体に影響を及ぼしてしまい大変危険だったわけです。
「お前は今まで食べたパンの数を数えてるのか」ばりに宣言した変数名を全部記憶してるならvarでもいいのですが、そんな自身がないなら const か let を使いましょう。
使い分けとしてはずっと中身が変わらないなら const 、変わるなら let です。

functionからの卒業

// ES5以前
var hoge = function(fuga){return '';};
var obj = {
    onClick: function(e){
        return e.target;
    }
};

// ES6以後
const hoge = fuga => {return '';};
const org = {
    // 旧来のメソッド定義と同じ
    onClick(e){
        return e.target;
    },
    // こちらはthisがうごかなくなる
    onClick: e => {
        return e.target;
    },
};

ES5の頃はfunction宣言地獄だったわけですが、ES6以降はそんな心配はありません。
というか、functionというキーワードを書く機会もあんまりなくなると思います。
普通の無名関数ならかっこいいアローファンクションが使えますし、アローファンクション使うと「呼び出し元によってthisが変わっちまう問題」から開放されます。違う問題には直面しますが……
オブジェクトのメンバーに関数を定義する「メソッド定義」はちょっとJavaっぽい書き方ができるようになりました。
もちろんアローファンクション使ってメソッド定義もできるのですが、thisの意味合いが変わってしまうので、全く同じようには動作しないので注意が必要です。

参考記事

• ES5とES6の違いをまとめてみた(メモ)
• 今更聞けない最近のJavaScript（ES6とか）