はじめに
基本的にはワタクシ様は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の意味合いが変わってしまうので、全く同じようには動作しないので注意が必要です。