はてなブックマーク

はじめに おはこんばんちは。 Offers と、Offers MGR を運営している株式会社 overflow のバックエンドエンジニアばばです。 Web サービスを開発している皆様であれば、高度なデータ処理の大変さ・つらさを味わったことはあるかと思います。 たとえば グラフ用データを作成するには、API からデータ取得が終わった後に、DWH で集計して、その後バッチ処理かけてごにょごにょ 想定してたよりデータ量が多くて、許容時間内に処理が終わらないー あの API 、 Rate Limit 厳しいからから並列数制御しないといつまでたっても取得がおわらない・・・ など、悩みはつきません[1]。 上記の悩みが、開発効率性を落とし、技術的負債となってきていることから、Workflow Engine (タスクの実行順序など業務プロセスを自動で管理するソフトウエア) を導入しようという話がチーム内

Offers を運営している株式会社 overflow の あほむ でございます。 本記事は Chrome Platform Status からなんとなく Proposed/In Development etc なステータスのフィーチャーを取り上げて、そのプロポーザルを眺めてみるシリーズです。前回は form-sizing field-sizing CSS property でした。 SPA 的な画面遷移を性能計測したい 今回は Soft Navigations Performance Entry を眺めてみます。本当に眺めるだけで深入りしないので概要のみのライトな記事とご認識ください。 SPA 的な画面遷移とはつまり History.pushState や History.replaceState を用いた JavaScript 駆動なナビゲーションを指します。このような遷移を指してここ

まずは長いものに巻かれたいときもある Offers を運営している株式会社 overflow の あほむ でございます。 先日 コードベースのディレクトリ構成にフォーカスした記事 を公開した関連記事として、Next.js App Router をどのように取り扱っているかについてご紹介します。 【AD?】今回の記事の内容を含んだり含まなかったりすると思いますが、来週 2024/01/17(水) 19:20 〜 オンライン開催の PWA Night vol.59 で発表予定なので興味のある方はぜひ。（終了済み） 下記は本記事の内容を含むイベント発表資料です。ご参考までに。 今回の前提 前回記事 の引用ですが今回も同様です。 最終目標は単体事業でありつつ実質マルチプロダクトな画面群のリプレース クライアントサイドでヘビーなビジネスロジックを持つ必要がない アプリケーション特性としては SaaS

概要 こんにちは、Offers を運営している株式会社 overflow でフロントエンドのテックリードをしている Kazuya です。今回は、筆者が担当しているプロダクト「Offers MGR(オファーズマネージャー) 」で採用しているディレクトリ構成の一部について書かせていただきます。 後述しますが、「Offers MGR」では求められる要件が複雑且つ通信で取得する情報量が膨大であることからAPI関連のディレクトリ構成もやや特殊なものになっています。ベースは以前こちらの記事で紹介した「Viewsレイヤー」を拡張させる形になっています。 専用構成になっている感があるため、参考になるかは分かりませんが、ぜひ最後まで読んでいただけると幸いです。 Offersのディレクトリ構成はこちら 弊社フロントエンドのボスであるAhomu先生が担当されているOffers側のディレクトリ構成は以下の記事をご

こんにちは！ Offers, Offers MGR を運営している株式会社 overflow 所属、エンジニアの藤井です。 最近、既存機能のリプレースのため頻繁にデプロイ作業を繰り返していたのですが、Docker ビルドの時間が長くてイライラしていました。 Docker イメージのサイズは可能なかぎり最小を保つべきですが、それでも追加開発を繰り返せばギガバイト単位になってしまうことも珍しくはありません。 そうなると、Docker ビルドにかかる時間も長くなり、開発効率が落ちてしまいます。 そこで今回は、git-log を上手に使って無駄な Docker ビルドを回避する方法をご紹介します。 その前に、まずは Docker タグの戦略について考えていきます。 Dockerタグの戦略について Microsoft のドキュメント "Recommendations for tagging and

Offers を運営している株式会社 overflow の あほむ でございます。暖冬と言われつつもすっかり寒い季節ですね。おかげさまで割と走っているほうの師です。（師走） n 年ぶり n 回目の Web フロントエンド 最後にメイン開発者の立場でコードをスクラッチしたのいつだったっけ？と遡ると 2018年ごろのブログ記事 がでてきました💀 実際には 2017 年から 2018 年にかけての作品ですかね。当時の構想から読み取れる重厚かつ自己表現の感に内心苦笑いしつつ久々の新規建立です。 今回はディレクトリ構造の面から紹介していきます。 推しディレクトリの先達たち 推しディレクトリという言葉に乗っかってみたものの、ゴメンそこまでの熱感は持っていないかもしれない🥺 とはいえ先達の記事もご紹介しておきます。 今回の前提 本稿において、これらの前提に依存した論はほとんど含まれない認識ですが一応

