この記事は、AEON Advent Calendar 2023の３日目です🎉
はじめまして！
イオンリテールという、AEONグループの総合小売業の企業で働く渡邊と申します。
総合小売業とは衣・食・住・H&BCに各テナントを合わせた広い領域を扱う小売業となります。そこで現在私はネットスーパーの新規事業検証に関する部署におり、本記事ではそこの現場における開発のお話をしたいかなと思います。
バーコード生成の仕組みが急遽必要となった
さて、ネットスーパーの新規事業といってもイメージが湧かないなという方も多いかと思いますので、少しそのお話をさせていただきます。そんなのいらん！フロントエンドのコード見せろ！という方は次の章からお読みください（大したもんではありませんが）
具体的なお話としては、ネットスーパーの新規システム導入に関するものです。現状弊社はWebで受けたお客さまの注文の商品リストを紙に印刷して、店舗にて集荷（以下、ピッキングと呼びます）し、お客さまの元へ配送をおこなっています!
実際の紙ピッキングリスト
普通に終わってる
そのような非効率性を改善するために、商品受注からピッキング、ラストワンマイルの配送までを一貫して管理できるシステムの導入を検討しており、その現場での検証を私のチームで実施しております（チームメンバーは４名となりますが、本筋ではないので割愛します）
検証の大まかな流れと立ち上げ段階で発生した問題
その検証において、ピッキング業務部分で問題が発生しました。注文から配送までをデータ化して管理していくために、ピッキング過程で利用するカートやカゴについてもデータとして持たせる必要があるのですが、そのために大量のバーコードを生成する必要がありました。イメージとしては下の写真の通りです
- こんな感じのカートにカゴを積んでピッキングします
- 左下に見えるようにカゴにバーコードを貼ります
- カートにもバーコードを貼ることで、ピッキングしているカート、カゴ、カゴの中に入っている商品を紐づけます
- ピッキングしたカゴと保管場所（バッファリングスペース）もバーコードで紐付けします
- バッファリングスペースと配送する車両と荷物も紐付け、お客さまのもとに商品を配送します
開発するための要件
このように、お客さまの注文 => カゴ => ピッキングするカート => バッファリングスペース => 配送車両 それぞれをバーコードスキャンしながら紐づけていく都合上、各課程において各器具ごとに全て異なるバーコードを生成し貼り付けることが必要となりました。さらに、検証を実施している都合上、急遽予定外のバーコードが必要となる場合もあり、既存のWebサービスとして存在しているバーコードジェネレーターでは非常に非効率な検証となることが予想されました。要件をまとめますと、
- 大量のバーコードを生成することが必要
- 突発的にバーコードを生成することも必要
- 店舗の売場でもスマートフォンなどで参照することが必要
このことから、URLを参照すればPCでもスマートフォンでも利用できるWebを媒体としてバーコードジェネレーターを生成することとしました
作成したプロダクト
次のURLにある通りのバーコードジェネレーターを作成しました。OGPも設定せず、タイトルもまんまと、プロトタイプ感満載ですね。
実装のGitHubはこちら
OGPのバー見ればわかるように、TypeScriptというノーコードツールを用いて作成しました。GitHub見ればわかるよーという方は是非ともみてみてください。
動作・使い方
単一のバーコードを売場で生成したい時などは、この様に入力すれば生成します
複数生成時はCSVをアップできます
これらは運用に必要な器具類を登録するためのCODE128というバーコード規格となります。
商品のバーコードを生成するときは、EAN13などを選んでください。
商品の場合この様に生成されます
実行環境
{
"name": "app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@chakra-ui/icons": "^2.1.1",
"@chakra-ui/react": "^2.8.1",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@types/encoding-japanese": "^2.0.3",
"@types/jsbarcode": "^3.11.3",
"encoding-japanese": "^2.0.0",
"framer-motion": "^10.16.4",
"jsbarcode": "^3.11.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^4.0.11"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.0.2",
"vite": "^4.4.5"
}
}
- バーコードジェネレーターとしてはjsbarcodeを選択
最近まで更新が続いている（記事執筆時にも Last publishが 20 days ago）のと、TSネイティブサポートされているのが主な理由です。
必要なバーコード規格も問題なくカバーされておりました（CODE128, EAN-13, EAN-8）。
- UIは慣れているChakraUI
webページが見やすく、目当てのUIを探しやすいので好みです
- ホスティングはNetlify
開発環境
最速の肉まん
ver 1.0.6だったと思う。
これ使ったらもうNode.jsには戻れない。
私はMacでやるときはローカルのVScode（今後はcursorかな）で開発していますが、windowsの方でもGitHub CodeSpacesなどで
curl -fsSL https://bun.sh/install | bash
これを実行していただければ使えますので試してみてください。
これで、
bun create vite app
でviteをバンドラーとして利用するReactプロジェクトを開始できます。Next.js使うまでもないけど、create-react-appは公式非推奨だしなあ、という感じの規模感で安定して動いているので便利です。
気をつけた点の解説
以下、後日詳細追記します。🙇♂️
Global State
今回はバーコード体系を Context 系統のHooksを用いて管理しました。
CSVファイルを読み込ませる時にバーコード生成コンポーネントに対してバケツリレーが発生することを防ぐためです
バーコードを生成する部分
svgで生成してuseRefで頑張る感じ
ToastのカスタムHook
alertは動作が止まってダサいので、ChakraUIのToastをラップしたカスタムHookで出すようにしています
コンポーネントの構成
よくあるアトミックデザインで
TypeScript はノーコードツールなのか
サジェスト効きまくって、修正もバシバシ入って、ほとんど自分でコード書いている感覚ないです。だからノーコード！
というと、少し嫌味っぽいかもしれませんが、JSに抵抗感があった方程TSに乗り換えてほしいかなとおもっています。型を定義しなければいけないというのが私も昔はハードル高いのではと思っていましたが、実際は実行時にエラーが発生することが明らかに減り、前述の通りサジェストも非常に有効で、慣れてしまえばJS書きたくないなと思えるほどでした。
作るのにどれくらいかかったのか
1時間
このプロダクトの現在
作成自体は10月の下旬で、現在は順調とはいえないものの検証系が立ち上がり、日々ピッキング作業ができている状況ですので、ひとまず役割を終えたのかなと思っています。
このように現場の一従業員が開発できると、スピード感のある新規事業展開につながることを実感できましたので、これからも頑張っていきたいと思います。
明日は @hikkie さんの New Relic系の記事となります！
是非とも次も読んでくださいね！