Posted at

デザイナーがjavascriptを理解するまで(演算子編)

More than 1 year has passed since last update.


javascriptを理解する上で困ったこと

これまでjavascriptを理解するために「Underscore JS」を読み解いてみました。

その際に困ったこと、javascriptをより理解し、書けるようになる為に必要だと思ったことを書きます。


なぜ「Underscore JS」なのか?


  • 綺麗に書かれているため読みやい

  • javascriptを理解するためには良い勉強になる


そもそもUnderscore JSっていったい何?


  • javascriptの便利な関数が集まったライブラリ

  • 配列を操作するのに役立つ関数がたくさん書かれている

▼公式ページにはこちらから

http://underscorejs.org/


実際どのようなことに困ったのか?

私が一番困ったのが?「演算子」です。

javascriptで調べても検索にそれらしいものがヒットしなかったからです。


演算子とは?

「演算子」と一言で言っても種類がたくさんありますが、

「算術演算子」、「等値演算子」、「代入演算子」は皆さん使われていると思います。

例)

▼算術算子

「+(加算)」、「-(減算)」、「*(乗算)」、「/(除算)」

▼等値演算子

「==(等値)」、「!=(不等値)」

今回私が紹介したい演算子は2つ。

「単項演算子」「三項演算子」です。


単項演算子とは?

値を返したり、型の判別を行うのに使うことができます。

今回私が知らなかったのが下記の3つです。

「delete」「void」「typeof」

それぞれの効果は下記の通りです。


  • delete・・・オブジェクトからプロパティを削除する

  • void ・・・式の戻り値を破棄する(undefinedを返す)

  • typeof・・・オブジェクトの型を判断する


三項演算子とは?

if文を省略して書くことができるすごいやつです。

使用することで長かったif文も短縮できたり、コードを見やすくすることができるのではないかと思います。これからjavascriptを書く際には使っていきたいと思います。

例)if文で書いた時と三項演算子を使った時の比較

▼if文

var a = true;

var b,c= 0;
if(a) {
b = 1;
c = 2;
console.log(b + c);
}

結果:3

▼三項演算子使用

var a = true;

var b,c= 0;
a ? b = 1 : b = 0;
a ? c = 2 : c = 0;
console.log(b + c);

結果:3

一行の記述でかけるので個人的には見やすいと感じます。

閉じタグ忘れによるエラーも減るのではないかなと・・・。

ただ使いすぎるとソースコードが見づらくなるのも事実なので注意も必要だと思います。

▼参考ページ

MDNさんのJavaScriptリファレンスがわかりやすかったです。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators


まとめ

演算子を理解することで、javascriptのソースコードがわかるようになったり、

さらに綺麗な書き方ができるので、演算子を上手に活用してコードを書いていきたいと思います。

デザイナーの皆さんも「わからない!」と投げ出さず、一つずつわからないところをなくして自分の可能性を広げていただけたらと思います。