こんにちは、STORES CTO室でフロントエンドを色々やっている ushironoko です。 今回は巷で噂の GitHub Copilot について、弊社でも導入を始めたためその所感などをつらつらと述べていこうと思った記事になります。 GitHub Copilot について すでに多くのテックブログなどで綺麗にまとめられているため、サボらせてもらいます。というか、下記記事に大体 for Individuals、for Businessの気になりポイントがまとまっており急ぎの人はこれで良いかもしれません。 【Copilot はじめました】GitHub Copilot 導入におけるハードルの整理 - M&Aクラウド開発者ブログ 要するに VSCode などのエディタ上で機械学習によって強化されたコード補完がいい感じに出るやつです。あとで触れますが、当初懸念されていたライセンス問題についても

STORES フロントエンドエンジニアの wattanx です。 2022/11/16、ついに Nuxt 3 が正式リリースされましたね。 nuxt.com 私たちのプロダクトである STORES でも Nuxt を利用しており、絶賛 Nuxt 3 への移行中です。 本記事では、私たちのプロダクトにおいてどのようにNuxt 3 に移行しようとしているのか紹介します。 また、これは STORES Advent Calendar 2022 の 11日目の記事です。 移行の基本方針 Nuxt 2 を利用しているプロダクトを Nuxt 3 に移行する場合、以下の2とおりの方法が一般的だと思っています。 Nuxt 2 から Nuxt 3 に直接移行する。 Nuxt 2 から Nuxt Bridge に移行する。その後 Nuxt Bridge から Nuxt 3 に移行する。 Nuxt Bridge

CTOの藤村です。つい最近まで STORES ブランドアプリ のチームでRailsを書いていました。 STORES ブランドアプリ のRailsリポジトリではdatabase_cleanerを（strategy = truncationで）使ってテスト中のデータベースをリセットしており、このことがテストコードの品質、速度などで重荷となっていました。 これを、テスト実行時にテストコード自体を書き換えて改善する仕組みを作り、先日無事Transactional Testへの移行が完了しました。ということで気分がとてもよいので、どうやったか共有させてください。 課題 STORES ブランドアプリのRailsのテストコードは速度に課題がありました。 テストデータを片付ける仕組みとして、 Railsエンジニアにはお馴染みのdatabase_cleanerというGemを使っていました。database_

最初に STORES 予約 の開発をしているTak-Iwamotoです。 STORES 予約 は元々 Coubic というサービス名でリリースされ、heyにジョインしたタイミングで STORES 予約 としてリブランディングされました。 ただ、今でもエンドユーザーさまが予約する画面は Coubic の名称となっています。 この Coubic はNext.jsで作られており状態管理のライブラリはReduxを使用しているのですが、良くないReduxの使い方によって改修に時間がかかったり、コードの見通しが悪い箇所があります。 詳しくはこちらの記事をご覧ください。 そういった背景があり、状態管理のリファクタリングの一環でRedux -> XStateへの移行を検討中です。(ただ、優先順位の都合でまだ本格的に移行はできていません。) この記事ではXStateのコアとなる概念、Coubicで抱えている

STORES 予約 でwebアプリケーションエンジニアをやっております。ykpythemindです。 皆さん、Webアプリケーションのテストを書いていますか。 モック(mock)を使っていますか。 今回は自動テスト上で、偽物だけではなく（要所で）本物を使おうよという話を書きます。 想定読者としては主にRuby on Railsを開発しているバックエンドエンジニアを想定しています。 モックとは 今回のモックの定義は以下にしておきます。 *1 実際の外部サービスや内部サービスの代わりをする偽のサービスを作成することです。 ref: https://circleci.com/ja/blog/how-to-test-software-part-i-mocking-stubbing-and-contract-testing/ Rubyでは外部サービスとの接合部で、 RSpecの allow(xx).

本記事は、hey Advent Calendar 14日目の記事です！ STORESでフロントエンドエンジニアをしています、@daitasuと申します。 この記事では、STORESのプロダクト開発のフロントエンドチームで行っている Pull Requestのfirst commit ~ mergedAt までのリードタイムと 各Issueのstory point をベースとした開発PJTの振り返りについてご紹介します。 はじめに チームについて 私が所属しているチームは、STORESというECのプロダクトを取り扱っています。 その中でも、主に今年の6月にリリースされたSTORES レジというネットショップと一体となったPOSレジサービス の機能を、ECのダッシュボードと統合して1つの管理画面でレジとECの様々な管理を行えるようにしていく、ということをおこなっているチームになります。 ※ 以

