【JavaScript】JSのコードがより読めるようになる！スニペット集

はじめに

他人のJSコードが何やってるかわからない！　
同じように書いてるつもりだけど、エラーが出る！

みたいな経験したことないですか？

そんな人に向けて、よく出てくるjsの省略形や、便利な記法を紹介します。

関数系

jsには関数でも複数の書き方があります。

func

//その１　伝統的な書き方
function hoge(e) {
  console.log("hoge");
}
//無名関数
function (e){
  console.log("hoge");
}

//その２　アロー関数
const hoge = (e) => {
  console.log("hoge");
};
//無名関数
(e) => {
  console.log("hoge");
};
//アロー関数は色々省略できます。
//引数は１つの場合かっこは省略可(2つ以上ある場合は、かっこは省略不可）
e => {
  console.log("hoge");
};

//さらに、returnするような関数で、１行の時は下記のような書き方もできます。
value => value + 1;
//下記と一緒
value => {
  return value + 1;
};

//ex) 便利な書き方
const list = [1,2,3,4];
const newList = list.filter(v => v > 1);
//newlist = [2,3,4]

注意

• アロー関数と、伝統的な関数は、同じ関数でも違う動作をしますので、下記を参照してみてください。https://qiita.com/suin/items/a44825d253d023e31e4d

• filter関数などは、下記を参照してみてください。https://qiita.com/su_mi1228/items/4275ccca6293846939f4#filter

Object

obj

const obj1 = {
 key1:'hoge',
 key2:'fuga'
}

//変数名とキーが同じ場合は下記のような書き方も可
const key1 = 'hoge';
const key2 = 'fuga';
const obj2 = { key1, key2 };
//obj1 と obj2は同じ

//上記は関数の引数でも応用できます。
const func = ({ key1, key2 }) => {
  console.log(key1, key2);
};

const func2 = obj => {
  console.log(obj.key1, obj.key2);
};

func(obj2);
func2(obj2);
//logにhogeとfugaが出力される

#スプレッド構文

スプレッド構文

const list1 = [1,2,3,4,5]
const list2 = [6,7,8,9,10];

const list3 = [...list1,...list2];

//...は配列などを展開
//list3 = [1,2,3,4,5,6,7,8,9,10]

//objに対しても可能
const obj1 = {
 key1:'hoge',
 key2:'fuga'
}
const obj2 = {
 key3:'hogehoge',
 key4:'fugafuga'
}

const obj3 = {...obj1,...obj2}
const obj4 = Object.assign(obj1,obj2);
//obj3とobj4は同じ
/*
{
 key1:'hoge',
 key2:'fuga',
 key3:'hogehoge',
 key4:'fugafuga'
}
*/

三項演算子

三項演算子

const isFlag = true;

const value1 = isFlag ? 1 : 0;
let value2 = 0;
//if文は１行の時は{}を省略できる
if (isFlag) value2 = 1;


//value1 と　value2はどちらも１
//isFlag ? isFlagがtrueの時 : isFlagがfalseの時
//下記のようにも書ける

const obj = {
 value : isFlag ? 1 : 0
}

// => obj = {value : 1 }

//複雑な時は三項演算子は非推奨

const isFlag1 = true;
const isFlag2 = false;
const isFlag3 = true;

const value3 = isFlag1 ? 1 : isFlag2 ? 2 : isFlag3 ? 3 : 0;
//value3 は　 １になるが、条件が複雑でわかりづらい
//使ってるeditorの設定によっては、整形されて１行になったりするため、
//素直にif文やswitchなどで対応する

その他

コードを（）でかっこむと、ひとまとまりとしてみなす

//アロー関数を即時実行
(() => {
  console.log("hoge");
})();

//react
return (
  <div>
    <p>hoge</p>
  </div>
);

const list = ["key1","key2","key3","key4"];
const obj = {}
list.forEach(item => (obj[item] = []));
// obj = {key1:[],key2:[],key3:[],key4:[]}

//これはエラー
list.forEach(item => obj[item] = []);

if (!("key5" in obj)) {
  //objにkey5がない時
}

promise

//thenの中でreturn すると、その次のthenの引数にその値がいく
new Promise((resolve, reject) => {
  resolve(1);
})
  .then(value => value + 1)
  .then(value => {
    console.log(value);
  });
//２が出力


//ex
fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));
//jsonのobjが出力される

importとexport

obj.js

export const obj = {
  key: 1,
  key2: 2
};

export const list = [1,2,3];

export defalut list;

import HogePlugin from 'hoge';
hogeWrapper.resiterPlugin(HogePlugin);

index.js

//exportにdefalutがついてないので、変数名でimportする
import { obj } from 'obj.js';
import { obj,list } from 'obj.js';

//objの名前を変えたい時
import { obj as obj2 } from 'obj.js';
//objをobj2としてimportする

//obj.jsのexportを全部importしたい時
import * as objs from 'obj.js';
/*
objs = {
  obj: {
    key: 1,
    key2: 2
  },
  list: [1, 2, 3]
};
*/

import list from 'obj.js';

//defalutがついてるものが返ってる
//この場合list

import 'obj.js'
//importするだけ
//hogeWrapperのresigterPlugin関数の処理が走る

注意
obj.jsをどんな形でimportしても、hogeWrapperのresigterPluginの処理が走る