質問: 大変支離滅裂な質問になってしまい申し訳無いです。 今度サーバーサイドがJAVAでjspをViewに使用するWebアプリケーションのjsp部分の製作をすることになりました。 しかし自分は普段Vueなどのnodejsで動くフレームワークを触っているので、jspや素のJavaScriptはあまり得意ではありません。コンポーネント化しての開発も魅力的なVue.jsのような形式で開発したいなという時にふと思ったのですが、VueのフレームワークNuxt.js(SSRフレームワークだが静的サイトの出力も出来る)にてhrml、css、jsの部品を作成し、それをjspに書き込むという方法で無理やり出来るのではないかと思いました。 そもそもサーバーサイドにnodeを使えばいい話ですがそうも行かないので、、、 コレを行った際に何か重大な問題は発生しますか?(コードの可読性、ルーティングなどに対応出来ないという点は承知です) またどう考えても他にいい感じの方法がある気がしてるのですが何か(大雑把で申し訳ないです)良い案御座いませんでしょうか、、、?
回答: もっと単純に考えたほうが良いのではないでしょうか? サーバーサイドはJavaでJSPページをレンダリングして、レンダリングされたページのHTMLでvue読み込めばいいだけだと思いますよ。 私も今の開発ではサーバーサイドJava(SpringBoot)でフロントをvueJS組み込んでおり、そこでもHTMLの出力はJavaで行ってHTMLでVueを読み込んで行うスタイルです。SPAではなく普通にページ遷移はJavaが行うマルチページでやってます。 vueだとSPAのイメージを多く持たれているのでページ遷移のあるものできないと思われる方もいるかと思いますが各ページ毎に用意したvueのエントリポイントのapp.jsを用意すればいいですよね。 JSPの階層構造と対応するvueの階層構造を合わせてあげればわかりやすいです。 フォルダ毎にapp.jsを作るのはwebpackのオプションでやってくれます。 webpackで複数のディレクトリへ出力する Qiita - webpackでモジュール解決しながらディレクトリ構成を保ったまま書き出す ### 開発時の階層例 ``` ---- jsp (ここのフォルダの名前は適当です自分の環境に読み替えてください) | +-- home | | +- index.jsp | | +- home.jsp | +-- user | | +- index.jsp | | +- new.jsp | | +- confirm.jsp +-- css +-- js +-- images +-- scripts( vueの元ソース置き場) | +-- home | | +- index | | + app.js | | + page.vue | | +- home | +-- user | | +- index | | +- new | | +- confirm | +-- components (共通で使えるVueComponents) | +-- dist(コンパイル後のvue置き場) +-- home | +- index | + app.js | +- home | + app.js +-- user | +- index | + app.js | +- new | + app.js | +- confirm | + app.js ``` JSPで出力するページは極端な話以下のようなHTMLで良いです。 ``` ``` 各ページに用意するapp.jsは以下のようなものですね。 この中で各ページのレンダリングに使う.vueを読み込んであげればよいです。 ``` import Vue from "vue"; import Page from "./page"; var app = new Vue({ el: '#app', components: { Page} }); ```