行動すれば次の現実

テック中心の個人ブログ

Javascript

MUI X Data Gridでstore props等の実践に近いデータセットを扱う方法

MUI XのData Gridは、複雑なデータセットを扱うウェブアプリケーションにおいて、エクセルライクなテーブル表示を簡単に実現できる強力なコンポーネントです。大量のデータを扱いながらユーザーに高度な検索、フィルタリング、ソート機能を提供する際に特に…

Rails7のimportmapでsemantic uiを使用する方法

Rails7のimportmapでsemantic uiを使用しようとしたところ苦戦したので備忘録として載せておきます。誰かのお役に立てば幸いです。 さっそく結論から 以下のように設定するとsemantic uiが使用できます。 Gemfile # これによりsprocketsでアセットを管理する…

Next.jsのfetch APIでqueryパラメータを使用する方法

Next.jsのgetServerSideProps等でfetch APIを使用してSSRする場合に、queryパラメータを扱う方法を説明します。 実装 query-stringというNPMライブラリを使用します。 query-stringを使用することで、安全にqueryパラメータを生成することができます。 impor…

Rubymineのファイル保存時にPrettierでフォーマットさせる方法

Rubymineの保存時にPrettierによるフォーマットを適用する方法を説明します。 開発環境にPrettierをインストールする 以下のコマンドで開発環境にprettierをインストールします。 インストール先はどこでも良いのですが、私はプロジェクト配下にしました。 y…

inputタグに入力した数字を3桁ごとのカンマ区切りにして表示する方法

input要素に入力した数字を3桁ごとのカンマ区切りにして表示する方法を説明します。 本記事はReactをベースに実装例を記述していますが、考え方は他のフレームワークでも同じですので、Reactを使用していない方も参考になるかと思います。 input type属性は…

Rails7+esbuild+TypeScriptで開発環境を構築する

Rails7のフロントエンド開発環境としてjsbundlingのesbuildを採用した際にTypeScriptの導入に少し手こずりましたので備忘録として記事にしました。参考になれば幸いです。 esbuildではTypeScriptの型チェックは行ってくれない esbuildはデフォルトでTypeScri…

react-virtualizedのMultiGridでアプリ開発したときのTIPS

react-virtualizedとは SPAで構築されたReactアプリでも、大量のリストを画面いっぱいに表示しようとすると初期描画に時間がかかってしまいます。 これは、画面に見えてない部分も含めて全てのデータをレンダリングしてしまっていることが原因です。 react-v…

Railsアプリが爆速になるパフォーマンスチューニング集

Railsアプリを速くするためのパフォーマンスチューニング集をまとめました。 これらの手法を用いることで、弊社アプリにおいて、今まで30秒ほど掛かっていた処理が1.5秒まで短縮することができました。 あくまでもアプリケーションレイヤーでできるパフォー…

Rails7でReactを使う場合はimportmapはオススメできない

Rails7からJavascriptバンドラーとしてNode.jsが非依存のimportmapが標準機能に採用されました。 早速、importmapを使ってReactを使用した開発を試みてみましたが、結論としてはimportmapは使用しないことになりました。 Reactの場合はimportmapをオススメで…

Webpacker3から5にアップグレードする方法 | Rails

最近、開発端末をMacBook Pro M1 Maxに乗り換えたところ、webpackのコンパイルが極端に遅くなりました。 思えばwebpack3のままメンテナンスを怠っていたので、これを機にwebpack4にアップグレードすることになりました。 Webpackerをv3からv5にアップグレー…

Railsでよくエラーになるlibv8、therubyracer、mini_racerあたりを調べた

Railsアプリを構築しようとするときにbuildエラーになるライブラリの代表にlibv8、mini_racerなどが上げられると思います。(個人的感覚) 毎回gemを最新化することでなんとなく解決していたのですが、これではその場凌ぎしかなく応用が効きません。 しっか…

yarnコマンドで発生したgyp ERR!の原因究明と対処方法

アプリケーションのnode.jsのバージョンを上げて、yarn installコマンドを実行したら以下のようなエラーが発生しました。 1 error generated. make: *** [Release/obj.target/binding/src/binding.o] Error 1 gyp ERR! build error gyp ERR! stack Error: `m…

Turbolinksとcookieは相性が悪い

Javascriptでcookieに値を設定する処理を実装していたのですが、タイミングによって同じcookie名で重複してvalueが登録される事案が発生しました。 調査するとどうやらTurbolinksが原因であることがわかりました。 Turbolinksを有効にするとcookieのpathに適…

JQueryでcheckbox操作 (チェックしたら○○する、チェック外したら○○する)

checkboxをチェックしたら何かをしたいときの条件式です。 $('#check').on('change', function (e) { if (e.target.checked) { // check:on時の処理 } else { // check:off時の処理 } }); clickイベントで拾いたい場合はこう書きます $('#check').on('click'…

blueimp-load-imageを使った画像リサイズ処理の実装例 | Javascript | npm

昨今では画像アップロード処理をする際、サーバーサイドだけでなくフロントサイドでもリサイズ(圧縮)するのが主流になっています。 画像圧縮は、Javascriptのcanvas APIを使って実装するのが一般的ですが、canvasで画像圧縮処理を一から実装となると、それな…

画像アップロード時はクライアントサイドでも圧縮処理をすべき理由

画像アップロードする際に、最近ではクライアントサイドであらかじめサイズを圧縮しておくのが主流である。 スマホカメラの高性能化に伴い、写真がどんどん高画質になっているためである。 10MB近いサイズのこともあったりする。 画像アップロードのフローか…

Reactのライフサイクル一覧まとめ

マウントフェーズ componentWillMount 基本的には非推奨 まずはconstructorかcomponentDidMountで制御できないか検討すること v16からUNSAFE_componentWillMountという名前に変更 renderよりも前に呼ばれる constructorよりも後に呼ばれる setStateしてもren…

RubyとJavascriptにおける連想配列の順序保証の違い

RubyとJavascriptでは連想配列(Rubyの場合はHash、Javascriptの場合はオブジェクトリテラル)の順序保証が異なります。 最近はバックエンドでRuby、フロントエンドはJavascriptの構成にして開発するケースが増えています。 RubyでAPIの結果を連想配列で返し、…