ウェブフロントエンドへの移行
皆さん、こんにちは。株式会社10X ソフトウェアエンジニアのふたぶーです。
この10Xfmは、10Xを作るというクールだと、 小売業の未来を開くおミッションに、
小売知恵向けECプラットフォームStaylerや、 小売業の課題解決を推進するDXプロダクトを
複数開発している株式会社10Xのメンバーが、 キャリアや日々の出来事、学び、
プロダクトに対する思いを包み隠さず、 リアルにお届けしていくボットキャスト番組です。
今回は10Xfm内の企画の一つである、 エンジニアの部屋の第9弾として、
naoty-sanにお越しいただいています。 naoty-san、よろしくお願いします。
よろしくお願いします。
そしたら最初に、簡単に自己紹介を お願いできますでしょうか。
はい、ご紹介に預かりました、 naoty と言います。
10Xは入社だいたい3年弱ぐらいになります。
現在は店舗チームというチームに所属してまして、
主に店舗の方が使うような管理画面の機能の 開発であったりだとか、
店舗運営で必要な機能の開発を行っています。
だいたいその入社してからは、 バックエンドの開発が中心だったんですけれども、
最近はウェブフロントエンドを中心に 開発をしています。よろしくお願いします。
よろしくお願いします。
これまでバックエンドを中心にやられてきて、
ウェブフロントエンドを最近はやっているというところを 最初に聞いてみたいんですけど、
自分からやりたいですって言って やり始めた感じなんですかね。
そうですね、やりたい、なんとなく興味あります みたいなことは発信していたつもりで、
自分としてもバックエンドを中心に これまでやってきたので、
ウェブフロントエンドのことも キャリアアップしていきたいなという気持ちはあって、
個人的に勉強は進めていたんですけれども、
後で話すかと思うんですけれども、
外部管理画面の作り直しみたいな話が やりそうな機運があったので、
そこに向けてこういうことをやってて、
できれば関わりたいなみたいなことを 好み化していたんですけど、
うまくそれで機会をいただけたので、
最近はずっとウェブフロントエンドを やっているみたいな、そういう経緯になります。
ありがとうございます。めっちゃいいですね。
もともと興味ある関心があって 勉強していきたいと思ったところで、
社内でも実際にウェブフロントエンドがあって 触る機会があって、
手を挙げたらやれるようになった みたいなところですかね。
管理画面のV2開発
そうですね、はい。
素晴らしい。
実際に具体的に管理画面のウェブフロントエンドの 開発っていうところの話を聞いていきたいなって思うんですけど、
どういう開発があったんですかね。
まず管理画面っていうことは、
ステーラーのネットスーパーを運営していく ネットスーパー事業者の方が実際に利用する
管理画面っていうものがあるんですけれども、
それが今まで長い期間利用されてたものが あったんですけれども、
これがだいぶ継ぎはぎになっていて、
保守性であったりだとか、 生産性みたいなところに課題があったので、
具体的に作り直すということで、
管理画面のV2っていうものを作り始めた っていうところ系になりますね。
なるほど、確かに。
僕も入社してから長いですけど、
管理画面を触るたびに、
なるほど、こんな風になっていたのか みたいなのは結構あったんで、
作り直して読みやすいとか運用しやすいになるのは、
遠目で見てて期待をしてるなというところなんですけど、
具体的にどういうような技術でやっているとか っていうところを聞いていってもいいですかね。
はい。
従来の管理画面はVueベースのナックルストアベースの 実装だったんですけども、
新しいV2の管理画面V2では、
リアクトルーターをフレームワークとして使っていて、
リアクトベースで完全に新しい技術で 作り始めていますね。
もともとVueだったものをリアクトに変えていくっていうのは 理由があったんですかね。
そうですね。
社内の新規事業で実はリアクトルーターを採用していて、
そこでリアクトを使った開発の知見みたいなものも たまりつつあったので、
これを機にVueではなくてリアクトベースの開発に 移りたいということでリアクトルーターを採用しました。
ありがとうございます。
確かこの辺は以前TENXのプロダクトブログでも 書かれていたかなと思うんで、
もし詳細知りたい方がいたら、
後でリンクをPodcastのところに貼っておくので 見ていただけるといいかなという感じですかね。
はい、そうですね。
ありがとうございます。
実際に管理画面を乗り換えていくVueからリアクトルーターを 使ってっていうところで、
苦労したこととか工夫したこととかってありますかね。
そうですね、いろいろあるんですけども、
一番工夫というか苦労した部分っていうのは、
やっぱりV1、管理画面のV1と新しく作るV2の間で 認証状態をいかに維持するかっていう部分が
一番肝というか難しかったポイントになっていますね。
完全に同じドメインで動いていて、
ユーザーからは同じアプリケーションにしか見えないというか、
別々のアプリケーションが動いているようには見えなくて、
でも裏側では別々のアプリケーションが 同じ認証状態でそのまま使える
っていった体験を作るためにも、
そこをいかに認証状態を維持するかみたいなところが 一番工夫したところになりますね。
すごいですね。それは実際どうやって実現しているんですかね。
そうですね。
もともと管理画面のV1ではファイアベースオーセンティケーションを使って 認証を実装しているんですけれども、
これは引き続きそのまま使いつつ、
ファイアベースオーセンティケーションで認証したときに得られる IDトークンといわれるものがあるんですけれども、
そのトークンをV2にも送らなきゃいけないので、
その送る部分にサービスワーカーを利用したというのが 工夫したポイントになります。
ブラウザーの中にインストールされているサービスワーカーが V1からV2へのリクエストを仲介して、
そのリクエストにサービスワーカーが IDトークンをヘッダーに付与してV2側に送り直すみたいなことをすると、
そのIDトークンを使ってその認証状態は維持されるので、
V2であろうがV1と同じように認証はそのまま維持できるといった仕組みになってきます。
サービスワーカーを使うみたいなところは、
V1とV2を共存させるってなった時に、
AIエージェントの活用
割と最初からハウとして上がっていたのか、
他にも方法とかはいろいろあったんだけど、
最終的にサービスワーカーを使うのが良さそうってなったのかとかってありますか?
そうですね、最初はデザインドックをその辺りに書いて、
いろんな人と議論をしたんですけども、
他の案としてあったのは従来のクッキーを使って認証を維持するみたいなやり方も当然検討はしたんですけども、
どうしてもクッキーを使ってしまうと、
クッキーにその認証状態を保持させるためのワンステップがどうしても必要で、
そこでどうしても滑らかな体験にならないというか、
ちょっとユーザーに違和感を与えてしまうような問題があったので、
結果的にはサービスワーカーを使うという決断になりました。
サービスワーカーを使うときに詰まったところとか、
これは大変だったなぁみたいなところってあったりしますか?
そうですね、サービスワーカーは結構開発が難しいというか、
普通のJavaScriptみたいに書いたら即座に書いたものが反映されるというわけではなくて、
アップデートされたものを一度ブラウザの中にインストールして、
それが読まれることで起動するので、
それを毎回更新させるようにブラウザのデブツールの設定をいじるとか、
そのあたりの細かい開発のTipsがいくつかあって、
最初はそのあたりに慣れるのが苦労したかなと思っています。
僕もFlutter Webがお客様アプリで使っているんですけど、
あれがサービスワーカーを使っていて、
更新面で新しいバージョンをデプロイしたのに反映されないなとかで困ったりした記憶がありますね。
そうですね。
更新されるつもりでいたんですけど、
全然更新されなかったりとかあるので、
そのあたりどういうライフサイクルでサービスワーカーが動いているかみたいなのは、
ちゃんと理解した上で使わないといけないので、
そのあたりが最初は難しいかなと思いますね。
ありがとうございます。
サービスワーカーの話だけでもどんどん掘っていって時間が過ぎていってしまいそうなので、
ちょっと次の話も聞きたくて、
今管理画面はV1とV2で移行途中という感じで、
それぞれ共存しているという感じだと思うんですけど、
V2への移行というのはどういうふうに進めているんですかね。
そうですね。
現在移行が進んでいるのは数画面だけなんですけれども、
全体そもそも管理画面で全部リストアップしたんですけれども、
だいたい120から130画面ぐらいあって、
それらを全部移行するというのはかなり時間がかかるものになるので、
それをいかに効率的に進めるかというのはかなり課題ではあります。
当然管理画面の移行以外にも開発したいことはたくさんあるので、
それを進めながら120、130画面の移行も進めなきゃいけないというのは
かなり難しいと思うので、
その移行についてはなるべくAIエージェントを活用して
進められないかというのを検討して検証も進めてきました。
実際に移行ではエージェントが作った画面とかも既にあるんですかね。
そうですね。一部はエージェントに作らせた画面がありますね。
管理画面の改善
結構簡単な画面というか、本当にデータの一覧画面であったりだとか
みたいなのは簡単な画面なので、
そういった部分はAIが簡単に作れてしまうので、
お任せしているという感じですね。
エージェント、社内でも複数使っていたりすると思うんですけれども、
デビンとか、エージェントというかカーソルとかクロードとか
いろいろある中で何を使ってやってるんですかね。
現在はデビンを主に使っていますね。
他のと比べてデビンが良いとか、
デビンを使うことにした理由とかってあるんですか。
そこまでちゃんと比較検討したわけではなくて、
あくまでその時に一番有力層というか、
使いやすそうだったのがデビンだったので、
今はデビンを使っているという状況で、
もしもっと良いものがあるなら、
そちらを使うのは当然あるかなと思っています。
デビンを使う上でも割とシュッといけたんですけど、
お願い数で工夫していることとか、
ロンプとテンプレートをチームで作っていたりとか、
あったりするんですか。
まだ移行が始まったばかりで、
そのあたりは全然改善の余地はあるかなと思っているんですけども、
現状一番工夫しているポイントとしては、
なるべく管理画面の設計をコンポーネントを再利用して、
できる限り再利用可能なコンポーネントだけで
組み立てられるようにするっていうのが、
一番工夫しているポイントかなと思っています。
多分これもどこかのブログであったかな、
弊社のブログであったかと思うんですけども、
今デザイナーさんが中心にデザインシステムを
作っていただいてまして、
そのデザインシステムにのっとったコンポーネントパッケージというのも
用意されているので、
基本的にはそれをベースに実装をしつつ、
そのデザインシステムにないパッケージ、
コンポーネントについては、
僕らが自前で用意して、
それをDevinに使ってもらうみたいなことをやってもらっていますね。
なるほど。
デザインの中でDevinが考えてデザインを組み立てるというよりかは、
必要なパーツは事前に人間が用意しておいて、
そのパーツを組み立てて画面を構成するっていうところを
今はDevinにお願いしているみたいなイメージですかね。
そうですね。そうなりますね。
なので、たまにとても複雑で、
既存のコンポーネントだけでは組み立てられない画面というのも、
当然いくつかあるんですけども、
そういった部分は引き続き人間が実装することにはなるかなと思うんですけども、
ただ、100、2、30のうちそういった画面は、
せいぜい2、30ぐらいかなと思っていて、
そこは引き続き人間が頑張るんですけども、
でも半分以上はDevinでお任せできるんじゃないかなと思って、
今は進めていますね。
すごい。
画面のUIはお願いしているっていう感じだと思うんですけど、
例えばその画面で使う処理というか関数とかっていうのは、
人が書いているんですかね。
いや、そのコンポーネントも使うし、
例えば状態管理とかそういった実装の部分も、
基本的には人間が実装してきたものがあるので、
それを参考にしてもらいつつ、
Devinに実装させていますね。
ただ、状態管理が通常に複雑になってきたりすると、
結構誤った実装というか全然動かないこともあるので、
そこはもう人間がフォローするしかないと思っていますね。
いいですね。
今社内で、僕から見たらですけど、
社内で一番Devinを活用しているチームなんじゃないかと思いますね。
Devin活用しないと絶対終わらない数なので、
やるしかないって感じですね。
めっちゃいいですね。
MCPとかは使ってたりするんですか。
MCPはまだ手をつけられてないんですけども、
それこそFigmaのMCPとかは活用できると、
もっとスムーズにDevinとコミュニケーションが取れるのかなと思っているので、
そこは今後の課題かなと思っていますね。
ありがとうございます。
管理画面移行のところ、結構話聞いてきたかなと思うんですけど、
Webフロントエンドギルドの活動
これももうちょっと話しておきたいとかってありますか。
そうですね。
そんなところですかね。
ありがとうございます。
大体話せたと思っています。
ありがとうございます。
そしたら別の話で、
Webフロントエンド管理画面でやり始めてるみたいなところから、
会社の中でGuildっていうのがいくつかあると思うんですけど、
その中にWebフロントエンドもあって、
他にはサーバーがあったりとかフラッターがあったりとかするんですけど、
そのWebフロントエンドギルドも今回の外部管理画面移行あたりから、
すごい活発になり始めたなと思っていて、
今日ナオティさんが主導でいろいろやられてるなと印象を受けてるんですけど、
この辺の話もちょっと聞いてみたくて、
フロントエンドギルドではどんなことをやってるんですかね。
そうですね。
もともと僕自身はバックエンド中心でやってたので、
サーバーサイドのギルドにもともといたんですけども、
今回管理画面の作り直しにあたって、
Webフロントエンドのギルドのメンバーとして活動することになったんですけども、
当時僕が入った当時ってそんなに活発に動いてるわけではなかったんですね。
一応メンバーとしてはあるし、チャンネルもあるんだけども、
特に活動はなかったんですけども、
そこを一応新規事業側のリアクトルーターの知見ももらいたいし、
僕らも得た知見を共有したいなっていうのもあったので、
改めてそのギルドの活動を再開することにしたんですけども、
何をやったかっていうと、
一応その月一で勉強会というものを行うようにしていまして、
有事でフロントエンドのギルドで集まって、
リアクトルーターであったりだとか、
その関連の技術についてお互い調べたことを共有するLTEであったりだとか、
共有するような時間であったりだとか、
あとはその新規事業側、あるいは僕らのネットスーパー事業側で
詰まったところとか、はまった部分の相談であったりだとか、
あそこで得た知見みたいなものをシェアするようなことを毎月、月一でやっていますね。
発表は何ですかね、担当制とかでやってるんですか、
それとも結構みんなこれ発表したいぜって言って、
テーマ集まってる感じなんですかね。
それで言うと、やりたい人がやるっていう感じで、
ただそれでも大体月一、二本ぐらいは発表が必ずあるので、
なんかこれはいい感じで回ってるかなという気がしてますね。
発表時間ってどれぐらいですか。
いやもうなんかすごい発表っていうか、
自由に話したいことを話してるだけなので、
あんまり時間とかも特に気にせず話してるって感じですね。
10分話してることもあるし、20分くらい話してることもあるし、
今そこで質疑応答でなんかディスカッションというか、
みたいなのもあったりするので、
あんまり時間というものは縛られてやってる感じではないですね。
はい、めっちゃいいですね。
勉強会とか運営する上で、
発表する人の準備大変とか、
そういうのがあって続かくなっちゃうとかあるんですけど、
ちゃんと定期的に発表する人がいて、
別にそれもあんまり準備とかするというよりかは、
その場で雑談みたいな感じで話して膨らんでいくみたいな感じだと、
負担も少なくやれていいなって思いますね。
そうですね、僕も最初ある程度調べてから望んでたんですけど、
だんだんそれも難しくなってきちゃって、
メモベースのNotionのページを1個作って、
そのメモを見せながら話すみたいな、
割とライトな感じでやってますね。
いいですね、ありがとうございます。
勉強会以外のところでも、
Guildとして活動してるみたいなところってありますか?
そうですね、Guildとしては、
会社のコーポレーターサイトみたいなものも、
実はフロントエンドギルドじゃないメンバーが、
普段の業務の片手間に運用する、
補修用を巻き取ってやっていただいてたものがあるんですけども、
なかなかそちらも手が回らなくなってきたし、
いつも俗人化して、
なかなか他の人から見てどういうことをやってるのかも、
全然見えないみたいな状況が続いていたので、
そのコーポレートサイトの補修用については、
Webフロントエンドギルドのメンバーで巻き取って、
何人かで補修用できるような体制にしたいなというのを、
コーポレートサイトの運用
僕の方からお伝えしまして、
それで最近はコーポレートサイトの補修用は、
僕らエンドギルドのメンバーでやっていった状況になってますね。
めっちゃいいですね。
実際にやってる内容って何ですか?
例えば何だろう?
ライブラリーの依存関係のバージョンアップとか、
そういう感じなんですか?
運用面?
そうですね。
メインの仕事としては、
パッケージのアップデートが毎週来るので、
それを見たりとかですね。
たまにコンテンツ追加したいみたいなことがあるので、
それの相談を持ったりとか、
といったことがメインになるので、
そこまでメインの業務を逼迫する程度ではないので、
片手間にできるくらいのことなんですけど、
そんな感じです。
ありがとうございます。
ノートアプリの使い方
社内の誰か一人が全員でやるというよりかは、
ギルドとしてチームでやれるようになるのは、
めちゃめちゃ健全でいいなと思いました。
ありがとうございます。
もうちょっと話してもいいかなと思ってて、
全然仕事関係ないとも言い切れないみたいな感じなんですけど、
ノートアプリの話とかをちょっとしたいなって思っていて、
僕はもともと仕事のメモとかタスクを、
会社でノーション使ってるんで、
ノーションの一個ページを自分のポータルみたいにして、
そこにいろいろ集めたり書いたりしてたんですけど、
Obsidianが流行り始めた波に乗っかって、
最近ちょっとObsidianを始めてるんですよね。
一方でオフィスでちょっと話しましたけど、
なおってぃさんはObsidian使ってたとこから、
ログシークを使うようになったっていうのがあって、
Obsidian離れたみたいな感じなんで、
何でやめちゃったのかとか聞いてみたいなっていう感じですね。
そうですね。
僕もObsidianとか使う前は、
本当にシンプルなマークダウンのファイルに、
メモとか取るような数量を自分で作ってやってたんですけど、
限界を感じてObsidianを試してみたんですけど、
何ですかね、
Obsidianって使ってるとわかると思うんですけど、
特にエンジニアとか困るかなと思ったのは、
過剰書きをいっぱい書いていくと思うんですけど、
過剰書きの中にコードブロックっていうかね、
コードスリペットを書くことができないっていう問題があって、
書けるんですけど、
ネストしていくことができないっていうか、
なかなか伝わりづらいんですけど、
そういう細かいところが地味に気になって、
そのあたりが自分が今まで使ってきたツールと
使い勝手が違かったのが最後までちょっと慣れなくて、
ログシークに移ったって感じですね。
ログシークはどんな感じですか?
今のところは使い続けてるんですか?
そうですね。
多分今年の初めぐらいから使ってるんで、
もう半年以上は使ってるんですけど、
引き続き使ってて、
これもObsidianと同じ感じで、
ローカルのファイルを参照するノートアプリなんで、
そのあたりはObsidianと同じで、
メモを取っていく感じっていうのも
Obsidianと基本的には同じだし、
ページごとに関連がつながっていくみたいなところも
基本的にはObsidianと同じかなと思ってるんですけど、
たださっき言った細かい部分の使い勝手であったりだとか、
僕もそこまでObsidianをめっちゃ使ってたってわけじゃないので、
こうはいいっていうのはなかなか説明が難しいんですけど、
自分には合ってたって感じですね。
いいっすね。
僕もObsidianは使い始めてどのくらいだろう?
まだ1ヶ月くらいかな?
そんなことない。
4月からデイリーノートがあったんで、
4ヶ月くらい使ってますけど、
ちょっと使いこなせてるかって言ったらそんなことはなくて、
日々デイリーノートにメモが溜まっていき、
タスク管理はTasksっていうプラグインを使ってて、
タスクのチェックボックスをどこでもいいから書いておくと、
クエリでいくらでも引っ張ってこれるっていうやつを使ってて、
なので色々なデイリーノートにその日生まれたタスクとかを
とりあえず置いておくと、
自分はインボックスみたいなページを1個用意してるんですけど、
そこにタスクが並ぶようになっててとかやってるんですけど、
もともと自分はタスク管理をGTDのベースでやってて、
インボックスにまずは全部突っ込んで、
そこからカレンダーに入れたりとか、
いつかやるやつはいつかやるのに入れたりとかしてて、
今のObsidianと若干運用の形が違うので、
それが今気持ち悪いけど、
とりあえず使ってみようと思って使ってる感じですね。
確かにそういうGTDとかでしっかりタスク管理したい場合は、
プラグインも微妙に痒いところに手が届かないこともあって、
そこが難しいですかね。
僕もタスク管理は一応してはいるんですけど、
そこまでカチッとした感じじゃないっていうか、
もうゆるくなってるので、
そういう感じだとバチッとハマるのかもしれないですね。
僕の場合は開発のタスクとかかなり複雑なものについては、
タスクごとに1ページ作って、
そこに開発のメモとかを1つのファイルに全部残して、
あんまりデイリーノートというか、
ジャーナルの部分については、
そんなに足りたことは書いてないことが結構多いかなというようになってますね。
なるほどですね。
自分のスタイルとかとツールの思想とかスタイルとかと
やっぱり合わないとかがあるんで。
ありますよね。
もうちょっと僕はObsidianを使ってみて、
やっぱり無理だなってなった後はまたNotionに戻るとかあるので。
Obsidianもよかったら試してみてください。
タスク管理のアプローチ
確かに。1回使ってみようかなと思います。
ありがとうございます。
いい感じの時間になってきたんで、
この辺で今日は終わろうかなと思います。
はい。
エンディングです。
10XFMではリスナーさんからのお便りを募集しています。
エピソードの感想や10Xのメンバーに聞いてみたい質問など
どんなことでも構いません。
番組概要欄にあるお便りフォームからの投稿、
またはXでハッシュタグ10XFMでツイートをお願いいたします。
また10Xでは現在様々な職種のメンバーを募集しています。
この10XFMを聞いて10Xに興味を持った
カジュアルに話を聞いてみたいと思われましたら、
こちらも番組概要欄にある採用情報、
または10Xのホームページのリクルートから応募をお待ちしております。
最後にSpotify、Apple Podcastなど、
お聞きのPodcastアプリで番組のフォローをお忘れなく、
最新エピソード配信時にお知らせが届いたり、
また過去エピソードの再生済み、
未再生が一目で分かるようになり大変便利です。
今日のお相手はフタブーとNaotiさんでした。
それではまた次回。
