はじめに

私は普段Railsチュートリアルで学習しており、Rubyしか基本的に触ったことがない。
しかし昨日までハッカソンに参加しており、TypeScript + React + Next.jsで開発を行うことになり、なんかフロントが楽しくなったので学習してみることにした。

変数と定数など

変数

JavaScriptの変数の定義はこのように書く

let hello = "Hello,world";

まず初めにletを置き、そのあとに変数名を書く
Rubyでは変数名からいきなり=でつなげて定義していた。
JSの場合はletを宣言する必要があるから、少し大変だね

変数というものは上書きできるので、letを省略し、この後に続けて書くと上書きをすることができた

Rubyと違い閉じタグをわすれないように！

console.log(変数名);とすることで、デベロッパーツールのconsoleの部分で見ることができる。rubyだとputｓでやってたやつかな

定数

変数と似たようなもので定数というものがある。

const superHello = "Hello,World!!!!!!!!";

定数はletの代わりにconstと書くことで定義することができる
変数との違いは、変数では先程上書きができたのに対し、定数は上書きをすることができない。
あまりRubyでは定数というものをつかった覚えはないが、使うらしい。

使い分けについて

基本的にJSではconstを使うらしい。
数字が置き換わるなど変化するものに対してはletを使う
昔のコードを見るとvarというものが使われているが、これは古い記述なのでもう使わない。

配列

let inoki = ['いち','に','さん','だ'];

このように書く。
配列はよくわからないので一旦後回しにする

関数

function

軽く復習すると、Rubyでいうdefのことである。
コードを見る限り、JSではRubyのようなendはいらないらしい。
しかし代わりに波かっこをつけている。

function square(number) {
  return number * number;
}

ここではsquareという関数名にしていて、そこに引数であるnumberがある。
そのしたに実行文を書く

しかしreturnという今まで使ったことない概念がある

return

JavaScriptでは、関数を呼び、コードを実行し、その実行結果を関数に戻すという作業が発生する。
つまりreturnがないと、コードを実行しただけで終わってしまいsquare関数にその実行結果は入らない。
別に実行するだけで終わるのならreturnは無くていいのだが、基本的に関数はどこか他の場所で使いたいことが多数で、そのときに実行結果が関数に入ってなかったら、意味ないじゃん!!ということになる

アロー関数

functionと同じく関数を定義するもので、アロー関数というものがある。

const getTriangle = (base, height) => {
  return base * height / 2;
};

現在ではこのアロー関数を使うのが主流らしい。
constを使い、関数名の後 =　を使い、そのあと引数を指定、　=>　を書いてその後波かっこでその中にコードを書く。

getTriangle();

呼び出すときはこのようにする。

これら２つの関数の違いはthisが固定か変動等の違いがあるが、よくわからないためアロー関数をとりあえず使っていくことにする。参考記事

if else

if else

if (ifの条件文){
    コード;
}else{
    コード;
}

if,else文はこのように書く