STORES Product Blog

こだわりを持ったお商売を支える「STORES」のテクノロジー部門のメンバーによるブログです。

フロントエンド

Vue Fes Japan 2023の感想/Cloudflare WorkersとRemixが快適すぎた/Web Infraに注目してる【ep.26 #論より動くもの .fm】

CTO 藤村がホストするPodcast、論より動くもの.fmの第26回を公開しました。今回はフロントエンドエンジニアのうしろのことVue Fes Japan 2023の感想やCloudflare WorkersとRemix、最近注目している技術について話しました。 論より動くもの.fmはSpotifyとApp…

STORES 予約 におけるFullCalendarの活用事例

この記事は STORES アドベントカレンダーの12月20日の記事となります。 はじめに こんにちは、 STORES 予約 でエンジニアをしているyuta07です。 この度 STORES 予約 では、12月に予約カレンダーを正式リリースしました。 突然ですが、Web上でカレンダーの開…

Passkeys を完全に理解するために Rails で実装してみた with Remix

昨今 Passkeys が各サービスで導入されており、勢いを感じています。Passkeys の実際の挙動や導入する時の開発コストを知りたく、ガチャガチャ触ってみよう!ということで完全に理解するために Rails で実装してみた with Remix 編をやっていきます!

Visual regression testingを導入してみた

はじめに この記事はSTORES Advent Calendar 2023 19日目の記事です。 こんにちは、 STORES 予約 でエンジニアをしている@tontokoです。 STORES 予約 の開発チームでは月に1回、コードクリーニングタイムと呼ばれる日を設けています。 これは普段なかなか手…

Vue Fes Japan 2023に参加しました!みんなの感想ブログ

こんにちは!技術広報のえんじぇるです。Vue Fes Japan 2023 お疲れ様でした! STORES はブースを出したり、登壇者がいたりと、濃密な1日を過ごせて楽しかったので、みんなでこの感想ブログを書きます。 登場人物 うしろのこ:エンジニア、パネルディスカッ…

STORES から1名がVue Fes Japan 2023に登壇&スポンサーをします!

こんにちは、技術広報のえんじぇるです。 STORES は10月28日に開催されるVue Fes Japan 2023にSilverスポンサー、Special Lunchスポンサーとして協賛します! vuefes.jp この記事では、 当日登壇するメンバーと、 STORES のスポンサーブースやノベルティにつ…

Sentry 活用のススメ

Sentry 活用のススメ こんにちは! STORES のリテール事業部でソフトウェアエンジニアをしている @m0nch1 です。 エラー監視ツールとして Sentry を採用している企業・エンジニアは多いことと思います。 Sentry の welcome ページにも以下のように記載されて…

Nuxt 3 への移行に向けて頑張ってます

STORES フロントエンドエンジニアの wattanx です。 2022/11/16、ついに Nuxt 3 が正式リリースされましたね。 nuxt.com 私たちのプロダクトである STORES でも Nuxt を利用しており、絶賛 Nuxt 3 への移行中です。 本記事では、私たちのプロダクトにおいて…

STORES フロントエンドの現在地 2022

こちらは STORES Advent Calendar 2022 8日目の記事です。 みなさんこんにちは、STORES のリテール本部でフロントエンドのエンジニアリングマネージャーをしています、 daitasuと申します。 2022年の年の瀬、 STORES のフロントエンド組織は立ち上がりから約…

「コードが書けるデザイナー」が 本気でエンジニアを目指した話

どうも、ゆーみん ( id:yuuminnn ) です。 STORES 決済のプロダクトデザイナーから STORES 決済のフロントエンドエンジニアになって、4ヶ月経ちました。 いままで「コードが書けるデザイナー」として仕事してきて、どうしてもチームと一緒に仕事したかった理…

フロントエンド技術負債解消WG「除雪部」を立ち上げた話

はじめに hey のネットショップ開設サービス「STORES」 の開発フロントエンド組織で EMをしています、 daitasu と申します。 2022年の上半期、私たちのフロントエンドチームで「除雪部」という技術負債解消ワーキンググループ(以下、WGとします)を立ち上げま…

STORES 決済 フロントエンドチーム紹介

