RACCOON TECH BLOG

株式会社ラクーンホールディングス 技術戦略部より、
tipsやノウハウなど技術的な話題を
発信いたします。

どこでつまずきやすい??デザイナーにjQueryを教える際の注意点

こんにちは!デザイン戦略部でフロントエンドエンジニアをしている田中です。

ここ最近デザイナーや新人さんからjQuery・jsの質問を受けたりヘルプで代わりに作成したりという業務がぽつぽつと出てきました。
直近であった失敗の反省も兼ね、jsを使う機会は少ないけど少しかじってる状態の人にjQueryを教えた時つまずきやすいと感じた点を私なりにまとめたいと思います!

失敗談

まず実際に社内で起こった失敗事例を紹介します。

null

とある案件で上の画像のような追従ボタンを実装するにあたって途中まで作ってみてやっぱりうまくできないということでヘルプが来ました。

元の状態が以下でした。

   $(function() {
        var showFlag = false;
        var bottomBtn = $('.fixed-button-wrap');
        bottomBtn.css('bottom','227px');

        $(window).scroll(function () {
            var scrollPosition = $(document).height() - $(window).height();
            var positionSet = scrollPosition - 2400

            if ($(this).scrollTop()>200 && $(this).scrollTop() < positionSet){
                if (showFlag == false) {
                    showFlag = true;
                    bottomBtn.stop().animate({'bottom' : '227'}, 500);
                }
            } else {
                if (showFlag) {
                    showFlag = false;
                    bottomBtn.stop().animate({'bottom' : '227px'}, 200);
                }
            }
        });
    });

そこで、jQueryで動かそうとするんじゃなく動的にはクラス名の書き換えくらいにしてcssで基本いじるというアプローチに変えたほうがいいヨ!というヒントを与えようと思い以下のように書き換えたものを必要なcssを添えてお返ししました。

jQuery(function($) {
    var bottomBtn = $('.fix-button-wrap');
    $(window).bind('load scroll resize',function () {
        var scrollPosition = $(window).scrollTop() + $(window).height();
        var footerTopH = $('.co-h100p-contents').offset().top + $('.co-h100p-contents').outerHeight() - 228;
        if(scrollPosition < footerTopH) {
            bottomBtn.addClass('fixed');
        } else {
            bottomBtn.removeClass('fixed');
        }
    });
});

このjQueryを渡すとき、以下のように添えました。
🐷「全然違うアプローチにしました!ザっと作ったので、元々作ってくれてたshowFragも入れてあげた方が処理は軽くなってベターだったりするかもしれないので、工夫して書き換えてお使いください。」

しかし!!お渡ししたjsで問題なく動くように見えるのでそのままでリリースをしてしまい、あとでフッターが可変高さだったのがわかり、表示崩れにつながってしまいました。。。

反省と対策

”あくまで大枠を作っただけで、このまま動くものではないよ”ということを強調するため、数値や文言などは適当に入れず★★で囲って日本語で表したりコメントアウトで説明文をたくさん入れたりすることで防げたかな?と思います。
また、調査をせずとも最初から要素の高さなどは可変の想定で作る癖をつけるというのも必要だなと、学びがありました。
今回のようなヘルプの際は途中から直してあげる、ということはせず案件事態を引き取るなどできれば間違いやテスト漏れは起きづらい(し、全て自分の責任にできる^^;)とも思いました。

その他つまずいてた事例と対策

失敗事例と同じようにとにかくjQueryで動かしたり表示を変えようとする

animateやdeley・fadeoutなどで見た目を実装しようとしてる。
⇒これは必要な場合ももちろんありますがデザイナーがいじる際はわかりやすいので基本class名を変えて、cssアニメーションで対応してもらう。

removeとhideの違い

showで出した要素をremoveで消してしまい、2度目の操作で要素が取得できず問い合わせが来たことが。
⇒こちらもcssでdisplay:noneにする方法なら問題は起きない。

まとめ

とにかくデザイナーによっても理解度がまちまちなので、こんくらいはわかるよね?という思い込みは捨ててコメントアウトめちゃめちゃつけるようにするのが吉かなと思います。
(”デザイナー”とひとくくりにしてしまいましたが、初学者に共通のひっかかりポイントになるかなと思います)

以上です!
私の数少ない経験がソースなので、今後も気づいた共通点などありましたらまた書いていきたいと思います。

関連記事

運営会社:株式会社ラクーンホールディングス(c)2000 RACCOON HOLDINGS, Inc