Social PLUS Tech Blogのフィード

https://zenn.dev/p/socialplus

株式会社ソーシャルPLUS 開発チームの技術ブログです。

フィード

記事のアイキャッチ画像
`next/head` を使って動的なタイトルを設定する時の落とし穴
Social PLUS Tech Blogのフィード
こんにちは、steshima です。業務で、Next.js を使っているアプリの共通コンポーネントのちょっとしたリファクタをしたところ、画面が表示されなくなる不具合が発生しました。原因を調べてみると next/head の仕組みに行き着き、なるほどと思うことが多かったので、備忘録としてまとめてみました。先に結論を書いておくと、next/head の <Head> の中に、データ取得の hook を持つコンポーネントを置いてしまったのが原因でした。対象の環境は Next.js の 16.1.5(Pages Router) で、SSR で動かしているアプリです。 前提...
8日前
記事のアイキャッチ画像
OpenAPI スキーマでバリデーションできる openapi_first gem を Rails アプリに導入した話
Social PLUS Tech Blogのフィード
はじめにmasaki です。現在弊社では CRM PLUS on LINE という Shopify アプリを開発し、公開しています。https://crmplus.socialplus.jpCRM PLUS on LINE は REST API で実装しており、バックエンドではこれまでリクエストパラメータのバリデーションを Rails 標準の Strong Parameters で行ってきました。しかし機能を拡張していくにつれて、Strong Parameters だけで対応しようとするとコードが複雑になる場面が目立つようになってきました。そこで、OpenAPI のスキーマ...
12日前
記事のアイキャッチ画像
MSW のモックをリファクタして、「迷わない設計」を目指した話
Social PLUS Tech Blogのフィード
はじめにソーシャル PLUS のフロントエンドでは、MSW で API をモックし、テストや Storybook、ローカル開発に使っています。今回、モノレポで管理しているそのモックをリファクタリングしました。この記事は「こう直しました」という手順書ではなく、どこで何を迷い、何を基準に決めたかを主に書いていきます 👌説明を簡単にするため、以降は API が1つだけの前提で書きます。 何が問題だったのかモックのディレクトリは、エンドポイントのパスに沿わせています。hoge/ が /hoge、hoge/draft/ が /hoge/draft、hoge/_identifier...
13日前
記事のアイキャッチ画像
ログの秘匿情報マスク漏れを OpenAPI で防いだ話
Social PLUS Tech Blogのフィード
HTTP リクエスト/レスポンスのログを吐くとき、その中に秘匿情報が含まれていたら、きっちりマスクしないとダメですよね。// マスク前[ { id: '123', name: '佐藤ほげ丸', role: 'admin' }, { id: '456', name: '鈴木ふが美', role: 'member' }, { id: '789', name: '高橋ぴよ助', role: 'member' },]// マスク後[ { id: '123', name: '[MASKED]', role: 'admin' }, { id: '456', name:...
16日前
記事のアイキャッチ画像
関西 Ruby 会議 09 参加レポート
Social PLUS Tech Blogのフィード
こんにちは、simomu です。2026年7月18日 に滋賀県で開催された関西 Ruby 会議 09 に参加してきました。https://regional.rubykaigi.org/kansai09/いわゆる地域 Ruby 会議というもので、東京 Ruby 会議や松江 Ruby 会議など様々な地域で開催されています。https://regional.rubykaigi.org/関西 Ruby 会議に関しては、前回の関西 Ruby 会議 08 にも参加していました。その時のレポートはこちらです。https://zenn.dev/socialplus/articles/e57...
1ヶ月前
記事のアイキャッチ画像
Amazon EKS の aws-auth ConfigMap からアクセスエントリへの安全な移行手順
Social PLUS Tech Blogのフィード
概要Amazon EKS の Kubernetes API への IAM プリンシパルのアクセス許可は、長らく aws-auth ConfigMap で管理するのが一般的でした。枯れた仕組みではあるものの、AWS 公式ドキュメントで以下のように明記されている通り、現在は非推奨です。aws-auth ConfigMap は非推奨になりました。Kubernetes API へのアクセスを管理する推奨手段については、「EKS アクセスエントリを使用して Kubernetes へのアクセスを IAM ユーザーに許可する」を参照してください。— Amazon EKS ユーザーガイド...
1ヶ月前
記事のアイキャッチ画像
埋め込み用スクリプトから type="module" を外して、直貼り・GTM の両方で動くようにする
Social PLUS Tech Blogのフィード
こんにちは、koyablueです。弊社では、Webサイトに埋め込んで利用するサードパーティスクリプトを提供しています。管理画面に表示されるスクリプトをコピーして、ECサイトに直接埋め込んだり、GTM(Google Tag Manager)経由で使用される想定です。この埋め込み用スクリプトには当初 <script type="module"> が使われており、そのままGTMに設定するだけでは動作しないという不都合がありました(なので、GTMで動作する形式に変換してから設定する運用が行われていました)。この記事では、この問題に対応するために行った変更を紹介します。 変...
2ヶ月前
記事のアイキャッチ画像
Datadog の Metrics Explorer を扱う際の注意点
Social PLUS Tech Blogのフィード
こんにちは、バックエンドエンジニアの otsubo です。弊社では Datadog でメトリクスを監視しています。定期開催している「Datadog を見る会」のおかげでグラフには見慣れてきましたが、意図通りに設定するのは意外と難しいです。この記事では、設定ミスや誤解釈をしないための注意点をまとめました。メトリクス収集に関しては扱いません。収集時の工夫は前回記事で三口さんがまとめてくれています!https://zenn.dev/socialplus/articles/ada79030bb7b8c メトリクスの Unit, Type, Interval当然ながら単位は大事です。秒...
2ヶ月前
記事のアイキャッチ画像
Datadog × CloudWatch Metric Streams でメトリクスを高速化 & コスト削減した話
Social PLUS Tech Blogのフィード
こんにちは、4月にソーシャルPLUSに入社した三口です!Datadog では、AWS CloudWatch のメトリクスを取り込む方式として、デフォルトで API Polling が利用されます。この方式は約10分ごとにメトリクスを取得するため、実際のメトリクスとの間に少々遅延が発生してしまいます。そこで今回、メトリクスの遅延を最小限に抑えられる Metric Streams へ移行したため、その内容について紹介します! 導入背景API Polling によるメトリクスの遅延により、以下のような課題がありました。Datadog でダッシュボードを作成していたものの、メトリク...
2ヶ月前
記事のアイキャッチ画像
影響のあるアプリだけVRTを実行するようにして、CircleCIのクレジットを削減した
Social PLUS Tech Blogのフィード
こんにちは、Social PLUS のフロントエンドエンジニアのまっくすです。今回は、CircleCI のコストをきっかけに、普段あまり細かく見る機会のなかった CI のクレジット消費量を調べました。プロジェクトやジョブごとの利用状況を確認していくと、Storybook のビルドやスクリーンショット撮影を行うジョブが、フロントエンド全体のクレジット消費量の大きな割合を占めていることが分かりました。調査の結果、Storybook のビルドやスクリーンショット撮影を行うジョブが、フロントエンド全体のクレジット消費量の大きな割合を占めていることが分かりました。そこで、VRT の実行方法に...
2ヶ月前
記事のアイキャッチ画像
tsgo で型チェックを早くしてみる
Social PLUS Tech Blogのフィード
1. はじめにまだ tsc がぐるぐる回っている。心当たりのある方、こんにちは。たいてい最初は身軽です。ところがコードは増える一方で、共有する処理も型も積み重なっていく。気づけば型チェックの待ち時間は、ジワジワと「いつか効いてくるボディブロー」になっています。誰も悪くない。ただコードが育っただけ。Microsoft が Go で全部書き直した TypeScript ネイティブ版(typescript-go / tsgo) 。型チェック約10倍だそうです。(TypeScript 7.0 として2026年中の安定版が予定されています。)本記事では、カタログスペックの「10倍...
3ヶ月前
記事のアイキャッチ画像
【ActiveRecord】関連付けのオーナーを使って重い集計クエリを改善した話
Social PLUS Tech Blogのフィード
こんにちは、st-1985 です。今回はCommon Table Expression (CTE)を使用したクエリの処理に時間がかかっていたので改善した話を書いていきたいと思います。 状況以下のようなメッセージの配信情報とその統計情報の単位(Unit)となるモデル構成があります。Unit: 統計集計の単位となるエンティティDelivery: unit_id と delivered_at を持つ配信レコード。Unit ごとに複数存在する管理画面には Unit の一覧ページ(1ページ最大10件)があり、そこでは各 Unit において最後に行った配信の時間を表示しています...
3ヶ月前
記事のアイキャッチ画像
Renovate で Terraform 管理の EKS クラスターとアドオンのバージョンを自動更新する
Social PLUS Tech Blogのフィード
こんにちは、tsub です 😄Terraform で EKS クラスターを管理している場合、アドオン(kube-proxy、vpc-cni、CoreDNS、EBS CSI ドライバー)のバージョン管理が課題になることがあります。弊社ではこれまで、アドオンのバージョンを Terraform aws provider の aws_eks_addon_version datasource で動的に取得していました。この方法は常に「推奨バージョン」を参照するため、新しいバージョンがリリースされるたびに terraform plan のドリフトが生じます。日を跨いでからリリースすると、ドリフト...
3ヶ月前
記事のアイキャッチ画像
Vitestの設定を調整してテスト速度を改善してみる
Social PLUS Tech Blogのフィード
どうもこんにちは、たくびーです。業務のかたわらフロントエンドのテスト速度改善に取り組んでいます。先日はボトルネックとなるバレルファイルを特定し解消することで高速化を行いました。https://zenn.dev/socialplus/articles/bfb19c5f98ae32今回はちょっと違うアプローチでテスト速度の改善に挑戦してみました。!執筆時点でのVitestのバージョンはv4.1.5です。 コードベースが大きくなるほどVitestが遅く感じる?Vitestは高速なテストランナーとして知られています。実際、Jestと比べてかなり速いです。それでも、コードベー...
3ヶ月前
記事のアイキャッチ画像
Redash の Query Result をパラメータ付きで参照する
Social PLUS Tech Blogのフィード
Redash v10.1 より後(おそらく v25 系から)利用できるようになった、Query Results Data Source (QRDS) のクエリパラメータ指定を含む呼び出しの使い方について、2026/05/18 時点の公式ユーザーガイドでは、単純な整数値(id)の指定方法の例しか無いため、複数指定の方法を雑に[1]確認したメモ記事です。-- 参照するクエリ(Query 12345)-- Query Parameters を出力するだけのクエリSELECT "{{DATE1}}" AS date1, "{{DATE2}}" AS date2, "{{DATE...
3ヶ月前
記事のアイキャッチ画像
AIが1000行書くより、人間が1行レビューするほうが難しい
Social PLUS Tech Blogのフィード
最近、AIでコードを書くのがかなり普通になってきた。Cursor や Claude Code みたいなツールを使えば、数分で数百行〜数千行のコードが出てくる。実際かなり便利だし、自分も日常的に使っている。ただ最近、OSS や会社の現場を見ていて感じるのは、「コードを書く速度」より「コードベースを維持する能力」のほうが重要になってきているということ。 AI が怖いのは「バグ」ではないAI のコードって、意外と普通に動く。テストも通るし、型も合うし、一見ちゃんとして見える。でも本当に怖いのはそこではなくて、よく分からない abstraction が増える...
4ヶ月前
記事のアイキャッチ画像
プロダクトバックログを一列に並べたらシンプルになった
Social PLUS Tech Blogのフィード
「自分たちのプロダクトバックログが複雑すぎてわからん」という問題を改善しました。 改善前今まで使っていたプロダクトバックログには、次のような9つの状態(以下、status と呼びます)がありました。基本的には、この順序で status が進んでいきます。Draft:下書きUI required:デザイン待ちBacklog:要件とデザインが確定したWaiting for refinement:リファインメント待ちIn refining:リファインメント中Refined:リファインメント済みReady:次のスプリントで着手するつもりIn progress:このスプリン...
4ヶ月前
記事のアイキャッチ画像
RubyKaigi 2026 参加レポート
Social PLUS Tech Blogのフィード
はじめにこんばんは、 okumud です。先日 RubyKaigi 2026 へ参加してきました。弊社は本年も Gold Sponsor として協賛し、 simomu, terandard, otsubo, masaki, 私 の 5人で参加しました。 また、グループ会社の feedforce から pokotyamu も参加しました。https://prtimes.jp/main/html/rd/p/000000167.000085682.htmlこの記事ではそれぞれ印象に残ったセッションについて紹介します。 印象に残ったセッション Guide to g...
4ヶ月前
記事のアイキャッチ画像
Rails 8.0 から except_on オプションで「このコンテキストではバリデーションをスキップしたい」が書けるようになった
Social PLUS Tech Blogのフィード
Rails 8.0 から except_on オプションで「このコンテキストではバリデーションをスキップしたい」が直感的に書けるようになりました。修正は以下で行われています。2021年10月に作成されたプルリクエストなので要求自体は結構前からあったようです。https://github.com/rails/rails/pull/43495以下のように、バリデーション定義時に except_on オプションを使用できるようになります。class Post < ApplicationRecord validates :title, presence: true, excep...
4ヶ月前
記事のアイキャッチ画像
pnpm v10 へのアップグレードで Vercel ビルドが失敗した話
Social PLUS Tech Blogのフィード
こんにちは、steshima です。ソーシャル PLUS のフロントエンドでは、パッケージマネージャーに pnpm を使用しています。先日、その pnpm のバージョンを v9 から v10 にアップグレードしたところ、Vercel 上でのビルドが失敗するようになりました。原因や対応内容を備忘録として残しておきます。 発生したエラービルド失敗時、Vercel では下記のビルドログが出力されていました。Detected `pnpm-lock.yaml` 9 which may be generated by pnpm@9.x or pnpm@10.xUsing pnpm@9...
4ヶ月前