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

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

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

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

JavaScript

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

Q&A

1回答

165閲覧

共通している処理を1か所にまとめて綺麗にしたい。

yakiuri

総合スコア13

Vue.js

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

JavaScript

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

0グッド

1クリップ

投稿2019/02/19 00:57

現在vue.jsで要素を生成→古いimg(A)要素を消す→新しいimg(B)要素をフェードインという処理を書いたのですが、2つのmethodsで同じ処理を書いているので1か所にまとめてその都度値を代入して処理を呼び出す形にしたいと考えています。

app.js

1changeAimg: function(event) { 2 var select = event.target.getAttribute("value"); 3 var ALayer = document.getElementById('layer_0'); 4       //Bレイヤーの初期化 5 var BLayer = document.getElementById('layer_10'); 6 this.ShadowImage = ''; 7 this.selectItems[0].time = ''; 8 this.selectItems[0].direct = select; 9 // /*ファイル名組み立て*/ 10 var imageName = this.passStr + select +'.png'; 11 //新規画像作成 12 var newImage = new Image(); 13 newImage.style.userSelect = "none"; 14 newImage.style.position = "absolute"; 15 newImage.style.opacity = 0.0; 16 //読込完了 17 newImage.onload = function() { 18 //前の画像を全部削除 19 while( ALayer.firstChild ) { 20 ALayer.removeChild( ALayer.firstChild ); 21 }; 22 while( ALayer.firstChild ) { 23 ALayer.removeChild( BLayer.firstChild ); 24 }; 25 //画面追加 26 ALayer.appendChild( newImage ); 27 //フェードイン 28 newImage.animate( 29 { opacity : [ 0.0, 1.0 ] }, 30 { duration : 500, fill : "forwards", easing : "ease" } 31 ); 32 }; 33 newImage.src = imageName; 34 }, 35 changeBimg: function(event){ 36 var select = event.target.getAttribute("value");  37 var BLayer = document.getElementById('layer_10'); 38 this.selectItems = select; 39 /*時間文字列から:00を削除*/ 40 var replace = selectItems.replace(/:00/g, ''); 41 /*ファイル名組み立て*/ 42 var imageName = this.passStr + this.selectItems[0].eee +'/' + this.selectItems[0].ddd + '_T' + replace +'.png'; 43 var newImage = new Image(); 44 newImage.style.userSelect = "none"; 45 newImage.style.position = "absolute"; 46 newImage.style.opacity = 0.0; 47 //読込完了 48 newImage.onload = function() { 49 //前の画像を全部削除 50 while( BLayer.firstChild ) { 51 BLayer.removeChild( BLayer.firstChild ); 52 }; 53 //画面追加 54 BLayer.appendChild( newImage ); 55 //フェードイン 56 newImage.animate( 57 { opacity : [ 0.0, 1.0 ] }, 58 { duration : 500, fill : "forwards", easing : "ease" } 59 ); 60 }; 61 newImage.src = imageName; 62

わからないこと

・現在computedに共通する処理を書き込み、変数を渡す形を考えていたのですが、computedに値を渡す方法がわかりません。
・新しくmethodsを作ってそこに共通する処理を書き込んだ方が他のエンジニアから見た時にわかりやすいかなとも考えているのですがどちらがいいのでしょうか

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

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

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

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

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

miyabi-sun

2019/02/19 02:01

Vue要素がほとんど0なんですが…
yakiuri

2019/02/19 07:37

申し訳ありません vue.jsを始めたばかりでほとんど使い方が分かっておらず、今使用しているのがhtml側からmethodsを呼び出す、computedで自動で計算させて結果を出力させる、createdで初期値を入れる程度の知識しかありません 知識がある方たちのお目汚しをしてしまい失礼しました
guest

回答1

0

現状のコードであればcomputedに入れる意味がないのでmethodsに共通する処理を書く方がいいかと思います。

個人的には共通処理をまとめる前に処理の中身自体をvueの手法でよりスッキリ書くことが先かと思います。

投稿2019/02/19 02:23

yu-smc

総合スコア610

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

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

yakiuri

2019/02/19 07:39

回答ありがとうございます。 methodsにまとめて呼び出してみようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問