フルスタックエンジニア

はじめまして！本業ではVue.js/Laravelを中心に開発をしています。

2022年1月 - 2022年4月 ホテル向けの分析ツールのリプレイス
2022年4月 - 2022年12月 ホテルまたは対象地域で利用可能なクーポン発行サービスの新規開発
2023年1月 - 2022年12月 ホテル向けの分析ツールのリプレイス

Vue.js

プロジェクト概要
ホテルまたは対象地域で利用可能なクーポン発行サービスの新規開発。
1つのAPIから用途に合わせて利用できるようサイトを3つ作成。
１.社内用の管理システム
2.ホテルまたは地域の担当者用の管理システム
3.一般のユーザーが利用するWebサイト。

利用した技術
Laravel
Vue.js
Vuetify

担当業務
LaravelでAPIの開発。
Vue.js、Vuetifyを使ってフロントも担当。

新規のサービスなのではじめは設計などの詳細が決まっておらず手探りの状態でしたが、フィードバックをいただきつつ開発を進めました。どのようなデータが必要なのか、1対多もしくは多対多のどちらの方がデータを扱いやすいか、今後の機能追加が発生する可能性などを考えながら、テーブルの設計の修正、追加なども行いました。
バックエンドで必要なAPIを作成しつつ、フロントも担当しました。バックエンドではどのようなデータの形にしたらフロントで使いやすいかを意識しつつ、3つのサイトで汎用性高く使えるように可能な限りコードがシンプルになるよう工夫しました。

フロントではどのようなUIだと使いやすいかを意識しながらVuetifyのドキュメントから適当なコンポーネントを見つけて作業を行いました。基本的なリレーションの呼び出しやあまり処理が重くなりそうにないフィルターはフロントで行い、処理に時間がかかりそうな膨大なデータのフィルターなどはバックで組みました。

クーポンサイト

利用した技術
Vuetify
Vue.js（2）
ApexCharts

課題
既存のシステムではバグが多かったり、動作が遅かったりしたため。
バグの例：フィルターをかけても上手く動作しない、読み込みに10秒以上かかる場合もある。チャートへの出力がうまくできておらず崩れている。
またUI的にもボタンの位置などわかりづらく、使いやすいものではなかった。

詳細
Vue.js、ApexCharts、Vuetifyを使ってバックエンドから受けとったAPIを成型してチャートやテーブル、CSVファイルなどを出力する作業。入社後初のプロジェクトで、バックエンド担当として入社しましたが、フロントの勉強も兼ねてとのことでアサインされました。
初め1か月ほどはVueとデータ構造の理解が足りず作業が進まないことも多かったですが、2か月目からは比較的スムーズに進めることができるようになりました。
チャートはApexChartsを使い、基本的なUIやテーブルなどはVuetifyで作成。map,filterなどを使って配列を操作して望んだ形で出力することが主な作業でした。

社内でもApexCharts、Vuetifyを使った開発は初めてとのことで、ドキュメントを見ながら適当なコンポーネントを見つけたりUIを整えて実装することに苦労しましたが、別の箇所でも使えそうなものはコンポーネントとして切り出し、再利用できて保守しやすくなるよう意識しました。
現段階では完全なリプレイスではなく、プレビュー版として部分的に導入していますが、以前のものよりも分かりやすく使いやすいUIになり動作速度も速くなりました。