今までの仕事で使っていた便利な方法について

今までの仕事で迷ったり取り方の方法の違いや便利な方法についてまとめを書いてみたいと思います。

javascriptとECMASCript(Babel)の違い

これについてはかなり悩みました。
クラスの追加の仕方やライブラリの組込書き方に違いがありました。
それに伴い組込部分などちょっとしたところで躓くことが多かったように思います。

node.js

import '*****' from *****;
const ***** = require('******');

#Babel
import {*****} from '*****';

この書き方に慣れるまでに時間がかかりました。
実際にクラスが書けると楽なのですがC#とかの流儀で書いてしまうと動かないこともありました。
実際にはC#の場合importで組み込むときにはクラス名とファイル名は一致させる必要は無かったのですがJavascript(ES6）ではクラス名とファイル名の一致が必要なので気をつけて下さい。
変数組込の場合は別に変数とrequireで組み込むライブラリで一致させる必要はありません

for文の書き方

これは人によって流儀を持たれていました。
実際はC#などで使われるfor...inで書くことでKey値で書くのが早いんですが。
ここでも人の流れに乗っかる形でfor...in・for...ofで書くことをやめて.filter・.map・.findで書いていたような気がします。
確かに書き方としてはスマートに書けるのですが実際のところqiitaのに書かれている方も最近は.filter・.map・.findなどで書かれている人が多くなってきていますが。
ちょっと待って下さい。
Keyが変動する部分では.filter・.findでは値が取れませんので要注意です。
このところは気をつけて下さい。
しっかりとfor...inで値をとるようにしましょう。

#従来のfor...in・for...of
let hogehoge = ['a', 'b', 'c'];
for(let hoge in hogehoge){
    let hogeKey = hoge;
    let value = hogehoge[hoge];
}

let hogehoge = ['a', 'b', 'c'];
for(let value of hogehoge){
    console.log(value);
}

#.filter .map  .find
let hoge = ['a', 'b', 'c'];
let value = Object.entries(hoge).filter(e => e[1]).map(e => e[0])

let hogehoge = ['a', 'b', 'c'];
let value2 = Object.values(hogehoge).find(e => e.hogehoge === 'a');

いろんな所で迷いまくりましたが最後はこの書き方を覚えると早いが使いどころを間違えると思ったような値が返ってこないこともあり色々と模索しながらデータを取っていくようにしていました。

consoleの使い方

これ意外と自分も使いこなせていたと思っていたのですが楽な方法がいっぱいありました。
普通だとlog取りだと思っている人もいますが配列表示やいろんなこともできるので試してみるといいかもしれません。

#consoleの使い方

//logの取り方
let value = 'aaa';
console.log(value);

//table（配列）取得もできます
console.table([[0,1,2,3,4], [5,6,7,8,9]]);

//データ内のObjectをみる方法
console.dir(object);

//DOM内容の表示
console.dirxml(node);

これらを覚えておくと意外と便利です。
詳しくはasialさんの【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（前編）に書かれています。

以上です。