Zenn
🐥

あなたの知っているJavaScriptはもう古い(書き方編 -その1- )

2022/07/31に公開
JavaScript
React
Vue.js
tech

私の知っているJavaScriptはもう古い

下記の記事をかいたように、JavaScriptの時代の流れについていけなかった私、、、。
そこで今回は今の時代はどんなふうにJavaScriptをかけばいいの？っていうことを学んで行こうとおもいます！
https://zenn.dev/k_tetsuhiro/articles/b0accbad3320d6

知っている書き方

10年前のJavaScriptしか知らなかった私、、、。もし同じような方がいればこういった書き方を過去していたと思います。

// 名前を定義する
var name = "タロウ";

// 名前を返す
function get_name(){
    return name;
}

し　か　し　！！　
もうこの書き方では通用しません（反省）

そこで、最近(ES2015以降)では下記のような記述をしていいきます。

const, letを使う

昔は変数の宣言でvar name = "タロウ";みたいに宣言していたと思います。
しかし、いつでも上書きできてしまう、再宣言できてしまうので、意図しないところでバグがおこる、、、といったことがありました。

// 名前を定義する
var name = "タロウ";

// 上書きできてしまう
name = "ハナコ";

// 再宣言できてしまう
var name = "ハナコ";

ES2015以降ではvarは使わず、constとletを使います。

// 名前を定義する
let name = "タロウ";

// 上書きはできる
name = "ハナコ";

// 再定義するとエラーになる
let name = "ハナコ"; //　エラー

letでは再定義のみエラーとなります

// 名前を定義する
const name = "タロウ";

// 上書きするとエラーになる
name = "ハナコ"; // エラー

// 再定義するとエラーになる
const name = "ハナコ"; //　エラー

const=定数なので、書き換えがおこるとすべてエラーになります
※ただし、オブジェクトや配列は上書きしてもエラーになりません（ここでは詳しく触れない）

文字列の連結

昔は文字列の連結に+ を用いてこんな書き方をしていたと思います。

var name = "タロウ";
var age = 20;

//　私の名前はタロウです。年齢は20歳です。
var message = "私の名前は" + name + "です。年齢は" + age + "歳です。"

めちゃくちゃ見にくいし、エラーがよく起こった記憶があります。。。
ES2015以降ではこんな書き方ができます。

const name = "タロウ";
const age = 20;

//　私の名前はタロウです。年齢は20歳です。
const message = `私の名前は${name}です。年齢は${age}歳です。`

スッキリして読みやすい!!

アロー演算子

昔は関数の定義でfunctionを使って以下のような書き方をしていました。

var number = 2;

// 倍返しだ！！
function double(number) {
    return number * 2;
};

double(number); // ４が返ってくる

またこんな書き方でもできたとおもいます。

var number = 2;

// 倍返しだ！！
var double = function (number) {
    return number * 2;
};

double(number); // ４が返ってくる

ES2015以降ではアロー関数を使います。
アロー関数ではfunctionを使わずに下記のように定義します。

// 倍返しだ！！
const double = (number) => {
    return number * 2;
}

functionがなくなり、代わりにアロー（矢印）のように=>を使います。
=>がでてきたら関数だ！って覚えておくと良さそうです。

アロー演算子は他にもこんなふうに書くこともあります。

// 基本の形
const double = (number) => {
    return number * 2;
}

// 引数のかっこを省略できる
const double = number => {
    return number * 2;
}

// ただし、引数が二個ある場合は必ずカッコで囲む
const add_numbers = number_1, number_2 => {
    return number_1 + number_2 ; // これはエラーなる
}

const add_numbers = (number_1, number_2) => {
    return number_1 + number_2 ; // これは大丈夫
}

// 一行で書く場合は波括弧を省略できる（ワンライナーなのでreturnは不要)
const double = (number) => number * 2;

// （）を使ってワンライナーのようにまとめる
const person = (name, age) => (
  {
      name: name,
      age: age,
  }
)
person("タロウ",20) // ｛name: "タロウ", age: 20｝ が返ってくる

まとめ

簡単なところをまとめてみましたが、すでにけっこう昔の書き方と違う、、、！と思ったのは私だけではないはず。
新しい書き方はすぐにはしっくりこないと思いますが、コード量を書いていけばこっちのほうが便利そうだなーという印象でした！
Reactをガンガン書いて、追いつかなければ、、、！
次回その２では、もう少し新しい書き方があるので、そこに触れたいと思います。

Discussion