この記事はアドベントカレンダー10日目の記事です。HRBrainのオウンドメディアサイト「HR大学」は、Next.js + Contentful（ヘッドレスCMS）で運用しています。https://www.hrbrain.jp/mediaオウンドメディアで多くの人に情報を届けるためには、スクリーンリーダー利用者やキーボード操作のみのユーザー、支援技術を使う方などへの配慮が不可欠です。アクセシビリティ対策は、社会的責任であるだけでなく、SEO向上やユーザビリティ改善、幅広い読者層へのリーチというビジネス的利点もあります。しかし、ヘッドレスCMSは従来型のWordPress等と根本的に...

みなさん！技術記事！書いてますか！私は！技術記事！書いてません！そんな形から入る三日坊主の私が形から入ってはまってしまったローカル記事執筆環境の中身をご照覧あれ。[1]私の最強リポジトリはこちらhttps://github.com/Ahoxa/zenn-contents 前提まずまず、大前提として、私はZenn CLI (zenn-cli) を使って記事を書いています。まだZenn CLIを使ってないよ〜って方は、公式ドキュメントを参考にセットアップしてください。https://zenn.dev/zenn/articles/install-zenn-clihttps:...

はじめにこんにちは、kenです。お仕事ではGoを書いています。突然ですが、みなさんはPRを出す前のセルフレビューの最中や実装作業中に、「あ、3つ前のコミットにtypoがあった...」とか「軽微な修正を1つ目のコミットに混ぜ込みたい...」と思ったことはありませんか？直前のコミットであればgit commit --amendで簡単に修正できますが、数コミット前のものとなると、git rebase -iで手動でコミットを編集して...と、なかなか面倒な作業になりますよね。しかし、git commit --fixup と git rebase --autosquash を組み合わせ...

この記事はアドベントカレンダー4日目の記事です🎄🎅HRBrain Advent Calendar 2025 はじめにこんにちは。HRBrainで学習管理サービス「HRBrain ラーニング」を開発している渡邉です。最近、動画コンテンツの配信機能をHLS（HTTP Live Streaming）で実装しました。「ライブラリを使えばすぐできるだろう」と思っていたら、Cookie認証が効かなかったり、状態管理で詰まったり。この記事では、そんな試行錯誤の末にたどり着いた「react-player」を使ったHLS動画プレーヤーの実装方法を紹介します。なお、この記事ではReactのフロン...

useState や useEffect と聞いてもみなさん鼻を鳴らすだけでしょう。しかし、ドキュメントの少し奥にある useId や useDeferredValue などのマイナー Hooksたちならどうでしょうか？玄人[1]たるもの、これらを知らずして日々のReactを語ることはできません。Major Versionが19になってからというもの、私もこれらHooksは見聞きするばかりでしっかりと理解していませんでしたが、この記事執筆によってさきっちょくらいはわかるようになりました。さあ、これであなたも玄人です。「Hooksたち」と銘打っておいて恐縮ですが、完全に私の独断と...

はじめにこんにちは、HRBrainバックエンドエンジニアをしているなかじです！現在担当しているプロダクトでは「ユーザーがPDFをアップロードできる」機能があります。PDFアップロード機能は基本的なユースケースでは安定稼働していますが、数百ページに及ぶようなPDFや高画質の大容量ファイルを扱うと、メモリ制限で処理が失敗していました。今後、規模が拡大する中で、より幅広い利用に耐えられる仕組みが必要になってくるため、今回改善を入れたのでそちらを紹介します。今回は、Cloud Profilerを使ってボトルネックを特定し、処理方式を改善した結果、大幅に性能が向上したので、その内容を...

はじめにこんにちは、HRBrainバックエンドエンジニアをしているなかじです！今回は、Cloud Storage + Eventarc + Cloud Run を使ったイベントドリブンなアーキテクチャをプロダクトで実装したので、その構成やうまくいかなかったポイントを記事にします！ イベント ドリブン アーキテクチャイベント ドリブン アーキテクチャは、マイクロサービスが状態変化（イベント）に対応するためのソフトウェア設計パターンです。イベントは、状態（アイテムの価格や配送先住所など）を伝える場合もあり、識別子（注文の受信または配送の通知など）となる場合もあります。イベン...

はじめにこんにちは、kenです。お仕事では Go をよく書きます。Go言語で開発を進めていると、プロジェクトの成長に伴ってパッケージ名を変更したくなることってありますよね。ただ手動でパッケージ名を変更すると、依存関係の修正漏れや置換ミスによるコンパイルエラーなどが発生することがあります。そこで今回は、Goの公式ツールであるgomvpkgを使って、安全かつ効率的にパッケージ名を変更する方法を紹介します。 gomvpkgとはgomvpkgは、Goのパッケージ名を安全に変更するためのツールです。このツールは、パッケージ名の変更に伴う影響をプロジェクト全体にわたって自動的に反...

