はてなブックマーク

Nuxt Bridge を活用して Nuxt 3 へ移行しました 業務委託で STORES の開発をしている @inouetakuya です。 以前 STORES が Nuxt Bridge を活用して Nuxt 3 への移行を進めている旨の記事を wattanx が書いてくれました。 Nuxt 3 への移行に向けて頑張ってます - STORES Product Blog そして先月（2024年7月）ようやく Nuxt 3 へ移行することができましたので、本記事は前回の記事の続編にあたります。 Nuxt Bridge とは おさらいになりますが、Nuxt Bridge とは Nuxt 3 の機能の一部を Nuxt 2 でも利用できるようにしたライブラリです。これを活用すると Nuxt 2 のプロジェクトのまま Nuxt 3 の機能を利用するようコードを変更でき、Nuxt 3 へのバージョン

はじめに STORES 予約 でエンジニアをしているyuta07です。 STORES 予約 の管理画面の新規開発はNext.jsを用いて開発しているのですが、日々のカジュアル面談や採用活動でフロントエンドの技術状況についての質問を受けることが増えてきました。 今回は STORES 予約 のフロントエンド開発の中でもコンポーネント粒度と依存関係チェックについて紹介します。 はじめに 主な使用技術 コンポーネントの分類 Pages Templates Organisms Molecules Atoms 依存関係チェック Eslintによる依存ルール おわりに 主な使用技術 Next.js、React、TypeScriptを採用。 スタイルはTailwind CSSを使用。 STORES 全体で統一されているconfigをユーティリティクラス（フォント・カラー等）として使用してスタイリングしてい

STORES 予約 でエンジニアリングマネージャーをしている Natsume です。 STORES 予約 は10年モノの45万行、380テーブルある大きなモノリスの Rails アプリケーションです。 業種にとらわれない汎用的な予約システムであり、それらに対応するように複雑なコードベースになっています。また、ここ 1~2 年はプロダクト間連携を進めており、各基盤やアプリケーションともつなげていく開発を進めています。今後も新規プロダクトとの連携や機能開発を進めるには、少しでも認知負荷を上げずに開発しやすい状態を保ち続けるか、が重要だと感じました。 その課題感の中で、今回はモジュラモノリスを選択し導入をしましたので、そちらのお話をしたいと思います！ 現状の課題感 私が入社した3年前から STORES 予約 の開発メンバーは3倍になり比較的新しいメンバーが多く、また古くからいるエンジニアも少数な

はじめに 2024年1月にリテール(ネットショップ・レジ)部門からサービス(予約)部門に異動になった @ucks です。 異動してからはスマートリストという機能の開発を行っていて、5月6日に無事リリースできたのと、開発途中で障害に至ってしまった部分があるので、裏側を少し紹介しようかなと思います。 はじめに スマートリストとは スマートリストの設計 検索の仕様変更 高負荷時のハンドリング そして障害へ 見逃した点 DBの実行計画確認時の見逃し 動作確認時の漏れ 監視先の漏れ ログの損失 おわりに スマートリストとは スマートリストの開発についての話を行う前に、まずはスマートリストについて簡単に説明しておきます。 スマートリストとは、特定の条件の顧客をラベリングする機能です。 早い話、最終予約日がいつ、予約回数が何回以上等の顧客の検索条件を保存しておいて、閲覧時にラベリングして、視認しやすくし

こんにちは、うしろのこです。直近1年ではVueから離れて、maja と呼ばれる組織管理基盤の新規プロダクトの開発をしていました。 プロダクトの話はこちら(maja)↓ note.st.inc 今回は、0->1における技術選定や開発中の工夫、結果どうだったかなどを書きます。 技術選定 初めに、前提条件は以下のような感じでした。 メンバーはReactの経験が豊富、フロントを触るのは多くて3,4人くらい 常にユーザー認証された状態で操作されるため、FE用のmiddleware的な層があるとうれしい toBアプリケーション せっかくなので使ったことのないものを使ってみよう、ということで、すでにWAFでの導入が進んでいたCloudflareの技術の採用をFEでも検討しました。少し触った感じではdeploy体験がよく、ローカル開発環境であるwranglerの出来も申し分なかったため、Cloudflar

