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

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

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

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

次世代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. 動機・モチベーション …

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

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

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の紹介と、フロントエンド開発での導入方法について触れ…

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

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

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

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

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

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

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

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