ブックマーク / zenn.dev (3,069)

  • 順序性の担保とスループットはトレードオフだという話

    この記事について AWS SQSからメッセージを受けとって処理するLambdaを書いているときに、 標準キューだから順序保証されてないな、じゃあ順序バラバラできても捌けるように処理を書かないと! → ... → あれ???意外とこれ難しくない??? と思った経験、皆さんにもあるのではないでしょうか。 この記事では、筆者が上記のような壁にぶつかったときに「順序を保つってなんでそんなに難しいんだろう?」「保てないならどうやってそれに耐えうるようにすればいいんだろう?」と色々考察した結果を書いていきたいと思います。 使用する環境・バージョン 2024/6/22時点で提供されている機能に基づき考察 読者に要求する前提知識 AWSのSQS, SNS, Kinesis Data Streamがどういうサービスなのかは既知という前提のもとで書きました 順序セマンティクスとは 順序セマンティクスとは「イベ

    順序性の担保とスループットはトレードオフだという話
  • CUR による AWS コスト構造の継続的モニタリング

    当社では複数の SaaS プロダクトを開発・稼働するための環境として、主に AWS を利用しています。AWS 等のシステムにかかるコスト構造を正確に把握することは、プロダクト原価の算定や適正なプライシングを行う上で非常に重要です。 今回、カスタム定義のコストカテゴリ体系を各種 AWS リソースにかかるコストに適用し、継続的にモニタリングするための仕組みを構築してみたので、記事ではその内容についてご紹介したいと思います。 概要 まず、実装を試みたコストカテゴリ設計の考え方について説明します。 次に AWS Cost Categories で実装する際の課題感に触れた後、今回利用する AWS Cost and Usage Report (CUR) について紹介します。 コストカテゴリ設計 コストカテゴリのレベルとして、以下の 3 つを定義しました。 Level-1 ... プロダクト原価を構

    CUR による AWS コスト構造の継続的モニタリング
  • システムで扱うステータスの分解と変換

    初めに レバテック開発部の今井です。 ソフトウェア開発において、データの状態管理は非常に重要です。注文の状態、ユーザーの認証状態、プロジェクトの進行状態など、多岐にわたる状況で、適切な状態管理が求められます。しかし、ビジネス要件の変化や新機能の追加に伴い、状態管理が複雑化し、保守が難しくなることがあります。 この記事では、データの状態管理を簡単にするためにMECEを初めとした方法で分析を提案します。これによって、柔軟で効率的なシステム設計が可能になることを目指します。 TL;DR MECEの原則を使ってenum型ステータスを分解する方法を解説する MECEによる分解から一次情報と二次情報という区分を提案し、分析の高度化を目指す 一次情報と二次情報の区分とシステム間のデータ連係の関係性について考察する 対象読者 システムの保守性・拡張性に興味関心のあるエンジニア enumをMECEに分解する

    システムで扱うステータスの分解と変換
  • Readonly 使ってますか?

    ムーザルちゃんねるのムーです。今回は TS の Readonly を使うか否か zaru さんと会話しました。 以前の zaru さんのこちらの記事 Reactのpropsはreadonlyにするべきか?で、Readonly については記載していますが、今回会話をする中で改めて気づいた知見などがあったのでシェアしたいと思います。 動画編の中でも Readonly の罠として二つ紹介していますが、それらについて書いておきたいと思います。 その1 immutable なオブジェクトを mutable なものにアサインすると、変更できてしまう。 これはよく知られている挙動だと思います。 具体的には以下のようなコードです。 interface Cat { readonly name: string; } const cat1: Cat = { name: "Alice" }; cat1.name

    Readonly 使ってますか?
  • モンスターストライク スタジアムをAmazon EC2からAmazon ECS Fargateに移行しました

    MIXI でモンストサーバチームとセキュリティ室を兼務している、atponsです。 モンストサーバチームでは、モンスターストライクとは別に、モンスターストライク スタジアムというスマートフォンのアプリゲームのサーバ開発・運用を行っています。 モンスターストライク スタジアムは、モンスターストライクとプレイスタイルは同じながら、4vs4の最大8人まで同時対戦や練習モードなどを備えたアプリになっており、モンストのeスポーツ大会「モンストグランプリ」を開催する際にも利用されています。 開発体制の現状 モンスターストライク スタジアムは、初期の段階でモンスターストライクのコードから分岐する形で開発されているため、アップストリームの変更を順次取り込んでいくという仕組みで運用されています。そのため、サーバコードなどは別にあり、適宜新機能を取り込んでいきアップストリームと合わせていくという開発・運用フロ

    モンスターストライク スタジアムをAmazon EC2からAmazon ECS Fargateに移行しました
  • Next.jsで不要なファイルを一掃する

    Knipというツールが便利。JaveScriptやTypeScriptで書かれているプロジェクトの未使用のファイルやexportを見つけることができる。 Find unused files, dependencies and exports in JavaScript and TypeScript projects https://knip.dev/ インストールせずに使いたいのでnpxコマンドを使って実行する。 また、Next.jsプロジェクトで使いたいのでプラグインを導入する。 上記のプラグインの中にNext.jsがあるのでこれを使う。 knip.jsonというファイルをプロジェクトのルートに配置する。除外したいディレクトリはignoreで指定できる。 { "ignore": [ "hoge" ], "next": { "entry": [ "next.config.{js,ts,c

    Next.jsで不要なファイルを一掃する
  • VercelがPPRをNodeランタイムにした件からWebフロントエンドとエッジの動向に迫る

    こんにちは。sumirenです。 イントロダクション 先日、Twitterで以下のポストが話題になっていました。 一部曖昧なところもありますが、推測と動作検証結果も交えて要約すると、以下のことを言っています。 VercelがホスティングしているWebサイトは、エッジでのサーバーサイド処理を行うことをやめた Next.jsに関して、VercelでPPR(Partial Prerendering)を利用した場合、サーバーサイド処理はNodeランタイムで行われる この記事では、このポストに絡めて、PPRとエッジに関する筆者なりの所感や解説を述べていきます。この記事の大部分はポエムですが、一部、技術的な事実についても述べるつもりです。そうした部分について誤りがあればご教示ください。 Vercelがエッジでのサーバーサイド処理を行うことをやめた件について エッジの効能 そもそもエッジに期待していたこ

    VercelがPPRをNodeランタイムにした件からWebフロントエンドとエッジの動向に迫る
  • 今話題となっているReact 19のSuspenseの変更内容を詳しく見てみました。

    はじめに 以下のツイートが発端でした。 投稿者は、React Query のメインコントリビュータの tkdodo さんです。 React 19 に含まれる変更にある異変を気づきました。 変更は以下に該当します react: Don’t prerender siblings of suspended component #26380 リリースノートに隅っこにありました。 この変更は RFC なしで含まれました。該当 PR は以下 What React では、 Suspense を使って、非同期処理を行うコンポーネントやReact.lazyによってコンポーネントの遅延ロード時に、読み込みを完了するまでフォールバックを表示させることができます。 以下のような実装があるとします。 import { lazy, Suspense, useState } from "react"; const Av

    今話題となっているReact 19のSuspenseの変更内容を詳しく見てみました。
  • Go1.23で導入予定のイテレータを完全理解する✌️

    イテレータについて完全理解するぞ!!!! 皆さん、Go1.23で導入予定のイテレータすごい楽しみですよね? 筆者はすごい楽しみです。Go1.18でジェネリクスが導入されて書き方の幅が広がったように、今回のイテレータもGoの書き方の幅を広げる機能になるのではと予想しております! https://github.com/golang/go/issues/61405 を見ると分かるように「add range over int, range over func」の機能はGo1.23のマイルストーンに積まれています。 「range over int」の機能についてはGo1.22で既に実装されています[1] 。「range over func」は来たるGo1.23に実装予定だと思われます。このブログでは、導入予定の型/関数とその使い方を深ぼっていきたいと思います! このブログの中では「range ove

    Go1.23で導入予定のイテレータを完全理解する✌️
  • 『SOZAI』というフリー素材サイトをリリースしました!!

    はじめに この度フリー素材サイト『SOZAI』をリリースしました!! この記事では開発の経緯や使用技術について触れていこうと思います。 ▼ サイトリンク また、イラストのリクエストもお待ちしております!! 開発の経緯 このサイトを開発するきっかけは大きく二つありました。 きっかけ① 最近、私は「なぜこのAI時代にフリー素材サイトは使われているのか」という疑問がありました。今の時代、Stable DiffusionやDALL-E、Midjourneyを使えば簡単にものの数秒で好きなイラストが生成できます。 思い通りの画像にならない しかし、実際やってみるとわかるのですが、AIはなかなか思い通りの画像を生成してくれません。イメージに近いものはできても、タッチが違ったり、背景に変なものが描かれていたりします。もちろん、私のプロンプトが悪いのかもしれませんが、AIを使いこなすのは簡単ではありません

    『SOZAI』というフリー素材サイトをリリースしました!!
  • TypeScript 5.5 で追加された正規表現構文チェックを理解する

    TypeScript 5.5で、@graphemeclusterさんによって正規表現リテラルの構文チェックが導入されました🎉 この構文チェックによって、正規表現に間違いがあった場合、事前にTypeScriptがエラーを出力してくれます。 この機能について、次のことが気になったので調べてみました。 どんな構文がエラーになるか なぜ導入されたか どうやってチェックしているか JavaScriptで実行できるがTypeScriptでエラーになる構文はあるか ESLintとのカバー範囲の違い 記事に関して、誤り等があれば指摘いただけると嬉しいです。 どんな構文がエラーになるか TypeScript 5.5では、正規表現に関するエラーメッセージが40個程度追加されています。 例えば、下記のような構文は、5.5でエラーになります。 // 存在しないフラグ var re = /a/b; // エラー

    TypeScript 5.5 で追加された正規表現構文チェックを理解する
  • LLM にコードを「差分」で書き換えさせるためのアイデア

    既存の LLM コード生成の問題 LLM は行カウントやワードカウントが苦手。 例えば自分は SourceMap を扱うコードのテストを書かせようとしたが、モックデータの line:column がガバガバな位置を指してまともにテストにならない。行カウント/ワードカウントができないのはつまり diff がうまく生成できない。 これらの問題があって、コードを生成するパイプラインを組む場合、 全文出力が主流になっている。 ここで何が問題になるかというと、コードが膨らんで来た時に、(書き変える対象が一部だとしても)生成が顕著に遅くなる。うまく生成できなかった時にリトライを繰り返すと、問題がさらに悪化する。 改善手法の提案: 明示的な Line Number の付与 最近の LLM は入力ウィンドウがある程度大きくても、そこそこの速度で応答する。(お金はかかるが...) 問題は生成速度にある。特に

    LLM にコードを「差分」で書き換えさせるためのアイデア
  • PPRはアイランドアーキテクチャなのか

    先日、Next.jsの新たなレンダリングモデルであるPartial Pre-Rendering(以降PPR)について記事を投稿しました。 この記事を書いてる時は意識してなかったのですが、感想でアイランドアーキテクチャに言及されるケースが散見されました。社内で上記記事の話題になった時も同様に、アイランドアーキテクチャとの違いについて問われました。 結論から言うと、PPRとアイランドアーキテクチャは全く異なるものです。稿ではPPRとアイランドアーキテクチャの違いについて解説します。 PPR まずはPPRとアイランドアーキテクチャの概要を改めて整理しましょう。 PPRはページをstatic renderingとしつつ、部分的にdynamic renderingにすることが可能なレンダリングモデルです。具体的には、画面をbuild時(もしくはrevalidate後)に静的生成しつつ、リクエスト毎

    PPRはアイランドアーキテクチャなのか
  • Server-Sent Events を複数パターンで実装して理解を試みる

    Server-Sent Events (SSE) 目新しい技術というわけではありませんが、最近 Server-Sent Events (SSE) について言及する記事をよく見かけます。 何番煎じかはわかりませんが、個人的に興味があることと、正直触ってみたことがなかったので、コードを書きつつ調べてみました。 ※記事で登場するサンプルコードは次のリポジトリで公開しています。 SSE とは SSE 自体を解説する記事は無数に存在するため詳細な説明は割愛しますが、簡単に言うと、サーバーからクライアントへ一方向の Push 通信を行うための仕組みです。 MDN にもページが存在するため、参考になります。 独自プロトコルを必要とせず、HTTP/1.1 でも動作するのも特徴です。 SSE の歴史 wikipedia に SSE に関するページが存在し、次のような記述があります。 SSE メカニズムは、

    Server-Sent Events を複数パターンで実装して理解を試みる
  • Datadog でアラート通知の質を向上させるための取り組み

    この記事は毎週必ず記事がでるテックブログ "Loglass Tech Blog Sprint" 44 週目の記事です!1 年間連続達成まで残り 9 週となりました! はじめに はじめまして、2024 年 4 月にログラスにジョインしたエンジニアの石畑です。 まだまだドメインやシステムについて学んでいる最中なのですが、その中でアラート監視・運用周りをより良くできそうだったので、試行錯誤したことをまとめたいと思います。 どんな課題があったのか? ログラスではフロントエンドからバックエンド、インフラに至る全てのログ・メトリクスが Datadog に集約され、横断的に分析・監視できる仕組みが整っています。アラートも Datadog でモニタリングを作成し、「Slack に通知 → ローテションのオンコール担当が対応」という体制が作れています。 しかし、歴史的に積み重なったモニタリングが過剰にアラー

    Datadog でアラート通知の質を向上させるための取り組み
  • Rust製JavaScriptエンジン『Boa JS』を試してみた

    主要なJavaScriptエンジンのTest262を毎日実行して結果を載せているtest262.fyiというサイトがあります。 (Test262とは最新のECMAScriptを実装できているかどうかのテストです。) このサイトの、2024/6/5現在の実装率ランキングはこちらです。 test262.fyiの画面キャプチャ(2024/6/5) V8(ChromeやNode.js、Deno等)、JavaScriptCore(SafariやBun等)、SpiderMonkey(Firefox等)という、大手エンジンとほぼ横並びで4位にい込んでいるBoaとは何者でしょうか。 Boaは公式曰く『Rustで書かれた実験的なJavascriptのレキサー、パーサー、コンパイラー』です。これだけ揃えば、JavaScriptエンジンと言って差し支えないと思います。RustアプリケーションにJavaScri

    Rust製JavaScriptエンジン『Boa JS』を試してみた
  • Honoを使い倒したい2024

    はじめに こんにちは、AI Shift バックエンドエンジニアの@sugar235711です。 この記事では、Honoの使い方をおさらいし、API開発を通じてHonoの実際の開発で役立つTipsを紹介します。 Honoの基的なコンセプトや網羅的な実装例については、公式ドキュメントを参照してください。 基編 この章では、Honoの基的な使い方を紹介します。 App/Contextオブジェクトの使い方 Honoでは、プライマリオブジェクトであるHonoインスタンスを生成し、そのインスタンスをもとにAPIのエンドポイントを定義します。

    Honoを使い倒したい2024
  • 【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み

    Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・?」と思った方は、ぜひ読んでください! Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを

    【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み
  • GoConference2024の資料が集まるスレ #gocon

    これはサマリ(ここを更新していきます)情報提供(コメント)歓迎!! イテレータによってGoはどう変わるのか Dive into gomock Data Race Detection In Go From Beginners Eye Go1.21から導入されたGo Toolchainの仕組みをまるっと解説 Cleanup handling in Go Custom logging with slog: Making Logging Fun Again! Goにconst型修飾を期待しなくてよい理由 GoのLanguage Server Protocol実装、「gopls」の自動補完の仕組みを学ぶ バイナリを眺めてわかる gob encoding の仕様と性質、適切な使い方 Unified Diff 形式の差分から Go AST を構築して feature flag を自動計装する Mapのパ

    GoConference2024の資料が集まるスレ #gocon
  • <T, K extends keyof T> をちゃんと理解する

    TL;DR TypeScriptでライブラリなどを覗いているとよく見かける<T, K extends keyof T>について、問題を分解してきちんと理解する試みです。 extends この場合のextendsの役割は継承ではなく、制約です。 例えば以下のようなイメージ。 type StringOrNumber<T extends string | number> = T type A = StringOrNumber<string> type B = StringOrNumber<number> // Type 'boolean' does not satisfy the constraint 'string | number' type C = StringOrNumber<boolean> type User = { id: number; name: string; }; cons

    <T, K extends keyof T> をちゃんと理解する