はじめに 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倍になり比較的新しいメンバーが多く、また古くからいるエンジニアも少数な

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

みなさんこんにちは、モバイル開発本部の 坂田 / @huin です。 最近さまざまな方面から Creepy Nuts の R-指定さんに似てるといわれています。 存在自体が文化財な脳味噌っていわれてみたい人生でした。 いや、ワンチャンまだ余白はあるはず。 さて、前回の STORES モバイルだより 2023冬号 からおよそ半年ということで、今回もモバイル開発本部の近況報告を... と、いきたいところなのですが、今回はプロダクトやチームの "現在地" はお休みして、 最近かんがえてるモバイルチームの今後について書こうと思います。 STORES が目指すプロダクト 今後について話す前に、まずはここ数年の STORES を振り返るところから始めたいと思います。 2021年3月 私が入社したタイミングでは、STORES（当時はhey）が持っていたプロダクトは STORES ネットショップ / ST

タイトル こんにちは！ STORES 株式会社でエンジニアをしています、永尾です。 突然ですが、過去誰しもが不適切に大きな Pull Request によって悲しい気持ちになったご経験があるかと思います。 自分にもその経験があります。 皆様もご存知の通り、大きな Pull Request には多くのデメリットがあります。その一つが、レビューコストです。 レビューコストが大きい Pull Request は、マージまでのリードタイムが長くなります。 余談ですが、私が所属するチームではカンバンのステータスに「Sprint Backlog」「In Progress」「In Review」「Done」を設けています。 ある日、「Sprint Backlog」ステータスにあるチケットに着手し、ステータスを「In Progress」へ移動させました。 その後、実装を終えて Pull Request を

こんにちは。STORES 開発企画室の上杉です。 なんとなく個人的なテーマで、生成AIの利用を社内に広めたいと思っています。この度、Courseraで公開されている Generative AI for Everyone という生成AIのコースを受けてみたので紹介してみたいと思います。 はじめに Courseraはオンライン教育プラットフォームの一つで、2012年にスタンフォード大学のコンピューターサイエンス教授である Andrew Ngさん が始めたプラットフォームです。Andrew Ngさんは深層学習の分野でGPUの活用を提唱した人物であり、数年前にはこのプラットフォームでMachine Learningのコースを提供し話題になりました。私も以前Machine Learningを受講し、機械学習に関する理解を深めることができました。 ここ数ヶ月の生成AIの変化は非常に速く、追いつくのもや

蒸し暑い日々が続きますね。 こんにちは！ STORES 決済 モバイルチームの Engineering Manager、 iOS アプリ・SDKの開発を担当しております。 いわいです。 みなさん、issueやPRを作成する時に動画を貼ったりしますよね? 折角貼るなら、ファイルサイズを軽くしたり、見やすく編集したりしたいですよね? ぼくはしたいです！ というわけで、このブログは簡単に動画を編集するお話です。 ※はてなブログには動画を貼れない為、動画はDropboxのリンクになっております。ご了承ください。 QuickTime Player トリミング まずはトリミング。 ぼくは iOSエンジニアなので、iPhone や iPad でアプリが動作している動画を撮ることが多いです。 その際に、前後に不要な部分が録画されてたりする場合は QuickTime Player を使ってトリミングをしてい

こんにちは、STORESの @tomorrowkey です。STORES ブランドアプリの開発に携わっています。STORES ブランドアプリはお店ごとにオリジナルアプリを作れるサービスを提供しており、新しいアプリを作る機会が多くあります。そのため、スピーディに新しいアプリを作るための効率化に積極的に投資しています。今日はそんな効率化の一つを紹介したいと思います。 Androidと画像 Androidデバイスにはさまざまな多様性があり、デバイスのサイズ、スクリーンの解像度などから、元来dpという概念を使い、いくつかの画面密度に対してビットマップ画像を用意してリソースを用意することで、それらの多様性に対応してきました。 そんな従来のビットマップ画像を用意する方法では、画像のバリエーションをたくさん用意すればするほどアプリサイズが肥大化してしまう問題がありましたが、最近ではベクター画像を使うこと

はじめに こんにちは、STORES レジ予約アプリのエンジニアをやっている @nekowenです。 私は2024年6月8日から6月15日の間 WWDC24 に現地参加のためサンフランシスコへ渡航しました。 本記事では現地入りする前の事前準備から、一連のイベントを終えるまで、まるっと雰囲気や内容を写真付きでご紹介いたします。 WWDC とは WWDC(Worldwide Developers Conference) は Apple が毎年開催するテクノロジーカンファレンスです。 最新テクノロジーや OS、API のアップデートについて基調講演が行われるほか、Apple のエンジニアと話したり、他のデベロッパーと交流する機会が得られます。 イベントはオフライン + オンラインの同時開催で行われ、オフラインは三日間、オンラインは一週間行われます。 オフラインはカリフォルニア州クパチーノ市にある

