JavaScriptでコードをより短縮して書く方法！

プログラミングに関する記事です。

プログラミングをしばらくやっていると「もっときれいに書きたい！」とか「このコードをもうちょっと短く書く方法はないだろうか？」と思うようになってくると思います。

私も初めて数か月したら綺麗に短いコードを書いてみやすくしていました。

今回はJavaScriptをより短く書く方法をご紹介します。とても簡単なので覚えて使ってみてください。

※ある程度知識持ってる方からしたら「たりめーじゃん！」って思うくらい初歩的なことしか書いてないので超初心者向け

{}を使わないで一行で綺麗に書ける

if文やfor分を書くとき処理したい内容が１つの場合でも

if (分岐条件) {
     処理したい内容;
}

という風に書いている人がいるのではないでしょうか。

実はこれ{}を取り払って１行にまとめることができます。

if (分岐条件) 処理したい内容;

３行のコードを１行にできました。みやすいままでここまで短縮できます。

同様にもしelseの場合にしたい処理がひとつだけなら

if (条件分岐) 処理したい内容;
else 処理したい内容;

と書けます。なんかスッキリしてていいですよね

setIntervalやsetTimeoutについて

setInterval関数やsetTimeout関数を使うときthisが使えなくなるから新たに変数を用意してそこにわざわざthisを代入している人いるんじゃないでしょうか？

var dis = this;
setInterval(function() {
     dis.updateCount();
     console.log(dis.updatedCount);
}, 1000);

こんなふうに。

でもこれをせずにthisをそのままsetInterval内で使う方法があります。.bind(this)でも可能ですが、もっと簡単な方法があります。

setInterval(() => {
     this.updateCount();
     console.log(this.updatedCount);
}, 1000);

function()の部分を() =>に変えるだけ。アロー関数の形。

これだけでthisが使えるようになります。

末尾に「;」をつけなくても良い

C言語とかだと末尾に「;」をつけないとエラーになりますが、JavaScriptの場合はつけなくても動きます。

console.log(123);
console.log(123)

これどっちでも正常に動作します。「;」をつけないで改行して次のコードを書いても問題ありません。

私は「;」を末尾につけるので慣れてしまっているのでそのままですが、めんどくさいよって人はわざわざつける必要ないので覚えておくとよいかも。

ifを使わずに分岐をする

さきほどif文は処理がひとつなら{}を使わずに１行でかけるというのをご紹介しましたが、ifを呼び出さずに条件分岐する方法があります。

これも短縮に使えるかも。

a && b && console.log(123);

これ。if分岐と同じ動きしてるんですがわかりますかね？私もこれifの条件の部分しか書かれてなくない？って困惑したんですけど最近になって理解できるようになってきました。

勘のいいひとはわかるかも。if文にしてみると・・・

if (a && b) console.log(123);

これと同じ意味です。aが真でbも真ならコンソールに123と表示する。

aやbは変数単体でなくても良いです。trueになればいいので

a == b && c > d && console.log(123);

ifとそんな変わりないですね。処理内容を&&で後付けすれば良いだけです。

どっちで書いても量は同じかもしれませんが、if使わずに書けるとなんか上級者みたいでカッコよくないですかｗ？

もうひとつ紹介します。

window.hello = window.hello || []

なんかみたことあるな～って思った人がいるかもしれませんが、実はこれGoogleアナリティクスなどのタグにも使用されている形です。

これもifを使わずに条件分岐しています。if文に戻すと

if (window.hello !== undefined) window.hello = window.hello;
else window.hello = [];

というかんじ。window.helloが未定義なら空の配列として初期化する。

あのGoogleも使ってる短縮法なので覚えておくといいかもしれませんね。

まとめ

コードの簡単な短縮方法と難しいけど使えたらカッコイイ短縮方法を紹介しました。

ぜひ活用してみてほしいです！

以上になります。