ID:76182さん

# SaaSプロダクトの開発。 ## 自社SaaSプロダクト開発のメンバーとして以下の業務を実施。 自社SaaSプロダクト開発のメンバーとして以下の作業に従事した。 - 要件定義 - 見積もり - 開発 - テスト ### Vue.jsの導入・機能開発 #### 課題・背景 フロントエンドの主な技術はjQueryだったが、従来のjQueryのアプローチでは実装難易度が高い複雑なUIの案件の依頼があった。 #### 意図・目的 1. 他のレガシーアーキテクチャのサービスですでに導入した実績があったため、Vue.jsを検討。 2. Vue.jsはプログレッシブフレームワークであり、段階的に必要な問題解決が可能。本案件では画面の一部分をコンポーネントとして提供するが、今後画面全体、あるいは別の画面で利用することがあっても、柔軟に対応ができると判断し、Vue.jsを採用。 3. 既存のHTMLファイル（テンプレートエンジン）にVueコンポーネントを提供する形で実装。 #### 結果 - jQueryは命令的UIであるために、実装が複雑化するところを、モダンなJavaScriptフレームワークであるVue.jsを導入することで、開発コストを抑えることができた。 - 顧客から使いやすいと好評であり、営業しやすくなったと、直接話を聞くことができた。 - 一部でもVue.jsを導入できたことで、採用面でも影響があったと報告があった。 ### インターンシップで使用するチャットアプリのリプレイス #### 課題・背景 インターンシップで講師として参加した課内のメンバーから、題材のアプリがjQueryのため、参加者の満足度が低まっている可能性があると共有があった。 #### 意図・目的 1. 担当プロダクトではまだまだVue.jsを使う機会が少なかったことと、インターン向けということもあり、基本機能を復習できる良い機会と捉えた 2. 上長やインターンを担当する別の課の社員と相談し、Vue.jsでのリプレイスを実施 #### 結果 - 参加したインターン生から、Vue.jsを触ったことがなくても、資料がわかりやすく、楽しく参加できたとアンケートの回答があった。 - インターンシップで使用している技術がjQueryであったことに対し、改善したいという思いが、インターン担当からもあったようで、社内の課題を一つ解決することができた。 ### 一般ユーザー向け機能をサブシステム化して開発 #### 課題・背景 - リッチなUIを実現するためには、従来のHTML生成+jQueryの方式では、アプリケーションが複雑化するので不十分だった。 - 従来のBtoB想定の提供とは異なり、BtoC(BtoBtoC）を想定することで、より多くのユーザが機能に触れる機会ができることが予想された。プロダクトを知らないユーザーの目にも触れるためWebアクセシビリティ対応は考えるべきと考えた。 #### 意図・目的 1. 契約している顧客サイト上にコードを埋め込み、Webページ上でフォームの入力画面と送信画面の複数画面を切り替えるSPAを実現する必要がある。 2. 機能要件を満たすため、フロント側で動的な入力項目の生成が必要。 #### 結果 - フロントエンドを一種のSPAのような構成として、サーバーサイドとREST APIで連携 - マテリアルデザインベースのデザインを採用（Vuetify） - ストレスを低減するUXを提供 <リアルタイム更新（バリデーション・更新データの取得）> - 画面遷移時にページ全体を再読込しない（SPA) - Webアクセシビリティ対応を実施 <静的解析、アクセシビリティテスト>