Rails development know-how, technical tips, and the latest updates
Practical development techniques and best practices
「この画面、jQueryのイベントがどこで発火しているか誰も追えない」「1つセレクタを直したら別のボタンが反応しなくなった」——長年運用されてきたjQueryの画面には、こうした声がつきものです。DOMを直接いじりまわすコードは動いている限り触りたくない...
「Lighthouseのスコアが真っ赤」「営業画面が開くまで数秒待たされる」「モバイルだと特に重い」——Next.jsでフロントを作った既存サービスの運用担当者から、こうした相談をよく受けます。表示速度はデザインの好みと違って数値で優劣がはっきり出るため...
「Vue2で動いてはいるが、npm installのたびに脆弱性警告が増えている」「求人を出してもVue2経験者からの応募が減っている」——Vue2は2023年末にEOL(End of Life)を迎え、公式のセキュリティパッチ提供も終了しました。動いて...
「このプロパティ、いつの間にか undefined が渡るようになっていた」「デプロイ後にコンソールに `Cannot read property of undefined` が出て初めて気づいた」——JavaScriptで書かれたフロントを2〜3年運用...
「このコンポーネント、誰も全体を把握していない」「1行直すたびに関係ない画面が壊れる」——Reactでプロダクトを2〜3年運用していると、こうした声を社内で聞くようになります。最初は快適だったフロントエンドが、いつの間にか触るのが怖い場所になっている状態...
「アクセス解析を見たらモバイル比率がとっくに4割を超えていた」——PCのブラウザで使う前提で設計したSaaSに、後からスマホ経由のユーザーが増えていくケースは珍しくありません。営業担当が外出先で確認したい、現場の担当者がタブレットで入力したい、といった使...
「機能を追加するたびにページが重くなっている気がする」「初回表示だけやたら白い画面が長い」——サービスが2〜3年運用されてくると、こうした声がよく上がります。原因を辿ると、たいていJSバンドルが数MBまで膨れ上がっていて、ユーザーがページを開くたびにその...
「このボタンの色を変えたら、別のページのボタンまで変わった」「!importantを付けないと自分の書いたCSSが効かない」——数年運用しているプロダクトのCSSを触っていると、こうした事故がよく起きます。1つのスタイル変更のために、影響範囲を全ページ手...
「Pages Routerのまま数年放置している」「App Routerへの移行を始めたが中途半端で止まっている」「ビルドに数分かかる」「画面によってSSRとCSRの使い分けがバラバラで誰も説明できない」——Next.jsでプロダクトを作って運用している...
「画面Aの登録ボタンは青いのに画面Bは緑」「余白の指定がpxだったりremだったり画面ごとにバラバラ」「新規メンバーが1つボタンを置くのに毎回既存画面を探して真似している」。こうした状態に心当たりがあれば、それはデザインが崩れているのではなく、**デザイ...