GMOメイクショップの2024年の開発経験を振り返り、2025年に活かすための改善点や取り組みを共有。ドキュメントの読み合わせ、デイリーコミュニケーション、意思決定の記録、情報の集約など、効率的なプロジェクト管理のポイントを解説します。

新管理画面の注文詳細をリニューアル!将来的なデザイン変更や柔軟な機能改善に対応するため、アーキテクチャをゼロから見直し、Container/PresentationalパターンやRepositoryパターンを採用しました。

TypeSpecを活用して、OpenAPIドキュメントを効率的に作成し、フロントエンドで型安全なREST API通信を実現する方法を解説します。

ジェネレーターを作成するJavascriptライブラリであるPlopの使い方を解説しつつ、PlopでStoryファイルの自動生成を行った経験を書いてます。

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

次世代ECの管理画面で工夫した機能CSV出力に関して、悩んだ部分や解消方法についてまとめてみました。

データベースドキュメントのメンテナンス性を向上させるため、tblsという自動生成ツールを導入しました。tblsを活用することで、ドキュメント作成の手間を大幅に削減し、常に最新の情報を反映できるようになりました。この記事では、tblsの導入経緯と具体的な活用事例を紹介します。

VSCodeのワークスペース機能について紹介します。設定を1ファイルで共有する方法、複数のフォルダやリポジトリをまとめて管理する方法など、ワークスペース機能の利便性を解説します。環境構築の手間を省き、開発効率を向上させるためのヒントが満載!

ESLint設定ファイルのFlat Config移行方法

こんにちは、プロダクト開発部コアグループの井上です。コアグループでは、次世代ECの開発を行っています。今回はgovulncheckとGitHub ActionsをつかってGoの脆弱性チェックを自動化した取り組みについて紹介します。

Vue3 + Vite + Vuetify環境でStorybook8を導入する方法を紹介しています。また、vue-component-metaを利用しコンポーネントからDocsを自動生成する方法も詳しく書いています。

AIツールを活用してシフト作成の業務効率向上

新管理画面の開発でリリース対応漏れを防ぐために、Linterを開発・導入しました。Linterの開発背景、概要、使用例について詳しく紹介します。導入後の効果や今後の改善点についても触れていますので、リリース対応に課題を感じている方はぜひご一読ください。

次世代ECの決済画面リニューアルにおいて、OpenAPI(3.0)とコード生成ツールを使用して効率的なAPI開発とドキュメント共有を実現しました。

Vuetify3のカスタムアイコン名の入力ミスを無くすために、型定義を改善しました。この記事では、型定義をより厳密にするための方法を紹介します。TypeScriptの先進的な機能を用いた型定義の最適化に興味がある方、ぜひご一読ください。

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

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

GMOメイクショップ コアグループ エンジニアの森です。 現在のチームではずっと次世代ECのフロントエンドをメインに開発してきましたが、最近バックエンド開発も触るようになってきました。 そんな中、直近の業務で作成したAPIに対する負荷試験を担当しました。私にとっては初めての負荷試験だったのですがk6というツールを使うと簡単に実施できたので、その手順を書いていきます。 私と同じような初心者の助けになれば嬉しいです。 負荷試験とは k6とは 試験実施 1.シナリオ作成 2.オプション 3.実行コマンド 4.実行結果 5.実行結果（エラー例） まとめ 負荷試験とは 負荷試験は、実際に発生し得るシステ…

GMOメイクショップの黒木です。Golangでデータの整合性やセキュリティを保つためのReadonly型の擬似的な実装方法を紹介します。Readonly型を自前で定義する方法とLinterを使った方法を実用例も交えて解説します。これでコードレビューも効率化できます。

GMOメイクショップの原田です。Vue3向けツリービューライブラリ phphe/he-treeを使い、ドラッグドロップ対応の大規模なツリービューを開発しました。最適化のために選定したライブラリの理由や実装方法、工夫点について詳しく紹介します。

