こんにちは、SODAのSREチームのDucと申します。 GitHub Actionsのコストを削減しながらCIワークフローを高速化したの工夫をご紹介します。 背景 私たちのチームは、snkrdunk.comサイトとSNKRDUNKモバイルアプリの可用性とパフォーマンスの維持に注力しています。 それに加えて、クラウドインフラストラクチャやその他の監視・開発ツールのコスト管理も担当しています。 毎月、AWSやGitHubなどのインフラストラクチャとツールの請求書をチェックしています。 GitHubの請求額が非常に高いことに気づきました。特にGitHub Actionsの部分です。 参考までに、GitHub Actionの使用量とサーバーの本番ワークロード費用の比較をご紹介します。 Fargate: Savings Plan適用で月額約$7,000。私たちのサービスは平均約5000リクエスト/秒

あんちぽさんの「やっていき、のっていき」の話が好きで、今でもたまに読み返している。 speakerdeck.com やっていき、のっていきのメタループを作動させてバーンという表現がキャッチーかつ共感できてとても好き。一方で、特にメンバーからマネージャー/リーダーに対しては "のせていき" という概念が重要な気もしているので雑にまとめておきたい。 あるメンバーとの1on1で、彼のEMが変更になることを伝えた際に、「全然反対とかではないんですけど、自分◯◯さんのEM結構好きで、1on1も毎回話したいなと思って楽しみにしてたんですよね」と話していた。 そういう関係性を作れているEMは素晴らしいなと思ったし、この話を聞いて自分はとても嬉しかった。ただ、これはマネージャーが素晴らしいだけではなくメンバーの接し方もよくて、相乗効果のようなものが働いていたんじゃないかと思った。 相手を受け入れて、頼りに

レシピ事業部バックエンド基盤グループの石川です。2025 年 6 月の頭にやった仕事について走り書きのようなメモを残しておきたくなったので、この記事を書いています。 Anthropic 社が開発している Claude Code は、ターミナルの上で動作する LLM agent です: https://docs.anthropic.com/en/docs/claude-code/overview。 Claude Code は Anthropic の API 経由で使う方法の他に、AWS や Google Cloud を経由して Claude のモデルを利用する道を用意してくれています: https://docs.anthropic.com/en/docs/claude-code/third-party-integrations。 AWS を多用しているクックパッドにおいては、Amazon B

はじめに こんにちは、iOS エンジニアの kaikai です。 プルリクエスト（PR）のレビューが滞ると、開発速度も品質も下がりがちです。 そこで私は AI エディタ「Cursor」 を “補助輪” として取り入れ、レビュー時間を短縮しつつ見落としを減らす 方法を実践しています。 本記事では、「AI に丸投げせず、人が主役のままラクにする」具体的な流れを紹介します。 前準備 1. レビュー専用のディレクトリを準備する まずは レビュー専用ディレクトリ をcloneしてきましょう。実装用ブランチと混ざらないので安心です。 私はレビュー依頼が頻繁に来るプロジェクトを Cursor で常に開きっぱなしにしています。 2. 拡張機能を導入する Cursor に GitHub Pull Requests and Issues 拡張機能 をインストールします。 この拡張機能によって、自分宛に来ている

はじめに 長らくReactを雰囲気で書いてきました。コンポーネントを作り、propsを渡し、状態を管理する基本的な概念は理解していたものの、より体系的なアプローチや設計パターンについては深く考えずにコードを書いていました。しかし、より大規模で保守性の高いアプリケーションを構築するにつれ、単なる「動くコード」を超えた、堅牢な設計原則の必要性を痛感するようになりました。 この記事は、私自身の再学習を共有するものです。 ※2025/04/21時点、私が関わっているプロダクトのCrowd AgentのReactのバージョンは"18.3.1"です。 目次 Reactデザインパターンとは HOC (高階コンポーネント) パターン[※React18以降では、カスタムフック推奨] Provider パターン Presentational と Container コンポーネントパターン React Hook