テクノロジー部門で Ruby インタプリタ開発をしている笹田です。 Ruby ではメソッドを駆使してプログラミングをします。そんな Ruby を使っていると、一番使われているメソッド や 一番定義されているメソッド を知りたいと思ったことはありませんか？　私はありませんでした。 が、ものは試しと調べてみました！　調査は、あるタイミングの Ruby の RubyGems で取得できるすべての Gem （の各 Gem の最新版）を集めてきて、その中の .rb ファイルをすべて読み込み、字面上で呼び出されているメソッドと、定義されているメソッドを集計したものです。実際に動かしたときに呼ばれたり定義されたりするメソッドの数の集計ではないことに注意してください（それは、実行しないとわからないので、網羅的な調査は難しいのです）。 ちなみに、この記事は、Ruby のメソッド定義時に仮引数があるとき、それ

2024年4月18日に『GitHub Copilot Enterprise 使ってますか？ STORES での活用風景』を開催しました。イベントでお話した内容を文字起こし形式で紹介します。 hey.connpass.com Copilot Enterpriseを導入した経緯 hogelog：簡単に自己紹介させていただきます。hogelogです。技術基盤グループでエンジニアマネージャーをしています。よろしくお願いします。 waniji：佐々木と申します、ハンドルネームはwanijiです。開発A本部サービスGTMグループ所属、STORES 予約 のエンジニアをやっています、よろしくお願いします。 phayacell：山下です、ハンドルネームはphayacellです。エンジニアで STORES ネットショップ や STORES レジ のエンジニアをやっています。機能開発がメインです。よろしくお願

はじめに こんにちは、id:ahogappaです。 ここ最近ずっとRubyスクリプトのワンバイナリ化ついて模索しており、 zenn.dev zenn.dev 先日、ついにRubyKaigi 2024でこれまでの成果を発表してきました。 https://rubykaigi.org/2024/presentations/ahogappa0613.html#day2 speakerdeck.com 今回は、RubyKaigiで盛り込みきれず発表できなかった内容を、今後の備忘録としてもまとめてみようと思います。 RubyKaigiの発表について 簡単にRubyKaigiで発表内容について紹介しますと、 Rubyにおいてワンバイナリ化する用途・モチベーション 作ったGem(Kompo)の紹介 ワンバイナリ化する手法 今後やっていきたいこと について発表してきました。 今回私はワンバイナリ化ツールとし

STORES 予約 エンジニアの水野です。STORES 予約 の店舗管理画面で利用しているTypeScriptをv4.8からv5.5にアップグレードしたので追加された主な機能をおさらいしようと思います。 satisfies (v4.9) v4.9で実装されました。 型アノテーションのように型付けしつつ型推論も行う演算子です。 例を見てみましょう。 type Color = 'red' | 'green' | 'blue' const pallet: Record<Color, string | number[]> = { red: [255, 0, 0], green: '#00ff00', blue: '#0000ff', } // pallet.red => string | number[] pallet.redの型はstring | number[]となっています。これはRecor

こんにちは、技術広報のえんじぇるです。STORES はRubyKaigi 2024でNursery Sponsorとして、0歳（首すわり完了、生後3・4ヶ月頃）～12歳までを対象とした託児所の企画運営をしました。3日間で合計23名のお子さんをお預かりし、保護者の方がRubyKaigiに集中できる環境を提供できました。 Nursery Sponsorを選んだ理由とRubyKaigi 2024に向けた思いは、開催前に書いているので下記をご覧ください。 product.st.inc 本記事では実際にどうやったのか、どんな様子だったのかをお伝えします。カンファレンスやイベントで託児所の設置を考えている方の参考になれば幸いです。 準備〜実施までのタイムライン 12月下旬 Rubyプラン相当のカスタムスポンサーとしてNursery Sponsorを提案 RubyKaigiオーガナイザーからアクティビテ

STORESでフルタイムRubyコミッタをやっている遠藤（@mametter）です。 最近Rubyインタプリタのとある問題の修正に成功した（と思う）ので紹介します。といっても格好良い話ではなく、とても泥臭い話です。 問題 RubyのCIで不定期に次のようなエラーが発生していました。いわゆるflaky test。 1) Failure: TestSymbol#test_inspect_under_gc_compact_stress [.../ruby/test/ruby/test_symbol.rb:126]: ":testing" expected but was ":\"\\x00\\x00\\x00\\x00\\x00\\x00\\x00\"". 発生確率が絶妙で、しばしば起きるのですが、デバッグのために狙って再現しようとしても起きないという代物でした。 問題の分析 エラーが起きていた

