Sheeprograming

以下のようなコードについてもうちょっと上手く書けないか？という話を頂いた。

const searchTargetArray = ['ぱんだ', 'うさぎ', 'こあら'];
const searchQuery = 'こあら';
let flag = false;
for(var i = 0; i < searchTargetArray.length; i++) {
  if( searchTargetArray[i] === searchQuery ) {
    flag = true;
  }
}
if( flag ) {
  console.log('みつかりました！');
} else {
  console.log('みつかりませんでした');
}

これは JavaScript の配列ならば includes 関数で一発でやれる。

const searchTargetArray = ['ぱんだ', 'うさぎ', 'こあら'];
const searchQuery = 'こあら';
if( searchTargetArray.includes(searchQuery )) {
  console.log('みつかりました！');
} else {
  console.log('みつかりませんでした');
}

この手の便利関数について、ちゃんとしたまとめは MDN の記事を読んだほうが良いが、サラッと一通り追うならば JavaScript Array操作 15本ほど - Qiitaが便利だった。

個人的には forEach と map、filter は抑えておくと楽だと思っている。

しばしば書くのだが、書くたびに手書きしていて面倒だったのでメモ。

const convertDateToMyFormat = (date = new Date()) => {
  return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
};

convertDateToMyFormat(new Date(597968970000)); // 1988/12/13 07:29:30

タイトルは私の好きなゲームの主人公のセリフである。昔、Intel の CEO だった Andrew Grove さん（2016年に亡くなっている）が次のように言ったという。

Bad companies are destroyed by crises;
good companies survive them;
great companies are improved by them.

日本語にすると ダメな会社は危機によって潰れる。いい会社は危機を乗り切る。イケてる会社は危機によって成長する だろうか。これを他人に強要することはなかなかにブラックな思想になりがちなので控えたいところだけれども、そのとおりだと感じる機会が最近しばしばある。というのは、「まずい」という場面で手を上げて問題を片付けてくるというのは経験点を稼ぐために最も効率的な方法の一つだからだ。それでも「だから、ピンチに飛び込め」とはやはり言い難い。それで病んだら元も子もないからだ。

優れたリーダーはピンチに飛び込ませた上でピンチを乗り切れるように上手く支援するのだろうな、と感じながら来週のお仕事にそなえる。

react-sortablejs の MultiDrag と Swap のサンプルを試していたら Uncaught TypeError: MultiDrag is not a constructor と怒られた。すなわち、以下のコードである。react-sortablejs は 6.0.0 を使用。

import React from "react";
import { ReactSortable, Sortable, MultiDrag, Swap } from "react-sortablejs";

// mount whatever plugins you'd like to. These are the only current options.
Sortable.mount(new MultiDrag(), new Swap());

const App = () => {
  const [state, setState] = useState([
    { id: 1, name: "shrek" },
    { id: 2, name: "fiona" },
  ]);

  return (
    <ReactSortable
      multiDrag // enables mutidrag
      // OR
      swap // enables swap
    >
      {state.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </ReactSortable>
  );
};

同様の問題にあたった人がいたようで Issue ([bug] ReactSortable MultiDrag/Swap is not a constructor #143) が書かれている。また、そこには解決策も紹介されており、最上部の import を次のように書き換えたら上手くいったとのことであった。つまり、 MultiDrag や Swap は sortablejs から読み込むのである。

import { ReactSortable } from "react-sortablejs";
import { Sortable, MultiDrag, Swap} from "sortablejs";

これは実際私の手元でも上手く動いた。

次男が初めてほしいおもちゃを買ってもらえず泣きわめく、というアクションに出た。4歳半でこれは遅いらしい。無いから楽でいいのか、と思ったらそうでもないとのこと。

ほら、買ってもらえなら作っちゃえの方においでよ……と思う次第。