技術備忘録MUIのDate Range Calendarを自力実装する
MUIはさまざまなリッチなコンポーネントを提供してくれるライブラリです。MUIでは、日付も扱うパッケージもあり、@mui/x-date-pickersは日付の入力用コンポーネントを提供しています。 しかしながら、日付を範囲選択するコ...
React
技術備忘録
技術備忘録Chart.js3.x系でグラフ上のクリック位置に値をセットする方法
執筆時点でChart.jsは3.5.1となりました。以前書いたグラフ上のクリック位置に値をセットする方法はChart.js2.x系での実装だったので、今回はChart.js3.x系に書き換えた方法について説明したいと思います。 Ch...
技術備忘録webpack build時にGitのcommit hash値を組み込む
デプロイされているバンドルのバージョンを確認できるよう、webpackのビルド時にGitのcommit hash値を自動的にグローバル変数として取り込み、簡単に確認できるようにする方法について説明します。
技術備忘録WordPressのページに外部ファイルのJavaScriptを埋め込み表示する(Reactを表示する)
WordPressで技術備忘録としてフロント系の記事を書くときに、本当にそのコードが動いている様子を体験してもらいたいならば、実際に触れてもらうのが一番早いのかもしれません。そこで、WordPress内にReactなどのJavaScrip...
技術備忘録TensorFlow.js + Reactjs でディープラーニングモデルを実装するときのtips
TensorFlow (Python)で学習したモデルを用いてフロント上で推論を実装しようと考えたのですが、その際に考えたことや実装に当たってのtipsについて備忘録としてまとめておきたいと思います。 システムの構成案 Ten...
技術備忘録Reactjsでバンドルサイズ低減のためにTypeScript製の外部モジュールを別ファイルで管理する
バンドルサイズの低減のため、code splitingやCDNを利用するなどの方法があると思います。筆者は後者のCDNのコンテンツを利用する方法を取っていたのですが、Reactjsを使用しているとTypeScriptで書かれたものが読み込...
技術備忘録Reactjsで外部モジュールをCDNで読み込む (webpackのexternalsの設定方法)
Reactjsでの開発を進めていき、最終的なバンドルサイズが大きすぎてしまうということがよくあるかと思います。そこで今回はCDN (Contents Delivery Network)を利用して、モジュールを分散させることによってバンドル...
技術備忘録Fullcalendarで画面サイズが小さい時に重なったイベントの幅が狭くなりすぎるのを解決
Fullcalendarでスマホのような画面サイズが小さいディスプレイ利用時で、同じ時間帯に3つ以上のイベントがあると下記のように不自然にイベント幅が狭くなってしまいます。これをeventDidMount上でCSSを書き換えることによって...
技術備忘録Fullcalendarで現在の時間にスクロールし、スクロール位置を保持する（timeGridWeek, timeGridDay）
FullcalendarでtimeGridViewを使用するとデフォルトではscrollTimeによって6:00に自動的にスクロールされてしまいます。scrollTimeで値をセットしたとしても、別の位置にスクロールした後にprevボタン...
技術備忘録react-chartjs-2でrenderが複数回呼び出されるときに生じた不具合の対処
【2021年10月追記】Chart.js 3系ではredrawを使わなくても値の変更を反映することができるようになりました。Chart.js3.x系でグラフ上のクリック位置に値をセットする方法 react-chartjs-2を使って...