自分が在籍している会社でKafkaを利用したマイクロサービスが増えてきているので、昔からオブザーバビリティの向上というものにちゃんと着手したかったのだが、最近になってやっと手を動かせる所まで優先度を上げられた。 という訳で、ここしばらくは社内にあるマイクロサービス群にOpenTelemetryによる計装を入れまくっている訳だが、大分可視化が進んできたので、これを社内のメンバーに周知しなければならない。 とは言え、説明したい内容が余りに一般的な知識なので、社内向けのクローズドなドキュメントとして書くのは勿体無いので、オープンなブログの方にまとめることにする。 (会社のテックブログに書いた方がいいのではという話はあるが、仕事っぽくなると面倒臭い……) 基本的にはOpenTelemetryの公式ドキュメントを自分なりに解釈して要点を絞る、という形で解説していくつもりなので、公式ドキュメントは一通

カミナシで、Webフロントエンドエンジニアをしている osuzu です。 これまでフロントエンド専門外のエンジニアからReactを学ぶ良い方法やお勧めドキュメントを聞かれる度に、 公式ドキュメント のリンクを貼る日々を過ごしてきましたが、何かすごい上達方法がないものかと普段意識していることをこの記事で書き起こしてみました。 文字にした結果、中身になにか特別なことや魔法のテクニックは一つもなく、むしろプログラミング一般に通ずる話ばかりになりましたが、（自戒も込めて）凡事徹底することの難しさもあると感じておりその一助になれば幸いです。 ※ 凡事徹底：平凡なことを非凡なほどに実行すること。一つ一つの理解や実行は平易でも、それを実践し続けるのは難しい。 React Server Component（以下RSC）を採用するかで変わる部分もありますが、記事の例はClient Componentの話が中

はじめに 去年の夏頃、巷でAIエディターが流行している最中、ずっと憧れていたNeovimを使い始め、晴れてVimmerになりました! それから半年が経ちNeovimにもだいぶ慣れてきたので、自分のNeovim環境を再構築しました。その際にプラグインも色々見直したので、今回はその中でも特に愛用しているプラグインを紹介します！ UI系のプラグイン dashboard-nvim Neovimをファイル指定なしで起動した際に表示されるスタート画面をかっこよくできるプラグインです。直近開いたファイルやプロジェクトも表示されるので便利だし、なにより見た目がかっこよくてテンション爆上げ系のプラグインです！ ちなみに、ヘッダー部分のロゴは以下のサイトのANSI Shadowフォントを使って生成しています！ hlcunk.nvim コードの各種ブロックの開始と終了部分をハイライトしてくれるプラグインです！複

既存プロジェクトにNext.js等のSSRを導入する場合は既存の認証機能を維持したり活かしたりする必要があります。しかしSSRの認証とCSR(SPA)の認証は同じではなく、簡単に共有できるものではありません。 ここでは複数のテックブログの事例を見ながら、この難しさと本物のウェブサービスで採用された解決策を見ていきます。 CSRとSSRの認証の違い まず最初に、CSR(SPA)とSSR[1]の認証の違いをざっくり紹介します。技術的制約を理解していただくことが目的です。 クライアント視点では、認証システムは突き詰めると、トークン(鍵)[2]を安全に保管し、必要時にサーバに渡す(鍵穴に差し込む) ことです。この２つに絞って解説します。[3] https://www.flaticon.com/free-icons/vault (by IYIKON) https://www.flaticon.com

