はてなブックマーク

はじめに こちらは バイセルテクノロジーズ Advent Calendar 2024 の19日目の記事です。 昨日は本田さんによる運用工数を抑えつつ安定稼働を実現するための工夫でした。 こんにちは。テクノロジー戦略本部開発1部でフロントエンドリードエンジニアをしている辻岡です。 私たちのチームは、もともとスクラムを用いて開発をしていました。しかし、プロジェクトのデリバリーを優先する必要が生じたため、開発体制を見直すことになりました。本記事では、開発スピードを向上させるための新しい体制への移行プロセスと、その過程での懸念、そしてそれらに対する対策について詳しく解説します。 はじめに スクラムを導入した目的・背景 スクラムをやめるきっかけ デリバリーを早くするための品質調整 一機能一チーム制 スクラムイベントの変更・廃止 リファインメント プランニング デイリー エンジニアデイリー スプリント

はじめに この記事は バイセルテクノロジーズ Advent Calendar 2024の10日目の記事です。 こんにちは。開発1部の鴨野です。 前日の記事は私、鴨野の「【13分→4分】開発効率向上のためのCloud Buildデプロイ速度改善」でした。 現在はバックエンドエンジニアとして、リユースプラットフォーム「Cosmos」の出張訪問買取アプリケーション「Visit」の開発に携わっています。 今回は、Visitチームで課題となっていた障害対応や問い合わせ対応を改善するために実装したカスタムロガーについてご紹介します。 作成したロガーは、実際に利用する際のサンプルとともに公開しています。なお、この記事で使用したサンプルコードは以下のリポジトリから抜粋したものです。 github.com はじめに なぜカスタムロガーを実装したのか ロガーが満たすべき要件 前提: Visitアプリケーション

こちらはバイセルテクノロジーズ Advent Calendar 2024の1日目の記事です。 こんにちは、開発２部でテックリードをしている早瀬です。普段はリユースプラットフォームのEC出品管理システムの開発を行っています。 私のチームでは、EC出品管理システム（通称EXS）の開発を行なっており、3年間に及ぶ開発の末に今年の9月にローンチされました。 私はプロダクトの立ち上げ時から参画しており、開発初期の技術選定から関わってきました。 長期に及ぶ開発の末に、ついにローンチされたので、今回はそのプロダクトの技術選定についての振り返りを紹介したいと思います！ 記事のボリュームもかなりあるので、興味のある箇所だけでも読んでいただけると嬉しいです。 プロダクトの概要 プロダクト特性 技術構成 技術選定の振り返り マッチしたもの Go 学習コストの低さ 開発速度の向上 CLIとの親和性 GraphQL

はじめに こんにちは、株式会社BuySell Technologies テクノロジー戦略本部 開発3部 Tech MK グループ（テックマーケティンググループ）の土屋です。 私は今年の8月1日から入社し、グループ会社である「株式会社タイムレス」の専属エンジニアとして、Webサイト制作全般を担当しております。 私が入社するまで、一部の運営サイトは前任者に委ねられていました。 しかし、私が入社したタイミングでは前任者の方は既に退職しており、手探りの中、Tech MK グループのメンバーによって保守・運用されている状況でした。 一人のエンジニアに依存していた状況を、チーム全体で効率的に運用できるようにすることが課題だったため、 属人化したWebサイト運用の問題を解消し、誰でも対応できる標準化された仕組みをこの3ヶ月間構築してきました。 はじめに 理想と現状 問題(1)：作業者によって環境が違うた

はじめに こんにちは！ テクノロジー戦略本部24年新卒の高橋です。 2023年の10月から内定者インターンを経験し、現在は開発3部CRMチームでフロントエンド(以後、FE)エンジニアとして働いております。 チーム内でFEの状態管理ライブラリを選定する機会があり、調査していく中で得た知見を共有したく、執筆に至りました。 少しでも状態管理ライブラリの選定に困っているFEエンジニアの参考になればと考えています。 はじめに 概要 前提 課題感 Context APIの思想とのズレ Context APIの記述量の多さ 状態管理ライブラリに求める要素 小さい単位で取り扱い可能 ボイラーテンプレートが少なく、APIが直感的で書き方の自由度が高くない 軽量 Reactアプリケーション内外での状態管理が可能 最終決定 検討候補 Redux Zustand Jotai Valtio 評価表 移行設計 既存C

