質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    16991questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • JSP

    948questions

    JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

  • Vue.js

    763questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • servlet

    477questions

    Servletとは、Webページの動的な生成やデータ処理などをサーバ上で実行するために、Javaで作成されたプログラムです。 ショッピングサイトやオンラインバンキングといった、動的なウェブサイトの構築に用いられています。

  • Nuxt.js

    68questions

jspにnuxt.jsで静的生成したhtmlを書き込む

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 516

unotovive

score 8

大変支離滅裂な質問になってしまい申し訳無いです。
今度サーバーサイドがJAVAでjspをViewに使用するWebアプリケーションのjsp部分の製作をすることになりました。
しかし自分は普段Vueなどのnodejsで動くフレームワークを触っているので、jspや素のJavaScriptはあまり得意ではありません。コンポーネント化しての開発も魅力的なVue.jsのような形式で開発したいなという時にふと思ったのですが、VueのフレームワークNuxt.js(SSRフレームワークだが静的サイトの出力も出来る)にてhrml、css、jsの部品を作成し、それをjspに書き込むという方法で無理やり出来るのではないかと思いました。
そもそもサーバーサイドにnodeを使えばいい話ですがそうも行かないので、、、
コレを行った際に何か重大な問題は発生しますか?(コードの可読性、ルーティングなどに対応出来ないという点は承知です)
またどう考えても他にいい感じの方法がある気がしてるのですが何か(大雑把で申し訳ないです)良い案御座いませんでしょうか、、、?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/06/20 09:24 編集

    冒頭文章で訴えられても困りますので不要です。きちんと要件”のみ”を書き、自身が調べてみたことやってみたことを記載してください。(できれば質問テンプレートをご活用ください https://teratail.com/help/question-tips#questionTips3-8 )

    キャンセル

  • unotovive

    2018/06/20 16:31

    質問テンプレートがあったのですね、申し訳ないです。今回は満足する回答が得られたのでこのままにさせていただきますが次回以降活用させていただきます。

    キャンセル

回答 1

checkベストアンサー

+1

もっと単純に考えたほうが良いのではないでしょうか?

サーバーサイドは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で良いです。

<body>
   <!-- home/index -->
   <div id="app"></div>
   <script src="https://cdn.jsdelivr.net/npm/vue"></script> 
   <!-- home/indexに使用するvueのエントリポイント ページ毎に異なる app.jsを読む-->
   <script src="dist/home/index/app.js"></script> 
</body>

各ページに用意するapp.jsは以下のようなものですね。
この中で各ページのレンダリングに使う.vueを読み込んであげればよいです。

import Vue from "vue";
import Page from "./page";

var app = new Vue({
  el: '#app',
  components: { Page}
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/20 16:31

    なるほど!とても聞きたかった部分が的確に聞けて良かったです!ありがとうございます!

    キャンセル

  • 2018/07/09 23:37

    javaでJSONを生成してそれをvue側に渡したいときにどのように処理しているかなどはご存知ではありませんか?

    キャンセル

  • 2018/07/10 00:20

    Java側のフレームワークに何を使用しておられるのかわからないですが、APIとなるメソッドのHTTPResponceにJSONの文字列を返すことになります。JSON文字列の生成には Jacksonというライブラリを使用しています。このライブラリを使うとJavaのクラスオブジェクトやMapオブジェクトとJSON文字列の変換をやってくれます。 "Jackson JSON"というキーワードで検索するといろいろ参考記事出てきます。

    私はSpringBoot使用しているため @RestControllerというアノテーションで一発ですが
    下記に実際の流れがわかるServeletでJackson使用したサンプルコードがありました。
    https://www.websec-room.com/2013/08/03/921

    キャンセル

関連した質問

  • 解決済

    JSPの値をgetParameterできない

    こんにちは、プログラミング初心者なのですが、 JSPとJAVAにおいてgetParameterで値を取得したいのですが、 取得できず困っています。 以下に関連のあると思われるソース

  • 解決済

    jspでコンボボックス表示をDBから

    jsp文で、コンボボックスをつくる際に、DBから情報をもってきたいのですがどうすればいいでしょうか?

  • 解決済

    JSPでサーバーの監視

    JSPで、毎朝、サーバーの状態を確認 jspで、サーバーの指定した書くフォルダの容量やファイル数、 サーバーのディスク使用率、 DBの全体使用容量、空き容量、 昨日のサクセス者数

  • 解決済

    DBから取得した生年月日からサーブレット側で年齢を計算したい

    java初心者です。 現在サーブレット&JSPの学習をしているのですが誕生日を計算してjspから表示させるやり方がわからず困ってます。 内容としてはDB内の情報テーブルにある「b

  • 受付中

    JSPで、request.getParameter で取得する値をクリアしたい

    初心者なので、変なご質問文や内容なのは、お許し下さいませ。 以下のように、再帰のJSPの場合、 request.getParameter("data_1) を取得後に、requ

  • 受付中

    HTMLファイルとJSPファイル

    HTMLファイルとJSPファイルに関して疑問がございますので、ご質問いたします。 よろしければ、ご回答いただければ幸いでございます。 1 HTMLファイルの出力の仕組みなの

  • 解決済

    JSPでDBの内容を表示したいけどエラー500

    JSP初心者です。 JSPを使ってDBの中のテーブルを表示する画面を作っています。 DBはMySQLを使っていて、データベース名"fire3"、テーブル名"god3" カラムは

  • 受付中

    jspで定義したプロパティをCSSに書き直したい

    現在WEBアプリ作成の課題を行っており、jspでの入力フォームなどを作っています。 基本的な部分は完成しているのですがjspで用意した画面項目のプロパティ(最大文字数やテキストボ

同じタグがついた質問を見る

  • JavaScript

    16991questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • JSP

    948questions

    JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

  • Vue.js

    763questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • servlet

    477questions

    Servletとは、Webページの動的な生成やデータ処理などをサーバ上で実行するために、Javaで作成されたプログラムです。 ショッピングサイトやオンラインバンキングといった、動的なウェブサイトの構築に用いられています。

  • Nuxt.js

    68questions