ログ設計ガイドラインを公開しました | フューチャー技術ブログ
はじめにTechnology Innovation Groupの八木です。 フューチャー社内の有志メンバーでログ設計ガイドラインを作成し公開しました！ ログは、システムの稼働状況を可視化し、トラブルが発生した際に迅速に原因特定するための生命線になります。しかし、その重要性の一方で、プロジェクトごとに設計がバラバラになりがちだったり、とりあえず標準出力しているだけになっていたりと、十分に活用しきれていないケースも多く見受けられます。 本記事では、今回公開したログ設計ガイドラインの背景や、現場で役立つ設計のポイントを抜粋してご紹介します。 ガイドライン作成のモチベーションこれまで、ログ設計は個々のエンジニアの経験則や、プロジェクトごとの慣習に委ねられることが多くありました。しかし、システムが複雑化し、マイクロサービスやクラウドネイティブな構成が当たり前になった現代において、ログの役割は「単なる
チームのCLAUDE.mdが勝手に育つ - Hook機能での自動化
チームのCLAUDE.mdが勝手に育つ - Hook機能での自動化 はじめに 前回の記事では、スラッシュコマンドを使ってAIに会話履歴を分析させ、CLAUDE.mdに書くべきルールを提案してもらう仕組みを紹介しました。 スラッシュコマンドを使う方法は、この仕組みのことをよく知っている人が使う分には便利です。でも、チーム全体で確実に運用するとなると課題があります。 コマンドを実行し忘れる 新しく入ったメンバーは存在すら知らない ベテランメンバーはCLAUDE.mdに書く内容を当たり前に思えてしまう 結果として、やっぱりCLAUDE.mdの更新がされずに、新メンバーが困る...ということになりがちです。 解決策：Claude CodeのHookで自動実行 そこで、Claude CodeのHook機能を使って、会話履歴の分析を完全自動化しました。 Hookとは、Claude Codeの特定のイベ
自己補正するコンポーネント: レンダリング中に状態更新する公式テクニックの解釈
Reactにおいてプロダクトの品質を高く保つには、Reactのやり方に合ったコードを書くことが重要です。公式ドキュメントの名物ページ「そのエフェクトは不要かも」には、useEffectの望ましくない使い方と、それに代わるテクニックが紹介されています。 この記事で取り上げるのは、その中でも「props が変更されたときに一部の state を調整する」のセクションで紹介されている、レンダリング中にステートを更新するテクニックです。 このテクニックは一見すると奇妙で、知ってはいるけど使っていいのかよく分からないという方も多そうです。しかし、一見突飛に見える記述でも、深く理解すれば実はReactのデザインに完璧に則っているというのがReactの公式ドキュメントの特徴です。技術に対する向き合い方として、公式の説明であっても妄信せず批判的に見ることはとても重要です。しかし、Reactの場合は最終的に
進化するPromiseオブジェクト ［JS Modern Features no.2］ | gihyo.jp
こんにちは！ サイボウズフロントエンドエキスパートチームの左治木です。 今回のテーマは「進化するPromiseオブジェクト」です。 Promiseは、非同期処理を管理するためのオブジェクトで、ECMAScript 2015 (ES6)で導入されました。ECMAScript 2017ではasync／await構文が追加され、非同期処理がより直感的に記述できるようになりました。現在では、async／await構文が非同期処理の主流となっています。 一方で、Promiseの機能はasync／await構文の登場後も進化を続けています。これにより、非同期処理がさらに扱いやすくなり、従来のPromiseでは難しかった細かい処理も可能になっています。今回は、ES2020以降で追加されたPromiseの新機能をユースケースを交えて解説します。 Promiseの基本を簡単におさらい Promiseは、非同
実践: await using でリソース開放
実践 いつ使うんだこれと思ってたら使う日が来たシリーズ。 今回、Deno で使ったんですが、 Node.js やブラウザでも Polyfill を入れれば動きます。 try finally で puppeteer を終了したい Deno で puppeteer を扱うために、こういうコードを書いてました。 // original import puppeteer from "npm:puppeteer@23.6.1"; import chromeFinder from "npm:chrome-finder@1.0.7"; let browser: puppeteer.Browser | null = null; try { browser = await puppeteer.launch({ headless: false, executablePath: chromeFinder(),
【ログ分離】 ログデータを DB に保存してはいけません
はじめに TROCCO では ETL ジョブや、dbt 連携、ワークフローなど、様々なジョブで実行ログをリアルタイムで見ることができます。 これによりエラー時のトラブルシュートをスムーズに行うことができます。 そして、この実行ログですが、DB にあるジョブのレコードの1カラムに書き込まれていました。 このように TROCCO の実行ログの表示機能は、データベースのアンチパターンの上に成り立っています。 ログデータは TEXT 型で DB に保存されているためサイズが大きく、また TROCCO の成長に応じてジョブ数は増えるため、ログデータもサービスの成長とともに無限に成長してしまいます。 おかげさまでアカウント数は増加の一方であり、それに伴い DDL が遅くなったり、また SELECT のパフォーマンスも当然落ちるため、INDEX に気をつけたりする必要がありました。 SRE ではこれに課
URLシェアを支える技術 lz-string
WebアプリでURLシェアを実装する際に、URLにすべての情報を持たせてしまいたい場合があります。そのとき、情報をそのままクエリ文字列に渡してしまうとURLの文字数制限に引っかかってしまうかもしれません(厳密にはURLに上限はないようですが、現実はいつもブラウザ実装依存)。 そんなときURLセーフな文字列形式で圧縮してくれるライブラリがあります。lz-sringです。 変換の例 ライブラリで compressToEncodedURIComponent というAPIが提供されているのでこれを使用します。標準のencodeURIComponentでURLセーフな文字列に変換した場合とサイズ比較をしてみましょう。 import lzstring from "lz-string"; const rawData = "Lorem ipsum dolor sit amet, consectetur a
ネストオブジェクトの罠 RE: TypeScriptで「選択肢」の定義をEnum的な定数にまとめる
この記事は、静的解析とビルドサイズ面で興味深いテーマでした。記事として自分の考えを書きます。 注意。あくまでビルドパフォーマンス視点での最適化です。強い意図があって、自分のドメインモデリングの方法論ではこれが最適なんだ、というなら元コードの方法論を止めるつもりはありません。 元記事のコードを minify するとどうなるか 元コードを参考に、それにアクセスするサンプルコードを書いてみます。 const sortingOptions = { priceDesc: { id: "priceDesc", sort: "price", order: "desc", label: "価格が高い順", }, priceAsc: { id: "priceAsc", sort: "price", order: "asc", label: "価格が安い順", }, ratingDesc: { id: "ra
TS 5.6のiterator helpersサポート――BuiltinIteratorsのwhat & whyを知る - Qiita
先日、TypeScript 5.6 Betaが公開され、あわせてリリースノートも出ました。 この記事では、TS 5.6の新機能の中でもIterator helpersに注目します。特に、Iterator helpersのサポートに合わせて型定義に追加されたBuiltinIteratorsやBuiltinAsyncIteratorsについて解説します。 Iterator helpersとは Iterator helpersは、ECMAScriptのプロポーザルのひとつであり、この記事の公開時点ではStage 3という完成目前の状態にあります。TypeScriptではStage 3に到達したプロポーザルが実装されるので今回これが実装されることになりました。 ランタイムの実装としては、この記事公開時点ではGoogle Chrome 122, Node.js 22.0.0, Deno 1.42など
Kagi Search - A Premium Search Engine
Remember when search meant finding what you needed? We brought that back. Kagi doesn't sell your attention to advertisers. We don't track you. We don't clutter your results with sponsored content. We simply help you find what you're looking for. When you choose Kagi, you're choosing search that works for you.
Exhaustive branch checks with TypeScript - Jack Franklin
March 4, 2024Exhaustive branch checks with TypeScriptIt's very common when working with TypeScript that you will have a type that declares a list of values, such as an enum or union type: enum SupportedColour1 { RED, YELLOW, BLUE, } type SupportedColour2 = 'RED' | 'YELLOW' | 'BLUE'And then you will often have functions that need to run differently or return different values based on what variant i
Array.prototype.with による不変の配列の更新 | Blog | web.dev
最近、ブラウザに配列で呼び出すことができる相互運用可能な新しいメソッド Array.prototype.with() が追加されました。 この記事では、このメソッドの仕組みと、元の配列を変更せずに配列を更新する方法について説明します。 Array.prototype.with(index, value) の概要 Array.prototype.with(index, value) メソッドは、呼び出し元の配列のコピーを返します。このコピーでは、index が指定した新しい value に設定されています。 次の例は、年齢の配列を示しています。2 番目の年齢を 15 から 16 に変更しながら、配列の新しいコピーを作成する場合: const ages = [10, 15, 20, 25]; const newAges = ages.with(1, 16); console.log(newAg
Cookie の HttpOnly 属性について勘違いしていたこと - Qiita
追記 コメントありがとうございます、ご指摘を参考に読みやすくなるように修正しました！ はじめに (本記事は初歩的な内容ですが、少なくとも僕は引っかかったので記事化したものです) Cookie に HttpOnly という属性があります。 この HttpOnly を設定することで JavaScript からの直接の参照・操作を禁止することによって、XSS などの手法によって悪意のある第三者から Cookie の内容を見られるのを防止することができます。 ここまでは多くの記事に書いてあるのですが、私は一点ずっと勘違いしていました。 いや、直接値を読み取れないってだけで、API呼び出しとかの時に使えないってわけじゃないんかーーーーーーーーーーい！！！ いや、まあそれすらできなかったら何のための Cookie なんですかという話なのでそりゃそうなんですが... ということで見ていきます。 実装例(
X (旧Twitter) の改悪アップデートについての対応策 は summary_large_image をやめる事 | kazumich.log
どうやら本日 (2023/10/05) くらいから、X (旧Twitter) が変なアップデートがありブログの記事のURL を貼っても画像しか出てこないようになってしまいました。 文句を言っていても仕方がないので、できる対策を考えてみました。 まずは、検証です。 URL を指定した場合 以下のテキストを X (旧Twitter) に POST する。 テスト2 https://kazumich.com/ablogcms-3010-release.html 画像の左下に kazumich.com と表示がされていますが、以前はタイトル・本文・ドメイン の表示が無くなっています。 無事 a-blog cms Ver.3.1.0 のリリースができ... 2023年9月14日に無事 a-blog cms Ver. 3.1.0 を リリースすることができました。本来は 202... kazumich
TypeScript 5.2で予告されているusingをいじってみる
この記事でのusing宣言の動作はBabelのtransform及びes-shimsのpolyfill実装に依存しており、実際のV8エンジンやTypeScriptのトランスパイル出力の挙動とは異なる可能性があります。 以下の挙動がusing宣言に対応している処理系の実際の挙動と異なる場合はコメントをいただけると幸いです。 導入 先日、Twitterでこんなツイートが回ってきました。 TypeScript 5.2で新しい「using宣言」が追加されるというものです。 しかも、TypeScriptの独自構文かと思いきや、JavaScriptのStage 3のProposalをTypeScriptで先行実装するという通常のTypeScriptの実装プロセスに則ったものでした。 新しい変数宣言の追加はES 2015(ES6)の「let」「const」以来でなんと8年ぶりで、JavaScript/T
Dactyl LightCycleをカスタムビルドした - /var/log/otomon10
お椀型形状の左右分離型キーボード Dactyl LightCycle をビルドした。 初めての自作キーボードだったこともあり、悩んで苦労したことや作りながら分かることが多かったので、この記事がこれからDactylをビルド＆カスタムする人の参考になれば嬉しい。 なお、Dactyl LightCycleのビルドは2回行っている。1回目はElite-Cを使った有線タイプで、特にケースをカスタマイズせずにそのままPLAで印刷した。2回目はBLE Micro Proを使った無線タイプで、ケースをカスタマイズしてABSで印刷し、パテ埋めで積層痕消したり塗装を行った（PCBは1回目のものを流用）。 ビルドに使った部品は、部品リストにまとめている。 作ったもの タイピング動画 工夫したところ ケースのカスタマイズ 修正① 小指列の位置を手前に移動した 修正② 1U PCBを使ってもケースが閉まるようにフレ
jscodeshift で Moment.js を Day.js に一括置換した話 - ミツモア Tech blog
※ こちらはミツモアAdvent Calendar 2021の3日目の記事です。 こんにちはミツモアでテックリードをしている白柳（@yanaemon）です。 ミツモアは「リモートワークが増えてエアコンを綺麗にしたい」「引っ越しで出た不用品を回収してもらいたい」といった生活のあらゆるシーンであなたにぴったりの専門家を無料で探せるサービスですので、ぜひ気軽に使ってみてください！ meetsmore.com Moment.js の問題点 ミツモアでは、Moment.js を利用していたのですが、下記の課題がありました。 Moment is in maintenance mode https://momentjs.com/docs/#/-project-status/ bigger bundle size mutable ❗ Day.js への置換 そこで、いくつかのライブラリを比較し、Momen
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURL APIやURLSearchParams APIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet for JavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が
![[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った](https://cdn-ak-scissors.b.st-hatena.com/image/square/8e5439b69c83b50834bd0c07600f1b23fd865e34/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fefcl.info%2Fpublic%2Ffavicon.png)
GitHub - vectordotdev/vector: A high-performance observability data pipeline.
Vector is a high-performance, end-to-end (agent & aggregator) observability data pipeline that puts you in control of your observability data. Collect, transform, and route all your logs and metrics to any vendors you want today and any other vendors you may want tomorrow. Vector enables dramatic cost reduction, novel data enrichment, and data security where you need it, not where it is most conve
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub Actionsの実行・結果確認をターミナルで完結させるalias - Qiita
