STORES Product Blog

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

フロントエンド

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というフロントエンドライブラリを作成しています。 その一部と…