はじめにこんにちは、ken です。お仕事では Go を書いています。突然ですが、みなさんはGoで構造体を初期化するときにフィールド名を指定していますか？Go では構造体を初期化する際に、フィールド名を指定せずに値だけを渡すことができます。これはunkeyed literalsと呼ばれているみたいです。type Point struct { X, Y float64}// unkeyed literalsによる初期化p := Point{1, 2}// フィールド名を指定した初期化q := Point{X: 1, Y: 2}フィールド名を指定しないこの...

はじめにこんにちは！HRBrainでエンジニアをしている鈴木（善）です。みなさん、開発環境はどのように整えていますか？HRBrainでは、エンジニアが自由に使え、壊しても問題のない開発環境を用意しています。以前は各自のPC上で環境を立ち上げていましたが、PCのリソースを圧迫する問題が無視できなくなり、リモートマシン上でも開発できるように改善しました。運用を始めて1年ほど経ち、課題はあるものの、安定した運用ができています。本記事では以下について紹介します！開発環境の概要なぜ、どのように構築したのかそこから得られた知見ざっくりまとめると次のような内容です。ローカ...

はじめにこんにちは、kenです。 2025年が始まりましたね！ 今年はより一層発信に力を入れていきたいと思います。さて、今回はgo-ruleguardというツールを使ってオリジナルのGoのlinterを作る方法をご紹介します。オリジナルのlinterの作成は難しいイメージがありましたが、このツールを使えば驚くほど簡単に自前のlinterを作れることがわかったので、簡単なlinterを作成しつつその便利さを紹介できればと思います。 go-ruleguardとはgo-ruleguardは、Goのコードを解析し、ユーザーが定義したルールに違反しているコードがないかを検出する静的...

はじめにこんにちは、こんばんわ、新卒一年目のなかじです〜💪sqlxからsqlcに移行し半月ほど経ったので、記事にしようと思います！（PostgreSQLを使用しており、ドライバはpgx/v5を使っています！） 対象読者sqlcに興味がある方これからsqlc を導入してみようと考えている方 sqlcについてsqlcは、SQLファイルからデータベースにアクセスできる型安全なGoのコードを生成するライブラリです。従来のGoのコードでは、SQLクエリの手動マッピングや構造体タグの記述、ランタイムで発生するエラーに悩みがあり、そこを楽するためにSQLのクエリをコンパイ...

はじめにこんにちは！バックエンドとプラットフォームエンジニアのビクトルです。この記事では、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)で他...

はじめにディレクトリ移動をするとNode.jsのバージョンを自動で切り替えてくれるバージョンマネージャーの存在って嬉しいですよね。私はRust製のVoltaを使っているのですが……「Voltaでも.node-versionや.nvmrcを使ってNode.jsのバージョン切り替えがしたい！」「でもチームメンバーはVoltaを使っていないのでpackage.jsonを汚染するのはいやだ！」そう思ったことはありませんか？https://github.com/volta-cli/volta/issues/282https://github.com/volta-cli/volta...

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

はじめにこの記事は『Picture perfect images with the modern img element』という記事を参考に画像最適化に関しての重要な観点をまとめたものです。https://stackoverflow.blog/2022/12/27/picture-perfect-images-with-the-modern-element/画像はWEBにおいても重要な役割を担っており、2021年時点で1つ以上の画像を含むWEBサイトは95.9%、faviconなども含めて1回でも画像取得のリクエストを送信するWEBサイトは99.9%であるという調査もあります。...

はじめにこんにちは。夏休みは新潟からフェリーで北海道に行く予定を立てている@yug1224です。最近はTwitterの突発的な仕様変更により、Twitter以外の分散型SNSも注目されるようになってきましたね。自分もちょうどBlueskyの招待コードをいただいたので登録して遊んでいます。今回はGitHubでStarを付けたらBlueskyに投稿するプログラムを作ってみたので紹介します！ Blueskyとは？🤔まずそもそもBlueskyとは何か？BlueskyとはTwitterの創業者であるジャック・ドーシー氏が支援する分散型SNSであり、現在はプライベートベータ中のサ...

はじめにこの記事はDominikさんが執筆された「Thinking in React Query」を参考にReact Queryの考え方をまとめたものになります。DominikさんはTanStack Query（以下ではReact Queryと呼ぶ）のコアメンテナーであり、彼のブログからReact Queryについての知見を吸収することができます。https://tkdodo.eu/blog 目次React QueryはデータフェッチライブラリではないではReact Queryとは何か？Client StateとServer Stateの違いReact Query...

はじめにこの記事は、Alan Alickovicさんの著書「React Application Architecture for Production」をまとめたものになります。Alanさんと言えばZennで最も人気のある記事「bulletproof-react」の作者であり、彼のprojectから学ぶことはとても多い印象です。https://zenn.dev/manalink_dev/articles/bulletproof-react-is-best-architecture今回紹介する本は2023年1月に公開されたため、bulletproof-react以後のReactア...