はじめに こんにちは。 プロダクト開発人材の副業転職プラットフォーム Offers を運営する株式会社 overflow のエンジニアばばです。 2023 年 1 月に中途入社としてジョインいたしました。 前職では不動産テックのエンジニアとして、データの各種エンジニアリング（クローリング、取り込み、集計処理）や機械学習ロジックのサービスへの組み込みを行っておりました。 overflow では、先日オープンβ版を発表いたしましたプロダクト開発支援組織の生産性最大化を支援するサービスである「Offers MGR」の開発を担当しております。 一見まったく別のプロダクトに見えますが、やっていることは案外共通点があり興味深く毎日開発をしています。 ただ、いまだジョインしたて業務に直結したことを書くネタはないので、Ruby on Rails(以下 Rails)のバッチ処理の概要をまとめてようとおもいま

こんにちは! 副業転職プラットフォーム Offers を運営している 株式会社overflow で主にフロントエンドエンジニアをしております、さわ(@hacksaw_a_)です! 私は自称 Notion 芸人マスターなのですが、アジャイル開発でのタスク管理を Notion でやるのがけっこう苦になってきた今日このごろです。 今回は Notion からタスク管理の移行を考えて Linear を使ってみたのでその感想を共有します! 公式の "Get Started" 進めてみる ※気になった点以外は割愛します ※最後に Pros/Cons ポイントをまとめてます🏃‍♂️💨 Github連携 目玉でしょうからもちろん連携しておきます コードの読み込み権限は不要(だから安心してね! ってことですね) 個人・組織(Organization)共に連携可能 どのリポジトリを連携するかの設定可能(全リ

実はOffersMGRでもDatadog Synthetic Test を用いてテストを行っていました。 しかし、シナリオが2つしか無くカバー範囲も狭く、デグレが起こっても検知出来ない状況でした。 今回のPlaywrightを使ったE2Eテストの導入では既存シナリオの移行とOffersMGRの全ページが健全に動作しているかのチェックを目的としました。 今後を見据えた設計と運用 BtoCももちろんですが、BtoBのプロダクトは特に成長していくとともに安定したサービス提供が求められるのでテストの重要度は高くなります。 そのため、E2Eテストや結合テストの拡充は必然的に実施していくことになります。 一応、特定のComponentに対象を絞る事によってE2Eテストでも結合テストが出来ます。 しかし、E2Eテストは結合テストと比べ実行速度が遅く、最終的なテスト量はE2Eテスト < 結合テストが理想で

概要 こんにちは、Offers を運営している株式会社 overflow でフロントエンドのテックリードをしている Kazuya です。今回は、筆者が担当しているプロダクト「Offers MGR(オファーズマネージャー) 」で先日実装した多言語対応について書かせていただきます。 近年はプロダクトがグローバル化していくケースが増加しており、それに伴い、WEBアプリケーションも英語や中国語をはじめとした複数言語のサポートをする必要がでてきていると思います。ただ、多言語化は実装する現場からするとやることが漠然としており、どのように進めればよいのか、構成はどのようにすればいいのかなど、多言語化をする際に考慮すべきことが多くあり、なかなか実行に移すのは難しいです。（筆者も右往左往していました） そこで今回は、新規プロダクト開発で実際に実装してみて得た知見をベースに多言語化の構成やポイントなどを紹介し

Velocity（ベロシティ）とは、スプリントの期間内で完了できたタスクのストーリーポイントの合計値です。ストーリーポイントとは、タスクの規模感を示す数値になります。（この概念に筆者はだいぶ苦労しました。後半でどう突破したか説明します。） 極端に示すと、Velocity の最小・最大幅で見たときに 2.7 倍(約 3 倍とさせてください w)の Velocity 向上となりました。[1] スクラムを実施しているチーム構成 まず、上記の実績を出したチーム構成は以下です。本来のスクラムではマーケ人員はあまり登場しないイメージがありますが、弊社の場合はプロダクト開発の進捗によって日々のマーケターの動きに影響するケースがあるため、参加してもらっています。 スクラムマスター(1 人) ※筆者がエンジニアと兼業している PdM(1 人) デザイナー(1 人) エンジニア(2 人) マーケ(1 人) 私

はじめに こんにちは。 プロダクト開発組織・人材を対象に、開発パフォーマンス・生産性の最大化インフラ Offers MGR と副業転職プラットフォーム Offersを運営する株式会社 overflow のエンジニアの藤井です。 みなさま、実装の前にきちんと設計のドキュメントを作成していますでしょうか？ 昔、私が働いていた大手 SIer の現場では、 ・・・といったように、じつに事細かな設計工程が組まれておりました。 しかし事業会社の開発組織で、このような工程を採用している現場は稀でしょう。 特にスタートアップの、ごく少人数でビルド＆スクラップを繰り返す製品のローンチ段階では、"<b>実装こそ仕様！　ドキュメントなどない！</b>"というストロングスタイルが必要だったりします。 そのため、その後もドキュメントを残す文化が根付きづらい、という話もよく聞きます。 (その点、弊社はドキュメンテーシ

はじめに こんにちは！ プロダクト開発人材の副業転職プラットフォーム Offers を運営する株式会社 overflow で Offers のフロントエンドを開発している fumiya です。 この記事では、ChatGPT API gpt-3.5-turbo（以下、ChatGPT API）と DeepL API を組み合わせて、 ChatGPT API の回答の精度を上げる方法について説明します。 また、トークン使用数が減ることになるので ChatGPT API の実行にかかる料金を低く抑えることも出来るかもしれません。 背景 現在、日本語圏で ChatGPT API を利用する場合にまだ課題があると考えています。 課題 英語の方が日本語よりも ChatGPT の精度が高い このことは実際に両方の言語を使い比べると納得していただけるかと思います。 別観点ではそもそも ChatGPT を開発

Offers を運営している株式会社 overflow の あほむ でございます。 猫も杓子も ChatGPT 先日、話題の ChatGPT が API で公開されたことによって、様々な既存処理との統合が容易になりました。プログラミングを嗜める層からすると Web UI と比べると一気に "遊びやすく" なったのではないでしょうか。 多聞に漏れずわたくしも HTTP で叩けるならばとウキウキで ChatGPT API を叩いて遊んでおりました。 gpt-3.5-turbo まじでレスポンス早いので良いですね。 API Example OpenAI に登録後 API Key を取得して Top-Level Await をサポートする JavaScript 実行環境で下記を叩けばすぐ試せます。手っ取り早いのは Web ブラウザの DevTools の Console にコピペして実行することで

こんにちは、プロダクト開発人材の副業転職プラットフォーム Offers を運営する株式会社 overflow CTO の大谷旅人です。 昨今は登壇やらモデレーターやら、サービス開発やら、次男の中学受験やら、猫ちゃん飼育やらで何かとせわしなく時が過ぎる毎日です。 というわけで、2023 年 2 月 9 日に開催された Developers Summit 2023 で登壇してきましたので、その様子をご紹介します。 Developers Summit 2023 発表内容 弊社 overflow は、副業転職プラットフォーム Offers の開発、運用をしています。 サービス開始してから 3 年、その前も含めると 6 年の組織運用の中で起きたことをベースに 定量評価は、組織が疲弊する (用法、用量をまもらないと) というテーマで開発生産性についてお話をしました。 組織の成長に伴い、どのように定量評

はじめに こんにちは。 プロダクト開発人材の副業転職プラットフォーム Offers を運営する株式会社 overflow のエンジニアの藤井です。 人とのコミュニーケーションは、本当に難しいですよね。 私もエンジニアの仕事を始めて 20 年ほどが過ぎ、前より少しはプログラミングが上手になったと思えるようになりましたが、 人とのコミュニーケーションについては未だ悩みの種がつきません。 エンジニアという職業を選択した以上、大抵いつかは専門領域の異なるステークホルダー(上司、同僚、顧客など)と協同していく場面が訪れます。 ですが、こういった場面でのコミュニーケーションに一定の苦手意識を覚えるエンジニアの方が多いのではないでしょうか？ たとえば何かを他人に説明しなければならないとき、以下のように感じたことは誰にでもあるはずです。 説明しても、なかなか相手にわかってもらえない。 そもそも、どのように

はじめに こんにちは！ プロダクト開発人材の副業転職プラットフォーム Offers を運営する株式会社 overflow で Offers のフロントエンドを開発している fumiya です。 前回たくさん記事を書くことを宣言したものの、会社のテックブログに載るという重圧からなかなかテック記事を書けずにいました。 今回は、会社のテックブログに載ることを前提にして、自分なりにどういった内容であれば納得して公開できるかということを考えていきたいと思います。 本文へ入る前になぜ私は重圧を感じているのかを整理しておきます。 同じような悩みを持っている方の役立つ内容になっていれば嬉しいです。 私はなぜテックブログを書けないのか 先程重圧と書きましたが一体何が重圧なのでしょうか？ 私は自分がテック記事を書く時に、公式ドキュメントやネットに公開されているテック記事と似たような内容を似たようなレベルで書き

はじめに こんにちは! 副業転職プラットフォーム Offers を運営している株式会社 overflow でバックエンドエンジニアをしております、さわ(@hacksaw_a_)です! 今回は(完全主観で)あまり知られて無さそうな VScode snippets のおすすめ機能を紹介していきます! ※おことわり snippets 機能自体にあまりなじみがない方への説明などは、他の方の記事がたくさんありますので今回の記事では割愛させていただきます! VScode snippets のおすすめ機能 Tabstops ($1, $2, ...) でTabを押した時のカーソルの移動位置を指定 参考 VScode 本家記事 これはスニペットファイルを作成した際にサンプルとして載っているので使われている方が多いのではないでしょうか。 これを指定するかしないかでだいぶスニペットの使い心地が変わりますよね!

はじめに こんにちは！ プロダクト開発人材の副業転職プラットフォーム Offers を運営する株式会社 overflow で Offers のフロントエンドを開発している fumiya です。 2023 年は記事をたくさん書こうと思っています。 この記事はこれまで Emotion を使ってきた私が、現在のプロジェクトで CSS Modules を使うようになって感じているそれぞれの使っていて良いなと思った点をまとめた記事になります。 比較する開発環境について 前の会社で経験した Emotion の環境と現在の CSS Modules を使った環境について説明します。 掲載しているコードは雰囲気を感じてもらえる程度のものを作りました。 以前の環境（Emotion） これまでやってきたプロジェクトでは Emotion を使用していました。 また、String Styles の形式を採用していま

こんにちは、Offers を運営している株式会社 overflow のバックエンドエンジニアの shun です。今回は、Datadog Synthetic Test を使った E2E テストをコードベースに移行した話ができればと思います。ちなみに、過去に Datadog Synthetics Test 周りの記事を書いていたので合わせてご覧いただけると幸いです。 Datadog Synthetics Test 導入フロー | Offers Tech Blog Datadog SyntheticsのSubtestでブラウザテストをComponent化する｜Offers Tech Blog なぜコードベースにしたか 元々 Datadog Synthetic Test を用いていたのですが、運用するにつれて以下の問題点が発生してきましたのでコードベースに移行する決意をしました。特に問題を感じてい

Offers を運営している株式会社 overflow の あほむ でございます。 本記事は Chrome Platform Status からなんとなく Proposed なステータスのフィーチャーを取り上げて、そのプロポーザルを眺めてみるシリーズです。前回は Capability Delegation でした。 Control UI Customization 今回は Feature: Customizable <select> Element を眺めてみます。本当に眺めるだけで深入りしないので概要のみのライトな記事とご認識ください。 Open UI 方面からの提案 以前紹介した CSS Anchored Positioning と同じく MicrosoftEdge/MSEdgeExplainers に提案書があります。Author の所属も多くが Microsoft 社であり、半数は

はじめに こんにちは。 プロダクト開発人材の副業転職プラットフォーム Offers を運営する株式会社 overflow のエンジニアの藤井です。 エンジニアであれば誰しも日頃からコードレビューをしたり、されたりしていることと思います。 健全な開発組織を育む意味でもレビューの文化を根付かせることはとても大切ですが、小規模な組織の場合「レビューアが足りない」という問題が往々にして起こり得ます。 もちろん、特定のエンジニアにコードレビューが集中してしまうのを防ぐために、チーム全体で負荷分散を図るのが本質的かつ王道的なアプローチではあります。 しかしときには、とにかく個人の力で乗り越える、という状況も避けられないでしょう。 そこで今回はコードレビューの生産性を上げるための Tips をいくつかご紹介します。 自分でも開発をしなければならないが、その片手間で一日に何本ものプルリクエストを確認しなけ

Offers を運営している株式会社 overflow の あほむ でございます。師走ですね。めまぐるしい毎日ではございますが、戯言シリーズの新刊が出る との情報で吃驚の限りです。 当 Offers Tech Blog は週 2 回の更新を目標に 2022 年 4 月〜9 月にかけて完走を果たしました。いつもご覧いただいている読者の皆さまはもちろん、プラットフォームとして利用させてもらっている zenn 運営の各位もありがとうございます！ かに🦀 にく🥩 さけ🍻 こちらはテックブログ半期完走の慰労会を催した様子です。いえーい 👏👏👏 ※ 自分で写真を撮り忘れていたので参加メンバーのフォトライブラリから拝借しました 社内の各位におかれましては、新しい仲間も交えつつ引き続き執筆がんばりましょう🍻 弊社のテックブログ運営におけるポイント さて「テックブログ運営がうまくいかない！」と

Offers を運営している株式会社 overflow の あほむ でございます。今回も Web の仕様を眺めるシリーズ をお休みしてお送りしております。 開発組織の体制変更によって実現したいこと 今回は弊社内において Offers 事業を中心とした全体的な体制変更があったので、関連して開発組織の近況をポエム綴ります。ポエム続きで申し訳ない...。 実感できる変化を起こすこと 大上段の目的を伝えるのはもちろんとして組織的に「あ、潮目が変わったな」と中の人たちが実感を得られることが重要です。組織自体が変化する/したことを認識することは、「自分に求められている変化はなんだろう？」と個々人に健全な緊張感をもたらし全体に変化を行き渡らせることに繋がります。[1] Dynamic Capability という経営論にも通じる部分があり、変化を察知して、自分たちのリソースを再整理し、実際に自らを変革す

概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、CSS modules の型を生成する方法について紹介します。 デフォルトの状態では、tsx(React)内で import した CSS は型が付与されないため、やや保守性に欠けるところがあります。今回は CSS を TypeScript の世界に取り入れて型に守られた世界を目指していきたいと考えていますので、ぜひ最後までご付き合いください。 関連記事 はじめに 本記事では、CSS modules の型を生成する方法を React ベースで紹介します。基本的に他のフレームワークや言語でも活用できますが、チームメンバーのスキルアセット、要件定義など様々な要因で紹介する内容とマッチしない場合があります。今回は設計の一例である

はじめに こんにちは!! プロダクト開発人材の副業転職プラットフォーム Offers を運営する株式会社 overflow 普通のバックエンドエンジニアの takkun7171 でございます。 最近 netflix で サイバーパンク エッジランナー を見て、やっぱりサイバーパンクいいなあと思って、PS5 のサイバーパンク 2077 を衝動買いしました w まああんなディストピアで幸せに生きていける気がしないけどね w tRPCとは こちらの記事で紹介されているのですが、 Theo 氏が提唱した最近話題の T3 Stac という技術スタックがあります。 この中の1つとして紹介されている tRPC が、 これから流行るかもしれない BFF フレームワークです。 何が良いの？ next.js の素の API よりも、TypeScript との親和性が高く、 型安全な API 開発が可能です。(

Offers を運営している株式会社 overflow の あほむ でございます。 10年越しのWebフロントエンド 最近更新していない 自分のブログ を遡ると「フロントエンド」という語の初出は 2010 年であり、転職のタイミングで自らを「Web フロントエンドエンジニア」と定義したのは 2012 年の頃でした。 それから 10 年、自分語りとして記憶をたぐることの老害仕草たるやですが、今回はそのノリのまま表題の通り Web フロントエンドという職種界隈についての考えを述べてみます。 Webフロントエンドとは一体... 先日、TechFeed Experts Night#4 〜 フロントエンドアーキテクチャを語る でお話しする機会をいただいたので改めて自分の中の Web フロントエンドを言語化してみました。 イベント資料 より抜粋 いくら抽象化しても原則としては全てが HTML で表現さ

こんにちは、Offers を運営している株式会社 overflow のバックエンドエンジニアの shun です。今回は n 番煎じにはなりますが、OGP 画像の生成方法について書きたいと思います。 OGPとは OGP とは「Open Graph Protcol」の略で、Facebook や Twitter などの SNS でシェアした際に、設定した WEB ページのタイトルやイメージ画像、詳細などを正しく伝えるための html 要素です。 OGPとは？設定するべき理由と設定方法について の記事参照 RMagickとは README にもあるように、Ruby と画像処理ライブラリ ImageMagick の間のインターフェースです。Ruby を使って画像生成・リサイズ・合成などができるものです。 なぜRMagickを使うのか ユーザやその他の情報によって変化しない画像生成であれば 1 枚いい