【ゆるふわ🔰】JavaScript本格入門 【Chapter1,2】

Chapter1:　イントロダクション

• 基本的にはJavaScriptの歴史
• 初学者の１割はここで落ちる感じ

攻略法

• 理解しないくらいで読む
• 本気で理解しにかかると、最終Chapterにいけなさそうなのでサラサラ読む
• 基本的にはベテランが喜びそうな内容になっています。

自分メモ

ECMAScript2015とは

• 遊戯王カードの禁止カードとか、準制限カードみたいなルール変更みたいなこと（たぶん）
• 初学者の１割は脱落していきます。（昔の遊戯王カードのルールを知らないので）
• 詳しくはES2015 (ES6)についてのまとめに綺麗にまとめてくださっているので、初学者のみなさんもよく読むようにね
• どうしてもドヤ顔したい場合は、このように回答しておけば良いです。
  

🤔< ECMAScript２０１５って知っている？

😏< お、渋いね。ES6って普通言うよね。ジャヴァスクのスピードについていくのまじ大変だわー。

Chapter2:　基本的な書き方を身につける

• ここではJavaScriptの基本的な記法などが説明されています
• 結局自分で触って見ない限り、完全な理解を得ることは難しいです
• そのため、初学者の２割はこのチャプターを無限ループしてしまい、この本を終了することになります

攻略法

• 理解しないくらいで読む
• 本気で理解しにかかると、次のChapterにいけなさそうなのでサラサラ読む
• 他の言語を勉強済みの人には、ほー、JavaScriptだとこう書くのか！と気づきになっていいかもです

自分メモ

数値リテラルについて

• 普段あまり、2進数・８進数・16進数のことを意識することがなかったので、この記法はメモ

インクリメント演算子

• 書き方によって、インクリメントされるタイミングが異なるので注意
• PHPの記事になるが、++$varと$var++の違いが参考になるので読みましょう

分割代入

ES６から導入されました！
何が嬉しいのか、　僕にはまだわかりません。
特に「...other」っていつ使うんだろって感じです。

let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let [x0, x1, x2, x3, x4, x5, x6, x7, x8, x9] = data

console.log(x0); //1が表示される

let [y0, y1, y2, ...other] = data

console.log(y0); //1が表示される
console.log(y1); //2が表示される
console.log(y2); //3が表示される
console.log(other); //[4, 5, 6, 7, 8, 9, 10]が表示される

ちなみにJavaScriptさんは、ちぐはぐな関係でも、いい感じに色々やってくれるようです。

let data = [1];

let [x0, x1, x2, x3, x4, x5, x6, x7, x8, x9] = data

console.log(x0); //1が表示される
console.log(x1); //undefinedが表示される

ただし、宣言してない要素に対しては、エラーになる模様です。

let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let [y0] = data

console.log(y0); //1が表示される
console.log(y1); //Uncaught ReferenceError: y1 is not defined

ショートカット演算

• 非推奨記法らしい。英語のスラングみたいな感じでしょうか。（Hey,dude. What’s up?みたいな）
• 読みづらいというか、脳内パワーの消費量が多そうです
• 素直にif文を書いた方が良いです
• これ使うくらいなら「三項演算子」のがいいと思います
• 左式だけ評価されて、右式は無視されるケースがあります。下に例を書きます

let x = 1;
x === 2 && console.log('おはよう'); //何も表示されない
x === 1 && console.log('こんばんは'); //「こんばんは」と表示される

let y = 1;
y === 2 || console.log('おはよう'); //「おはよう」と表示される
y === 1 || console.log('こんばんは'); //何も表示されない

delete演算子

• 指定した配列要素やオブジェクトのプロパティを削除してくれる
• 削除に成功すると「true」、失敗すると「false」と教えてくれる
• 別に教えてくれなくてもいいと思ったけど、if文とかの判定で使えそうですね。

配列の要素を削除した場合、該当する要素が削除されるだけ。削除されたインデックス番号は永久欠番

var ary = ['お雑煮', 'おせち', '門松']
console.log(delete ary[1]); //true
console.log(ary) //[ 0:'お雑煮', ２：'門松']と表示される

プロパティを削除した場合、プロパティ自体が削除されるだけで、プロパティが参照するオブジェクトが削除されるわけではない

var obj1 = {x:1, y:2}
var obj2 = {x:obj1, y:2}
console.log(delete obj2.x); //true
console.log(obj2) //{y:2}と表示される

for...of命令

• Coming Soon

まとめ

• 他の言語と近い構文が多いです。
• ただし、ES６で追加になった構文もあるため、使いながら覚えるしかなさそうです。
• 初学者の３割はここを無限ループすることでしょう