GMOメイクショップ株式会社

【エンジニアブログ】TypeSpecを使ったOpenAPIドキュメント生成

GMOメイクショップコアグループの原田です。フロントエンドとバックエンド間のREST APIやり取りに型定義が無いという課題があったため、OpenAPIドキュメントを作成、それを元にした型定義をフロントエンドで利用できるようにしました。今回は、OpenAPIドキュメントを書くために利用したTypeSpecをご紹介します。課題解決策TypeSpecとは?TypeSpecの記法モデル定義エイリアススカラー定数定義ルーティングデコレータージェネリクスTypeSpecのコンパイル方法TypeSpecのコンパイル結果利用してみた感想まとめ参考資料課題次世代EC管理画面ではSPAを採用しており、バッ...

【エンジニアブログ】Plopでジェネレーターを作ってStoryファイルを自動生成してみたら簡単だった

GMOメイクショップ コアグループでエンジニアをしている池田です。 こちらの記事にもある通り、当プロジェクトではStorybookを導入しました。 Storyファイルを増やしたいということで雛形を自動生成することになりました。 そこでPlopというJavaScriptライブラリを使用して、Storyファイルを自動生成しました。 今回はPlopの使い方について説明したいと思います。対象Plopとは？セットアップStoryファイルを自動生成hbsファイルplopfile.mjspromptsactions実行まとめ参考対象ファイルの自動生成を行いたい対話形式でファイルの自動生成を行いたいPl...

【エンジニアブログ】AIによる文章要約と重複チェックの開発

GMOメイクショップ コアグループ エンジニアの森です。最近業務効率化のためにOpenAIのAPIを利用して大量の文章データを自動整理するツールを開発をしました。この記事ではAIを使った文章要約と、過去データとの重複チェックを実装した過程について紹介したいと思います。開発の背景課題解決策ツールの概要使用した技術全体像ツールでの処理内容APIを呼び出すメソッド要約処理処理内容プロンプト出力結果重複チェック処理内容プロンプト出力結果まとめ開発の背景課題makeshopをご利用いただいているショップ運営者から日々様々なご意見・ご要望をカスタマーサポート（CS）にいただいています。その中でmak...

【エンジニアブログ】バッチ処理をECSからAWSBatchに乗り換えた理由

こんにちは、GMOメイクショップの越川です。 次世代ECの管理画面で工夫した機能CSV出力に関して、悩んだ部分や解消方法についてまとめてみました。CSV機能について当初の計画課題解決案①解決案②ローカル環境まとめCSV機能について弊社のサービスでは、多数のCSV出力をする必要がありますが、旧システムではオンラインで処理されるため 応答時間が長くなってしまっていたり、指定可能な範囲が短すぎたり、限界がきておりました。 次世代ECでは、件数や範囲に応じて、オンラインで応答する場合と、バッチで実行する場合を使い分けるように設計いたしました。当初の計画以前のブログでもご紹介させていただきましたが...

【エンジニアブログ】tblsを使ってデータベースドキュメントのメンテナンス性を爆上げ！

こんにちは、GMOメイクショップの黒木です。弊社は、データベースドキュメントのメンテナンス性を向上させるため、tblsというツールを導入しました。この記事では、導入した経緯と活用事例についてご紹介します。tblsとはtblsを導入した経緯活用事例まとめtblsとはtblsとは、データベースのドキュメントを自動生成するツールです。github.comtblsは、データベースのドキュメントを簡単に生成できるのが大きなポイントです。以下のように、カラム一覧、制約一覧、インデックス一覧をはじめとしたドキュメントが、たった1コマンドで生成できます。さらに、tblsは以下のようなER図も簡単に生成で...

【エンジニアブログ】VSCodeのワークスペース機能でエディタ設定をシェアしよう

こんにちは、GMOメイクショップ コアグループ フロントエンドエンジニアの原田です。 本記事では普段からよく利用しているVSCodeのワークスペース機能についてご紹介します。はじめにワークスペース機能でできること様々な設定をまとめて1ファイルでシェアできる複数のフォルダやリポジトリをまとめて登録できるワークスペースの作成方法ワークスペースで共有できる設定例Linter / Formatter設定推奨拡張機能スペル辞書 (Code Spell Checker)タスクランナー設定まとめ参考はじめに現プロジェクトのフロントエンド開発には主に Visual Studio Code（VSCode）...

【エンジニアブログ】ESLint設定ファイルのFlat Config移行手順

GMOメイクショップ コアグループ エンジニアの森です。我々のプロジェクトではメンバー間でのコードの一貫性を保つためにESLintを導入しています。このESLintですがバージョンアップに伴い、設定ファイルの記法をFlat Configという形式にする必要が出てきました。今回はこの移行手順について書いていきます。ESLint・Flat Configについて移行手順1.plugins2.extendsパッケージがFlat Configに対応していない場合3.env・parservue/setup-compiler-macros4.rules5.overrides6.ファイル全体まとめ参考記...

【エンジニアブログ】govulncheckを利用したGitHub Actionsでの脆弱性チェック

