いちエンジニアVueからReactへの乗り換えを提案し成し遂げた話

by Takahiro Matsuda

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

テックタッチ（プロダクト）のご紹介

Slide 5

Slide 5 text

5 © 2023 Techtouch. テックタッチとは操作  ガイド  作成  システム画面上でかんたんにできる  操作ガイドの作成も表示も問い合わせが多く  分かりにくいシステム   誰もが使える  システムへ！  利用者の体感を最重視したリアルタイムの操作ガイドで、システムの使い方が分からないを払拭。   操作ガイドはプログラミング不要で、システムの画面上でかんたんに作成可能。   入力チェックや条件分岐にも対応。   システム利用者  システム管理者  システム改修不要 

Slide 6

Slide 6 text

どうVueからReactへの乗り換えを実現したか

Slide 7

Slide 7 text

7 © 2023 Techtouch. どう実現したか課題感をもとに改善案をイメージ 7 => いろいろ考えた末、今後のことを考えるとReactでゼロベースから作り直すのが良さそうデグレ頻度が高いなテストコードが不十分だな利用しているライブラリの拡張性が低いなコードが型安全になってないな課題感などなどなど ● デグレを減らすためにはテストが必要だ ● デグレの原因は設計にありそうだ ● テストを充実させるためにテスタビリティが高い設計にしなければ ● 設計を変えるとなるとほぼ書き直さないといけないな ● Reactだとより型安全に作れそうだし、拡張性が高いライブラリがあるのでそれが使えそう ● Reactだと細かいカスタマイズができるそうだな、などなど改善案

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

成功要因の分析

Slide 14

Slide 14 text

14 © 2023 Techtouch. 成功要因の分析 1. 効果や工数を見積もる前に行動した ● 最初にそこまで考えきれない（というより見積もるための知識も時間もない） ● 直感を信じて行動することも大事 2. 誰に言われたわけでもなく自ら行動した ● コンセンサスも取らずに行動した ● ただやってみたい、試してみたいという思いで始めた ● 自ら行動することで最後まで高いモチベーションで取り組むことができた 3. 実際に動くものを作った ● 実際に動くものを作ることで自分の中にあったソリューションのイメージがより鮮明になった ● 動くものがある方が説得力も増す ● ある程度形にするまでであればそこまで工数はかからない ○ 実際作るのにかかったのは30時間ほど（数人で１年かけるのに比べたら誤差） ○ 細かい部分の作り込みや自動テストの作成、レビュー、QAなどのが方が時間がかかる事が多い

Slide 15

Slide 15 text

15 © 2023 Techtouch. 成功要因の分析 4. 布教活動を継続的に行なった ● プレゼンしたり、Slackや対面での会話で話題に出したり ● バグが起きたり開発時に課題を感じたりする度にみんなの脳裏によぎるようになる ● みんなのモチベーション向上に繋がる ○ チーム開発なのでみんなのモチベーションを上げることが大事 ○ 一人だけやる気になってもダメ ○ みんなが良いと思って作ることが大切 ● 建設的な意見をもらうことができる ● 大きな決断はなかなかすぐにはできない ○ 実際に開発を本格的に始めたのは活動を開始してから半年後

Slide 16

Slide 16 text

Slide 17

Slide 17 text

さいごに

Slide 18

Slide 18 text

● いちエンジニアでも大きな技術的負債の解消は実現できる ● 負債が解消できるかどうかはエンジニアの行動次第！

Slide 19

Slide 19 text

すべてのユーザーがシステムを使いこなせる世界にシステム導入だけで終わらせない、利活用のためのDXプラットフォーム