はじめに
ブンブンHello World.
どうも開発です。
今回は製品開発本部での取り組みである「たしなみ時間」と、その成果物を使って会社の業務効率改善も目論んだ話をしたいと思います。
話の発端
今回の話は、書籍の貸し出しや読書履歴を管理するアプリケーション(図書管理システム)を自作し、部内で運用していることを全社向けに紹介したところから始まります。
全社展開したところ、検証端末を管理している部門から「検証端末の貸し出しに応用できないか」と打診があり、図書管理システムを応用した「検証端末の貸し出しシステム」を構築することになりました。
ただ、図書管理システムは私個人の空き時間で開発していたため、アプリケーションとしての課題も多く、改善点が山積みの状況でした。
そこで部内の取り組みである「たしなみ時間」を使ってアプリケーション作成の時間を確保しつつ、自身の知識のアップデートを行い過去の負債を返済し、最終的には業務効率の改善に繋げようと画策しました。
たしなみ時間とは
多くのシステムエンジニアあるあるとして、目の前の業務に追われキャッチアップに手が回らない「木こりのジレンマ」状態に陥ってしまうことがあげられます。
製品開発本部では、そういった状態に陥り社員の能力向上が阻害されることを防ぐために、意図的に業務時間のうちの数時間を学びの時間にあてる活動をしており、部内で「たしなみ時間」と呼んでいます。
詳しくはこちらの記事の「たしなみ時間」「たしなみ会」をご覧いただければと思います。
今回は、たしなみ時間を使ってVueを使ったアプリケーションを作成しました。 以前Vue2を使って作成した図書管理システムをベースに、Vue3への移行やリファクタリングなどを行い、Vueマイグレーションの知識や基本的なアプリケーション作成の知識をアップデートしました。
成果物
実際に作成した成果物はこちらです。 端末一覧から探している端末を探し、借りるアクションをすることで貸し出しができます。
アーキテクチャ
アーキテクチャは下記の構成になっています。
AzureAppServiceのランタイムをNode.jsに設定し、expressとVueで作成されたアプリケーションをデプロイしています。 データはCosmosDBを使って管理し、バックアップはBlobStorageに保存されています。 Azure DevOps Pipelinesを利用しており、Azure DevOps Reposで管理しているリポジトリの特定のブランチに変更があった場合に、自動でビルド、デプロイを行います。
改善したポイント
- Vue2 → Vue3にアップデート
- Vue CLI → Viteに変更
- デザインフレームワークをPrimeVueに統一
- axiosの利用 → fetch APIに統一
- Vuexの採用
- ログイン機能の追加
何点か詳しく触れていこうと思います。
Vue3にアップデート
Vue2系のサポートは2023年12月31日までとなっており、それまでの間にVue3に移行する必要があります。
今回はちょうどいい機会だったので、Vue2系で作成されていたアプリケーションをVue3系にマイグレーションしました。 マイグレーション自体は公式ガイドを参考に進めていけば概ね困ることは無いと思います。
破壊的変更がある部分だけ注意が必要です。
今回は this.$set(..) といったように、オブジェクトのプロパティ変更が多いつくりになっていたため、この辺のマイグレーションは若干時間がかかりました。
とはいえ基本的にはどうすればいいかはガイドが示してくれているため、比較的単純作業のみで済んだ印象です。
また、Vue3の目玉機能としてCompositionAPIが挙げられますが、引き続きOptionAPIのサポートもされているため、単純に移行するだけならそのまま移行も可能です。
v3-migration.vuejs.org
Vueを利用するアプリケーションではVue RouterやVuexを利用することも多いかと思いますが、こちらも移行ガイドが公開されているため、全体を通して絶望的にハマるといったことは少なかったと思います。
Viteの採用
VueCLIに比べてビルドが早いツールとして、Viteが挙げられます。 今回はこの辺の最新情報のキャッチアップもかねて、Viteへの移行も行いました。
VueCLIからViteへの移行についても多くの記事が書かれており、移行にはそこまで手間取らなかった印象です。 configファイルのマッピングとindex.htmlの移動・編集は少しハマるポイントかもしれませんが、それ以外は概ね問題なかったと思います。
実際に使ってみて確かに高速だし、HMRが使えるのは大変ありがたいですね。 開発環境をもう少し整えれば十分に活用できる気がしています。
axiosの利用を止める
以前作成したアプリケーションでは、サーバーサイドとの通信にaxiosを利用していました。 今回はJavaScript標準で利用できる fetch API を利用しています。 IEが正式に廃止の方向に進んでいることで、今後 fetch API の利用シーンもより増えることを予想しての方針転換です。
また、axiosを利用しなくなることで外部ライブラリに対する依存度も低下し、セキュリティアップデートなどのメンテナンスコストを下げることにもつながると考えています。 なるべく依存するライブラリは少なくして、軽量なアプリケーションを目指したいと考えています。
ログイン機能の実装
今回新しく必要な機能として、ログイン機能の実装を行いました。 検証機の棚卸や追加など、一般ユーザーとは別の権限を持った管理者が必要になってきたことが背景にあります。 さすがに数百人が利用する想定のアプリケーションを性善説運用するには限界があると感じたので、ある種必然の実装になります。
実装にはVuexも利用し、結果的にこの点でも知識のアップデートができました。
実際の運用について
今回作成した成果物では、社内の検証端末の貸し出しを管理することができます。
過去の問題点
以前は検証端末の貸し出しをするために、
- 端末を保管しているところまで移動する
- 使いたい端末を探す
- 見つけたら貸し出し表に各種記入をする
- 終わったら返却しに行く
といったフローを踏んでいました。
その結果下記のような課題があります。
- その場に行かないとどの端末があるかわからない
- 手書きで貸出管理をしているためイケていない
- 利用状況の把握も、貸し出し表を手作業で集計しないといけないため棚卸が大変
今回はシステム化をすることで、上記課題の解決を目標にしています。
今回解決できたこと
今回のアプリケーションで、下記のことを実現できます。
- 自席から検証端末の最新状況を確認できる
- システム上で貸出/返却登録できるため、手書きの必要がない
- 利用状況も集計しやすく、棚卸が楽
実際に運用してみてどうか
成果物を実際に運用してみて、運用を担当されている方に感想をうかがってみました。
…と言いたいところですが、貸出システムについてはこれから運用が始まるので、まだ効果の方が未知数となっています。 実際に運用が始まったら、運用を担当されている方に感想をうかがってみたいと思います。
おわりに
今回は、たしなみ時間を使って自分の知識をアップデートし、さらに出来上がった成果物で会社の業務効率の改善も目論んだ話をしました。
結果としてVue2→Vue3移行の知識を身に着け、実際に利用できる成果物も完成しました。 最終的にはそちらの運用開始の目途も立ち、業務効率の改善も図れそうです。
ecbeingでは、自発的な学習ができる十分な環境と、全社員が業務以外でも会社貢献できるだけの体制が整っていることを改めて感じることができました。
一緒にスキルアップして、業務改善にも取り組んでくれる人を募集しています！
careers.ecbeing.tech