はじめに こんにちは！ テクノロジー戦略本部 開発1部の中舘です。 私は今年の4月に新卒で入社し、現在は出張訪問買取システム「Visit」の開発・運用をしています。 本記事では、プロダクト開発研修後に配属されたVisitチームでリリースに立ち会ってから現在に至るまでの期間の話をしたいと思います。 Visitチームで使うプログラミング言語やアーキテクチャは初学で、出張訪問買取の業務知識もありませんでした。 そんな私が、リリース当時何をしていたのか、現在どのような業務に携わっているのかをお話しします。 この記事が少しでも多くの若手エンジニアに勇気を与えることができれば嬉しいです。 はじめに 配属当時の状況 未経験からのキャッチアップ方法 Go言語の勉強 アーキテクチャについての勉強 ミーティングや現場見学などへの参加 成長を後押しする環境 メンターからのレビュー 情報共有の文化 チームの温かい

こんにちは。テクノロジー戦略本部 開発三部の今井です。 私は現在、顧客対応・SFAシステム（以下、CRM）のバックエンド・インフラ領域の開発に携わっています。 本記事では、CRMのバックエンドアプリケーションにDDDやオニオンアーキテクチャを導入した経緯や設計などについて紹介します。 CRMの背景・目的 既存システムへのデータ連携が必要となるアーキテクチャ CRMのバックエンド開発における課題 リプレイスを見据えてDDDとオニオンアーキテクチャを採用 なぜDDDとオニオンアーキテクチャなのか そもそもCRMの「ドメイン」とは何か 最後に CRMの背景・目的 バイセルではDXの取り組みのひとつとして、さらに多様な買取・販売チャネルに対応し、買取から販売まで一気通貫してデータを管理・活用する「バイセルリユースプラットフォーム Cosmos」（以下、Cosmos）の開発を進めています。 2023

こんにちは〜！ テクノロジー戦略本部 開発3部 部長のMJ(@mj3880)です。僕のことは入社エントリをどうぞ！ 開発3部では、バイセルの買取業務全般に関する既存基幹システム「GYRO」の運用や、リユースプラットフォーム「Cosmos」における顧客管理システム「CRM」、出張訪問買取システム「Visit」、買取管理システム「Deal」の開発と運用を行っています。 僕はそれらの統括に加え、VisitとDealの開発チームのエンジニアリングマネージャー（EM）も兼任しております。 GYROとCRMは現在リリース済みで運用中ですが、VisitとDealは2024年内のリリースに向けて鋭意開発中です。 今回は、まだ道半ばではありますが、VisitとDealの発足からアーキテクチャや技術選定(主にバックエンド)の推進にあたり、EMとして携わったこと・注視したことなどを、リリース前の振り返りも兼ねて

はじめに こんにちは！ 2023 年 5 月にエンジニアとして入社したテクノロジー戦略本部 開発 3 部の辻岡です。 私は入社してから、顧客対応・SFA システム（以下、CRM）のフロントエンドの設計・開発に携わっています。 現在 CRM チームではフロントエンドのテストを書くことが当たり前になっています。 しかし、私が入社した当時は、キックオフからリリースまでの時間が限られていたことや、メンバーのフロントエンドテストに対する理解も高くなかったことから、フロントエンドのテストは書かれていませんでした。 今回の記事では、このような状況を改善し、テストを書く文化を醸成する過程で行った取り組みを紹介します。 はじめに なぜテストを書くのか 仕様を明確にするため リグレッションを検知するため テストを書く上での課題 やったこと 開発者がビジュアルリグレッションテスト（以下 VRT）を意識しないで済

こんにちは、株式会社BuySell Technologiesの吉森(@molmolken)です。 私は今年の1月にバイセルに入社し、所属しているCTO室で技術広報をメインに担当しています。 バイセルについて バイセルは総合リユース事業の会社です。 「人を超え、時を超え、たいせつなものをつなぐ架け橋となる。」をミッションとし、買取から販売まで幅広い商材を扱っています。 技術広報の取り組みの1つとして、本ブログ(バイセル Tech Blog) の運営があります。具体的には、執筆者への打診、スケジュール管理、壁打ちの実施、記事のレビューなどを行っています。 この記事では、バイセルのテックブログで品質を重視していること、そして品質を担保するための取り組みについて紹介します。 バイセルについて 2023年の実績 ブログ記事の品質について 読者に価値を提供できる バイセルの事業やプロダクトに関係してい