こんにちは、STORESの @tomorrowkey です。 STORESのモバイルチームでは社外向けに ebisu.mobile などの勉強会を主催していますが、社内においても盛んに勉強会がおこなわれる文化があります。 この記事ではSTORES社内でAndroidエンジニアが取り組んでいる勉強会を紹介します。 hey.connpass.com 課題に感じること STORESには複数のプロダクトがあり、普段の業務はプロダクトに向き合うので、他のプロダクトに関わっている人との関係性を築きにくいです。*1 また、現在STORESではリモートワークが中心となっており、出社しているときと比較してライトなコミュニケーションがとりにくいというのも理由の1つとなっています。 www.st.inc 勉強会を開催しよう せっかく同じ技術を扱っているのだから、お互いに技術を補完しあったり、関係性を作っておくこ

こんにちは、技術広報のえんじぇるです。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 のみなみ(nannany)です。 先日 JJUG CCC 2024 Spring で PCI DSSの観点から見たセキュアなJavaアプリケーション というタイトルで発表をさせていただきました。 この記事では、発表の内容には触れず、登壇するまでの出来事やふりかえりを記述します。 登壇するまで 動機 登壇を目指したきっかけは、内から溢れ出る伝えたい事柄があったというよりは、STORES 全体として登壇数を増やしていこう！という波に乗ったというのが正直なところです。 また、これまでカンファレンス登壇をしたことがなかったので、一度登壇を経験してみたいという気持ちもありました。 CfP提出までの動き(~2/29) 一般的に、何らかのカンファレンスで登壇したい、となったらCfP(Call For Proposal)という発表の要旨を記述した文章を提出する必要があります

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

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の @tomorrowkey です。STORESでは STORES ブランドアプリ の開発を行っています。 4月19日に開催された Ebisu.mobile #5〜モバイルアプリの品質改善どうしてる？〜 でお話しした「Compose Compiler Metricsを使った実践的なコードレビュー」についてブログにもまとめておきます。 product.st.inc ブランドアプリの状況 皆さんのプロダクトのAndroidアプリでも同様かと思いますが、STORES ブランドアプリでもJetpack Composeへの移行を進めています。せっかくアプリのフロントエンドを書き換えるのであれば、パフォーマンスも気にしたいですよね。では、Jetpack Composeでパフォーマンスが良い実装とはどのようなものでしょうか？ Jetpack Composeでパフォーマン

こんにちは、STORES 予約 でエンジニアをしている@tontokoです。 STORES 予約 では、お客さまが予約を入れるための予約フローをリニューアルしました。この記事ではその内容を少しご紹介します。 予約フローとは STORES 予約には大きく2つの画面があります。 一つはオーナー様の提供するサービスを予約者様に予約いただく予約サイト・予約フロー、 もう一つはオーナー様がどのような予約を受け付けるかを設定をしたり、予約の管理や予約者様にコンタクトを取ったりなどを行う事業者用のダッシュボードです。 今回のリニューアルはそのうち、予約者様が使用する予約サイト・予約フローを大規模に刷新するものです。 デザインとUX あたらしい予約フロー 既存の予約フロー まず目に見える部分では、デザインが社内のデザインシステム「STAND」に統一されました。まだリニューアルしきれていない部分もありますが

こんにちは。STORES で採用人事をしている @MarieMukohara です。 今年 STORES では24卒エンジニア入社者向けに研修を実施しました！この記事では、技術研修の一部内容を公開します。 ポテンシャル採用の研修の目的 STORES ポテンシャル採用で入社された方は、実務インターンなどで一定の技術力がある方がほとんどです。研修では、技術的に更に広く深い視点を身に着けてもらうことはもちろん、社会人としての基本的なスキル・スタンスも学んでもらうことを目的として実施しました。 22卒、23卒で入社したエンジニア社員、受け入れマネジャー・メンターの皆さんにもヒアリングを実施し、入社後活躍いただくために重要な以下の力を定義し、研修のコンテンツを設計しました。 実務を進めるうえで必要なベーススキル・スタンス ロジカル・シンキング ロジカル・ライティング タスクコントロール CSの基礎知

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

STORES 株式会社でエンジニアリングマネージャをしている @morihirok です。 私がマネジメントをしているエンジニアチームは主に STORES ネットショップと STORES レジというふたつのプロダクトを開発しています。 私たちは2022年までフロントエンドとバックエンド、クラウドインフラで別のチームとなっていましたが、2023年に技術横断で1つの価値を作り出すフィーチャーチームへと変わりました。 この記事ではどのような課題感から組織を変えることを決めたのか、変えるためにどんなことをしたのか、変えた結果どうなったのか、についてお話しします。 技術別チームができるまで STORES ネットショップ はもとはブラケット株式会社というベンチャーが開発・運営していたサービスでした。少数精鋭のチームですべてを開発・運営し、単体での黒字経営ができていました。 2018 年に STORES

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