JavaScript
Vue.js

シングルページアプリケーションで悩んでいる事


はじめに

シングルページのWeb開発に数年ほど従事していますが、納得できるアーキテクチャを未だ作れていないため、悩んでいることを記載しました。解決方法などは記載していません。経験者の方から何か指摘いただければ、とてもありがたいです。


悩んでいること(3点)


1. Smart UI アンチパターン対策

参考:https://qiita.com/qsona/items/9c062de2bb83491aec38

フロントエンドを手っ取り早く作り動かすため、ページに合わせてサーバ側のAPIを作ってしまう。

開発初期で仕方がないかもしれないが、アプリケーションが成熟してくるにつれ、問題が大きくなります。

サーバ側をテストやセキュリ対策で固めた後に、フロントのデザイン変えるので合わせてAPIも直してくれと言われるのは、いやなのです。

では実際どうするのかというと、参考記事に書かれているフロントエンドサーバを作成するのが良いと思います。

バックエンドサーバはリソースベースに忠実にデータを返すように作成して、ページに必要なデータを集める役割を持つフロントエンドサーバを用意します。

ですが、フロントエンドサーバ作成するの大変ですよね。どうしよう? というのが悩みです。

フロントエンド側に、フロントエンドサーバに似た機能を持つ、ページ情報を集めるものを用意するのが良いかもしれません。

Angularだと、Serviceで実装。

Vueだと、該当するものないですよね。Atomic DesignでいうところのPageで集めてくる(ベージ間での共有はVuex使う?)。もしくは専用のClassを自作して、Vueに組み込む感じでしょうか。

Reactは知らないのですが、ActionCreator?


2. ViewロジックとBusinessロジックを分ける

例えば、フロントにデータの削除のボタンがあったとします。その削除ボタンをおすと、「本当によろしいですか?」みたいなダイアログが出てくるとします。

このとき、ダイアログの表示・非表示切り替えるため confirmDialog = true などというコードを書いたりしますが、これはviewに関わるロジックですよね。

このようなviewにまつわるコードと、アプリケーション的に意味を持つ実データのロジックを分離したいのです。

ダイアログの出し方は、デザインやUIの変更ですぐ変わりますよね。

これとビジネスロジックが一緒に混ざっていてほしくないのです。

また、ビジネスロジックはバックエンドサーバにもたせて、フロントは表示だけなどというのは、

開発初期では可能かもしれませんが、時が経つとフロント側にもロジックが幅を効かせてきます。

どこにビジネスロジック書けばよいですか? というのが悩みです。

Angularだと、viewロジックはコンポーネント、ビジネスロジックはServiceに実装。

Vueだと、viewロジックはコンポーネント、ビジネスロジックを書く専用の場所はないので、Classを自作か?

Reactは、ロジックは全部Redexに入るイメージがあるので、Redux内に分けて書くのでしょうか?


3. ロール毎のロジックとコンポーネント管理

ここでいうロールとは、いわゆるSuperAdmim/Admin/User/Guestのようなユーザの権限のことです。

バックエンド側での権限管理の話は、一旦置いておきます。

問題なのは、フロントのコンポーネント管理です。

例えば、Guestには、「作成」「編集」ボタンは見せないようにするとしましょう。

そうすると、if的なディレクティブで、そのボタンを見えなくするのが、手っ取り早いですよね。

ですが、それはロールのロジックとviewのロジックが混じるってことになります。

ロール毎にコンポーネントを用意するのは、DRYじゃないコードが増えて、いやです。

ロール毎の差分を、別コンポーネントとして切り出すのが正解なのかもしれません。

ですが、作業したことある方ならわかると思いますが、全部に対応するの非常に面倒です(工数あればできます)。

どうしようかと思っていたのですが、

その交わり方を制御するような、ルールを導入する方法がベストかもしれません。

参考:https://qiita.com/yuukive/items/7db887a670434cdc4006

しかし、上記はviewに関しての切り分けです。

ロール毎にビジネスロジックが違う、または特定のロールに共通のビジネスロジックがある場合は、どこに切り分けるのがベストでしょうか?


まとめ

上記の3つの悩みどころを解決するようなアーキテクチャが欲しいです。

これができれば、PWAへの移行も簡単だし、UIの大幅変更もどんとこい!ってなるかも。

使用したことないのですが、これから調べようと思うもの。

参考:https://www.webprofessional.jp/reusable-javascript-business-logic-peasy-js/