Youtubeを開いたら『my 5 MOST USED javascript tricks』というビデオがサジェストされたのでみてみました

Javascript書くのによく使う5つのテクニック的な動画。仕事で一区切りついてYoutube立ち上げたら👇が出てきたので、みてみました。

AaronさんがJavaScript書き始めて3年くらいになるらしい

AaronさんがDaily basisで使ってるけど、あなたが知らないかもしれないテクニックを紹介します、と。

コメント欄とかであなたのテクニックも紹介してねー、とのことなのですが、コメント欄みると👇なんだか非同期まわりとかはいっつも何かしらありそうだな、、っていう気配ではあります。。

1. Query Selector

document.getElementsByClassNameとか、document.getElementByIdとかかったるいですよね、と。

Query Selectorを使えば、CSSのセレクタのように👇な感じでドットとかシャープとかでサクっと。

document.querySelector('.myClass');
document.querySelector('#myID');

もちろん子要素も👇こんな風に。

document.querySelector('.myClass > li');

全部持ってきたい時は

document.querySlectorAll('div');

2. Array Methods

forEachは過大評価され過ぎだ、と。一方でreduceは評価が低すぎる。

reduceは特にJavaScriptをはじめたばかりの人には理解されていなくて使われない傾向にある。

(私もreduceそのものを知らなかったのですが…)以下のようにコールバックを使ってaccumulateすることが出来る。

const nums = [1, 2, 3];
const sum = nums.reduce((a,v) => a + v);
console.log(sum);
6

でも、accumulateは数字だけじゃなくてもイイ。

👇こんな風にオブジェクトの操作もできる。

const fruits = [
	{name: 'apple', price: 100},
	{name: 'orange', price: 120},
	{name: 'pear', price: 150},
];

const fruitPrices = fruits.reduce(
	(a,v) => {
    a[v.name] = v.price;
		return a;
	},
	{}
);

console.log(fruitPrices)
👉 { apple: 100, orange: 120, pear: 150 }

ただ、👇この部分は画面に表示されてるコードが間違っててて、 誤 a[name] = v.price; → 正 a[v.name] = v.price; だったりします。

コメントしてたKeith Harrisさんありがとう。

んま、とにかくコールバックを使ったmap, sort, filter辺りはとにかく便利なので使うとイイよ！とのこと。

3. Destructuring

Destructuringって他の言語にはなかったりするので、JavaScriptならではだぜぃ、と。

👇こういう一部だけ抜き取るのはAngularとかで良く使われてるそうです。

const fruit = {name: 'apple', price: 1};
const {price} = fruit;

ってかimportする時の👇こういうのもDestructuringなんですね。

import {debounce} from 'lodash';

また、ファンクションに渡す引数としても使えるよ、と。👇はprintPriceっていうfunctionにfruitを渡してるけど受け取る関数の方は{price}で値段だけ受け取って、それをログ出力してる。

const fruit = {name: 'apple', price: 1};

function printPrice({price}) {
  console.log(price);
}

printPrice(fruit);

ネストしてる構造でもイケる。

const fruitPrices = {
  apples: {
    red: 1,
    green: 2
  }
};

const {apples: {red}} = fruitPrices;
console.log(red);

👇へー、そんなことも出来ちゃうんだって感じですねぇ。

const nums = [3, 1, 2];
const [first] = nums.sort();
console.log(first);

4. Promise tips

このPromiseで非同期っていうのが、ググりドリブンで開発してるといっつもこんがらがってくるのは私だけでしょうか？笑

まずは代表的なケースとしてfetch。👇だとpromiseが返ってくる。

const res = retch('https://google.com');

たくさんのURLを読むこもうとした場合に👇だと微妙なので、、、

const res = fetch('https://google.com');
const res2 = fetch('https://facebook.com');
const res3 = fetch('https://twitter.com');

mapを使って👇こんな風に。

const URLs = [
  'https://google.com',
  'https://facebook.com',
  'https://twitter.com',
];

const requests = URLs.map(url => fetch(url));

並列にやるか一個一個やってくかっていう話になった時に、何も考えずに並列でやるのでよければ👇でOKだけども、、

const responses = Promise.all(requests);

一個一個やっていきたい場合はasyncの中でawaitする必要があるので👇こんな感じ。ここで URLs.map(url => await fetch(url)) にしちゃうと想定通り動かないので注意、と。ヤヤコシイ…。

const URLs = [
  'https://google.com',
  'https://facebook.com',
  'https://twitter.com',
];

(async () => {
  const responses = [];
  for (let url of URLs) {
    const res = await fetch(url);
    responses.push(res);
  }
})()

5. Errorハンドリング

プロダクションでクラッシュさせたくないですよね、、っていう文脈でtry-catchの導入。

try {
  // エラーが起こるかもしれないコード
} catch (err) {
  // エラーが起こった時にすること
}

Promiseにおけるcatchについて馴染みがある人もいるかもしれないけど👇だとシンドいから、、

fetch('https://google.com')
  .then(res => {
    res.json().then(json => {
      console.log('got json', json);
    })
    .catch(err => console.error('json failed'))
  })
  .catch(err => console.error('request failed'));

👇こんな感じでasync+awaitでキャッチしてあげればよりクリーンなコードになりますね、と。

(async () => {
  const res = await fetch('https://google.com').catch(err => console.error(err))
  const json = await res.json().catch(err => console.error(err))
  console.log('got json', json);
})();