サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
おみそ汁
tech.buysell-technologies.com
こんにちは〜! テクノロジー戦略本部 開発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の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 プロジェクトのマネジメントを引き継いで立て直しを図り
はじめに Lexicalで開発する上で躓いたこと カスタムNodeの作成 Custom Nodeの作成 (ParagraphStyleNode) ステップ1 背景色をNodeに持たせる ステップ2 DOMへの出力設定を追加 ステップ3 エディタで操作するために必要な設定を追加 ステップ4 HTMLに変換するための設定を追加 エディタにNodeを挿入するためのCommandの作成 Selectionで置換可能かを判断 ParagraphStyleNodeに変換 priorityを付ける Nodeを挿入できるボタンUIの作成 エディタに作成したNodeを登録 ParagraphStyleNodeの完成コード 自動リンクプラグインAutoLinkの作成 Commandを使って改行を検知 リンクに変換しない条件 リンクに変換する HTMLへの変換 まとめ はじめに こんにちは。開発2部の富山です。
はじめに こんにちは! 開発 2 部の小林です。 弊社の各プロジェクトでは、React Hook Form (以後 RHF とする) と Zod を用いて、様々な要件のフォームの実装をしています。 今回は、API 側から取得した値に基づいて、text, number, checkbox のように、入力項目を出し分けられる型が動的なフォーム(以後 動的フォーム とする)を作成しました。 この記事では、実装した動的フォームのコード例と、実装の過程で直面した課題+その解決策について紹介します。 はじめに 対象読者 Zod の schema で動的なフォームを表す方法 動的フォームに通常の Zod schema を使用できない理由 動的に schema を設定できる descriminated union 作成した動的フォームの説明 要件 設計 具体的なコード例 Schema Form Field
こんにちは、開発2部の早瀬です。 自分のチームではフロントエンドに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 の10日目の記事です。 前日の記事は 稲川さんの「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の運用 メモの活用 おわりに 概要 前回の記事でも少し触れましたが、今までエンジニアがよしなにコンポーネントを実装していたことで、いつの間にかフロントの開発がしづらい状態になっていました。ですが、デザインシステムを導入したことでコンポーネントが整理されていきました。しかし、導入しただけでは再び開発しづらい状態になる可能性がありました。そこで、いかに
テクノロジー戦略本部データサイエンス部の近藤です。 バイセルはリユース事業を営む会社で急激な成長を遂げていますが、どちらかというと今まではテクノロジーにあまり頼ることなく成長してきました。 そんな中、テクノロジーをちゃんと導入していけばどこまで成長するのか試してみたく、2022年7月にバイセルに入社しました。 バイセルではSSOTの実現のために、RDBのデータをBigQueryにニアリアルタイムで同期する実装を進めていますが、 新たにDatabricksの導入を決めました。 バイセルにどういう課題があり、なぜDatabricksを導入するのかをお話しします。 SSOTとは バイセルの今の課題と未来 どうやって課題を解決するのか なぜApache Sparkなのか Databricksの利点 Databricks導入後の世界 データサイエンス部の野望 SSOTとは データマネジメントでは「S
はじめに テクノロジー戦略本部の酒井です。 私が現在携わっているプロダクトに「デザインシステム」を導入したため、今回はそのことについて話していきたいと思います。ですが、全て触れると長くなってしまうため、今回は導入について話していきます。 はじめに デザインシステムとは 参考記事 背景 導入について スタイルガイドの作成 使用するカラーコードの選定 Typographyのコンポーネント化 使用するアイコンをFigmaで管理 UIコンポーネントの整理 Figmaのマスタコンポーネントの作成・管理 コンポーネントに切り出す基準を定義 まとめ デザインシステムとは 本題に入る前にデザインシステムについてですが、記事がたくさんあるため、ここでは深くは触れません。簡単に言うとUIコンポーネントやスタイルガイドなど「デザインを定義する」ための仕組みのことを指してます。 参考記事 デザインシステムとは何か
はじめに こちらはバイセルテクノロジーズ Advent Calendar 2021 の24日目の記事になります! 前回の記事は杉田さんの「過去一やらかしにやらかしを重ねた話を供養する」でした。 こんにちは、情報システム部の天野です。 バイセルテクノロジーズでは今期コミュニケーションツールとして全社でSlackを導入しました。導入の旗振りは情報システム部(私含め4人)で担当しました。設定からガイドラインの策定、各部との調整などかなりいい経験を積ませていただいたと思うのでみなさんにシェアできればと思います。ぜひこれから、Slackを導入する方の参考になればと思います。 はじめに なぜコミュニケーションツールとしてSlackを導入したのか 導入までの大まかなTodoと流れ Slackの設定&運用決め 具体的に行ったこと 設定・運用決めで悩んだ点、重要なところ 検証 Welcomeメッセージの設定
はじめに こちらは バイセルテクノロジーズ Advent Calendar 2021 の 9 日目の記事です。 前日の記事は 飯島さん の「新規プロジェクトにインフラ監視ツールを導入した話」でした。 こんにちは。2021 年に新卒で入社した開発 2 部の小松山です。 私は今年の 6 月末までバックエンドは Ruby on Rails がメインのプロダクトの保守開発業務を行っていたのですが、7 月から新しいプロジェクトへ配属され、新規プロダクトの開発に携わることになりました。そこではバックエンドに Hasura を採用しています。この記事では、その Hasura を実際にプロダクト開発に利用して見えてきた、メリット・デメリットを紹介できればと思います 目次 はじめに 目次 前提 Hasura の概要 プロジェクトでの運用 良かったところ テーブル作成が完了すればフロントエンドの開発を始めるこ
はじめに テクノロジー戦略本部の早瀬です。 RESTful な API の仕様の定義する時に OpenAPI を使用することはよくあると思います。 ですがある程度の規模のプロジェクトになってくるとopenapi.yamlが肥大化して数千、数万行になってしまい下記のようなつらみが出てきます。 複数人での開発でコンフリクトが発生しやすい 目的の API の定義箇所が見つけにくい 記載方法が統一されておらず秩序がなくなる $refがネストしてると探すのが大変 エディタによっては重すぎて開けない ずらずら書きましたが要は、とにかく開発しずらいということです笑 そこで今回は治安がよく、できるだけストレスフリーな OpenAPI の開発環境を作っていこうと思います! 最終的なコードはこちらにプッシュしてあります。 はじめに openapi.yaml の分割 paths schemas paramete
梅雨の季節と思いきや、清々しい天候の続くこの頃、皆様いかがお過ごしでしょうか? Tech開発部アーキテクチャグループで色々やっております塚本と申します。普段はスクラムマスターやったりしています。 もうひと月以上経ってますが、先日参加してきたRubyKaigiのセッションの内容を掘り下げて記事にしてみます。 Kaigiの概要は村上さんの記事をご参照ください。 tl;dr; Rubyはよい 個人的にはコミッターがよい(失礼) 発表もよい 記事にしたいセッションが絞りきれず執筆が大変なことに Rubyコアの速度改善の話に絞りました 他はまた別途 Rubyist world map Rubyに対して 私のRuby歴は全部足して3年くらいで、関わってきたコミュニティの皆さんほど言語に対する思い入れもなく、Railsなんかツラい思い出が9割くらいなんですが、Rubyはいい言語だと思います。 端的にいう
このページを最初にブックマークしてみませんか?
『バイセル Tech Blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く