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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

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

JavaScript

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

Q&A

解決済

3回答

1286閲覧

vue: htmlとjsの完全(?)分離

MASANA899

総合スコア7

Vue.js

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

JavaScript

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

0グッド

0クリップ

投稿2019/01/25 04:28

前提・実現したいこと

vueを利用してSPAサイトを作成しています。
今回HTML+CSSの担当がvueなど一切わからないメンバーが多いため、完全にhtml部分を分離し、vueの要素を最小限にしたいと考えています。
最小限とは、変数{{}}や、if, forなどは使うということです。
なお、余談としては、<script>周辺を触れさせたくないというモチベーションもあります。

そこで、htmlとjs部分を完全分離する方法を教えていただきたく投稿します。
// vueを習得すべき!!という指摘はごもっともなのですが。

現在考えている形

以下が現状です。
<body onload="initial();">で読み込むなど無駄が多すぎるなと考えており、合否だけでも指摘いただけると嬉しいです。
Codepen

javascript

1function initial() { 2 new Vue({ 3 el: "#content", 4 data: { 5 message: "固有のメッセージが表示されます", 6 categories: [] 7 }, 8 created() { 9 this.categories = this.doGet(); 10 }, 11 methods: { 12 doGet: function() { 13 return [ 14 { 15 code:"T001", 16 name:"カテゴリ1", 17 articles: [ 18 { 19 code:"S011", 20 name:"記事11", 21 }, 22 { 23 code:"S012", 24 name:"記事12", 25 } 26 ] 27 }, 28 { 29 code:"T002", 30 name:"カテゴリ2", 31 articles: [ 32 { 33 code:"S021", 34 name:"記事21", 35 }, 36 { 37 code:"S022", 38 name:"記事22", 39 } 40 ] 41 }, 42 ]; 43 } 44 } 45 }); 46}

html

1<html> 2 3<head> 4 <title>VueTry</title> 5 <meta charset="UTF-8"> 6 <!-- ここにVueと固有のjs、CSSなどをIncludeする --> 7</head> 8 9<body onload="initial();"> 10 <h1>HTMLとjs(vue)を完全に切り離したい</h1> 11 <div id="content"> 12 <p>{{ message }}</p> 13 <ul> 14 <li v-for="category in categories"> 15 {{ category.code }}: {{ category.name }} 16 <ul> 17 <li v-for="article in category.articles"> 18 {{ article.code }}: {{ article.name }} 19 </li> 20 </ul> 21 </li> 22 </ul> 23 </div> 24</body> 25 26</html>

brower

1HTMLとjs(vue)を完全に切り離したい 2固有のメッセージが表示されます 3 4T001: カテゴリ1 5S011: 記事11 6S012: 記事12 7T002: カテゴリ2 8S021: 記事21 9S022: 記事22

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

<body onload="initial();">で読み込むなど無駄が多すぎるなと考えており、合否だけでも指摘いただけると嬉しいです。

別に属性1個なんで無駄と断じるにはちょっと弱いなぁと思います。
Vue扱うなら大抵起点のID属性なりが必要なんで別におまじないの1個や2個あっても良いと思います。

ただし、onloadを使うのは非推奨なのでaddEventListenerのloadイベントでも使うようにしたほうが良いと思います。

最小限とは、変数{{}}や、if, forなどは使うということです。

いや、データ型もわからんのにv-ifやv-forという機能を渡されて何するんだとしか思いません。
JSフレームワークはテンプレートを用意して、JS世界の値の変更を検知して、DOMが在るべき姿に瞬時に置き換わるという思想で構築されていますので、
データなくしてテンプレート組む事は出来ません。

その辺のサポートをどう頑張るつもりですか?
私には無駄なように思えますので、流石にそこまで任せるなら、もう一歩歩み寄ってもらうべきだと思います。

自分で勝手にJSファイルを開いてデータ型を確認し始めるような人間がもし居れば、
ちょっと教えるだけで「便利なものがあるんですね〜」と喜んで弄り始めることでしょう。
教えずそのまま腐らせるには惜しい人材です。

また今日日PugやSASS等のHTMLやCSSを高速に書くテンプレート言語があるので、
勉強して領域を広げる努力もしない、Webデザイナーとしても動けない中途半端なコーダーは要りません。
Webデザイナーとエンジニアの描くHTMLの品質は天と地程に違います。
片手間でゴミのようなHTMLやCSSを出されると非常に困りますので、最初からエンジニアに触らせた方がいくらかマシです。

なので、もし私ならデザイナーさんにはイラレの扱いに専念してもらい、
Pug、SASSなどのテンプレートエンジンをフル活用して、少数の人間で構築するようにチーム編成します。
メンバー余った?どうしましょうかね、ペアプロでもしながら教えるというのはどうでしょうか?

そこで、htmlとjs部分を完全分離する方法を教えていただきたく投稿します。

この辺はアーキテクチャー的な領分の話で、
スキルや思想が絡み十人十色な構築になります。

私も元のチームでjQueryから初めましたが、
リーダが優秀な方で1週間毎に+1良いモノを積み上げて覚えるというやり方で、
私やそのリーダの方が退職する頃、気がつけばそこらの会社に負けないイケてるアーキテクチャに育っていました。

私に構築させれば多少時間を掛けてそれなりな仕組みを作って見せますが、
やっぱり時間も掛かりますし、私のスキルに合わせる事になるので「お前はチームメンバー全員にハッカー級のスキルを求めるのかよ」ということで反発も大きくなるでしょう。
なのでチームにジョインして、空気か各メンバーのスキルに応じつつ拡張しやすい良い設計を構築するために腐心することになります。
一朝一夕では到底ムリです。(本音: お金ください)

まだプロジェクトが発足して日が浅いのであれば、
vue-cliあたりを使って雛形を改造するような所から初めてみてはいかがでしょうか?
それをカスタマイズしながら、少しずつ自分達のチームの砦を築き上げるというのは勉強にもなります。

是非チャレンジしてみてください。

投稿2019/01/25 05:30

編集2019/01/25 05:46
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

「完全に切り離したい」のであれば「最小限」などと人によって印象も意味合いもかわるやり方をするのではなく、それこそ全て静的htmlで対応すれば良いのではないでしょうか。
本当に一切わからない人は少しでもそれに類する情報があると拒否反応を示してしまうものです。

また、その「HTML+CSSの担当」を含めた役割分担と責任範囲がわからないと、これ以上は回答しようがないと思います。
それによっては「レイアウト、モックだけつくってもらい、Vueできるメンバーが置き換える」というのもなくはないですが。

投稿2019/01/25 04:53

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

逆にデザイナーさんにテンプレを用意してもらってjsで部品として
利用する流れだと思うので、インタラクティブな部分も動作前後の
状態を指定しきちんと仕様を伝えて組んでもらってください
あとはscriptタグで呼び出せばよいでしょう

投稿2019/01/25 04:49

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問