はじめに こんにちは！バックエンドとプラットフォームエンジニアのビクトルです。 この記事では、Google Cloud Runをロガーする方法についてお話しし、マイクロサービスアーキテクチャでトレーシングを使用するために試してみたいと思います。 トレーシングとロギング オブザーバビリティは、トレース、ログ、およびメトリクスを収集および集約することによって分散トレーシングを実現します。 トレースは、リクエストを受信するとそのリクエストがどのようにして始まり、ソースから宛先までどのように流れるかを示し、リクエストの各部分間の遅延を測定します。 ログは、開発者がデバッグを行い、アプリで起きてるイベントを追跡するのに役立ちます。 ログはトレーサビリティと組み合わせることができます。ログを中央に集約している場合、ツールを使用してログをフィルタリングし、トレースに関連するすべてのイベントを表示できます

はじめに 久しぶりです、ビクトルです 年末はどうでしょうか！サンタさんからたくさんお土産をもらいましたか？ 🎅 私、サンタさんが少し遅くなって、12月27日Google Cloud Developer認定試験をもら。。。受かりました。 あまり認定試験や面接のコードチャレンジなどは小学生のようにすごく苦手ですが、試験を受ける理由は。。。 G.I.Gプログラム 初めてG.I.Gと聞くと。。。昔のアメリカのアニメを思い思い出しました。 G.I.Gとは Google Cloud Innovators Gymというプログラムで、Google Cloud Platform (GCP)で他の会社の開発者とGoogleの人たちと一緒にGCPと勉強したり、新たなプロダクトを紹介したりしてみんなのクラウドスキルを上達するためです。 そして、弊社、HRBrainで参加させていただきました。（頑張ろう〜 😤）

はじめに ディレクトリ移動をするとNode.jsのバージョンを自動で切り替えてくれるバージョンマネージャーの存在って嬉しいですよね。 私はRust製のVoltaを使っているのですが…… 「Voltaでも.node-versionや.nvmrcを使ってNode.jsのバージョン切り替えがしたい！」 「でもチームメンバーはVoltaを使っていないのでpackage.jsonを汚染するのはいやだ！」 そう思ったことはありませんか？ しかし、以前からIssueに上がっている通り、残念ながらVoltaでは.node-versionを使ったバージョン切り替えに対応していません。 対応していないなら自分で対応してしまえ！！👊 ということで、chpwdを使って.node-versionや.nvmrcがあれば、VoltaでもNode.jsのバージョンが切り替わるようにしてみました。 chpwdを使って.n

