useCallbackはどこで使えばいいのか？使い所とは
hooksAPIの中で、useCallbackの使い所がいまいちわからなかったので検証してみました。 結果だけ知りたい人 自コンポーネントだけで使うコールバック関数の場合は使う必要なし。…
0件のコメント
2020年6月19日
styled-componentsでも使われてるstyled.divに続くバッククォートが何か知ってる？Tagged Template Literal
styled-componentsのドキュメントを読むと、こんな書き方がされています。 styled.div` // css... ` ちょっと見た目気持ち悪いですが、これはES6のTagged Te…
2020年6月11日
javascriptのtimesっぽい[…Array(5)].map(_ => console.log(_))が動かない原因
javascriptでrubyのtimesっぽいことをしたい時に、よく使われるテクニック。 動かない場合は、babel設定をチェックしてみてください。 スプレッド構文を使い時に利用するプラグイン、「@…
2020年6月9日
Reactフォームのリアルタイム更新の実装テクニック
メモアプリなどのアプリでは、テキストエリアをリアルタイムで更新しておきたい時があります。 onChangeの度にupdateする方法もありますが、これでは無駄なupdate文が発行されてしまいます。 …
2020年6月6日
firestoreとreduxのバインディングライブラリ「react-redux-firebase」の使い方
firestoreとreduxをバインディングするライブラリを見つけたので触ってみました。 ※公式ライブラリではありません。 https://github.com/prescottprue/react…
2020年6月5日
javascript配列の追加処理の速度比較：push VS concat VS spread operator
配列に新しい値を追加する時、push, concat, spread operatorの3種類の方法の速度を計測してみました。 例 // push for (let i; i < 1000; i…
2020年6月4日
Nextjsを使ってメモアプリを作ってみる
NextjsはReactのフレームワークです。 このシリーズでは、Nextjs使ってメモアプリを使って簡単なメモアプリを作ってみます。 ひとまず、基本的なCRUD処理を実装することにします。 クライア…
2019年7月4日
【Webpack】CSSのglobal importとcss modulesを使い分ける方法
CSSはグローバルで読み込まれますが、CSS Modulesを使うと適用範囲をコンポーネント内に限定することができます。 しかし、ライブラリなどには下記のように、用意されたcssをグローバルに読み込む…
2019年5月13日
typescript+React+ReactRouterでwithRouterの型宣言
onClickでページ遷移したい時は、history.pushを利用します。 import * as H from 'history' interface OwnProps { history: H.…
2019年5月8日
firestore複数コレクションの取得はPromise.allを使うと若干早い
firestoreの取得速度を図ってみたのですが、Promise.allを使った方が若干早かったです。 コレクションにはそれぞれ100件ずつドキュメントを突っ込んでいます。 1.それぞれ同期的に取得 …
2019年2月7日
React+Reduxアプリのオレオレフォルダ構成
React + Reduxで作るアプリケーションをいくつか作っていて、フォルダ構成に悩みました。 調べてみると、以下の方法にしてる人が多いみたいです。 A： コンポーネントやコンテナなど…
2018年11月29日
React/ReduxのAPIのローディングをスマートに実装する
React/ReduxのアプリでAPI通信する時に、ボタンを非活性にしたかったり、読み込み中のアイコンを出したい。 これを実現するための方法で一番簡単なのはAPIの「リクエスト・成功・失敗」時にred…
2018年11月28日