こんにちは、プロダクト開発部コアグループの井上です。コアグループでは、次世代ECの開発を行っています。今回はgovulncheckとGitHub ActionsをつかってGoの脆弱性チェックを自動化した取り組みについて紹介します。govulncheck実行方法osvfinding今回作ったものjsonのパースISSUEの作成おわりにgovulncheckgovulncheckは、Goプロジェクトの依存関係とソースコードを分析し、既知の脆弱性を検出するツールです。コマンドラインから簡単に実行することができます。今回はCVE-2024-24789を含むこちらのサンプルを想定して書いていきます...

【エンジニアブログ】Vue3 + Vite + Vuetify環境にStorybook8を導入

GMO メイクショップ コアグループでエンジニアをしている池田です。 今回はVue3 + Vite + Vuetifyという構成のプロジェクトにStorybook8を導入したので、そのことを記事にまとめてみました。対象セットアップ前提StorybookのセットアップStoryファイル作成vue-component-metaでDocsの自動生成まとめ補足：Storybook8の変更点参考対象Vue + Viteを使用していて、Storybookを新たに導入したいStorybookがどんな感じか動かしてみたいセットアップ前提対応しているバージョンは以下の通りです。Vue ≥ 3Vite ≥ ...

【エンジニアブログ】シフトを作成するのに適したAIツールを探す

GMOメイクショップ コアグループ エンジニアの越川です。 みなさん、AIツールは何をお使いでしょうか？ GitHub Copilotにコードを書くお手伝いをしてもらったり、 ChatGPTやPerplexityでリサーチしたりでしょうか？ 今回は業務を離れて、プライベートで遊んでいた内容を軽くまとめさせていただきます。1. 動機・モチベーション2. プロンプトサンプル3. ChatGPTの出力内容4. Geminiの出力内容5. Claudeの出力内容6. まとめおまけ（宣伝）1. 動機・モチベーション看護師の知人がいて、師長さんが毎月苦労されていることを聞きました。 あと、看護師さん...

【エンジニアブログ】リリース対応漏れを防ぐ仕組み

こんにちは、GMOメイクショップの黒木です。現在弊社では次世代EC開発プロジェクトが進行しており、私は新管理画面の開発を担当しています。その開発の過程で、リリース対応漏れを防ぐ対策として、Linterを開発・導入しました。この記事では、開発・導入の背景、概要と使用例についてご紹介します。開発・導入の背景概要使用例まとめ開発・導入の背景新管理画面の開発では、フィーチャーフラグを使って新機能の公開を制御しています。外部のフィーチャーフラグ製品は使用せずに、特定の環境下でtrueを返すフラグを使用しています。新機能を公開する際は、フィーチャーフラグの条件分岐を削除することでリリースを行います。...

【エンジニアブログ】makeshopの新決済画面 SmartCheckoutでのOpenAPI(3.0)活用事例

こんにちは、プロダクト開発部コアグループの井上です。コアグループでは、次世代ECの開発を行っています。現在makeshopでは、決済画面をリニューアルするプロジェクトが進行しており、4月に第一弾がリリースがされました。 今回はその中でのOpenAPI(3.0)を活用した開発を紹介したいと思います。概要コード生成packageの指定生成対象の指定フィールドのオプションx-go-typex-oapi-codegen-extra-tagsドキュメントコード生成のカスタマイズ1. カスタムテンプレートを利用する2. 生成されたGoのコードをいじるハマったところまとめpathを考えるのがしんどいn...

【エンジニアブログ】Vuetify3のカスタムアイコン名に型定義を効かせてみた

こんにちは、GMOメイクショップ フロントエンドエンジニアの原田です。 Vuetify3のカスタムアイコン名の入力ミスを無くすため、型定義を改善してみました。この記事では、その定義方法をご紹介します。課題方法方法1: $${string} 型方法2: vuetify.tsに定義している アイコン一覧から 型定義を作る作成した型定義まとめ参考課題現在開発している次世代ECフロントエンドではVuetify3を採用しており、カスタムアイコンを登録して利用しています。 独自のデザイン規約があるため、アイコンの表示には、下記のようなラッパーコンポーネントを利用しています。このコンポーネントのnam...

【エンジニアブログ】開発効率向上のためのrunn活用

GMOメイクショップ コアグループ エンジニアの越川です。 直近の開発でAPIの開発がありました。シナリオテストを導入したかったので、今回の案件で導入してみました。 導入したruunが便利だったので、記事にさせていただきました。1. 動機・モチベーション2. 構成3. runnについて4. 実装5. GithubActionsに埋め込み6. 実行結果7. まとめ1. 動機・モチベーションシナリオテストに関して、前々から、導入検討していました。 弊社の開発環境ではCI/CDが導入されているため、Githubのブランチへのマージを契機に Actionsが自動でECSのコンテナにデプロイしてい...

【エンジニアブログ】OpenTelemetryについて何も知らなかった人が分散トレーシング環境を構築してみた(Jaeger, X-Ray)

GMO メイクショップ コアグループでエンジニアをしている池田です。今回はOpenTelemetryを用いた分散トレーシング環境を構築したので、そのプロセスを綴っていきます。導入の目的前提プロジェクトについて筆者について構成ローカル環境開発環境セットアップJaegerコンテナの準備ポート計装トレースの構成要素についてトレーサーの定義スパンの生成サービス間でトレースデータを共有するログ出力JaegerAWS X-Rayaws-otel-collectorの設定完成したものローカル環境(Jaeger)開発環境(AWS X-Ray)まとめ参考導入の目的今回OpenTelemetryを導入した目...