STORESでフルタイムRubyコミッタをやっている遠藤（@mametter）です。 昨日は RubyKaigi 2024 の STORES ブースで開催していた企画 Ruby "enbugging" quiz の解説をしましたが、ブースでは Ruby Paper Craft というのも配布していました。今日はこちらを解説します。 STORES ブースで配布しているもの🎁 Ruby Paper Craft made by @mametter #rubykaigi pic.twitter.com/7tc62pZmkJ— STORES Tech (@storesinc_tech) 2024年5月15日 これは何 組み上げたらRubyっぽい形になるペーパークラフトです。 Ruby Paper Craftを組み上げた様子 遠藤が展開図を生成するプログラムを書きました。もちろんRubyで。そのスク

STORESでフルタイムRubyコミッタをやっている遠藤（@mametter）です。 STORESは今回RubyKaigi 2024で、託児所を運営する「ナーサリースポンサー」として参加していました。この様子は後日詳報しますが、それ以外にも参加者に楽しんでもらえる企画をいろいろな形でしていました（予告記事を参照）。 この記事ではその中でも、ブースでやった「Ruby "enbugging" quiz」について、解答や出題意図などを紹介します。 Day 1 終了時のスコアボードです！ 3点の方もたくさんいらっしゃいました！ Day 2のクイズも楽しんでください😊#rubykaigi https://t.co/RJIBEqsFSf pic.twitter.com/ewp22Cs7jr— STORES Tech (@storesinc_tech) 2024年5月16日 概要 動作しているプログラ

こんにちは。 STORES 決済 でAndroidアプリエンジニアをしている Yamaton です。 早いもので、4月ももうすぐ終わりを迎えます。新社会人の皆さん、もう少しで待ちに待ったゴールデンウィークですね！ さて、今日は、この時期に先輩社員が頭を悩ませている「目標設定」について、「そもそも目標設定って何なの」から、陥りがちな落とし穴と回避方法まで紹介します。 なんで目標設定で頭を悩ませてるの？ やり方は企業によって異なりますが、通常、1年を半分から1/4に区切って、その期間内に達成したい目標を設定し、それを達成できるよう進めることが一般的です。 半年を1期間とする企業では、4月がおおよそ 中間 ふりかえりの時期となります。周囲の先輩社員も、1月に目標を立て、日々の業務と両立しながら目標達成に向けて進んできたはずです。 しかし、4月になって振り返ると、目標達成に必要なステップがまだ残っ

こんにちは、STORES エンジニアの id:hogelog です。 2024/5/15-17の日程で実施される RubyKaigi 2024 に関連して、STORES が実施する様々なことについて紹介したくブログの筆を取りました。 rubykaigi.org ブースの紹介 STORES は RubyKaigi 2024 に Nursery Sponsor として協賛しており、スポンサーブースを設けています。 Nursery Sponsor としての活動については、以下の記事で詳しく紹介しています。 （託児サポート、美ら海水族館アクティビティについては申込みを締め切りました） product.st.inc ブースでは、以下のようなお楽しみコンテンツをご用意しています。 @mame によるお楽しみ Ruby クイズ クイズを解いた方にはさらなるプレゼントも 沖縄の STORES 利用事業者の

テクノロジー部門で Ruby インタプリタの開発をしている笹田です。RubyKaigi 2024 楽しみですね。 さて、Ruby のメソッドを定義するとき、仮引数がある場合、カッコを省略することができます。 def foo(x, y) end def bar x, y end bar の定義の方法ですね。私は好んでこの書き方をしてたんですが、同僚の遠藤さんに「そんな書き方をしているのは今時笹田だけだ」と言われてショックを受けたので、ちょっと調べてみました。 ちなみに、カッコがないと使えないメソッド定義の方法があるので、その時には涙を呑んでカッコをつけます。 def foo(kw:) # 必須キーワード引数 end def bar(&) # 無名ブロック引数 end 補足１：Ruby では「メソッド呼び出し時にカッコをつけるかどうか」にいろいろな論争がありますが、ここでは「メソッドを定義する

こんにちは、技術広報のえんじぇるです。 STORES は2024年5月15日（水）〜17日（金）に沖縄県那覇市で開催されるRubyKaigi 2024にNursery Sponsorとして協賛します。 託児サポートの詳細については下記サイトに記載しておりますので、希望される方はご覧ください。美ら海水族館に行くアクティビティも用意しています🐠 sites.google.com STORES がNursery Sponsorをやる理由 STORES は2023年7月にダイバーシティ方針を掲げ、多様な社員が「らしさ」や得意を生かすことで、顧客に価値を提供し続ける組織づくりを行なっています。多様な属性やライフスタイルを持つ人がエンジニアリングについて学べる・学びたいと思える社会に貢献することを目的として、2023年よりテックカンファレンスに「託児スポンサー」「ナーサリースポンサー」として積極的に

