はてぶ・Qiita・Zennのトレンド記事を紹介
画面遷移前の“すき間時間”でボタンがクリックできてしまっていた話
こんにちは、ずっきーです！フォーム送信時にボタンを非活性（disabled）状態にしても、画面遷移前の短い時間にボタンがクリックできてしまう問題がありました。原因と対策法について深掘りしていこうと思います。 問題の概要ログインフォームで「次へ」ボタンを押すと API を
job-iteration gem から Active Job Continuation に移行した 🔖 1
こんにちは、terandard です。Ruby on Rails 8.1 から Job を中断・再開できる Active Job Continuation という機能が追加されました。この機能を利用すると、長時間実行される Job がデプロイなどによって中断された場合でも、再開
社内勉強会「Social PLUS Tech Talk」の紹介
こんにちは、simomu です。今日は Social PLUS 社内で開催している勉強会「Social PLUS Tech Talk」の紹介をします。 Social PLUS Tech TalkSocial PLUS Tech Talk は2週間に1回、開発チームの中から
k6-operator on Argo CD でワンクリック実行可能な負荷試験環境を構築する
概要弊社では、スパイク耐性などを検証するため、k6 による負荷試験環境を Kubernetes 上に構築しています。この記事では 「Argo CD の GUI からワンクリックで負荷試験が走る」 仕組みをどう実装したかを紹介します。 前提条件本記事では以下のバージョンを前
MySQL (InnoDB) の INSERT 時のロックを深掘る 🔖 1
はじめにhttps://zenn.dev/socialplus/articles/2e16da32f39a0cの続きです。前のブログでは、UPDATE、DELETE、 SELECT ... FOR UPDATE / SHARE のロックを主に紹介しました。そして INSERT
ShopifyアプリのインストールフローをManaged Installに移行した話
はじめにこんにちは、masaki です。現在ソーシャルPLUS では CRM PLUS on LINE という Shopify アプリを開発し、公開しています。CRM PLUS on LINE は一言でいうと、「SNS連携機能やLINE配信機能をShopifyストアに組み込
エンジニアの仕事において、私たちは日々「教え、教えられる」環境にいます。しかし、技術の進化が加速し、正解のない問いが増えている今、単なる「ティーチング（教えること）」だけでは限界が見え始めています。今、私たちが意識的にシフトすべきなのは、「教える」から「助ける」への転換です。一
【ActiveRecord】 inverse_of の自動推論によって別モデルが返ってきた話
こんにちは、st-1985 です。先日、「あるモデルの設定値が増えてきたので別モデルとして切り出す」という作業を行いました。その際に切り出したモデルを取得しようとすると別のモデルが取得されるという現象に遭いました。調べていくと原因は自動設定された逆関連付け(inverse
TanStack Query v5で廃止された refetchPage の代替実装 🔖 1
こんにちは、koyablueです。最近TanStack Queryのv4 → v5へのアップデート作業を行いました。その際、useInfiniteQueryのrefetchPageというオプションが廃止されており、v4までの「ページを選別してリフェッチする」という挙動をどう置き
Argo CD の Pull Request Generator で構築している PR ごとのプレビュー環境の運用改善 🔖 1
こんにちは、tsub です 😄弊社では以前から Argo CD の ApplicationSet と Pull Request Generator を使ってバックエンドリポジトリの PR 単位で独立した環境をデプロイできるプレビュー環境を構築しています。Pull Reques
長時間 Job に対して job-iteration gem を利用した話
okumud です。 はじめにRails で CSV 取り込みや外部 API 連携などの 長時間かかる Job を書いたことがある方は多いと思います。処理対象が少ない場合は問題なく動いている Job が、大量の処理を行ったときに以下のように落ちる経験はないでしょうか。
【CircleCI】node_modules のキャッシュは node/install-packages に任せよう
はじめにこんにちは、zomysan（ https://x.com/zomysan ）です。CircleCI で CI を回していると、ジョブ間でファイルを共有するために persist_to_workspace と attach_workspace を使っている方も多いと思い
Shopify UI Extensions、裏では何が起きているのか
Shopify UI Extensions、初見だとちょっと魔法っぽく見えます。React っぽいコードを書いたら、いつの間にか Shopify の Checkout や Admin の中に UI が生えている。iframe でもない別タブでもない普通に Shopify
フロントエンドテストパフォーマンス改善：Vitestのボトルネックを探っていく 🔖 25
どうもこんにちは、たくびーです。最近、CIにかかる時間が気になり、その手始めとしてテストの高速化に挑戦していました。今回はそこで得たボトルネックの特定方法と意外なボトルネックについて紹介したいと思います。 推測するな、計測せよかの有名なロブ・パイク氏の「Notes on
Rails 8.0.2 で autosave の挙動が静かに変わった話 🔖 2
Ruby on Rails のモデル同士の関連付けにおいて、親モデルの保存のタイミングで子モデルも一緒に保存するための設定として autosave オプションがあります。今回は、この autosave オプションの挙動が v8.0.1 → v8.0.2 で少し変わったため、その
[Slack, Teams]リモートワークで活きる、何の話かすぐわかる書き方のススメ
はじめに この記事についてリモートワークでテキストコミュニケーションをしていると、「これ何の話だっけ？」となることはありませんか？ Issue番号だけ書かれたメッセージ、リンクのない相談、表記が揺れている説明などなど、当事者同士はわかっていても、後から見た人や周りの人には何
【Cursor 2.0】 内蔵ブラウザから要素を直接選択してUIの修正してみた 🔖 1
こんにちは、ずっきーです！普段、Cursorを使って開発業務を行っているのですが、10月末に「Cursor 2.0」がリリースされ、最大8つのエージェントを並列実行できる「マルチエージェント機能」や Cursor独自のコーディングモデル「Composer 1」が使用可能になった
こんにちは、steshima です。クエリパラメータを state として扱い、簡単に URL と同期できる nuqs を紹介します。https://nuqs.dev/執筆時の nuqs のバージョンは 2.7.2 です。 nuqs についてnuqs は URL のク
Rails 8.0 のデフォルトでは、ジョブがトランザクション内でスケジューリングされてしまう
こんにちは、terandard です。先日 Rails 8.1 がリリースされましたね。それに合わせて弊社のサービスを Rails 7.2 から 8.0 にアップデートしましたが、その際に発生した問題について共有します。 概要Rails 7.2 で導入された新機能として
Puma で処理待ちになっているリクエストと Puma の backlog の実体を調査してみた
こんにちは、simomu です。今日は Puma で処理待ちのまま待機しているリクエストと Puma.stats で確認できる backlog の値の関係を、Puma がワーカースレッドでリクエストを処理するまでの実装を踏まえて調査した話をします。以降は基本的には Puma
【作って理解する】OAuth2.0の認可コードグラントでコードが漏洩する仕組み（ついでに攻撃もしてみる）
こんにちは、koyablueです。ずっと積読していたOAuthの本を最近読んだのですが、「リダイレクトURIにリダイレクトされる時に認可コードの漏洩リスクがある」ということが書かれていました。どのような仕組みで漏洩するのか、漏洩すると何がまずいのか、漏洩した場合に不正なリソース
EKS にスポットインスタンスを導入し、Descheduler でオンデマンド:スポットの 1:1 配置を自動制御した話
概要Amazon EC2 スポットインスタンス は最大 90% という大きなコスト削減メリットを持つ一方で、突然のインスタンス中断（Spot Interruption） というリスクがあります。可用性を維持しながらスポットインスタンスを取り入れるには「どの Pod をスポット
Google タグマネージャーでは type="module" な script 要素は実行されない
Google タグマネージャー（以下、GTM）でちょっとハマったので、記事にしておこうかと思います。 type="module" な script 要素は実行されないGTM の「カスタム HTML」で<script type="module" src="/foo.j
MySQL (InnoDB) のロック範囲に気をつけよう 🔖 196
こんにちは otsubo です。MySQL (InnoDB) のロックについて整理する機会があったので記事にします。 はじめに全ての ロックタイプ を網羅するのは大変なため、レコードロックギャップロックネクストキーロックを中心にまとめます。この3つはトランザクシ
Storybook と Vitest で userEvent 取り違えをなくす
こんにちは Social PLUS のフロントエンドエンジニアのまっくすです。先日、Storybook を v7 → v8 にアップデートをしていた際に、Vitest のテストファイルに Storybook 用のモジュール@storybook/testing-library が
難解なプロジェクトに立ち向かうための不安を具体化する言語化の力
はじめにこんにちは、terandard です。「新機能開発をお願いします。規模としては結構デカいです。」「システムの大幅リニューアルのために、深夜メンテナンスが必要なので対応してください。」こうした依頼を受けた瞬間、頭の中に様々な疑問や不安が浮かんできませんか？「工数は
だれだれがいくら売上をあげたなどを発表して競争関係で組織を運営している組織と同僚を信頼して協力して仕事をこなしていく信頼関係で組織を運営している組織。エンジニアだと、会議などでのマウントの取り合いや、どのエンジニアが優れているかを成果などで比較したりすることもあったり、競争関係
【Rails】saved_change_to_attribute? でハマった話と学んだこと
こんにちは、st-1985 です。Rails アプリケーションでは、モデルの属性変更を検知する際に saved_change_to_attribute? メソッドを使用できます。ただしこのメソッドは「直前の保存によって変化したか」を返します。そのことによって思わぬ落とし穴に
こんにちは、tsub です。2023 年 11 月から育休を取得していて今年の 5 月に復職しました。今回が Social PLUS Tech Blog への初投稿となります 😄この数ヶ月間、徐々に tfaction の導入を進めていました。元々 Terraform の CI/
Chrome で JavaScript から言語検出・翻訳がブラウザ単独でできるようになった話 🔖 1
はじめにこんにちは、hamaguchi です普段仕事ではバックエンドエンジニアとして Ruby on Rails を使ったウェブサービスの開発を行なっていますが、プライベートで色々作ったりする中ではバックエンドだけではなくフロントエンドやインフラの領域も触らざるを得ないため色
こんにちは、okumudです。フロントエンドのスクリプトを絡めて機能を任意サイト (別ドメイン) へ提供するにあたり、 CORS (オリジン間リソース共有: Cross-Origin Resource Sharing) の origin[1] を動的に判断させることがありまし
どうもこんにちは、たくびーです。!この記事はAIを使わずに書かれています。弊社ではいくつかのアプリケーションが存在し、それらをモノレポで管理しています。今回はそのうちの1つのアプリケーションをReact + WebpackからNext.jsへ移行を行いました。 動機
こんにちは！Reactを普段使っていて、「これって中で何が起きてるの？」と思ったことありませんか？今回は、Reactの超ミニマル版「MiniReact」を自作してみます。全部JavaScriptで作ります。難しい依存関係はナシ！対応している機能はこちら：関数コンポ
Ruby ファイルのリネームと、それに対応する module の修正は別の commit にしよう
Ruby を使用したコーディングではディレクトリに応じた module を定義することが多いと思います。例えば Rails で app/controllers/examples_controller.rb のようなコントローラーがあり、これの置き場所について controlle
AI に codemod を書かせて大規模リファクタリングに立ち向かう 🔖 6
リファクタリングをしていて、ガッと数十ファイルにわたって一括で書き換えたいような場面、みなさんもありますよね？ 場合によっては数百かもしれません。（「そんなに広範囲に影響する時点で設計が悪いのでは？」という指摘はあるかもしれませんが、この記事では横に置いておきます。）この記事
Dev Contaienr 上の Claude Code とホストの Mac で起動している Neovim を IDE 連携する
masaki です。先日は「Dev Container で起動した Claude Code から Hooks でホストの Mac に通知する」という記事を書きました。https://zenn.dev/socialplus/articles/ea9be95301ae99今日は
Next.js（Pages Router）× TanStack Query Hydrate で SSR のバケツリレー問題解消！
こんにちは、ずっきーです！実務の中で「ページの初期表示を速くしたい！」という課題があり、「サイト設定（サイト名、サイトのロゴ画像など）」 の取得を SSR（サーバーサイドレンダリング） で行うようにしました。このアプリは少し特殊で複数のサイトを出し分けるので、 API でサイ
Dev Container で起動した Claude Code から Hooks でホストの Mac に通知する
masaki です。弊社では生成 AI を業務に積極的に取り入れています。これまでにも以下のような記事を公開してきました。https://zenn.dev/socialplus/articles/d92f1296c8403ahttps://zenn.dev/socialp
AWS PrivateLink クロスリージョン接続を活用して AWS と Datadog の通信を閉域網に閉じる
概要弊社では USリージョンの Datadog サービスと、ap-northeast-1リージョンの AWS 環境上に起動している Datadog Agent の通信を NAT Gateway 経由のインターネット通信で行っていたのですが、セキュリティ上の理由からインターネット
こんにちは、simomu です。2025年6月28日 に京都で開催された関西 Ruby 会議 08 に参加してきました。https://regional.rubykaigi.org/kansai08/いわゆる地域 Ruby 会議というもので、東京 Ruby 会議や松江 Ru
フローチャートを React らしく手軽に実装できる React Flow の紹介 🔖 1
こんにちは、steshima です。業務で React Flow に触る機会があったので、今回 React Flow の基本的な使い方を記事にしました。React Flow のバージョンは 12.6.4 です。 React Flow についてReact Flow は、R
こんにちは Social PLUS のフロントエンドエンジニアのまっくすです。弊社の開発環境の課題であった「VRTのブレ」に立ち向かった話を共有したいと思います。Storybook v6＋Storycap 環境で頻発していた VRT のブレに対してMSW でダミー画像をモ
Rails の本番作業を便利にする maintenance_tasks gem の紹介
はじめに初めまして、バックエンドエンジニアの otsubo です 🙇♂️この記事では Rails の本番作業を便利にしてくれる maintenance_tasks gem を紹介します！実際に Rails アプリケーションに導入して本番作業が快適になったため、利用して分か
libvips が作る JPEG の quality は粗い 🔖 1
こんにちは、st-1985 です。弊社のサービスの一つである Message Manager では、管理画面でアップロードされた画像を保存し、LINE 用のフォーマットに変換した上で配信していますが、その配信された画像に関してユーザーから「文字がつぶれて読みにくくなった」との声
はじめに弊社では Ruby on Rails を使用しており、ActiveStorage を用いて画像やファイルを扱っています。BtoBtoC のサービスを運営しているので、エンドユーザには CDN を通して配信し、顧客企業向けには S3 の署名付き URL を発行してアクセ
Cursorにリーダブルコード準拠のルールを設定しようとして上手くいかなかった話 🔖 62
はじめにこんにちは、koyablueです。この前久々にリーダブルコードを読み直しました。リーダブルコードの内容をルール化してAIに任せるといい感じに適用できるのでは？と思ったのでやってみます。具体的なコーディング規約準拠かどうか、というルールを適用させている例はわりとある
コンポーネントカタログ、使ってますか？ Storybook のかわりに Ladle を使ってみた 🔖 1
はじめにこんにちは、@zomysan です。Storybookの代替として評判のLadleを触ってみたので簡単な記事にまとめます。 この記事について 対象読者フロントエンドエンジニアStorybook を使っているが、Ladle が気になっている人コンポーネント
はじめにこんにちは、 okumud です。先日 RubyKaigi 2025 へ参加してきました。弊社は Gold Sponsor として本年初協賛し、私を含めて simomu, terandard, otsubo の 4人で参加しました。https://pr
乾太くんで家庭内感染が防げるか ChatGPT にシミュレーションしてもらう
3 歳になった子どもが体調不良で嘔吐しました。パジャマも布団カバーもべちゃべちゃです。おそらく風邪だとは思いますが、ノロウイルスなんかに家庭内感染するのも嫌なので、念のためハイターでつけ置き洗いをします。子どもの体をシャワーで洗って、新しいパジャマを着せて、寝かしつけをしている間
十人十色 弊社メンバーの生成AIの使い方 - Cursor, Roo Code, ChatGPT, Copilot... 🔖 3
どうもこんにちは、たくびーです。弊社では生成AIを業務に取り入れる流れが活発です。また、Roo CodeやChatGPT、Cursor等の生成AI使用に関して補助制度があるので気軽に使うことができます。その中で今回はフロントエンドチームではどのように生成AIが使われているの