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

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

ただいまの
回答率

87.59%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 526

score 13

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

changeAimg: function(event) {
            var select = event.target.getAttribute("value");
            var ALayer =  document.getElementById('layer_0');
       //Bレイヤーの初期化
            var BLayer =  document.getElementById('layer_10');
            this.ShadowImage = '';
            this.selectItems[0].time  = ''; 
            this.selectItems[0].direct = select;
            // /*ファイル名組み立て*/
            var imageName =  this.passStr + select +'.png';
            //新規画像作成
            var newImage = new Image();
            newImage.style.userSelect = "none";
            newImage.style.position = "absolute";
            newImage.style.opacity = 0.0;
            //読込完了
            newImage.onload = function() {
                //前の画像を全部削除
                while( ALayer.firstChild ) {
                    ALayer.removeChild( ALayer.firstChild );
                };
                while( ALayer.firstChild ) {
                    ALayer.removeChild( BLayer.firstChild );
                };
                //画面追加
                ALayer.appendChild( newImage );
                //フェードイン
                newImage.animate(
                    { opacity : [ 0.0, 1.0 ] },
                    { duration : 500, fill : "forwards", easing : "ease" }
                );
            };
            newImage.src = imageName;
        },
 changeBimg: function(event){
            var select = event.target.getAttribute("value"); 
            var BLayer =  document.getElementById('layer_10');
            this.selectItems[0].ccc = select;
            /*時間文字列から:00を削除*/
            var replace = selectItems.replace(/:00/g, '');
            /*ファイル名組み立て*/
            var imageName =  this.passStr + this.selectItems[0].eee +'/' + this.selectItems[0].ddd + '_T' + replace +'.png';
            var newImage = new Image();
            newImage.style.userSelect = "none";
            newImage.style.position = "absolute";
            newImage.style.opacity = 0.0;
            //読込完了
            newImage.onload = function() {
                //前の画像を全部削除
                while( BLayer.firstChild ) {
                    BLayer.removeChild( BLayer.firstChild );
                };
                //画面追加
                BLayer.appendChild( newImage );
                //フェードイン
                newImage.animate(
                    { opacity : [ 0.0, 1.0 ] },
                    { duration : 500, fill : "forwards", easing : "ease" }
                );
            };
            newImage.src = imageName;

わからないこと

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • miyabi-sun

    2019/02/19 11:01

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

    キャンセル

  • yakiuri

    2019/02/19 16:37

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

    キャンセル

回答 1

0

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/19 16:39

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

    キャンセル

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

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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