Social PLUS Tech Blogのフィード
https://zenn.dev/p/socialplus
株式会社ソーシャルPLUS 開発チームの技術ブログです。
フィード

【CircleCI】node_modules のキャッシュは node/install-packages に任せよう
Social PLUS Tech Blogのフィード
はじめにこんにちは、zomysan( https://x.com/zomysan )です。CircleCI で CI を回していると、ジョブ間でファイルを共有するために persist_to_workspace と attach_workspace を使っている方も多いと思います。install ジョブで node_modules をインストールし、それを後続のテストやビルドジョブに引き継ぐというパターンですね。ただ、この方法はファイルサイズが大きくなると保存や復元に時間がかかりボトルネックになることがあります。今回、persist_to_workspace から node_...
9日前

Shopify UI Extensions、裏では何が起きているのか
Social PLUS Tech Blogのフィード
Shopify UI Extensions、初見だとちょっと魔法っぽく見えます。React っぽいコードを書いたら、いつの間にか Shopify の Checkout や Admin の中に UI が生えている。iframe でもない別タブでもない普通に Shopify の画面の一部として存在している……いや、これ普通に考えて怖くない?実はこの仕組み、「とにかく DOM を触らせない」という、かなり割り切った設計で成り立っています。この記事では、Shopify UI Extension って何?なぜそんな厳しい制限があるの?裏で何が起きているの?それっぽいもの...
12日前

フロントエンドテストパフォーマンス改善:Vitestのボトルネックを探っていく
Social PLUS Tech Blogのフィード
どうもこんにちは、たくびーです。最近、CIにかかる時間が気になり、その手始めとしてテストの高速化に挑戦していました。今回はそこで得たボトルネックの特定方法と意外なボトルネックについて紹介したいと思います。 推測するな、計測せよかの有名なロブ・パイク氏の「Notes on Programming in C」の言葉を意訳したものです。Rule 2. Measure. Don't tune for speed until you've measured, and even then don't unless one part of the code overwhelms th...
13日前

Rails 8.0.2 で autosave の挙動が静かに変わった話
Social PLUS Tech Blogのフィード
Ruby on Rails のモデル同士の関連付けにおいて、親モデルの保存のタイミングで子モデルも一緒に保存するための設定として autosave オプションがあります。今回は、この autosave オプションの挙動が v8.0.1 → v8.0.2 で少し変わったため、その内容について書きたいと思います。autosave を内部で使用している accepts_nested_attributes_for を使っている場合も影響があります。 何が変わったかリリースノートでは以下のように説明されています。Fix autosave associations to no lo...
1ヶ月前
[Slack, Teams]リモートワークで活きる、何の話かすぐわかる書き方のススメ
Social PLUS Tech Blogのフィード
はじめに この記事についてリモートワークでテキストコミュニケーションをしていると、「これ何の話だっけ?」となることはありませんか? Issue番号だけ書かれたメッセージ、リンクのない相談、表記が揺れている説明などなど、当事者同士はわかっていても、後から見た人や周りの人には何のことかわからないことがよくあります。この記事では、「何の話かすぐわかる」テキストを書くための具体的な工夫を紹介します。書く行為は1回ですが、読まれる機会は複数回(×複数人)あります。書くときに1回頑張っておくだけで、読まれるたびに何度も効果が発揮されます。やってみましょう。 書かないこと以下につい...
1ヶ月前

【Cursor 2.0】 内蔵ブラウザから要素を直接選択してUIの修正してみた
Social PLUS Tech Blogのフィード
こんにちは、ずっきーです!普段、Cursorを使って開発業務を行っているのですが、10月末に「Cursor 2.0」がリリースされ、最大8つのエージェントを並列実行できる「マルチエージェント機能」や Cursor独自のコーディングモデル「Composer 1」が使用可能になったりなど嬉しい機能が追加されました。それらの新しい機能の中で今回はAgentがウェブブラウザを操作できる「ブラウザ機能」(以前からベータとしてはありましがCursor 2.0でGA)を使って要素を直接選択してUIの修正を試してみたいと思います👌https://cursor.com/ja/changelog/2-...
2ヶ月前

Rails 8.0 のデフォルトでは、ジョブがトランザクション内でスケジューリングされてしまう
Social PLUS Tech Blogのフィード
こんにちは、terandard です。先日 Rails 8.1 がリリースされましたね。それに合わせて弊社のサービスを Rails 7.2 から 8.0 にアップデートしましたが、その際に発生した問題について共有します。 概要Rails 7.2 で導入された新機能として、Active Record のトランザクション内でジョブのエンキューを行うと、そのトランザクションがコミットされた後にジョブがエンキューされるようになりました。https://railsguides.jp/v8.0/7_2_release_notes.html#ジョブがトランザクション内でスケジューリングされ...
2ヶ月前

クエリパラメータの同期を手軽に実装できる nuqs の紹介
Social PLUS Tech Blogのフィード
こんにちは、steshima です。クエリパラメータを state として扱い、簡単に URL と同期できる nuqs を紹介します。https://nuqs.dev/執筆時の nuqs のバージョンは 2.7.2 です。 nuqs についてnuqs は URL のクエリパラメータをフックで扱えるようにするライブラリです。React の useState と同じ感覚でクエリパラメータを読み書きでき、URL・ブラウザ履歴・React の状態を自動で同期してくれます。 nuqs 導入前の課題ソーシャル PLUS では、テーブルのページネーションが存在する画面ではページ番号...
2ヶ月前

Puma で処理待ちになっているリクエストと Puma の backlog の実体を調査してみた
Social PLUS Tech Blogのフィード
こんにちは、simomu です。今日は Puma で処理待ちのまま待機しているリクエストと Puma.stats で確認できる backlog の値の関係を、Puma がワーカースレッドでリクエストを処理するまでの実装を踏まえて調査した話をします。以降は基本的には Puma 6.6 時点での話とし、Puma はシングルモードで使用している前提の話とします。また、最後には Puma 7.0 以降での backlog がリクエストを追加される挙動の変化について話します。 調査の経緯弊社では Ruby on Rails のアプリケーションサーバーとして Puma を使用しています。...
2ヶ月前

【作って理解する】OAuth2.0の認可コードグラントでコードが漏洩する仕組み(ついでに攻撃もしてみる)
Social PLUS Tech Blogのフィード
こんにちは、koyablueです。ずっと積読していたOAuthの本を最近読んだのですが、「リダイレクトURIにリダイレクトされる時に認可コードの漏洩リスクがある」ということが書かれていました。どのような仕組みで漏洩するのか、漏洩すると何がまずいのか、漏洩した場合に不正なリソースアクセスが可能になるのか...などに興味が湧いたので、実際に手を動かして理解を深めてみることにしました。今回は簡易的な認可コードグラントのフローを実装し、どのように認可コードが漏洩するのかをローカル環境で確認します。また、認可コードに加えてclient_secretが外部に露出してしまったら...という想定で...
2ヶ月前

EKS にスポットインスタンスを導入し、Descheduler でオンデマンド:スポットの 1:1 配置を自動制御した話
Social PLUS Tech Blogのフィード
概要Amazon EC2 スポットインスタンス は最大 90% という大きなコスト削減メリットを持つ一方で、突然のインスタンス中断(Spot Interruption) というリスクがあります。可用性を維持しながらスポットインスタンスを取り入れるには「どの Pod をスポットインスタンスに載せるか」「スポットインスタンスとオンデマンドインスタンスの比率をどう維持するか」「偏ったらどう直すか」まで設計に組み込む必要があります。本記事では弊社で実践した以下のアプローチを紹介します。安全に停止できる Pod のみスポットインスタンスにスケジューリングスポット / オンデマンド ...
2ヶ月前

Google タグマネージャーでは type="module" な script 要素は実行されない
Social PLUS Tech Blogのフィード
Google タグマネージャー(以下、GTM)でちょっとハマったので、記事にしておこうかと思います。 type="module" な script 要素は実行されないGTM の「カスタム HTML」で<script type="module" src="/foo.js"></script>のように設定したとします。この場合、/foo.js のスクリプトが実行されるかと思いきや、実際には実行されません。ちなみに type="module" をつけずに<script src="/foo.js"></script>とすれば、期待...
2ヶ月前

MySQL (InnoDB) のロック範囲に気をつけよう
Social PLUS Tech Blogのフィード
こんにちは otsubo です。MySQL (InnoDB) のロックについて整理する機会があったので記事にします。 はじめに全ての ロックタイプ を網羅するのは大変なため、レコードロックギャップロックネクストキーロックを中心にまとめます。この3つはトランザクション内で UPDATE、DELETE、 SELECT ... FOR UPDATE / SHARE するときに獲得されるロックです。INSERT 時のインサートインテンションロックもちょっとだけ扱います。テーブルロックやメタデータロックは扱いません。InnoDB ではクエリによって特定の「範囲」がロックされるこ...
2ヶ月前

Storybook と Vitest で userEvent 取り違えをなくす
Social PLUS Tech Blogのフィード
こんにちは Social PLUS のフロントエンドエンジニアのまっくすです。先日、Storybook を v7 → v8 にアップデートをしていた際に、Vitest のテストファイルに Storybook 用のモジュール@storybook/testing-library が紛れていたことに気がつきました。Storybook のアップデートに際して、@storybook/testing-library を @storybook/test に統合するために、@storybook/testing-library を devDependencies から削除したことで、Lintエラーが発...
2ヶ月前

難解なプロジェクトに立ち向かうための不安を具体化する言語化の力
Social PLUS Tech Blogのフィード
はじめにこんにちは、terandard です。「新機能開発をお願いします。規模としては結構デカいです。」「システムの大幅リニューアルのために、深夜メンテナンスが必要なので対応してください。」こうした依頼を受けた瞬間、頭の中に様々な疑問や不安が浮かんできませんか?「工数はどのくらいかかるんだろう?」「本当に自分にできるのか?」「何から手をつければいいんだろう?」 などなど。大規模なタスクを前にすると漠然とした不安を感じるのは、エンジニアなら誰しも経験があるかと思います。先日大規模なタスクを任された際、私も同じように不安を感じました。現在はそのタスクを無事に終わらせることが...
3ヶ月前

協力できる仲間づくりをするためには
Social PLUS Tech Blogのフィード
だれだれがいくら売上をあげたなどを発表して競争関係で組織を運営している組織と同僚を信頼して協力して仕事をこなしていく信頼関係で組織を運営している組織。エンジニアだと、会議などでのマウントの取り合いや、どのエンジニアが優れているかを成果などで比較したりすることもあったり、競争関係を促す仕組みや雰囲気をもっている組織もあったり。競争関係の組織においては、緊張感があり、そのおかげで集中力が高く個々人のパフォーマンスが高く、なんでも一人でできる強強のエンジニアがあつまる感じ。一方、信頼関係の組織においては、問題が発生したらすぐに共有して、いろいろな知識や見方で問題に当たることができています。...
3ヶ月前

【Rails】saved_change_to_attribute? でハマった話と学んだこと
Social PLUS Tech Blogのフィード
こんにちは、st-1985 です。Rails アプリケーションでは、モデルの属性変更を検知する際に saved_change_to_attribute? メソッドを使用できます。ただしこのメソッドは「直前の保存によって変化したか」を返します。そのことによって思わぬ落とし穴にはまってしまったので、今回はその経験を共有したいと思います。 問題の概要開発しているアプリケーションには以下のようなフォロー状態の属性を持ったユーザーデータが存在しています。以前からフォロー状態になっている新しくフォロー状態になったそれぞれのフォロー状態に応じて画面の表示を変化させていました。問...
4ヶ月前

tfaction を段階的に導入した
Social PLUS Tech Blogのフィード
こんにちは、tsub です。2023 年 11 月から育休を取得していて今年の 5 月に復職しました。今回が Social PLUS Tech Blog への初投稿となります 😄この数ヶ月間、徐々に tfaction の導入を進めていました。元々 Terraform の CI/CD は GitHub Actions で自前のパイプラインを組んでいましたが、通常の開発タスクを優先しつつ隙間時間で CI/CD の改善を行っていたため、段階的に移行する形となりました。この記事では tfaction を導入した背景や、どのように導入を進めていったかについて説明したいと思います。 tfac...
4ヶ月前

Chrome で JavaScript から言語検出・翻訳がブラウザ単独でできるようになった話
Social PLUS Tech Blogのフィード
はじめにこんにちは、hamaguchi です普段仕事ではバックエンドエンジニアとして Ruby on Rails を使ったウェブサービスの開発を行なっていますが、プライベートで色々作ったりする中ではバックエンドだけではなくフロントエンドやインフラの領域も触らざるを得ないため色々と勉強中です特に TypeScript は慣れておくと便利そうだけどあんまりよくわかっていないので早めに仲良くなっておきたいなと思っています最近のブラウザは外国語のページを開くと「翻訳しますか?」と聞いてくれたりしますよね?ここでの翻訳は誰がやっているのかというと、ブラウザ自身が行なっているわけではな...
4ヶ月前

【Ruby】CORS の origin を動的に判断したい
Social PLUS Tech Blogのフィード
こんにちは、okumudです。フロントエンドのスクリプトを絡めて機能を任意サイト (別ドメイン) へ提供するにあたり、 CORS (オリジン間リソース共有: Cross-Origin Resource Sharing) の origin[1] を動的に判断させることがありました。本記事では rack-cors gem を使用して動的に判定する方法を紹介します。 はじめに CORS とはブラウザーはセキュリティ上の理由でスクリプトから異なる origin へのリクエストを制限しています。フロントエンドのスクリプトを絡めて機能提供を行うとき、スクリプトの実行がブロックされて...
4ヶ月前