どこでつまずきやすい？？デザイナーに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で問題なく動くように見えるのでそのままでリリースをしてしまい、あとでフッターが可変高さだったのがわかり、表示崩れにつながってしまいました。。。

反省と対策

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