インストールされているnpmモジュールをトップレベルだけ表示する方法
以下のコマンドで可能です。
npm ls --depth=0
TypeScriptのデメリットと対応策(個人見解)
今のフロントエンドではTypeScriptを使うことが普通になってきています。
型がつくということは多くの場面でバグを事前に発見することの手助けになります。
しかし、そんなTypeScriptにもデメリットがあ ...
Reactの関数コンポーネントでlodashのdebounceを使用するときはuseCallbackを使う
Reactの関数コンポーネントでlodashのdebounceをそのまま使うと、毎回関数が実行されてしまってうまく機能しません。
これはdebounceが内部的にsetTimeoutを使用していることと、関数コンポーネント ...
JavaScript 連続して関数を呼び出したくないときに便利なlodashのdebounce
mouseoverやscrollイベントが発火した際に何か処理を行いたいことはよくあることですが、これらのイベントは大量に発生するため、イベントが発火する度に関数を実行するとかなりの負荷がかかります。
lodashのdeb ...
React コンポーネントに関数を渡すときの書き方による違い
ボタンコンポーネントにonClick時に実行したい関数を渡す場合は、以下のように書くことができます。
<button onClick={this.handleClick}/><button onClick={( ...
TypeScript JavaScript undefinedやnullチェックについて
Array.prototype.find は undefined を返す可能性がありますが、必ずundefined以外の値が変えることを期待したいことがあります。(配列の中に、探したいものが必ずあるケース)
この場合は、f ...
Promiseのcatchで共通処理を行い時を考えてみた
Promiseのcatchで、共通の処理を行い時場合にカスタマイズされたcatchを追加してみました。
myCatch という関数を追加しています。
myCatch は、渡されたハンドラーを実行するとともに、共 ...
JavaScript ソースマップとは
Webpackを使うとJSファイルを一つのファイルにバンドルできますが、圧縮されたファイルなのでエラーが発生したときはどこでエラーが発生したかを調査するのが難しくなります。
ソースマップとは変換後のコードと変換前のコードを ...
ブラウザのコンソールでタイマーを使う
console.time を使用することで処理時間を計測することができます。
console.time('hoge')alert('1回目のアラート')console.timeLog('h ...
ドラッグ&ドロップのdataTransfer.effectAllowedとev.dataTransfer.dropEffectについて
effectAllowedで設定した値がdropEffectで設定した値と噛み合うときにのみdropイベントが発生します。
以下の例ではdragstart時にeffectAllowedにmoveを指定しています。