※こちらはバイセルテクノロジーズ Advent Calendar 2023の11日目の記事です。 前回の記事は、神保さんのフロントエンドの新規開発でNext.jsの採用を見送った話でした。 はじめに 前提（一般的な話） モノレポ（Monorepo）とは 対象となるサービス（GYRO）について 課題とモノレポ化による解決 モノレポ化のデメリット 過去のコミット履歴やPull Requestが追いにくくなる リポジトリごとのアクセス権限設定ができない Pull Requestが1リポジトリに大量にあふれる可能性がある Gitリポジトリのサイズが大きくなる モノレポ移行の手順 1. モノレポ化対象のリポジトリの決定 2. Gitの移行 移行作業 3. モノレポ管理ツール（モノレポツール）の検討 4. CI/CDの変更 Cloud Buildの 含まれるファイル を指定する Cloud Build

※こちらはバイセルテクノロジーズ Advent Calendar 2023の10日目の記事です。 前回の記事は、金澤さんのAuth0とEntra IDを扱うプロダクト同士を繋げるためのIstio設定あれこれでした。 はじめに こんにちは、開発3部の神保です。 バイセルでは、お客様宅への出張訪問による買取が買取チャネルの主力となっています。現在開発3部の弊チームでは、この出張訪問買取で使用されるWebアプリケーション「Visit」の新規開発を進めています。 VisitのフロントエンドにはReactを採用しましたが、Next.js等のフレームワークは使用せず、Vite + ReactによるSPA (Single Page Application)構成を選択しました。 技術選定の過程では、社内での採用事例などからNext.jsも検討の対象となりましたが、最終的にはその採用を見送る結論に至りました

はじめに こちらは バイセルテクノロジーズ Advent Calendar 2023 の4日目の記事です。 昨日は尾沼さんによる「サービス運用の負担軽減に繋がった、Playwrightの紹介」でした。 こんにちは。開発2部の野口です。普段はリユースプラットフォームの出品管理SaaSシステムの開発に携わっています。 私の所属しているプロジェクトでは、複雑な検索要件に対応するため、 Relational Database （以降、RDB） とElasticsearchを併用しています。 tech.buysell-technologies.com Elasticsearchを採用することにより、検索の柔軟性を獲得した一方で、両者の型システムの相違に起因した不具合に悩まされていました。 今回はElasticsearchのdynamic templatesという機能を用いて、上記の課題を解消した事例

はじめに こちらは バイセルテクノロジーズ Advent Calendar 2023 の 2 日目の記事です。 前日の記事は早瀬さんの「開発効率を上げるためのモダンなフロントエンド構成」でした。 こんにちは！株式会社バイセルテクノロジーズのテクノロジー戦略本部開発 2 部でバックエンドのテックリードをしています藤澤です。 現在私の所属しているチームではアジャイル開発を取り入れて開発に取り組んています。その中でフロー効率を重視して価値提供のスピードを上げる取り組みをしていたのですが、思わず開発メンバーのエンゲージメントが低下していまうという問題が起きました。今回はその問題の経緯とそれをどのように改善したかについてまとめたいと思います。 はじめに 元々チームが目指していた姿 実践していたこととその成果 フロー効率を重視して起きた問題 機能が完成し切らない時がある 個人の成長実感がない 自身の重

プロダクトマネージャーのための立て直し術〜途中から引き継いだプロダクトのマネジメント手法具体例〜 はじめに こんにちは！ テクノロジー戦略本部 開発二部の瀬尾です。 私は現在、弊社の中期経営計画2024にあるバイセルリユースプラットフォーム(Cosmos)の販売領域プロダクトを新規開発しているチームでプロダクトマネージャー(PdM)を務めています。 このチームには前PMから引き継ぐ形で参加しており、最近大きなマイルストーンを達成できたので、その振り返りと得られた知見を紹介したいと思います。 はじめに 対象読者 当時の開発状況 状況把握 やったこと 一度立ち止まる ビジョンを打ち立てる 役割を分ける 見積もる 再スタート まとめ 対象読者 以下のような課題を抱えているプロダクトマネージャーの参考になれば幸いです。 途中からプロダクト or プロジェクトのマネジメントを引き継いで立て直しを図り

はじめに テクノロジー戦略本部データサイエンス部データアナリストの森山です。 バイセルでは事業部組織（以下、Biz メンバー）が自立してデータに基づいた意思決定を行うことを目的に、データ基盤を整備しグループの全社員に公開しています。 Biz メンバーは自分自身で SQL を書きデータ基盤から必要なデータを抽出しますが、そのためには基盤に蓄積したデータを必要な形式に変換・加工（以下、データ変換パイプライン）する必要があります。 今回は、データ変換パイプラインの構築のために導入した Google Cloud が提供する Dataform の利用事例をご紹介します。 Dataform をこれから活用しようと思っている方、実例が見つからず悩んでいる方の参考になれば幸いです。 ※なぜ Biz メンバーが SQL を書く環境を整備しているかは、以下の記事をご確認ください。 tech.buysell-t