STORES 予約 でwebアプリケーションエンジニアをやっております。ykpythemindです。 GitHub Actions、とても便利ですよね。STORES 予約チームでは徐々にCircleCI から GitHub Actionsへの移行を進めていますが、この度歴史あるRailsのリポジトリのCIを移行したので知見を公開します。 概要 RSpecを実行する CIの実行速度のチューニング（CircleCIと同等の速度にしたい） node_modulesなどのインストール結果をキャッシュする テストを並列実行する 大きな方針として、CircleCI等の他サービスからの乗り換えの場合、同等のCI速度/課金額でないと移行は現実的でないと思いますので、速度面のチューニングも意識しています。 ほぼそのままの設定を貼ります 一部プロジェクト固有のstep等があり注釈コメントをつけています。適宜調

業務委託で STORES の開発をしている @inouetakuya です。 先日 STORES のフロントエンドチーム内でクライアントサイドのバリデーションについて見直す機会があり、特にバリデーションエラーのデータ型をどうするかについての議論が興味深かったので、共有させていただきます。 背景 議論の背景について簡単に触れておくと、STORES のクライアントサイドでは、バリデーションのライブラリとしてこれまで joi-browser を使ってきました。 しかしながら、本家の Node.js 版の joi がブラウザ対応したことにより joi-browser が deprecated になったことを受けて、今後も joi を使い続けるかを検討したところ、 joi-browser と joi の最新バージョンとの間で API の差異がいくつかあり、joi-browser から joi への乗

業務委託で STORES の開発をしている @inouetakuya です。 下記の記事（2020/09/14）にあるように、STORES では TypeScript の導入を進めています。 プロダクトに途中から TypeScript を導入した話 - STORES Tech Blog 現状、新規に記述するコードについては TypeScript で書いていっているのですが、既存のコードではまだ JavaScript のままになっているものも残っています。 今回の記事ではそれらの既存のコードのうち、Vuex ストアに関するコードをどのように TypeScript で書き換えていったかをお伝えしたいと思います。 環境 対象とした環境は下記のとおりです。 TypeScript v3.9.7 NuxtJS v2.14.5 Vue.js v2.6.12 Vuex v3.5.1 Vuex Type H

STORESのECサービスを開発している@morihirokです。 STORES ECはRuby on Railsで開発されているWebアプリケーションですが、データベースにはMySQLやPostgreSQLといったリレーショナルデータベースではなく、MongoDBを採用しております。 この記事ではカジュアル面談等で必ず聞かれる「MongoDBって正直どうなの？」といったところを、ストレートにお伝えできればと思います。 なぜMongoDBを採用しているのか そもそもなぜMongoDBを採用しているのか。それは考古学になるのでフィールドワークが必要です。筆者も開発に携わるようになったのは2018年の終わり頃からなので、まずは一緒にSTORES ECの歴史について紐解いていきましょう。 STORES EC（旧STORES.jp）は、heyグループとなるずっと前の2012年、会社名がブラケットだ

STORES でフロントエンド開発をしているushironokoです。今回は Vue でも SWR のようなしくみが使え、遠くない未来で標準的に使われることになりそうだ、という話を書きます。stale-while-revalidate とはどのようなものなのかについても簡単に解説していきます。 SWR(stale-while-revalidate) とは何か Vue や Nuxt 界隈の技術者はあまり縁がないため、そもそも SWR と称されるものが何者なのかご存知でない方も多いはずです。SWR は stale-while-revalidate と呼ばれるキャッシュ戦略に基づいたデータフェッチライブラリで、React のカスタムフックとして提供されています。つまり、元々 React 向けのライブラリとして作られたものです。 github.com stale-while-revalidate

heyのSTORESでECの開発をしている@nkobaです。 この記事ではフロントエンドで使用しているUIライブラリについて発信していきます！ 社内UIライブラリとは STORESのECではSTORES.jp-Front-Commonというフロントエンドライブラリを作成しています。 その一部としてUIライブラリが含まれており、これを社内プロダクトで利用することで開発効率を向上させたり、ユーザーにとっての触り心地を担保しています。 基本的にSTORESのECではブランド、デザイン、使い心地などを表現するために、ほぼ全てのUIは自作しています。 社内UIライブラリで主に使用している技術は以下になります。 Vue.js Storybook REG-SUIT Jest コンポーネントライブラリの実際 実際に使われているページ 導入期 背景 私がフロントエンドチームに加わったのは2018年の末頃でし