Tips（js）¶

ロガー定義¶

const log = new Logger('${TM_FILENAME_BASE}', process.env.REACT_APP_LOG_LEVEL);

文字列の結合¶

基本的にバッククォートのテンプレートリテラルを使う
参考:JavaScript の テンプレートリテラル を極める！

const str1 = 'TEST1';
const str2 = 'TEST2';
// const str3 = str1 + '_' + str2; …ではなく↓のように書く
const str3 = `${str1}_${str2}`;


元のオブジェクトから新しいオブジェクトにコピーして一部プロパティだけを上書き¶

基本的にES2015のスプレッド構文を使う。※ ShallowCopyであることに注意。DeepCopyが必要な場合は_.cloneDeepを使う。
javascript
const src = { param1: 'aaa', param2: 'bbb' };
const new = { ...src, param2: 'BBB' };
return new;


map関数で配列やMapからJSXの要素リストに変換¶

import map from 'lodash/map';

// 配列
const itemList = map(itemArray, (item) => {
  return (
    <li key={item.id}>{{item.value}</li>
  );
});

// Map
const itemList = map(itemMap, (value, mapKey) => {
  return (
    <div key={mapKey}>
     <p>{value}</p>
    </div>
  );
});

propsを受け取るパラメータの書き方の簡略化¶

const ${TM_FILENAME_BASE} = (props) => (
  <div>{props.param1}</div>
  <div>{props.param2}</div>
);
// ↑は↓と同じ
const ${TM_FILENAME_BASE} = ({param1, param2}) => (
  <div>{param1}</div>
  <div>{param2}</div>
);