2024年2月13日に『YAPC::Hiroshima 2024 非公式ふりかえり会』を開催しました。イベントでお話した内容を文字起こし形式で紹介します。 hey.connpass.com 登壇者紹介 STORES hogelog：YAPC初参加 ヨヨイ：YAPCは3、4回参加経験あり hiromu：YAPC初参加 藤村：YAPC初参加 えんじぇる：YAPC初参加 スマートバンク 三谷：YAPC初参加、YAPC::Hiroshima 2024でベストスピーカー賞を受賞 nyanco：YAPCスタッフ 前夜祭の感想 hogelog：『YAPC::Hiroshima 2024 非公式ふりかえり会』を始めていきます。ぜひYAPCのスタッフだった方や登壇してた方などなど、喋ってもいいですよという方はぜひ挙手をしていただけると嬉しいです。 本日の登壇者側で喋る人を紹介させていただきます。私はhoge

はじめに STORES 予約でエンジニアをしているhiromu617です。この度 STORES では STORES レジ に STORES 予約 がもつ予約情報を連携できる機能をリリースしました。 この機能を提供するにあたってサービス間で通信をする必要がありました。サービス間の通信には、Schema Stitchingという技術を活用しています。 本記事では、Schema Stitchingの活用例について紹介します。 どのような機能か STORES レジ に STORES 予約 がもつ予約情報を連携できる機能です。STORES 予約を通じて入れた予約情報を元に STORES レジ で会計することができます。 予約情報を連携した STORES レジの画面 前提として STORES では商売に関する複数のプロダクトが展開されています。 それらのプロダクトのすべてが STORES という1つの

こんにちは、STORES のPX部門IT本部でマネージャー兼コーポレートエンジニアをしている中野（@howdy39）です。 STORES では今年に入ってトヨクモ社の安否確認サービス2をエンタープライズプランで導入しました。 もともと安否確認用途としては別のクラウドサービスを使っていたのですが、下記のような理由でシステム切り替えを行いました。 メールを見ない人もおおいのでLINE連携ができるようにしたい（安否確認の回答スピードと回答率をあげたい） 災害発生時に安否確認通知を自動送信したい（初期対応に時間がかかる） アカウント発行・削除を自動化したい（運用コストをなるべくかけたくない） 本記事では、コーポレートエンジニアがセキュリティやAPIを考慮しつつ安否確認システムの導入を行うとどのような運用設計をするのか？という内容で書いていこうかと思います。 想定読者 安否確認サービスの導入をしよう

2023年9月26日に開催した『STORES.rb × Asakusa.rb』のトーク部分を文字起こし形式でお届けします。 hey.connpass.com STORES がRubyコミッターを迎えた理由 藤村：STORES.rb×Asakusa.rbにお越しいただきありがとうございます。よろしくお願いします。ご存知の方も多いと思うんですが、笹田さんと遠藤さんが STORES に入社されました！やったー！プレスリリースが9月1日に出たんですね。写真を撮りました。 www.st.inc 笹田：なんかプレスリリースに出る系エンジニアって言われました。 遠藤：入社時にプレスリリースを出すことを要求するエンジニアっていう。 一同：（笑） 藤村：こんな感じで記事も出しました、という感じで STORES に来ていただきました。 people.st.inc で、これはただの自慢なんですけど、遠藤さんが作

テクノロジー部門CTO室の笹田（ko1）と遠藤（mame）です。今年の 9 月から STORES 株式会社で Ruby (MRI: Matz Ruby Implementation、いわゆる ruby コマンド) の開発をしています（Rubyのこれからを STORES で作る。Rubyコミッター笹田さん、遠藤さんにCTOがきく「Fun」｜STORES People ）。お金をもらって Ruby を開発しているのでプロの Ruby コミッタです。 本日 12/25 に、恒例のクリスマスリリースとして、Ruby 3.3.0 がリリースされました（Ruby 3.3.0 リリース）。クックパッド開発者ブログで連載していたように、今年も STORES Product Blog にて Ruby 3.3 の NEWS.md ファイルの解説をします（ちなみに、STORES Advent Calendar