はじめに Cloud Runのドキュメントに以下の記述があるのを見つけました。 ファイル システムへのアクセス 各コンテナ内のファイル システムは書き込み可能で、次の動作の影響を受けます。 これはインメモリ ファイル システムであるため、書き込みにはインスタンスのメモリが使用されます。 インスタンスが停止すると、ファイル システムに書き込まれたデータは保持されません。 出典: コンテナ ランタイムの契約 HTTP 500 / HTTP 503: コンテナ インスタンスがメモリの上限を超えている (...中略...) Cloud Run では、ローカル ファイル システムに書き込まれるファイルは使用可能なメモリにカウントされます。これには、/var/log/* と /dev/log 以外の場所に書き込まれるログファイルも含まれます。 出典: Cloud Run のトラブルシューティング この

はじめに JSONで表現されたデータをExcelファイルに変換したい場合に、ストリームで行うことでメモリ消費量を抑えることができます。 本記事ではサンプルコードを用いてその方法を紹介します。なおサンプルはGoで実装しています。 アプローチ JSONファイルからExcelファイルを作る際、以下のようなアプローチが考えられます。 JSONファイルを構造体としてメモリ上に読み込む 構造体をExcelファイルとして書き出す JSONをストリームで読み込む JSONファイルを読み込む際、JSON全体を一括で読み込むとそれだけのメモリを必要としてしまいます。一括ではなく部分的にストリームで読み込むことができれば、メモリ消費量を抑えられそうです。 json.Decoder.Decodeのドキュメントには次のように書かれています。 Decode reads the next JSON-encoded va

はじめに この記事は『Picture perfect images with the modern img element』という記事を参考に画像最適化に関しての重要な観点をまとめたものです。 画像はWEBにおいても重要な役割を担っており、2021年時点で1つ以上の画像を含むWEBサイトは95.9%、faviconなども含めて1回でも画像取得のリクエストを送信するWEBサイトは99.9%であるという調査もあります。 さらには、LCP要素の約70%が画像であるという調査が出ています。 Largest Contentful Paint（LCP）は、Googleが提唱するCore Web Vitalsの1つで、ウェブページのパフォーマンスを測る指標です。詳しくは次の章で解説します。 つまり、WEBのパフォーマンスにおいて画像の最適化は重要な観点でありユーザ体験に直結することがわかります。 画像最

はじめに こんにちは。夏休みは新潟からフェリーで北海道に行く予定を立てている@yug1224です。 最近はTwitterの突発的な仕様変更により、Twitter以外の分散型SNSも注目されるようになってきましたね。自分もちょうどBlueskyの招待コードをいただいたので登録して遊んでいます。 今回はGitHubでStarを付けたらBlueskyに投稿するプログラムを作ってみたので紹介します！ Blueskyとは？🤔 まずそもそもBlueskyとは何か？ BlueskyとはTwitterの創業者であるジャック・ドーシー氏が支援する分散型SNSであり、現在はプライベートベータ中のサービスですね。 今のBlueskyはIT系の人が多く、2010年前後のTwitterのような雰囲気もあり、個人的には居心地の良さを感じていますｗ ざっくりと知るならギズモードの記事がわかりやすいかなと思います。 B

はじめに この記事はDominikさんが執筆された「Thinking in React Query」を参考にReact Queryの考え方をまとめたものになります。DominikさんはTanStack Query（以下ではReact Queryと呼ぶ）のコアメンテナーであり、彼のブログからReact Queryについての知見を吸収することができます。 目次 React Queryはデータフェッチライブラリではない ではReact Queryとは何か？ Client StateとServer Stateの違い React Queryは非同期の状態（Server State）管理ライブラリである キャッシュを有効活用する React Queryのキャッシュについて staleTimeでキャッシュをコントロールする queryKeyを適切に設定する まとめ 🎆 React Queryはデータフ

はじめに 今回はECサイトを構築する開発において、Hydrogenというフレームワークが非常に強力だったため紹介します。HydrogenはRemixをベースとしたヘッドレスコマースのためのスタックです。「なぜRemix？」と思う方もいるかもしれませんが、2022年にShopifyがRemixを買収し、その連携を強固にしている背景からも今後Shopifyを用いたECサイトの開発ではRemixを使用する機会が多くなるのではないかと推測しています。 前提 今回はHydrogenで公式に提供されているdemo-storeというテンプレートを前提に解説します。というのも、このdemo-storeが非常に強力で、ECサイトの基盤をすでに構築してくれています。私もこのdemo-storeを拡張することで一つのECサイトを完成させることができました。その強みや、ディレクトリ構成については後に紹介します。

はじめに この記事は、Alan Alickovicさんの著書「React Application Architecture for Production」をまとめたものになります。Alanさんと言えばZennで最も人気のある記事「bulletproof-react」の作者であり、彼のprojectから学ぶことはとても多い印象です。 今回紹介する本は2023年1月に公開されたため、bulletproof-react以後のReactアプリケーションにおけるベストプラクティスの宝庫となっています。また、本で扱われているアプリケーションのProjectがGitHubで公開されていることから、Projectを眺めるだけでも勉強になる点があるかと思います。 想定読者 Reactのアーキテクチャを模索している方 テスト手法やCI/CDなどのアプリケーション設計に関心がある方 使用される技術と本の構成 言

はじめに 本記事ではOpenAPIからclientコードを自動生成するライブラリ『Orval』を紹介します。そしてOrvalの強みを明らかにし、どのような場合に選定するべきかを提案できたらと考えます。 いきなりですが簡潔に結論を述べます。 これはOrvalの作者自身がswagger codegenといった他の自動生成ライブラリに物足りなさを感じ、特定の技術の上で最適なコード生成をしたいというモチベーションが根底にあります。 Orvalとは？ 改めてOrvalはOpenAPIからclientコードを自動生成するライブラリです。（公式によると）その特徴は、大きく3つ挙げられます。 Productivity Save time to drink a 🍺, get your api ready out of the box in a few seconds. Prevent human erro

はじめに JavaScriptにおけるテストのベストプラクティスをまとめた「javascript-testing-best-practices」というGitHubレポジトリが大変勉強になったため、特に参考になった内容をまとめて共有したいと思います。 （補足）本レポジトリにはfrontendのみならずbackendのテストに関する情報もありますが、今回はfrontendに焦点を当てて共有します。そのため扱うSectionは以下の4つです。 Section 0: The Golden Rule Section 1: The Test Anatomy Section 3: Frontend Section 4: Measuring Tests Effectiveness 想定読者 フロントエンドの実装はできるが、テスト経験はない方 テストに対して解像度が低い方 これからテストを学びたいと思ってい

はじめに こんにちは。株式会社HRBrainでインターンをしている安井です。 この記事では今業務で採用しているReact Queryの特性を生かした設計を考察してまとめていきます。 本記事はHRBrain Advent Calendar 2022の24日目の記事です。 前提 本記事で使用するライブラリ等のversion React: v18.2.0 TypeScript: v4.9.3 React Query（TanStack Query）: v4.19.1 axios: v1.2.1 vite: v4.0.0 React Queryはv4から名前が変更されTanStack Queryとなりましたが、記事の中ではReact Queryと呼ぶこととします。 また、本記事で使用するコードは下記のレポジトリで公開しています。 React Queryとは React Query is often

こんにちは。株式会社HRBrainでフロントエンドエンジニアをしているしっぽくんです。 私たち HRBrain では週に1度30分、フロントエンドトークという「1週間の間に発見したフロントエンドに関するネタを共有もしくは相談する会」を社内で開催しています。 今回は公開第 8 回目です。過去の記事はこちら。 news Vue2.7 Release Vue2 系最後のマイナーバージョンである 2.7 がリリースしました。 Vue3 系からいくつかの機能がバックポートされました。 Composition API Composition API がサポート対象になるため、https://github.com/vuejs/composition-api をインポートしなくても良くなります。 SFC <script setup> Composition API がサポートされたことで利用可能に SFC

こんにちは。株式会社HRBrainでフロントエンドエンジニアをしているしっぽくんです。 私たち HRBrain では週に1度30分、フロントエンドトークという「1週間の間に発見したフロントエンドに関するネタを共有もしくは相談する会」を社内で開催しています。 先週はお休みでしたが、引き続き更新していきます。 今回は公開第 7 回目です。過去の記事はこちら。 news New in Chrome 103 HTTP 103 status code 103 - early hints HTTP のステータスコードに 103 が登場しました。 サーバーへリクエストする際に、ページ作成のレスポンスに時間がかかる場合にサーバー側から先に 103 のレスポンスを返すことができるようになりました。 これによりクライアント側で先にリソース(CSS, JS など)のロード対応ができるようになるため、全体的なペー

こんにちは。株式会社HRBrainでフロントエンドエンジニアをしているしっぽくんです。 私たち HRBrain では週に1度30分、フロントエンドトークという「1週間の間に発見したフロントエンドに関するネタを共有もしくは相談する会」を社内で開催しています。 今回は公開第 6 回目です。過去の記事はこちら。 news Announcing TypeScript 4.7 今週は先週に続き、TS4.7 の情報について深掘りをしていきました。 ECMAScript Module Support in Node.js 出来るようになったこと tsconfig の compilerOptions の module に node16 と nodenext が設定できるようになった それぞれ以下のようにトランスパイルできるようになった .ts → .js .cts → .cjs .mts → .mjs C

こんにちは。株式会社HRBrainでフロントエンドエンジニアをしているしっぽくんです。 私たち HRBrain では週に1度30分、フロントエンドトークという「1週間の間に発見したフロントエンドに関するネタを共有もしくは相談する会」を社内で開催しています。 今回は公開第 5 回目です。過去の記事はこちら。 news Safari 16 new feature Safari 16 beta が公開されました。 過去のフロントエンドトークでも議題にあげた「Container Query」「Subgrid」がついに Safari に実装されます。 詳細は以前のフロントエンドトークで書いているので気になる方はそちらの記事を参照してください。 また Chrome と同様に Grid Inspector も導入されるため、複雑な入子になったレイアウトに関しては今後 Grid Layout による実装が

こんにちは。株式会社HRBrainでフロントエンドエンジニアをしているしっぽくんです。 私たち HRBrain では週に1度30分、フロントエンドトークという「1週間の間に発見したフロントエンドに関するネタを共有もしくは相談する会」を社内で開催しています。 今回は公開第 4 回目です。過去の記事はこちら。 news React Spectrum May 31, 2022 Release Adobe のデザインシステムである React Spectrum のリリースノートが更新されました。 今回注目したポイントとして React v18 の対応 PR の内容です。 各種ライブラリのアップデートしつつ、完全に移行できない部分は自作されていたり[1]など参考になります。 React18 では Suspense やその他魅力的なアップデートも多くマイグレーション対応したいものの、必要な周辺ライブラ