こんにちは。 最近暑くてホットコーヒーが飲めない季節になってきたなぁと感じています。8zkです。 この記事の前にGET編も書きましたので、よければそちらから見ていただくとわかりやすいかと思います。 というわけで今回は採用理由とSWRとはは割愛させていただきます。 前回と同様にfetcherが必要なので以下のように定義します。 // /src/helpers/fetcher.ts import axios from 'axios'; export const fetcher = axios.create({ baseURL: 'https://jsonplaceholder.typicode.com', timeout: 10000, headers: { 'X-Custom-Header': 'foobar' }, }); axios.createを使ってaxiosのinstanceを作成

こんにちは。 最近じめじめしていて髪の毛が爆発しています。8zkです。 先日SWRを使う機会があったので今回はそのご紹介をしたいと思います。 SWRとは Vercel社が提供しているデータ取得のためのライブラリです。 特徴は下記の通りです。 速い、 軽量 そして再利用可能なデータの取得 組み込みのキャッシュとリクエストの重複排除 リアルタイムな体験 トランスポートとプロトコルにとらわれない SSR / ISR / SSG support TypeScript 対応 React Native 対応 採用理由 SWRを採用した理由は、プロジェクト内のデータ取得のロジックを単純化してdata, error, isLoading, mutateを提供してくれるからです。 また、キャッシュ機構を持っているため、不要なリクエストを防ぐことができます。 今回はSWRの紹介ではなく、より実践的（？）な形で

こんにちは、スペースマーケットでモバイルエンジニアをしている村田です。 2024年1月から私が所属するアプリチームは、予約リクエスト率の向上を目的とした施策の立案をエンジニアが自ら行うよう動き始めました。上流から落ちてきた決定事項を粛々とこなすだけのタスクを行なっていた前職SIerの自分からすると、ユーザー行動分析を行いユーザー体験を改善するアイディアを考えるのは難しい作業でした。 そんな自分発信で進んだ施策の機能が先日リリースされたので、本記事で共有できればと思います🙏 仮説/アイディア スペースマーケットはイベントスペース/貸し会議室/撮影スタジオなどさまざまなタイプのスペースを30,000件以上掲載しており、ユーザーはその中から利用目的に合致するスペースを見つけ出す必要があります。スペース検索時に細かな条件を設定することで、最適なスペースの検索を可能とします（以下例）。 例えば私の

はじめに こんにちは。スペースマーケットでWebエンジニアしてます、新卒のdumbled0reです。 4月に入社してから早2ヶ月経って、入社式が昨日のように感じています。時の流れは早い。 日頃、ブラウザ操作する時はPythonのライブラリであるSeleniumを使用していましたが、vscodeにあるPlaywrightの拡張機能を使用すれば非エンジニアの方でも簡単にブラウザ操作用のコードを書けたので紹介します。 Playwrightとは PlaywrightとはMicrosoftが開発したオープンソースのE2Eテスト自動化フレームワークです。 Chromium、Firefox、WebKitなどの主要なブラウザで対応しており、1つのコードで複数のブラウザ上で動作確認も行えます。 環境 node 20.9.0 playwright 1.44.0 拡張機能のインストール 今回使用するVScode

私が好きな惣菜はメンチカツ、わらびを使ったおひたし的なやつ（正式名称不明） 好きな惣菜がまた出てきた時は発表したいです。 ということで最近私たちのチームで生産性を上げるためにいくつか取り組みをしてみたのですがどんどん生産性が上がっているのでそこで行なった取り組みを発表します。 これで皆さんのチームも良くなるかは分かりませんが、参考にできる部分があると嬉しいです。 以前タスクを小さくしようという話も書いたので参考までに チームの課題を見つける まずはチームの課題を見つけるところから始めました。 何をするにもチームの生産性を上げるためにはその中での課題を見つける必要があります。 ちょうど3月に新たなEMが誕生したので、チームを分割し2つのチームに分かれました。 そのタイミングで改めて新しいメンバーの課題点を洗い出してみました。 弊社ではFindy Team+を導入しております。 Findy T