はじめに Lexicalで開発する上で躓いたこと カスタムNodeの作成 Custom Nodeの作成 (ParagraphStyleNode) ステップ１ 背景色をNodeに持たせる ステップ２ DOMへの出力設定を追加 ステップ3 エディタで操作するために必要な設定を追加 ステップ4 HTMLに変換するための設定を追加 エディタにNodeを挿入するためのCommandの作成 Selectionで置換可能かを判断 ParagraphStyleNodeに変換 priorityを付ける Nodeを挿入できるボタンUIの作成 エディタに作成したNodeを登録 ParagraphStyleNodeの完成コード 自動リンクプラグインAutoLinkの作成 Commandを使って改行を検知 リンクに変換しない条件 リンクに変換する HTMLへの変換 まとめ はじめに こんにちは。開発2部の富山です。

はじめに こんにちは。開発2部の小松山です。 業務でGraphQLのエラーの設計をする機会があり、いろいろと調査・検討した結果、なかなか良いと思えるものができたので紹介します。 本記事はバックエンド寄りの話がメインです。GraphQLのエラーの扱いに迷っているバックエンドエンジニアの方の参考になれば幸いです。 はじめに コンテキスト 調査したこと GraphQL 標準仕様で定められたフォーマット extensions に独自のフォーマットを適用するパターン Result 型にエラーのフィールドを作るパターン Result 型を成功レスポンスとエラーレスポンスの union として定義するパターン 設計判断の軸 errors[i].message は開発者向けの文言にする。このフィールドはユーザには見せない エラーのモデルも GraphQL スキーマで定義する ユーザに見せていいエラーかどう

はじめに こんにちは！ 開発 2 部の小林です。 弊社の各プロジェクトでは、React Hook Form (以後 RHF とする) と Zod を用いて、様々な要件のフォームの実装をしています。 今回は、API 側から取得した値に基づいて、text, number, checkbox のように、入力項目を出し分けられる型が動的なフォーム(以後 動的フォーム とする)を作成しました。 この記事では、実装した動的フォームのコード例と、実装の過程で直面した課題+その解決策について紹介します。 はじめに 対象読者 Zod の schema で動的なフォームを表す方法 動的フォームに通常の Zod schema を使用できない理由 動的に schema を設定できる descriminated union 作成した動的フォームの説明 要件 設計 具体的なコード例 Schema Form Field

こんにちは、開発２部の早瀬です。 自分のチームではフロントエンドにReact（Next.js）を採用しており、MUIをベースにしたデザインシステムを構築して開発を行なっています。 そこで今回はデザインシステムの構築に至った背景や、具体的な取り組みを紹介したいと思います！ 背景 MUIとは デザインシステムを構築する目的 デザインと実装の同期 属人性の排除 コミュニケーションコストの削減 具体的な取り組み デフォルトスタイルのオーバーライド カラーコードの集約 Typographyの定義 8倍ルール Atomic Designの不採用 まとめ 背景 現在バイセルではリユースプラットフォームの開発に注力しています。自分はその中の出品管理サービスのチームに所属しており、他にも並行して複数のサービスの開発が進んでいます。 リユースプラットフォーム プラットフォームとして開発をしているので、プロダク

はじめに こちらはバイセルテクノロジーズ Advent Calendar 2022の 24 日目の記事です。 前日の記事は田中さんの「環境構築をコマンドでまとめてみた」の記事でした。 ​ こんにちは！ テクノロジー戦略本部 開発二部の小林です。 ​ 自分が担当したプロジェクトでは、弊社で初めてバリデーションライブラリとして Zod を使用し、React-Hook-Form × Zod の構成でフォームを作成しました。 ​ 本記事では、実際にプロジェクトで実装した事例を紹介したいと思います。 ​React-Hook-Form × バリデーションライブラリの技術選定に迷っている方がいましたら、ご参考になれば幸いです。 はじめに 対象読者 React-Hook-Form とは Zod とは なぜ React-Hook-Form とバリデーションライブラリを組み合わせるのか バリデーションライブラ

こちらは バイセルテクノロジーズ Advent Calendar 2022 の１０日目の記事です。 前日の記事は 稲川さんの「Railsでscopeとeager_loadを組み合わせて関連テーブルのデータを一括取得した話」でした。 テクノロジー戦略本部データサイエンス部の近藤です。2022年7月にバイセルに入社しました。 バイセルではSSOT（Single Source Of Truth）を実現するためにDatabricksを導入しましたが、 サーバーやフロントの開発と同じく、チーム開発を行う場合に個人が好き勝手に実装をするとコードがカオスになってしまうため、何らかの実装ルールが必要です。 そこでバイセルではメダリオンアーキテクチャというデータ設計をもとに実装ルールを定めました。今回はそちらのお話をいたします。 なお、以前GCPでDatabricksを導入した経緯をブログ記事にしてますので