これはなに この記事は米シリコンバレーでデータベースコンサルや教育事業を展開するKloudDB社がポストした『Understanding How ONLINE DDL (INPLACE) works in MySQL』の翻訳記事です。 この記事ではDDL（スキーマ変更クエリ）の内部処理について詳細に解説しています。DDLはシンプルに利用できるものの、一歩踏み込むと複雑怪奇で理解の難易度は高いものでした。この記事はそこに焦点を当てたものになります。 翻訳するにあたり、技術的な正確性を担保しつつ、日本語表現として自然になるよう努めました。もし記事の中で技術的な観点で不正確な箇所があれば訳者の責任ですので、コメント欄などでご指摘いただけると幸いです。 また、翻訳について許可を下さったSrinivasa R Inaganti氏（同社CEO）に感謝します。 以下、訳者による前書き的なものを挟んで、翻

はじめに フロントエンド開発 においてレンダリングという言葉はさまざまな場面で登場します。さらに、Server-Side Rendering(SSR)のように「レンダリング」という言葉が名前に含まれているものを含め、Single-Page Application(SPA)など、レンダリングに関連した議論でよく使われる用語も数多く存在します。 そして、これらの用語の意味はフロントエンドの技術の進化に伴い、徐々にニュアンスが変化してきているように感じています。 他のエンジニアとこれらの用語について話す中で、「自分はそれをSSRとは呼ばない」「SPAにはいくつかの意味があるよね」といった意見を耳にし、人によって解釈が異なることを実感しました。 では SSR や SPAなどといった用語は今日どういった意味で使われているのでしょう。そもそも、「レンダリング」とはどういう意味なのでしょうか。SSR に

お疲れ様です。今年は豪雪らしくワクワクが止まらないスノーボーダーの2357giです。 AWSリソースをIaCで管理しているプロジェクトにおいて、IaCリポジトリとアプリケーションリポジトリが分かれている中で、どのようにアプリケーション用ECS ServiceのCDを実現するかは悩むところではあると思います。 そんな中で、弊社がどのような構成でそれを実現しているかを紹介したいと思います。 特筆して珍しいことは行なっていないのですが、AWSリソースをIaC化し始めた方の参考になれば幸いです🙌 背景 ALBとECS Service自体はインフラリソースであり、IaCリポジトリで管理したいという思惑があります。 それに対して、ECS ServiceやECSタスク定義のライフサイクルはアプリケーションと一致しており、アプリケーションリポジトリから更新したいです。ここでいうライフサイクルの一致とは、

来週で40歳にあるので30代の振り返りとしてこれを書く。 そんな30代を全力で走ってきた中で、これは30代でやってよかったな。 もっと早くやってもよかったな。というようなことを書く。 最初に行っとくと一般的にやったほうが良いということは基本的にやったほうがいい。 そういうのも含めて実際にやってみた経験も書く。 習慣を作れるようになる これは本当にやったほうがいい。 身につけるのであれば、早ければ早いほどほどいい。 もう少し具体的に話すと自分がやりたいことを実現していくためには習慣にできるとよい。 なんでも習慣にできると強くて、自分はどうやったら習慣になるんだろう？ってところを理解して上手くハックして習慣化していけると自分のやりたいことがどんどん実現できるようになる。 運動習慣 これも早ければ早いほど良いと思うが、朝か夜の散歩くらいからでもよいからやったほういい。 コロナ禍をきっかけに自分は

SRE の鈴木 (id:eagletmt) です。先日、この開発者ブログで赤松から One Experience プロジェクトについての紹介がありました。 自分もこの One Experiene プロジェクトに携わっており、このプロジェクトが始まったちょうど1年くらい前にはイギリスにあるオフィスに行き、グローバル版のシステムを開発・運用しているメンバーと直接顔を合わせたりもしていました。自分は One Experience プロジェクトにおいて主にデータ移行について担当していました。データ移行に必要な作業はいくつかありますが、この記事ではその中から日本版のシステムのデータベースで発生したデータの変更をどのようにしてグローバル版のシステムのデータベースに継続的に反映したかの部分について紹介します。 One Experience でのデータ移行 赤松の記事にも書かれていたように、日本版とグロー