はじめに こんにちはderaです。 本題とまったく関係はありませんが、先日、スペースマーケットチームで企業対抗駅伝に出て走ってきました。イベントがあると張り切って練習しちゃうキャラなんですが、思ったよりも練習に時間が割けずちょっと悔しい結果でした。 次の同じ大会はおおよよ1年後。今年より良い結果だしたろー、と思っています。 さて、今回の内容ですが、最近、BigQueryにあるデータを Cloud Workflows を使って加工するという事をやっています。その過程で、処理失敗時の通知をお手軽にSlackに通知する方法を調べたので備忘録として書き起こしました。 ロギングサービスを使ってSlackに通知する方法になるので、GoogleCloudを利用するほとんどの場合に利用できる方法になると思います。 通知チャンネルの作成 まずは、通知チャンネルの作成を行います。通知チャンネルとはどこに通知す

皆さんこんにちは！ 先月行われた武尊vsスーパーレックの試合観ましたか？？（この試合最高に面白かったです） 趣味でキックボクシングをやっていますが、スーパーレックの強烈なローキックを見てからマススパーリングなどでローキックを出せるように日々練習しています🔥 ↓↓まだ観てない方は是非！ ということで本題に入ります！笑 Arrayコンストラクターとmapを使って任意の数の配列を作成する場合、fillメソッドがないと意図した挙動にならない問題 Arrayコンストラクターとmapを使って1~7の数字が入ってる配列を作成する場合、以下のように記述すると、何も入っていない配列ができてしまいます。 new Array(7).map((_, index) => index + 1) // [ <7 empty items> ] とりあえず意図した挙動になってくれたものの「fillって何してるの？」「fi

その前にイカれたメンバーを紹介するぜ！ 読書家のジョニー！ 以上だ！ 輪読会について 弊社では最高にクールなメンバーで構成されたCoolな輪読会というものがあります。 毎週水曜10時から開催しています。 どのくらいクールなメンバーであるかというと圧倒的成長を遂げるために集まっているのでそれだけでクールなわけです。 さて、この輪読会ですがまもなく輪読会が始まってからそろそろ1年が経とうとしています。 はじまりはこのSlackの投稿からでした。 今回に限らず弊社でもいろんなところで有志の輪読会が始まっては終わっていますが、これほど長く続いている輪読会というのはかなり珍しいです。 しかもクールな輪読会は業務時間外で輪読会が開催されています。 本は事前に読んできて当日感想や疑問などをみんなで共有し解消していくスタイルをとっています。 最高にクールですね。 なぜ業務時間外でも長く続いているのかそのク

1. はじめに スペースマーケットでWebエンジニアをしています。新卒のShotaです。 今回のテーマは「質問」です。 新卒エンジニアや初学者の多くは一人でタスクを完結することは難しいです。 そのため質問をする機会が生じるでしょう。 しかし、メンターの都合が合わない場合、非同期でコミュニケーションを取る必要があります。 この際、Slackを通じて質問しますが、相手が内容を理解しやすくなるように工夫しています。 この記事では、自分の経験を元に質問文の構成例を考えてみます。 2. 質問文のイメージ Slackで投稿する質問文は、下記の構成で投稿しています。 タスクの概要 (チケット名/画像/リンクなど) 質問 (相手に聞きたい内容) 背景 (どのような経緯で課題に直面したか) 自分で調査したこと (具体的な調査内容/実行してみたこと) 3. 質問文の各内容について 1. タスクの概要 施策など

起動確認 いつもの 初期設定 VSCode左下の><をクリック 開発コンテナー構成ファイルを追加 ワークスペースに構成を追加する こちらを選択することでGit上で構成ファイルを管理出来ます。 定義済みのコンテナー構成定義から Node.js & TypeSctipt 導入する、言語などを選択してください。 バージョンを指定してください。 お好きな拡張機能を追加してください。 .devcontainer/devcontainer.jsonに以下の様なファイルが出来上がります。 // For format details, see https://aka.ms/devcontainer.json. For config options, see the // README at: https://github.com/devcontainers/templates/tree/main/src/

