前書き
はじめまして、C&I統括本部の北と申します。
初めてエンジニアブログを担当させていただきます。
今回は入社3年目のPG（私）より、「SPAで作成した社内アセット」を活用したWebシステムの開発体験について共有させていただきたいと思います。
拙い点もあるかと思いますが、気楽に読んでいただけますと幸いです。
日販テクシードのアセットについて
弊社では、お客様満足度の向上に向けた取り組みの一つとして、お客様に品質の高いサービスを可能な限り費用を抑えてご提供するために、様々なプロジェクトで活用できる業務アプリケーションをSPA（Single Page Application）にて開発し、社内でアセット化しました。（以降アセットと呼びます）
アセットには、Webシステム開発で汎用的に使用される機能（例えば一覧表示や検索）が実装されています。
現時点のアセットの機能は、最小限の機能実装に留めており、ここから「アセットを活用したサービス提供」「アセットに対する新たな汎用機能の追加」「ご提供できるサービス範囲の拡大」のサイクルを目指しています。
アセットについて、詳しくを知りたい方は過去記事（SPA(Single Page Application)で業務アプリケーションを構築する）をご参照ください。
実プロジェクトで初めて活用
1. プロジェクトについて
記念すべきアセットの活用第1号🎉となったプロジェクトは、数千人のユーザが利用するスマホ・タブレット対応のシステムの開発です。
主な機能としては小売店がメーカへ検索発注するためのシステムです。
フロント部分にアセットを活用して、開発する方針となりました。
私はフロント部分の開発担当になりましたが、SPAの経験が乏しく、最初はとても不安に感じていました。
2. アセットを活用した開発の進め方
まずは、アセットに実装されている画面とプロジェクトで作成する画面の要件を確認し、それぞれ活用できる画面を探しました。
アセットで作成した画面を、今回の要件に沿った画面にするために「画面項目をどのように修正したらよいか」「不要な処理/足りていない処理はあるか」を検討し、その内容を元に開発を進めていきました。
実際に開発を始めて、アセットからVue.jsならではの書き方やフォルダ構造、ファイルのつながりを実装ベースで確認し、イメージを明確にしていきました。
実装イメージが明確になったことで、どこからコーディングを進めたらやりやすいかを自分の中で考えることができ、検討した内容にあわせて調べながら進めていくことが出来ました。
未経験の自分としては、アセットを活用することでVue.jsの構造・書き方を具体的に想像することができ、どのように実装すればよいかが理解しやすかったです。
また、繰り返し画面を作成していくことで、活用できる画面や部品の使用方法が分かるようになり、1画面を作成する工数を少なくすることが出来るようになっていきました。
アセット活用によるWebシステム開発でのカスタマイズ対応
アセットは「様々なプロジェクトで活用できる業務アプリケーション」であるため、汎用的になるように最小限の機能で構築されています。
そのため、各プロジェクトに合わせてカスタマイズを行う必要がありました。
ここでは実際に実施したカスタマイズ事例をいくつか紹介したいと思います。
1. ログイン時のページ情報の破棄について
・ログアウトをせずにログイン画面から異なるユーザでログインをしたとき、前のユーザのページ情報が表示されてしまう事象
アセットでは、保持している全ての情報の破棄という基本的な処理がログアウトに組み込んでありました。
今回はそれに加えて、ブラウザバッグ等でログアウト処理が行われなかった場合を検討し、処理を追加しました。
保持している情報には、大きく分けてログインユーザ情報とページ情報があり、ログインユーザ情報はログインされることで書き換えられるため、ページ情報のみ考慮する必要がありました。
そのため、新たにページ情報を破棄する処理を実装し、ログアウト時には全ての情報の破棄、ログイン時にはページ情報のみ破棄するように改修しました。
その結果、前のユーザのページ情報が表示されてしまう事象は解決しました。
2. ページナビのレイアウトについて
・ニーズに合ったより高品質なページナビの作成
アセットでは、色々な画面での流用が可能になるようにボタンやプルダウン等を部品として作成し、各画面に組み込んで使用しています。
その1つにページナビという、一覧表示などでページの表示制御を行う部品がありました。
今回のプロジェクトではPCに加えてタブレットやスマホでの操作が想定されていたため、より高品質なページナビを作成することにしました。
アセットのページナビを元に、ディスプレイサイズが異なる場合をふまえて部品の調整を行いました。
ページ数が多い場合にはページの一部を「・・・」で省略するように処理を追加することで、表示の崩れが発生しないようにしました。
この対応により、タブレットやスマホで操作した時の操作性が向上しました。
3. フロント側（js等）のエラー検知について
サーバ側でエラーが発生した場合、後からアプリケーションの監視システムで確認することが出来るようになっています。
基本的にサーバ側でエラーを検知する仕組みですが、より詳細にエラー時の状況が特定できるようにフロント側でも対応を行いました。
具体的な対応は、フロント側で発生したエラーを取得し、コンソールで表示されるエラー内容そのものをAPIに送信する処理を追加することにしました。
処理を追加することで、ブラウザのコンソールでしか確認できなかったエラーをアプリケーションの監視システムで後から確認できるようになりました。
4. メッセージのポップアップについて
・メッセージポップアップの追加
アセットでは、大事なメッセージをエラー項目の下に赤文字で表示していました。
今回のエンドユーザは高齢者の方も使用する想定のため、より大事なメッセージを分かりやすくする目的で機能を追加しました。
今回のプロジェクトではポップアップという部品を追加作成し、全画面で大事なメッセージを表示して、「OK」ボタンをおさなくては他の画面操作ができないようにしました。
ポップアップ表示にすることで、大事なメッセージが目につきやすく、見落としてしまう可能性を下げることが出来ました。
まとめ
はじめはSPAの開発経験が乏しいため不安に感じていましたが、アセットを活用することで実装の内容や方法が具体的にイメージでき、作業を効率的に進めることが出来ました。
単純な画面であれば、画面のデザイン（HTML）やAPI関連の処理などを修正するだけで1画面が作成できるため、開発期間を短縮することができます。
また、SPAやVue.jsについて、実装手順、共通機能など、実装のポイントを社内wikiにまとめたため、他の人が開発を行うときにも効率化されていくと思います。
課題としては、新規案件で作成した機能を「アセット化する」(汎用的に流用できる形にする)ことについては、担当者レベルで検討することは難しく感じられました。
何をアセット化するのか（カスタマイズ範囲をどのように設定するのか）など、アセットの方向性については、その場限りの対応にならないように検討する必要があると思われます。
まだまだ課題はありますが、アセットを利用した開発を繰り返すことで「アセットの活用 → 実プロジェクトで改善 → アセットへ反映」というサイクルをまわすことができ、より実用的なアプリケーションへと進化していくと思います。
最後までご覧いただき、ありがとうございました。