はじめに テクノロジー部門 決済本部 フロントエンドグループのはるなです。 本日は、 STORES 決済 フロントエンドチーム(以下、決済フロントチーム)の体制や日々どのように業務をしているかをご紹介します。 開発体制 決済フロントチームは、4 人(男女比…

XStateを支える概念と実装方法について

最初に STORES 予約 の開発をしているTak-Iwamotoです。 STORES 予約 は元々 Coubic というサービス名でリリースされ、heyにジョインしたタイミングで STORES 予約 としてリブランディングされました。 ただ、今でもエンドユーザーさまが予約する画面は Coub…

バンドルサイズの比較をPR上にコメントする

STORES でフロントエンドエンジニアをしていますwattanxです。 先日下記のようなツイートを見かけました。 プルリクにbundle sizeの増減をコメントしてくれるGitHub Actions導入したんだけどめちゃくちゃ良い pic.twitter.com/7JV3M3zlcW— catnose (@catnose…

STORES 予約 のReactで踏み抜いたアンチパターンと現在

最初に この記事はhey Advent Calendarの2日目です。 STORES 予約 の開発をしているTak-Iwamotoです。 2021/11/27に行われたJSConfでSTORES 予約 を支えるフロントエンドの技術と題して発表しました。 この記事ではその中から抜粋して、 STORES 予約 のフロ…

デザインシステム、Nuxt化、アクセシビリティ。フロントエンドの課題が揃っている面白さ

9月7日(火)にCTOの藤村 @ffu_ とフロントエンドエンジニアの横田がTwitter SpacesでSTORESのフロントエンドについておしゃべりしたので、その様子を一部お届けします。 公開進捗詰め?AngularJSをNuxt.jsに置き換えてる話 藤村:藤村大介といいます。ヘイ…

v0.0.1-alpha0.1から始めた-CTO 藤村とフロントエンド 藤川のおしゃべり

heyで採用広報を担当しているえんじぇるです。 7月13日(火)にCTOの藤村 @ffu_ とフロントエンドエンジニアの藤川@ushiro_noko がTwitter Spacesでフロントエンドについておしゃべりしたので、その様子を一部お届けします。 人生で一番弱気なバージョニング…

アイテム画像件数上限アッププロジェクトの裏側

はじめに hey でECのフロントエンドエンジニアを担当している @nkoba です。 STORES ECでは先日、アイテム機能のアップデートをリリースしました。そのアップデートのうちの一つが、アイテム画像件数上限アップです。 これは今までアイテムごとに画像を15枚…

クライアントサイドのバリデーションエラーのデータ型についての考察

業務委託で STORES の開発をしている @inouetakuya です。 先日 STORES のフロントエンドチーム内でクライアントサイドのバリデーションについて見直す機会があり、特にバリデーションエラーのデータ型をどうするかについての議論が興味深かったので、共有さ…

React DnDを使ったので知見をまとめた

始めに STORES 予約でエンジニアをしているTak-Iwamoto です。 今回はある項目の並び替え機能を実装する際に React DnD を使用したので、その知見について書かせていただきます。 実装した画面はこんな感じです。 ライブラリ STORES 予約の管理画面は Rails …

Vuex ストアに TypeScript の型を付ける(2020年12月版)

業務委託で STORES の開発をしている @inouetakuya です。 下記の記事(2020/09/14)にあるように、STORES では TypeScript の導入を進めています。 プロダクトに途中から TypeScript を導入した話 - STORES Tech Blog 現状、新規に記述するコードについては…

Vue に stale-while-revalidate がやってくる

STORES でフロントエンド開発をしているushironokoです。今回は Vue でも SWR のようなしくみが使え、遠くない未来で標準的に使われることになりそうだ、という話を書きます。stale-while-revalidate とはどのようなものなのかについても簡単に解説していき…

プロダクトに途中からTypeScriptを導入した話

heyのSTORESでECの開発をしている@nkobaです。 この記事ではフロントエンドでTypeScriptを導入した話について発信していきます! TypeScriptとは TypeScriptはJavaScriptにリッチな型システムと静的な型検査を付加したプログラミング言語です。 TypeScriptが…

社内UIライブラリの変遷

heyのSTORESでECの開発をしている@nkobaです。 この記事ではフロントエンドで使用しているUIライブラリについて発信していきます! 社内UIライブラリとは STORESのECではSTORES.jp-Front-Commonというフロントエンドライブラリを作成しています。 その一部と…