はじめに スペースマーケットでAndroid/Flutterエンジニアをしていますseoです。 最近、弊社Appチームではデータドリブンな開発を目指して、日々、試行錯誤を行なっています。 その一環でAndroidアプリに導入したClarityというツールについて、本記事で紹介できたらと思います。 Clarityとは *Clarity Apps Demoより抜粋 Microsoft社が提供しているツールです。 主な機能として、ユーザーがどれくらいの頻度で、画面のどの部分をタップしたかがわかるヒートマップ機能があります。 他にもスクリーンレコード機能など、ユーザーがどのような使い方をしているかが具体的にわかるツールとなっております。 Clarityからわかった課題 弊社のスペースマーケットアプリにもClarityを導入し、数週間データを蓄積したところ、このようなヒートマップが浮かび上がってきま

おはようございます、こんにちは、こんばんは。 スペースマーケットでWebエンジニアをしています、s0arです。 YouTubeくんが猫ミームを無限にオススメしてくるようになりました。 猫ミーム以外も見たいンゴ この記事 is 何 zshをきゃわにするテーマ、Powerlevel10kを導入する記事です。 自宅のWindows PCを新調した際、WSLに導入したので、その備忘録です。 あくまで本題は以下の導入で、WSLについてはめちゃくちゃ蛇足です。 zsh zplug prezto powerlevel10k これ以外のテーマもたぶん手順は同じ zshを使っている（使おうと思っている）方にはオススメできる記事になっているはずです。 たぶん。きっと。 環境 ホストOS: Windows 11 Home WSL: Ubuntu 22.04.4 LTS 導入していく WSL 難しいことは何もあり

前談 本番リリースの待ち時間ってドキドキして、他の作業も手につきませんよね？ そんなモヤモヤタイムを減らすべく今回Next.jsアプリケーションの本番リリース時間を半分以下に出来たので何が効果的だったのかの共有記事になります。 概要 Next.jsの本番リリースフローを見直して、本番リリース時間の短縮を目指しました。 今回の記事では、細かい実装内容については省略している部分がありますので、どんなことをやれば時間短縮につながるのか？といった部分の確認にいただければと思います。 基礎技術 Amazon ECS Amazon ECR Nextjs Yarn 修正を加えた技術 AWS CodePipeline GitHub Actionsへ移行 AWS CodeBuild GitHub Actionsへ移行 成果 本番へのリリースフロー全体の待ち時間 40分→18分に短縮 内訳 ステージング環境か

「あれ？RuboCopの設定は残っているけどCIで動いてないのでは・・？🤔」 はじめまして、エンジニアのもりわきです。 スペースマーケットには昨年の11月に入社しました。 （入社エントリも書いたのでよければどうぞ！） 今回は入社後から1ヶ月くらいRuboCopの整備を少しずつしていたのでその経緯と効果をお伝えしようと思います。 はじまり スペースマーケットはバックエンドのAPIにRuby on Railsを利用しています。 あわせて、静的解析ツールとしてRuboCopの導入がされていましたが、これまでの歴史（今年で10周年です🎉）の中で運用する人が少なくなったり、Railsのバージョンアップに伴った警告が多く出てしまうことなどからだんだんと運用されなくなっていました。 一方でフロントエンドはというと、ESLintやPrettierを利用した開発が根付いており、品質を保つための取り組みが

Pythonの高速なスーパーセットとされているMojoがApple Silicon Macについに対応したので、早速インストールしてMojo入門してみました。 ※ 記事作成日の前日（2023年10月19日）に公開されました。 インストール手順 0. ModularにSign up 基本、上記から遷移した先の以下の場所に記載しているインストール方法に沿って入れていきます。（ちょっと詰まった部分あるので本記事ではそれも記載してます） なお、curlコマンド部分に記載されているMODULAR_AUTHの値は本記事で {YOUR_TOKEN_HERE} となっている場所で使うため、メモっておきます。 1. （Homebrewインストールしてない方は入れておく） 2. Modular CLIをインストールする