この記事は STORES Advent Calendar 2023 の30日目の記事です。 はじめに STORES 予約でエンジニアをしている望月です。 近年、Webアプリケーションのフロントエンド開発において、Reactなどのモダンな技術がリッチなユーザーインターフェースの実現を目指して頻繁に採用されるようになりました。 これに伴いRailsアプリケーションの開発方法も変化しています。 従来のRailsによるView層でのフロントエンド実装から脱却し、Railsは主にAPIサーバーとしての役割を果たす構成が増えてきました。 Railsを基盤に構築されているSTORES 予約でも、従来のRailsのView層の代わりにNext.jsを用いたフロントエンドのリニューアルが進行中で、バックエンドのRailsはAPIサーバーとしてのJSONによるリクエスト処理に注力しつつあります。 今回は、Ra

こんにちは。 STORES ブランドアプリのチームで iOS エンジニアをしている榎本( @enomotok_ )です。 これは STORES Advent Calendar 2023 の記事です。 私が普段仕事をしていて感じるPull Request (以下 PR )を迅速にマージすることの効用について、日々の取り組みと考えを言語化してまとめます。 なぜ Pull Request を早くマージしたいか 私たちは日々多くの仕事に忙殺されています。 PR を完成させたら、基本的には次のタスクに取り掛かります。 PR の生存期間が長いと、次のタスクとのマルチタスクが増え、それが長引くことになります。マルチタスクにおけるコンテキストスイッチが生産性に悪影響を及ぼすというのはよく言われる話です。 また PR が大きなタスクの一部であった場合に、 PR をマージできないことが次の仕事をブロックする可

この記事は STORES Advent Calendar 2023 22日目の記事です。 こんにちは STORES 予約開発チームでエンジニアリングマネージャーをしています Natsume です。 昨今 Passkeys が各サービスで導入されており、勢いを感じています。 個人では 1Password のパスワードマネージャーを使っており、1Password が Passkeys 対応してから試しています。 Passkeys でのログインは ID/PW/OTP の autofill などに比べて 1step 省略される程度ですが、ログイン体験が良いと思っており、導入されていたらどんどん切り替えています。 ほどんどのサービスでは ID/PW との併用となっているケースが多く、セキュリティ面でのメリットを享受できるのはまだ先になりそうです。 個人的に Passkeys の実際の挙動や導入する時

はじめに この記事はSTORES Advent Calendar 2023 19日目の記事です。 こんにちは、 STORES 予約 でエンジニアをしている@tontokoです。 STORES 予約 の開発チームでは月に1回、コードクリーニングタイムと呼ばれる日を設けています。 これは普段なかなか手を付けるタイミングが無かった技術負債や、重要ながら後回しにされているタスクなどを片付けることを目的にしています。 当日は緊急度の高いものを除き普段のプロダクト開発の手を休め、内部品質の向上に集中します。 自分は前回のコードクリーニングタイムに、ビジュアルリグレッションテスト(VRT)をフロントエンドリポジトリに導入しました。 導入の経緯 STORES 予約 ではバックエンドのテストに比べると、フロントエンドはまだまだテストの数が少ないです。 ライブラリのアップデートなどの全体に影響する変更の際に、

Rubyist Hotlinksにインスパイアされて始まったイベント『Rubyistめぐり』。第4回はima1zumiさんをゲストに迎えて、お話を聞きました。こちらは前編です。 hey.connpass.com メイプルストーリーでタイピング力を鍛える 藤村：Rubyist HotlinksってコンテンツがRubyist Magainzeにあって、僕はそれを読んで「プログラマっていうのはこういう人たちなんだな」と、やや偏りのあるガイドを基に成長したところがあり、すごい好きだったんですけど、 また復活しないかなと思っているところでふと思いついてやり始めたのがRubyistめぐりです。なんと4回目ということで無事続いてて嬉しいなと思っています。 今回はima1zumiさんにお越しいただきました。Rubyコミュニティの方はご存知の通り、大活躍されているんですが、今日はどんなふうにima1zumi

こんにちは、モバイルアプリエンジニアのnekoです。 今回は STORES ADVENT CALENDAR 10日目の記事として、先日行ったKotlinを始めとしたAndroidアプリのライブラリバージョンアップの話を書きたいと思います。 概要 まず、概要として、主なバージョン変更箇所は下記のとおりです。 その他、依存するライブラリ群もアップデートを行いました。 対象 変更前バージョン 変更後バージョン Kotlin 1.7.20 1.9.20 Gradle 7.2.2 8.1.2 Coroutines 1.6.1 1.7.3 Compose 1.3.1 1.5.0 targetSdkVersion 33 34 JVM 11 17 主な変更点 名前空間の指定 AndroidManifest.xmlのpackage属性として名前空間を設定していましたが、build.gradleのnamesp