デイトラ中級Day5~6 : jQuery実践編

今回はjQuery実践編ということで、デイトラから下された指令通りに実装していくカリキュラムでした。

※ちなみに、僕が超絶初学者だった頃「実装」という言葉がいまいちピンと来なかったので似たような境遇の方のために説明しておくと、「実装」とは【機能をつける】みたいな意味合いです。

デイトラから下された指令は3つ。
(今回に限ってはjQueryライブラリの使用は禁止で、自力で書くものとする)

①メニューバーにドロワーメニューを表示する
【条件】
・コース一覧をクリックすると
・初級・中級・上級のメニューを表示
・開閉時間の指定は不要

②ページトップへ戻るボタンをつける
【条件】
・トップから80pxスクロールしたら
・300ms（0.3秒）かけて
・フェードイン・フェードアウトで表示
・表示してる間はボタンはページ右下に固定
・ボタンを押したら500ms（0.5秒）かけてページトップへ戻る

③モーダルで画像の拡大表示
【条件】
・コース一覧の画像をクリックすると
・縦横画面いっぱいに薄いグレーの背景ボックスを表示
・その枠の中心に拡大されたコース写真を表示
・画面のどこかをクリックすると拡大写真と背景ボックスを非表示
・アニメーションはフェードイン・フェードアウト



それぞれ下記のコードでなんとか実装することができました。

①メニューバーにドロワーメニューを表示する
【条件】
・コース一覧をクリックすると
・初級・中級・上級のメニューを表示
・開閉時間の指定は不要

$(function () {
 $("#course-menu-button").on("click", function () {
   $("#course-menu").slideToggle();
   $("#course-menu").toggleClass("active");
 });
});

②ページトップへ戻るボタンをつける
【条件】
・トップから80pxスクロールしたら
・300ms（0.3秒）かけて
・フェードイン・フェードアウトで表示
・表示してる間はボタンはページ右下に固定
・ボタンを押したら500ms（0.5秒）かけてページトップへ戻る

$(function () {
 $("#page_top").hide();
 $(window).scroll(function () {
   if ($(window).scrollTop() > 80) {
     $("#page_top").fadeIn(300);
   } else {
     $("#page_top").fadeOut();
   }
 });
 $("#page_top").click(function () {
   $("body,html").animate({ scrollTop: 0 }, 500);
   return false;
 });
});

③モーダルで画像の拡大表示
【条件】
・コース一覧の画像をクリックすると
・縦横画面いっぱいに薄いグレーの背景ボックスを表示
・その枠の中心に拡大されたコース写真を表示
・画面のどこかをクリックすると拡大写真と背景ボックスを非表示
・アニメーションはフェードイン・フェードアウト

$('.course-item a').click(function () {
 var imgSrc = $(this).children().attr('src');
 $('.bigimg').children().attr('src', imgSrc);
 $('.modal').fadeIn();
 $('body,html').css('overflow-y', 'hidden');
 return false
});

$('.close-btn').click(function () {
 $('.modal').fadeOut();
 $('body,html').css('overflow-y', 'visible');
 return false
});

きのうjQueryの基礎にはいったばっかりだったので正直びびりました。笑


経験者目線だとこんなの簡単かもしれませんが、初心者目線だとクレイジーに見えちゃいますよね。



そして実際に取りかかってみた結果、エラーに悩まされながらも3時間半でできました！



デイトラは質問し放題の環境なので質問したら早かったのかもしれませんが、課題系は実際の案件だと思ってシビアに取り組んでいるので質問欲を我慢してググりながら自力でやり抜きました。



すぐに質問できない環境は確かに非効率かもしれませんが、個人的には質問できる環境にいるうちに逆にググる力を身につけておくのも有りだと思うんですよね。



だって将来独り立ちした時に「分からなかったら聞く」が習慣化していて、自分の力で解決する癖がついてない方がまずいと思いませんか？



なので僕は多少非効率だと分かっていても、質問は極力しないように心がけています。

※あくまでも個人的な見解なのでこれが正しいわけではありません




中級編に入ってから一気にレベルがあがった感じがするので引き続きインプットとアウトプットをしつつ勉強に励んでいきたいと思います。



それでは今日はこの辺で終わりにします。

ありがとうございました。

けけ丸