こんにちは、Spacemarketのフロントエンドエンジニアの8zkです。前回はmicroCMSの導入について触れましたが、肝心なNext.jsのtemplateのコードについては全く触れていなかったので、それについて学びつつアウトプットしたいと思い、ブログを書いています。 使用ライブラリではさっそくですが シンプルなブログ で使われているライブラリがこちらです。"dependencies": { "@types/cheerio": "^0.22.31", "@types/node": "18.15.3", "@types/react": "18.0.2...

みなさん、こんにちは。Spacemarketのフロントエンドエンジニアの8zkです。エンジニアたるもの日々のアウトプットは欠かせないものですが、会社のブログ以外にも自分のブログにしょうもないこと書きたいな〜という時ありませんか？そんなこともあり個人ブログを作ろうと思ったのですが、今どきWordPressを使ってブログを書くのもフロントエンドエンジニアとしてはイマイチだし、かといってWordPressのようなリッチな管理画面を作るのも面倒だし・・・ということで色々と思い悩んでいたのですが、ついに良いものを見つけました！ それがmicroCMSです！https://microcm...

こんにちは。Spacemarketのエンジニアの8zkです。クリスマスツリーを買えないままクリスマスを過ごしました。寂しい。来年こそは買えるよう頑張ります！ 前提今回作成したアプリケーションは下記の通りです。9画面ほどの小規模開発フォーム検索ユーザー情報 etc...技術選定を行なうタイミングがBEの技術選定の前（プロジェクトに入るタイミングがフロントエンドの方が早かった）追加開発を行う想定 採用ライブラリ採用したライブラリはこちらです。{ "dependencies": { "@chakra-ui/icons": "^2.1.1",...

こんにちは、スペースマーケットモバイルエンジニアの村田です。以前書いた記事（[スペマiOS]ログイン/新規登録リニューアル）で触れた通り、弊社のiOSプロジェクトではデザインリニューアルや新規画面の作成時に、UIKitではなく積極的にSwiftUIを選択しています。SwiftUIへの移行を進める上でPresentaion層の設計を見直し、GraphQLの「Fragment Colocation」というデザインパターンを導入しました。導入にあたり、1つのコンポーネントに関与する要素が増えることにより、コンポーネント追加時に必要となるボイラープレートコードの記述が手間になってきました。そ...

みなさんこんにちは。株式会社スペースマーケットでWebエンジニアをしていますwado63と申します。Next.jsのプロジェクトのdependencyをアップデートしたいなと思っていたのですが、ついでにブログにしてしまえば一石二鳥かと思い、作業しながら書き上げました。 アップデートの前提条件弊社のNext.jsで導入しているSentryのバージョンを7.xのものからから8.xにアップデートします。（以下バージョンは呼びやすくv7, v8とします）弊社はSentryのインストールウィザードを使用して導入していていました。https://docs.sentry.io/platf...

おはようございます、こんにちは、こんばんは。スペースマーケットでWebエンジニアをしています、s0arです。グラコロうまい日頃の開発で覚えておくとはかどるコマンドやテクニックを書いていきます。（随時更新予定です） globパターン正直これだけのためにこの記事を書いてるところはある。でもこれだけだと3秒で読み終わる記事になるのでね。ワイルドカードを組み合わせてパスのパターンを指定できます。https://docs.oracle.com/ja-jp/iaas/Content/devops/using/glob-patterns.htmgit grepやVisual St...

はじめに自社でElasticsearchを使っているがあまり触ったことがなくて詳しくわからない、、導入したいと思っているがイマイチ勝手がわからない、、という方いるのではないでしょうか？検索において、検索結果の並び順を最適化するのは非常に重要です。プロダクトによってはCTRやCVRが利益に直結します。今回はElasticsearchでどうやって並び順を制御しているのか？どうやって調整すればよいのかを実験したいと思います。 Elasticsearchはどうやって並び替えをしている？基本的には関連度スコアというものを計算して並び順を決定しています。デフォルトではこの関連度スコアの...

こんにちは。もう12月ですね。1年ってはやい。スペースマーケットでエンジニアをしている8zkです。 React Hook FormとはReactのフォームを簡単に構築するためのライブラリです。https://react-hook-form.com/類似のライブラリだとFormikやreact-final-formなどがあります。これらのライブラリの中でReact Hook Formを選んだ理由は下記の通りです。ダウンロード数が多いStar数が多い軽量ダウンロード数はFormik、react-final-formなどと比べてもダントツで多くなっています。http...

むかしむかしスペマの国があったそうな。この国のお城では、毎晩宴が開かれ、美味しい食事と楽しい音楽で人々を楽しませていたそうです。特に、季節ごとの行事や祭りでは、国中から名産品や珍しい食材が集められ、それを使ったご馳走が振る舞われるのが恒例となっていました。ある年のこと、王様は「この国で一番おいしい料理を食べてみたい」と思い立ち、城下や近隣の町から腕利きのシェフたちを集めることにしました。彼らはそれぞれ異なる技術と個性を持ち、王様のために毎日特別な料理を振る舞うことになったのです。最初のうちは毎晩の宴がとても楽しみだった王様ですが、次第にある問題に悩まされ始めました。シェ...

はじめにこんにちは。スペースマーケットでWebエンジニアしてます、新卒のdumbled0reです。7月にチームに入ってから早5ヶ月が経ち、少しずつスクラム開発に慣れてきた今日この頃です。今回はAWSやGCPなどのクラウドストレージにファイルをアップロードするときのテストでFog側をモックすれば、テスト時に毎回CarrierWaveのUploaderインスタンスを作成しなくても済むよというお話です。 CarrierWaveとFogの概要 CarrierWaveとはCarrierWaveはRuby on Railsアプリケーションでファイルを簡単にアップロードできるライブ...

こんにちは！スペースマーケットでフロントエンドエンジニアをしているwharaguchiです。先日Chakra UIのuseDisclosureという便利なカスタムフックを知ったので、今回はそちらの紹介記事になります。 Chakra UIのuseDisclosureとはuseDisclosureは、Chakra UIが提供しているオープンやクローズの状態を管理するカスタムフックです。自前でuseStateなどを用意しなくても、useDisclosureを使うことで開閉管理を行うことができます。V3のuseDisclosureからは、以下の値が返ってきます。値型説明...

おはようございます、こんにちは、こんばんは。スペースマーケットでWebエンジニアをしています、s0arです。さむい ふゆ今回は休職中にどうしようもなく将来への不安に苛まれたエンジニアの雑記です。きちんとしたいわゆる「キャリア論」とかそういうのではありません。これが「リアル」だよねってことで何卒。同じような不安を抱えたことのある、もしくは現在進行系で抱えている方へ、何らかの参考になれば幸いです。 俺はこういう人間だ社会人11年目（社会人歴=エンジニア歴）書いててマジかよってなってるWindowsエンジニア → Webエンジニアそこそこなんやかんやできはする、で...

みなさんこんにちは！株式会社スペースマーケットでエンジニアをしているrokioです☺️弊社では、15分単位でスペースを貸したい方とそのスペースを使いたい方をマッチングするサービスを提供しています。2024年12月現在36,000超のスペースを掲載しており、それを素早く検索するためにElasticsearchを導入しています。約2ヶ月前にこの会社にWebエンジニアとしてJoinしたのですが、Elasticsearchは名前だけは聞いたことがあるものの、実際に触ったことがなく😅、メンバーの方々に教えてもらいながらキャッチアップし少しずつElasticsearch関連のタスクができるように...

はじめにこんにちは！気づいたら今年ももう終わりますね！社会人になってから時間が高速で進んでる気がしてるのは僕だけでしょうか？時を高速で進めてる人という事で最近バックエンドのコードを触る機会が増えてきたのですが、Railsのコードを読んでてた際に出てきたeager_loadというものが何か分からなかったので調べてみました。 N+1問題とはeager_loadの説明の前に、まずN+1問題の話をします。関連データを取得するたびにクエリが発行されることで、余分なクエリが発生し、パフォーマンスに影響が出ることです。userモデルとpostモデルがあり以下のようなアソシエーシ...

はじめにElasticsearchを使っているが要件を満たす検索結果を実現するにはどうすればいいかわからない、、またはElasticsearchを使ってみたいが勝手がわからない、、などのお悩みあると思います。具体例を交えて絞り込みと並び替えの基本を紹介していきたいと思います。 Elasticsearchはどうやって絞り込み、並び替えをしている？絞り込みですが、queryとfilterで絞り込みができます。queryには色々な種類がありますが基本的なものとしてBoolean queryのmust句、should句、must_not句があります。今回はこれらのクエリについて紹...

こんにちは、WebエンジニアのShotaです。ある業務でスプレッドシートで管理されているデータをDBへ移行する必要があり、GASを実装しました。今回はGASを使ってシートのデータからSQLクエリを生成する処理をご紹介します！ GASとはGoogle Apps ScriptとはGoogle Workspaceアプリと連携可能なアプリケーション開発プラットフォームです。JavaScriptで記述可能で、スクリプトファイルの拡張子は「.gs」です。インストール不要でブラウザにコードエディターが用意されているので、とても気軽に開発できます。今回はスプレッドシートの表データを整形、...

はじめに私は初めてDependency Injection（依存性注入）という概念に出会ったのは、NestJSのドキュメントを読んでいるときでした。その時、providerや@Injectable()は何なのか？といった素朴な疑問を感じましたが、ドキュメントを読んでもすぐには理解できず、そのまま一度放置しました。最近、業務で触れているAPIサービスではNestJSではなく、InversifyJSというライブラリを使用してDependency Injectionを実装しています。これを機に、DIについてもう一度学び直すことにしました。そして、自分が調べて理解したことをまとめて共有し...

こんにちは、エンジニアリングマネージャーをやっている dera です。2024年11月6日に開催された、FastlyYamagoya2024 にチームの有志メンバーで参加してきました！こちらのイベントレポートになります。https://learn.fastly.com/Yamagoya2024.html FastlyYamagoya2024とはFastlyのエンジニアやCSの方や、利用している他社さんが集まってのイベントで、Fastlyの最新情報や製品の使い方、事例などを学ぶことができるイベントです。スペースマーケットでは主にCDNにFastlyを利用しているので、情報の...

こんにちは！スペースマーケットでフロントエンドエンジニアをしているwharaguchiです。これまで個人的に使用機会が少なかったreduceを使う機会があったため、自分の備忘録を兼ねて記事にしました。 やりたかったこと携わっていた施策で以下のキャプチャのような、日付毎にアコーディオンが開閉するUIを作成する必要がありました。APIから返ってくるデータは、以下のような各日付の情報が一覧で格納された配列でした。// 元となるデータconst baseData = [ { startedAt: "2024-10-30T10:00:00+09:00", ro...

こんにちは、スペースマーケットでフロントエンドエンジニアをしている8zkです。マークダウンからTypeScriptの型を生成するscriptを新規プロジェクトで書いたのでそれを説明を交えて紹介したいと思います。新規プロジェクトでは開発納期やBEの技術選定前にFEの技術選定をしたことなどの兼ね合いで、GraphQLやtRPC,gRPCではなくシンプルなREST APIを採用しました。それゆえにクライアントで使うAPIの型をどのように生成するかを考えていたのですが、バックエンドエンジニアが先んじてテーブル定義書をマークダウンで書いていたため、それを元に型を生成するscriptを書くこと...