こんにちは、レシピ事業部プロダクト開発グループの赤松(@ukstudio)です。 昨年の10月頃からレシピ事業部ではひとつの大きなプロジェクトに取り組んでいました。このプロジェクトは社内ではOne experienceと呼ばれています。本記事ではこのOne experienceについてご紹介します。 追記: これまでに投稿された One Experience 関連の記事をまとめました。あわせてご覧ください。 Web ちょっと複雑なサイドバーをHotwireで簡単に作りたい - クックパッド開発者ブログ レシピIDリンク移行の話 - クックパッド開発者ブログ モバイル モバイルアプリの One Experience - クックパッド開発者ブログ Simple Custom Compose Layout - クックパッド開発者ブログ iOSアプリにおける複数リリースに跨った機能改善の開発事例紹

こんにちは。レシピ事業部バックエンド基盤グループの石川です。 2014 年、このブログに『開発環境のデータをできるだけ本番に近づける』というタイトルの記事が投稿されました。 クックパッドでは、ユーザーさんが実際に体験している状況と近い状況を再現しながら開発することに価値があると考えています。技術的には、最初からレコードがたくさんあることによってパフォーマンス問題に気付きやすくなるなどの長所がありますし、サービス開発としても、実際のユーザーさんの体験を最速でなぞって素早くフィードバックループを回せるようになるという長所があります。 この慣習は 2014 年の記事から 10 年経った今でも続いています。一方でその実現手法については変化を続けてきました。現在のクックパッドでは状況に応じていくつかの手段を使い分けています。それらの手段については今まであまり公開されていなかったような気がするため、こ

Amazon Web Services（AWS）は、Webアプリケーションに追加することでAWSのオブジェクトストレージであるAmazon S3に簡単にアクセスできるUIコンポーネント「Storage Browser for S3」をオープンソースとして公開したことを発表しました。 Storage Browser for S3を使用することで、ユーザーに対してアクセスすることを許可されたAmazon S3のデータのみをWebブラウザ上に表示し、データの参照、ダウンロード、アップロードができるようになります。 また、リクエストを自動的に最適化し、高スループットのデータ転送を実現します。 Amplify UIのUIコンポーネントとして提供 Storage Browser for S3は、AWSを基盤としたWebアプリケーションの開発を簡単に実現するための一連のフレームワークである「AWS Am

Intro Ladybird は、他のブラウザエンジンをフォークせず、企業との取引に頼らず、寄付だけで作ることを宣言した新しいブラウザエンジンだ。 Ladybird https://ladybird.org/ これがいかに価値のある取り組みなのか、Web を漫然と眺めてきた筆者による N=1 の妄言を書いてみる。 ブラウザエンジンとは ブラウザは、「ブラウザ UI」と「ブラウザエンジン」と、大きく二つの構成要素に分けて考えることができる。 ブラウザエンジンとは、いわゆる Web 標準の技術を片っ端から実装した、ブラウザの土台となるものだ。 ビルドすれば、入力した URL からネットワーク経由でリソースを取得し、パースしてレンダリングして表示できる。そのための IETF RFC や WHATWG HTML や ECMAScript が実装されている、標準技術の結集だ。 その上に、例えばタブを

Rubyをはじめとする「動的型付け」のプログラミング言語は、ソースコード中に型に関する記述が陽に出てこないことが特徴で、プログラムの実行前に（静的に）型検査をすることはありません。しかし、このようなプログラミング言語においても、大規模な開発における品質の向上や開発体験の改善、実行の高速化のために、静的な解析を活用しようという試みは多くなされてきました。この記事では、動的型付けの言語のための型検査の歴史を簡単に振り返って、現在私が開発しているRuby向けの型検査器Steepとその基盤となっている型記述言語RBSについて説明し、今後の展望を議論します。 著者：松本宗太郎さん（@soutaro） Rubyコミッター。大学院でRubyプログラムの型検査の研究に取り組み、修了後はスタートアップでWebアプリケーションの開発に従事。2017年から型検査ツールSteepの開発を始め、2019年からはRu