はじめに

エンジニアとして就職してから1年とちょっと経ちました。

その間ほとんどずっとRuby on RailsでのAPI開発しかして来なかったため、そろそろ他の言語も勉強してみようと思いJavaScriptを一から勉強します！

ちなみに現時点でのjs知識は

基本文法は何となく理解している
ふわふわな知識でちょこっとちょっと触れるくらい

ご覧の通りちょっとした知識しかないため、まずはJavaScript Primerを全て読んでみたいと思います！

jsprimer.net

（ネットで無料で見れるのありがたすぎる... 製作者の方々、本当にありがとうございます）

第一部

変数と宣言

const は再代入不可、letは再代入可能、varは使わない

基本はconstで、次にletを使えば良さそう

同じスコープ内で変数の再宣言はできないっぽい

let a = 'a';
// undefined

let a = 'aa';
//Uncaught SyntaxError: Identifier 'a' has already been declared

分割代入はこんな感じ

const [b, c] = ['b', 'c'];
b // 'b'
c // 'c'

// 要素数が足りない場合はundefinedが入るっぽい
const [e, f] = ['e'];
e // 'e'
f // undefined

値の評価と表示

変数宣言はundefinedを返す

Rubyだとselfの値が返ってくるのでちょっと違和感

そもそも変数に関数を入れれるのに『変数宣言』って呼んで良いのかは疑問

この辺りRubyと結構違いそうなので気をつける

データ型とリテラル

プリミティブ型とそれ以外のオブジェクト型

RubyでいうところのArrayもオブジェクト型

Ruby的にはクラスがメソッドを持っている感じだけど、jsではオブジェクトがプロパティを持っているという理解で合ってるのかな？

ここに関しては続きの章で解説があるらしいので一旦保留

演算子

基本的にはRubyと同じ感じ

ただこれでなんで2になるのかは分からない...

let num = +'2';

num // 2

Rubyみたいにオブジェクトに対してメソッドを呼ぶみたいな考え方じゃないのかも...

===は比較、==は暗黙的な型変換してからの比較

jsのfalseは

false
undefined
null
0
0n
NaN
""

数が多いよ...

||演算子だとfalsyな値全てがfalseとして扱われてしまう

??演算子を使えばnullorundefinedのみfalseとして評価される

演算子系は基本的にRubyと似てるので大丈夫そう

暗黙的な型変換

暗黙的な型変換が行われるのは分かったけど1 + trueが2になるのは衝撃すぎる

基本的に暗黙的な型変換に頼るような実装はやめましょうみたいな理解でいいのかな？

関数と宣言

仮引数が渡されなかった場合はundefinedになって、多く渡した時は無視される

下の例だとnum2がundefinedになってnum1 * num2の結果がNaNになる

const multiplication = (num1, num2) => {
    return num1 * num2;
end

multiplication(2,3) // => 6
multiplication(2) // => NaN
multiplication(2,3,4)// => 6

Rubyと違ってエラーにならないのか〜

Rubyでいう可変長引数はこんな感じ

function fn(...args) {
    return args;
}

fn(1,2,3,4,5) // => [1, 2, 3, 4, 5]

////////////////

function fn(num1, num2) {
 return num1 * num2;
}

fn(...[2,3]) // => 6

argmentsという関数の中でのみ参照できる特殊な変数がある

function fn() {
    console.log(arguments);
}

fn(1, 2, 3) // => [Arguments] { '0': 1, '1': 2 }

Arrayっぽいけど実際はObjectの形で値が入ってるため、インデックスを使って値は取れるけどArrayのメソッドは使えないみたい

ただそもそもArrayもObject型なのに、Arrayのみで使えるメソッドが定義されてるってどういうこと？？

この辺りからちょっと理解が難しい...

jsの関数は第一級関数と言って変数に代入できる

function double (num) {
    return num * 2;
 }

const fn_1 = double; // ()付きで渡してないので関数が変数に代入される
const fn_2 = double(5); // ()付きで渡してるので関数の戻り値が代入される

Arrow Functionの書き方で関数式を短く書ける

const fnA = (x) => { return x; };
const fnB = x => { return x; }; // 仮引数がひとつなら()を省略できる
const fnC = x => x; // 一行のみの場合はブロックとreturnを省略できる

x => x; // 無名関数だとこんな感じで書ける

引数として渡される関数の事をコールバック関数というのは何となく知ってた

オブジェクトのプロパティである関数をメソッドと呼ぶらしい

第一級関数で関数を値として扱えるからオブジェクトの値に関数を定義できるってことかな？

ここが全くRubyと違うのでびっくりした

const obj = {
    method: num => num
};

obj.method(10) // => 10

// こういうい書き方もできる（推奨らしい）
const obj = {
    method(num) {
        return num;
    }
}

obj.hogeでオブジェクトに新しくプロパティを追加できる

感想

やっぱりRubyとは全然違うなぁという感想

色々触ってみないと本質的なところが分からないと思うので、とりあえずJavaScript Primer終えたら違う本買ってみようと思います！

続きは後日

日々徒然

プログラミングしたりお酒飲んだりする毎日

Rubyしか書けないエンジニアから脱却するためのJavaScript Primerお勉強①