アーキテクチャから刷新!柔軟なデザイン変更を可能にした新注文詳細

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

TypeSpecを使ったOpenAPIドキュメント生成

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

Plopでジェネレーターを作ってStoryファイルを自動生成してみたら簡単だった

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

AIによる文章要約と重複チェックの開発

GMOメイクショップ コアグループ エンジニアの森です。 最近業務効率化のためにOpenAIのAPIを利用して大量の文章データを自動整理するツールを開発をしました。 この記事ではAIを使った文章要約と、過去データとの重複チェックを実装した過程について紹介し…

バッチ処理をECSからAWSBatchに乗り換えた理由

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

tblsを使ってデータベースドキュメントのメンテナンス性を爆上げ!

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

VSCodeのワークスペース機能でエディタ設定をシェアしよう

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

ESLint設定ファイルのFlat Config移行手順

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

govulncheckを利用したGitHub Actionsでの脆弱性チェック

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

Vue3 + Vite + Vuetify環境にStorybook8を導入

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

シフトを作成するのに適したAIツールを探す

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

リリース対応漏れを防ぐ仕組み

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

makeshopの新決済画面 SmartCheckoutでのOpenAPI(3.0)活用事例

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

Vuetify3のカスタムアイコン名に型定義を効かせてみた

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

開発効率向上のためのrunn活用

GMOメイクショップ コアグループ エンジニアの越川です。 直近の開発でAPIの開発がありました。シナリオテストを導入したかったので、今回の案件で導入してみました。 導入したruunが便利だったので、記事にさせていただきました。 1. 動機・モチベーション …

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

GMO メイクショップ コアグループでエンジニアをしている池田です。 今回はOpenTelemetryを用いた分散トレーシング環境を構築したので、そのプロセスを綴っていきます。 導入の目的 前提 プロジェクトについて 筆者について 構成 ローカル環境 開発環境 セッ…

k6を使って簡単に負荷試験

GMOメイクショップ コアグループ エンジニアの森です。 現在のチームではずっと次世代ECのフロントエンドをメインに開発してきましたが、最近バックエンド開発も触るようになってきました。 そんな中、直近の業務で作成したAPIに対する負荷試験を担当しまし…

Golangでデータの書き換えを防ぎたい!

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

he-treeで大規模ツリービューを開発した話

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

プロダクトオーナーとして大切にしていること

はじめに はじめまして。GMO メイクショップの高橋です。プロダクトオーナーとして次世代ECの開発に携わっています。 わたしはカスタマーサポートとしてmakeshopに入社し、その後、開発チームとの橋渡し役をやりながら次世代管理画面のプロダクトオーナーと…

AIでアプリを簡単に作成!Create.xyzで実現する未来型開発

AI

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

MSWを使ったフロントエンド開発の効率化

GMOメイクショップ コアグループでフロントエンドエンジニアをしている池田です。 主にTypescriptとVue.jsを用いた開発をしています。 当記事ではJS・TSでモックサーバーとして利用できるライブラリMSWの紹介と、フロントエンド開発での導入方法について触れ…

新システムでAWSの監視を見直した話

GMOメイクショップ コアグループ エンジニアの越川です。 前職あたりから、AWS関連の仕事をさせてもらうことが多くなってきていて、 弊社の新システムの構成や構築を設計経験させていただきました。 今回は、監視について記載させていただきます。 1. 全体構…

Go経験者として次世代EC開発にジョインしてやったことを振り返ってみた

こんにちは、プロダクト開発部コアグループの井上です。 コアグループでは、次世代ECの開発を行っています。 www.makeshop.jp 私は2022年6月に入社してから現在まで、主に新管理画面のバックエンド(Go)を担当しています。チーム内では一番Goの経験期間が長…

【Vue.js】ストアとProp Drillingはどっち良い?

GMOメイクショップ コアグループ エンジニアの森です。 21年4月に新卒で入社しおよそ3年になります。 2年ほど前から、現在のチームでフロントエンドをメインに開発してきました。 今回はVue.jsにおいて便利だけど少し危険なストア、そして面倒だけど比較的安…

プロダクト開発におけるエラー定義について

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

GPTsを使ったFAQボットの作成方法とデータクレンジングの重要性

AI

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

godepgraphを駆使して、Goプロジェクトの循環参照を突破せよ

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

次世代EC管理画面をVue3/Vuetify3へ移行しました

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

次世代EC開発の始まりと進め方

GMOメイクショップの次世代ECプラットフォーム開発は、Vue.jsとGolangを活用し、Scrum手法で迅速な開発を行っています。フロントエンドにはVue.js、Vuetify、TypeScript、バックエンドにはGolang、GraphQL、gRPCを採用し、高機能かつ柔軟なシステムを目指し…