はじめに はじめまして。GMO メイクショップの高橋です。プロダクトオーナーとして次世代ECの開発に携わっています。 わたしはカスタマーサポートとしてmakeshopに入社し、その後、開発チームとの橋渡し役をやりながら次世代管理画面のプロダクトオーナーとしてプロジェクトに参加をしています。 開発出身ではないため、システム開発のイロハなど勉強中の箇所も多く様々な場所でチームメンバーに支えてもらいながら日々を過ごしています。 エンジニア出身ではなくプロダクトオーナーになる方も多くいると思いますので、わたしの経験・大切にしていることを残していこうと思います。 プロダクトオーナーは決めるのが仕事 プロ…

今日は、とても強力なAIサービスを紹介したいと思います!その名も **Create.xyz **Create.xyzは、テキストや画像からアプリケーションを開発することができる革新的なAIツールです。

GMOメイクショップ コアグループでフロントエンドエンジニアをしている池田です。 主にTypescriptとVue.jsを用いた開発をしています。 当記事ではJS・TSでモックサーバーとして利用できるライブラリMSWの紹介と、フロントエンド開発での導入方法について触れていきたいと思います。 MSWとは どのようなケースで使えるか 開発時のmockサーバーとして利用 APIリクエストを含むテストでの利用 類似ライブラリとの比較 API 環境 導入方法 mockServiceWorker.jsは本番ビルドに含めない モックの定義 REST GraphQL ワーカーを起動するコードを書く 最後に 参…

GMOメイクショップ コアグループ エンジニアの越川です。 前職あたりから、AWS関連の仕事をさせてもらうことが多くなってきていて、 弊社の新システムの構成や構築を設計経験させていただきました。 今回は、監視について記載させていただきます。 1. 全体構成図 2. 監視対象 3. ログ監視 4. メトリクス監視 5. 外形監視 5. まとめ 参考 1. 全体構成図 早速ですが、今回構築した全体図から 監視の全体イメージ 2. 監視対象 今回導入した各項目は後述いたします。 ログ メトリクス 外形 APM（初期導入を見送りましたが、X-RayかDatadog Application Perfor…

こんにちは、プロダクト開発部コアグループの井上です。 コアグループでは、次世代ECの開発を行っています。 www.makeshop.jp 私は2022年6月に入社してから現在まで、主に新管理画面のバックエンド（Go）を担当しています。チーム内では一番Goの経験期間が長かったこともあり、いろいろなことをやらせていただく機会に恵まれました。 この記事では、私が新管理画面のバックエンド開発において、自分主導で行った改善について振り返ってみようと思います。 1. ログを追えるようにした 2. 必然性のないreflectをやめた 3. DIにwireを導入した 4. protoからgraphqlを生成で…

GMOメイクショップ コアグループ エンジニアの森です。 21年4月に新卒で入社しおよそ3年になります。 2年ほど前から、現在のチームでフロントエンドをメインに開発してきました。 今回はVue.jsにおいて便利だけど少し危険なストア、そして面倒だけど比較的安全なProp Drillingについて、 開発での失敗談と共に書いていきます。 ストアについて Prop Drillingについて ストアを使いすぎた結果 ストアをProp/Emitに置き換える ストアとProp Drillingの使い分け 実装例 ストアを使用した場合 Prop Drillingを使用した場合 まとめ ストアについて スト…

次世代EC開発に伴い、エラー定義を見直し、エラーハンドリングを改善しました。Go言語でのエラーハンドリング方法、エラー情報の管理、実際のエラー表示例について詳しく紹介します。これにより、エラーの特定やデバッグが容易になりました。

GPTSを使ってFAQボットを実装!! 精度を高める方法、特にデータクレンジングについて解説しています。手間を掛けずにFAQボットを作りたい方、FAQボットの精度を上げたい方はご確認ください。

GMOメイクショップの黒木です。循環参照エラーを克服するための特定方法と解決法を紹介します。godepgraphツールを使って依存関係をグラフ化し、循環参照の原因を見つけて解決する手順を詳しく解説します。Go初心者にとって必見の内容です。

GMOメイクショップ の原田です。Vue2 / Vuetify2からVue3 / Vuetify3への移行が無事完了したので、その軌跡を共有します。チーム一丸となって取り組んだプロジェクトの詳細や移行手順、得られた知見をぜひご覧ください。