JavaScriptの基本文法

こちらは、 CAMエンジニア Advent Calendar 2019 7日目の記事です。
https://qiita.com/advent-calendar/2019/cam-inc
昨日は tomomi_bro さんの
CSSアニメーションで雪だるまとツリーを作ろう⛄🎄
でした。

本日はjavascriptの記事です！

かなり初心者向けの記事になるので、もう知ってるよと言う方は明日に期待してください笑

javascript歴約1年の僕がこの1年で学んでみて疑問に思ったことや詰まったところを重点に書いてきます！
ちなみにフロントエンドエンジニアをやらせていただいています。
プログラミングをはじめたいけど何からやればいいの？系の記事です。

環境は問いませんが、おすすめは
https://codepen.io/pen/
さんです。Web上でフロントエンド の環境のプレイグランドを提供してくれます。
なんとipadやスマホでも動くので今時の開発にもってこいです。

JavaScriptについて

はじめに Java と Javascript はインドとインドネシアくらい違います。
長いのでJavaScript = jsと呼びます。
Javaは万能で有名ですが js はブラウザが認識できる数少ない言語です。

ブラウザって言うのはこの記事を見るために開いたやつ（safariとか　chromeとか firefoxとか）
実はこれらのブラウザが認識できる言語は js くらいしかないのです。← まじかよ （PHPは一旦おいときます。）

なのでブラウザと密接にお仕事をするフロントエンドエンジニアのほとんどは実質このjsに縛られるということですね。

EcmaScriptについて

Javascriptは別名 EcmaScript と呼ばれていて(Ecmaはあくまで仕様だとかの話があるそうですが)

hogeを調べたいときは大体 js hogehoge es6 hogehogeででます。
(hoge とはプログラムやってる人が使いがちな なになに です、僕も最初わかりませんでした。なんでhogeなんでしょうね。)

es6ってなんぞやって話ですが、EcmaScriptの策定バージョンで、
ドラクエ2、ドラクエ3、ドラクエ4、ドラクエ5的 なノリです。

じゃあなんでes6なの？って話ですが、現在普及しているブラウザの安定した言語仕様がes6だからです。
単純に ドラクエ6 が今流行ってるからです。（ドラクエは5派です。ビアンカ派です。）
ちなみに最新はes2019です、es2017から毎年バージョンアップされるようになってこの調子で行くと来年はes2020になります。
ウイイレ、パワプロ君みたいよね。

なのでes6はes2016とも呼ばれています。
これからjavascriptを始める人はなるべくこのes6の仕様にのっとって書いた方がいいらしいです。僕もes6からしか分かりません。

基本文法

本とかに書いているのは基本文法です。非常に大事なことが書いてあるのですが、実際書いてみないといつ使うのかわからない状態で習熟度的に身につきません。

なのでプログラミングをはじめたいと思っている人はとりあえず本はしまって何もない状態から書いてみましょう。
js を書くにおいて知って置くべき点は以下だけです。

変数の定義 (値を箱に入れることができます。)
const box = '箱の値'
値の入れ直しがある場合
let box = '変わる場合があるよ'

入れることのできる値は形が決まっています。

1. 文字 'もじはチョンチョンで囲む'
2. 数字 831 ←数字はそのままかける
3. 真偽値　　true false ←この二つだけ
4. 配列 [1番目, 2番目, 3番目] ← 配列は大カッコで囲む
5. オブジェクト {name: 'apple', color: 'red'} ← オブジェクトは中カッコで囲む
6. undefined ← js特有の何も定義されていないことを表す値
7. null ← こちらは何もないことを定義している値

if文 条件分岐

// コメント文と言って'//'これを先頭につけると実行されないのでコメント、メモを残すことができる。
const box = 'apple'
// もし box の中身が 文字の'apple'だったら'これはりんごだよ'と言う文字を返す
if (box === 'apple') {
  return 'これはりんごだよ'
}

function 関数

お好みの関数を定義することができる。

// 関数内の()のなかみは引数と呼ぶ
function say(name) {
  // 引数をconsole.log()と言う関数の引数に渡して実行する。
  console.log(name)
}

// 使うとき
say('私の名前はhogeです。')

// 以下みたいにもかける（thisの話は一旦おいといて）
const say = (name) => {
  console.log(name)
}

これだけでjsを書くことができます。

つまづく点

これは僕が入社して、実際の現場で使われているコードのなかで「なんだこれ！」となったシリーズです。

!!（ビックリマーク二つ JS）

これは最初戸惑いました、主に条件式の中に書かれていることが多いのですが、
jsでは先頭にビックリマークをつけるとBoolean型の反転に変換してくれる機能があるのです。← ナンジャそりゃ
これを利用してビックリマークを二つつけると反転の反転、すなわちBooleanに擬似キャスト（変換）してくれるのです。
変人が思う変人は正常な人か！ つまりはそう言うことです。

// boxは文字列でBooleanじゃない
const box = '文字があるよ'
console.log(!!box)
// trueと出る（Booleanになってる！）

if (!!inputName) {
  return '名前が入力されました。'
}

アローファンクション二重

最初はわけが分かりませんでしたが、要はアローファンクションのなかでコールバック関数にアローファンクションを入れているだけです。

const say = name => name => // 処理

// 以下と同じ
const say = function (name) {
  return function (name) {
    // 処理
  }
}

&二つ ショートサーキット評価

こちらは && と || の論理演算を使ったもので、論理演算の評価の性質上以下のようになります。

const box = true
// boxがtrueだったら右を実行
box && 'boxがtrueだよ'

// boxがtrueだったら左を実行
box || 'boxがfalseだよ'

変数の先頭に__アンダースコア

こちらは他のプログラミング言語を触ったことがある人はわかる、privateな変数です。
残念ながらES6ではprivate変数は実装されていないため、明示的にこのような書き方をしています。
動作的には普通に変数を定義するのと変わりません。
ちなみにtc39ではprivatefieldsなるものが実装予定なので今後対応されるかもしれないです。
https://github.com/tc39/proposal-class-fields

const __private = 'これはプライベート'

まとめ

javascriptは学ぶことが多いです。他の言語と比べても結構特殊な部類に入ると思います。
しかし他の言語よりもWeb業界ではメジャーな言語でもあるので学ぶ価値は十分にあると思います。
特にフロントエンド を目指している人（Webサイトを作ってみたい人）には非常におすすめです。
僕はプログラミング歴約1年ですが、まだまだ学びきれていないと感じるので気長に頑張りたいと思います。
次回はnonoakijさんの記事です！お楽しみに〜