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

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

【エンジニアブログ】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.ファイル全体まとめ参考記...

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

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

【エンジニアブログ】k6を使って簡単に負荷試験

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

【エンジニアブログ】he-treeで大規模ツリービューを開発した話

GMOメイクショップ コアグループ フロントエンドエンジニアの原田です。業務でVue3向けツリービューライブラリ phphe/he-treeを使い、ドラッグドロップ対応の大規模なツリービューを開発したので、その実装の流れをご紹介します。課題対応の検討ライブラリ選定選定のポイント1 vue3を想定して開発されているか2 ドラッグドロップに単一ライブラリで対応しているか3 遅延描画に対応しているか4 十分なドキュメントとデモが存在しているか類似ライブラリ vue3-treeview解決策出来上がったもの工夫点移動可能条件設定その1: ツリーにできない要素を移動不可にするその2: 同名の要素を...

【エンジニアブログ】AIでアプリを簡単に作成！Create.xyzで実現する未来型開発

こんにちは！GMOメイクショップ コアグループエンジニアの大森です。みなさん、AI触っていますか。今日は、とても強力なAIサービスを紹介したいと思います!その名も Create.xyzCreate.xyzは、テキストや画像からアプリケーションを開発することができる革新的なAIツールです。このツールを用いることで、モックやプロトタイピングとしての活用。reactアプリケーションのコードの部分生成。社内ツールや開発補助ツールの作成など、様々な事ができるようになります!Create.xyzの凄さって？さっそくCreate.xyzを使ってみるアカウント作成ページ作成商品検索機能のプロトタイプを作...

【エンジニアブログ】新システムでAWSの監視を見直した話

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

【エンジニアブログ】Go経験者として次世代EC開発にジョインしてやったことを振り返ってみた

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

【エンジニアブログ】【Vue.js】ストアとProp Drillingはどっちが良い？

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

【エンジニアブログ】次世代EC管理画面をVue3/Vuetify3へ移行しました／フロントエンド

2022年に新卒入社し、GMOメイクショップ コアグループにてフロントエンドエンジニアをしている原田です。 調査も含めると約半年をかけた管理画面のVue2 / Vuetify2からVue3 / Vuetify3への移行が無事完了したので、その移行の軌跡を共有します。背景と目的かかった期間と人数規模移行したプロダクト移行前後の比較移行にあたっての手順Vuetify3を待つ (2022/07~)Vue2の間にできることをする (2022/11 ~ 2022/12)vue2.6からvue2.7へのアップデートCompositionAPI化 (script setup化)vuexからpiniaへ...

【エンジニアブログ】godepgraphを駆使して、Goプロジェクトの循環参照を突破せよ

GMOメイクショップでエンジニアをしている黒木です。22年に新卒で入社し、Goでバックエンドの開発をしています。入社後にGoを学び始めて、学びたての頃は、よく循環参照のエラーを起こしていました。この経験を踏まえて、Goを学びたての頃にこれを知っていれば循環参照は怖くないという思いを元に循環参照が起きた場合、どこが原因で循環参照が起きているかの特定方法と、解決法をご紹介いたします。ゴールGoを使っている方なら一度は、import cycle not allowed というエラーに出会ったことはないでしょうか。このエラーは、パッケージが互いに参照し合っているため発生します。とは言っても、Go...

【エンジニアブログ】GPTsを使ったFAQボットの作成方法とデータクレンジングの重要性

こんにちは、GMOメイクショップのコアグループエンジニア、大森です！みなさん、AI触っていますか。 日々、リリースされる新技術、新サービスがあり、積極的に情報収集していても今ひとつ業務に活かしきれずに歯がゆい思いをしています。今日はChatGPTsを利用した FAQボット の作成方法を紹介します。FAQボットの作成自体は簡単で、2ステップ で作ることが出来ます。1. gpt-crawlerというオープンソースのパッケージを利用してFAQデータを集める2. ChatGPTのコンソール画面からGPTsを作成する※2023年12月20日時点では GPTsを作成するために、Chat GPT Pl...

【エンジニアブログ】プロダクト開発におけるエラー定義について

こんにちわ。GMOメイクショップ コアグループの小野です。次世代EC開発で主にバックエンドを担当しています。次世代EC開発とは？www.makeshop.jp1. はじめに2. 事の発端3. Go言語におけるエラーハンドリング4. エラー情報の管理5. エラー表示例例1. record not found例2. table not found6. 課題7. まとめ1. はじめにいきなりですが、エラーはプログラミングやアプリからは切っても切れず、プログラマーはまず考えないことはないかと思います。また開発の度に追加・変更されたり、いざ保守しようと思ったらよく分からないナニコレとなったりと、頭...