はじめに こちらは バイセルテクノロジーズ Advent Calendar 2022 の3日目の記事です。前日の記事は藤澤さんの生産性指標を可視化してチームのワークフローを改善したら生産性が爆上がりした話でした。 こんにちは。テクノロジー戦略本部の尾沼です。 私の所属するプロジェクトでは数ヶ月前まで、メンバー間での知識量や技術力のばらつきに起因した属人化が進んでいました。 しかし最近、スクラム開発においてプロダクトバックログリファイメント（以下リファインメント）やスプリントプランニング（以下プランニング）に注力することでそれらが解消されてきているので、今回はその取り組みについて紹介したいと思います。 はじめに 背景 フロントエンド知識量の属人化 ドメイン知識量の属人化 対策 リファイメント プランニング 結果 おわりに 背景 私が所属しているプロジェクトでは、5-10人規模でスクラム開発を

はじめに こちらは バイセルテクノロジーズ Advent Calendar 2022 の 2 日目の記事です。 前日の記事は早瀬さん「ApolloClient から Relay に乗り換えようとして諦めた話」でした。 こんにちは！株式会社バイセルテクノロジーズのテクノロジー戦略本部に所属している藤澤です。最近ではチームのテックリードのロールも担っています。 現在私の所属しているプロジェクトでは、チームの開発手法としてスクラムを採用しており、スクラムを通じて自分達の生産性を改善するための取り組みを続けて来ました。 その一環として、生産性指標を計測し定量的にチームの生産性を観察することを始めたのですが、最近になって指標が急激に改善してきました。 そこで、今回はバイセルアドベントカレンダー 2 日目の記事として、生産性向上のためにチームとしてやってきたことを紹介したいと思います。 はじめに 背景

こちらは バイセルテクノロジーズ Advent Calendar 2022 の 1日目の記事です。 こんにちは。開発2部の早瀬です。 自分のチームではReact（Next.js）+GraphQLという構成でフロントエンドの開発をしていて、状態管理にはApolloClientを採用しています。その中で最近フロントエンドの構成を大幅に見直す機会があり、以前から気になっていたRelayを導入しようとしたのですが、色々調査した結果、最終的には断念することになりました。 そこで今回はRelayに乗り換えようとした経緯や、なぜ断念するに至ったかを紹介しようと思います！ Relayに乗り換えようとした動機 Fragment Colocationを強制できる コンパイラを内包している Reactと相性がいい 乗り換えられなかった理由 HasuraがRelayの要求するスキーマを満たせない Relayに関す

はじめに テクノロジー戦略本部 デザイナーの白井と申します。 私の所属しているプロジェクトでは新規社内システムを開発していて、 私はUIデザインをメインに担当しています。 幅広い年代の方に利用して頂くことを想定しているシステムなので、 世代ならではの特性に対する考慮や配慮がとても重要となります。 UX/UIの観点からターゲットユーザーにどう向き合って行くべきかを社内LTで発表する機会がありました。今回はそちらの資料を紹介させて頂きたいと思います。 発表内容 タイトルは「UX/UIデザイン ターゲットユーザーと発達心理学」として発表しました。 目次 UX/UIとは ⇒UXとUIの違い ターゲットユーザーとは ⇒設計するサービスのユーザー層を定義する 発達心理学について ⇒年代別特性の変化と対処法 まとめ 発表資料は下記となります。 speakerdeck.com 最後に 「加齢に伴う変化」は

はじめに テクノロジー戦略本部の酒井です。前回デザインシステムの導入に関して話しましたが、今回は運用についてどういった取り組みをしてきたのか紹介していこうと思います。前回の記事をまだ読んでいない方は読んで頂けると幸いです。 デザインシステム導入してみて(導入編) はじめに 概要 デザインの質を保つ取り組み デザイン定例について デザインQA Figmaの管理 Figmaのデザインにステータスを持たせてみた ステータス ステータスを使ったFigmaの運用 メモの活用 おわりに 概要 前回の記事でも少し触れましたが、今までエンジニアがよしなにコンポーネントを実装していたことで、いつの間にかフロントの開発がしづらい状態になっていました。ですが、デザインシステムを導入したことでコンポーネントが整理されていきました。しかし、導入しただけでは再び開発しづらい状態になる可能性がありました。そこで、いかに