こんにちは、スペースマーケットでQAエンジニアをしている柴山です。 QAエンジニアイベントWACATE2023に参加し、喉を枯らすほどに熱狂しました！ そのイベント参加レポートとして、参加の動機や目的、感想などを記したいと思います。 構成が甘かったり誤字脱字はありますが、イベント後の熱量のまま書いているので、多少大目に見ていただきたく…！ イベントの概要 WACATE公式サイトより（https://wacate.jp/) WACATE（ワカテ）はテストエンジニア向けのワークショップであり、実践的なテスト技術やスキルを習得する機会を提供するイベントです。テストエンジニアの能力向上と情報交換を目的として開催されています。コロナ禍中はオンラインで開催されていたそうですが、今回は実に3年半ぶりのオフライン開催でした。 イベントの日程は2023年6月10日（土）〜2023年6月11日（日）で、参加費

こんにちは！ スペースマーケットでQAエンジニアをしている柴山です。 皆さんはテスト項目をどのように管理していますか？ 弊社ではスプレッドシートで管理していたテスト項目を、最近では一部のプロジェクトでQase（ケース）に移行しました。今回は、Qaseを運用する上で気付いたメリット/デメリットをご紹介します。 Qaseの概要 Qaseはクラウド上でテスト項目を効率的に管理するためのSaaS型ツールです。テスト項目の作成や実施、バグ管理、テスト結果の分析など、幅広い機能を提供しています。 Qaseには料金プランが4つ存在し、利用可能な機能がプランによって異なります。無料で利用できるFreeプランもありますが、アカウント数やAPI連携などに制限がありますので、チームでの導入を検討する場合はStartupプラン以上がおすすめです！ なお、弊社ではStartupプランを契約しています。この記事で示す

はじめに こんにちは 🍡🌸🌿 なぜか今年は花粉症を克服した ymizunuma です。スペースマーケットでエンジニアしています。 今回は GraphQL を実装していて詰まったことがあったので、自分なりに解決した方法を紹介します。もし、同じようにお困りの方がいれば参考になれば幸いです。 今回の内容 ある GraphQL のオブジェクトに同一種類のオブジェクト同士で比較/判断する必要のあるフィールドがあるとした場合に、主に N+1 問題を解決するために利用されるDataloaderの仕組みを利用して解決したので、実現したいこと、課題となるポイント、解決方法に分けて紹介します。 実現したいこと 同一種類のオブジェクト同士で比較/判断する必要のあるフィールドというのがどういうことかそもそもわかりづらいと思うので、以下に具体例を示します。 下記のように「指定した ID の飼い主」と「飼育して

こんにちは！ スペースマーケットでフロントエンドエンジニアをしている原口です。 先日テストを書いていたところ、urqlのキャッシュにより少しハマったためurqlのRequestPolicyについて調べてみました。 はじめに 対象読者 urqlのRequestPolicyの挙動を知りたい方 この記事で書かないこと urqlについての詳しい解説 また前段が長くなってしまったため、RequestPolicyの挙動だけ知りたいよ、という方は以下のセクションからお読みください🙏 ようやく本題 テストを書いてたらハマった urqlを使用し、データを取得する関数（fetchRecommendRoomList）を作り、その関数のテストを書いていました。 関数とテストは以下のようなものです。 export const fetchRecommendRoomList = async ( client: Cli

こんにちは！ スペースマーケットでフロントエンドエンジニアをしているmizukiです。 少し前に新規でコンポーネントを実装したのですが、パフォーマンスについてはあまり意識せずに実装したところ、画面の読み込みや処理にかなり遅延が発生してしまいました。 そこから処理速度を上げて遅延をなくすためにパフォーマンスチューニングをしたので、その話について書いていきたいと思います。 数値上の結論を先にお伝えすると、この改善をしたことで、当初は50秒ほどかかっていたユニットテストが7~8秒ほどまで短縮することができました。 （改めて文字に起こすと改善前は時間かかりすぎですね・・・） 問題発覚 コンポーネント実装時には、PCのchromeでローカル環境を立ち上げて挙動を確認していました。 コンポーネントではAPIからデータ取得後に少し複雑な加工処理を行なっていましたが、PCのchromeで見る分には特に遅延