デイトラ2期 DAY22,23 スムーススクロールとonclickで下線をひく【30DAYSトライアル2nd】

デイトラ30DAYSトライアルの感想・体験

こんにちは、タキ(@engineeraru)です。

デイトラ2期(#30DAYSトライアル2nd)「DAY22,23 スムーススクロールとonclickで下線をひく」について解説します。

デイトラ課題(DAY22&DAY23)

デイトラDAY22&DAY23の課題です。

DAY22もDAY23もそんなに語ることがないので、まとめて記事にしました。

 

【DAY22】スムーススクロールを作る

DAY22の課題1つ目は、「スムーススクロールを作る」というもの。

時間がない人は、ライブラリのsmooth-scroll.jsを真似するのもあり。

時間がある人は、jQueryの上級編を真似して作ると良いですね。

 

書いていて思いましたが、たいして補足することがないw

ってことで、私ならこういうことも見るよーっていうのをちょっと書きます(実際にこうやる必要はないです、使えるようになるのが大事)

 

ライブラリのsmooth-scroll.jsのソースコードを読んで、どうやってheaderの高さを得ているのかを追ってみました↓

ソースコード

 

こんな風にソースコードを見ていきます、という一例です。

まず、SmoothScrollを呼び出していて、引数に連想配列を渡しています。

なので、そこから追ってみると良いですね

367行目がコンストラクタですので、コレを呼び出してますね。

var SmoothScroll = function (selector, options) {

 

412行目でDocument.querySelector()でIDに合致する要素を取得しています。

fixedHeader = document.querySelector(_settings.header);

 

これを252行目のgetHeaderHeightというメソッドに渡しています。

中身は、こんな風に、heightとoffsetTopを取得しています。

こうやって調べるとelement.offsetTopというプロパティがあるんだなーということも勉強になります。

return !header ? 0 : (getHeight(header) + header.offsetTop);

 

ちなみにこんな風に静的に解析せずに、実際にソースコードを動かして、関数の呼び出し順などから確認するのもありです(多分javascirptもできるはず)↓

>JavaScriptのChromeのデバック方法まとめ

 

【DAY23】ページ内リンクでクリックした要素に対して下線を引く

「ページ内リンクでクリックした要素に対して下線を引く」ということで、Progateのjquery中級編で学んだ内容が使えます。

JavaScriptのaddClassとremoveClassを使うと何が良いか?

CSS内のクラス定義は一度で済むので、重複コードを避けられますよね。

要素ごとのhover時の変化をいちいちCSSで書くよりも、楽に書けます。

重複要素を減らして書いていくことは、

  • 書く時間が減る
  • 変更があった時に変更する箇所が減る(時間短縮&ミスしづらい)

というメリットがあります。

【DAY17】Progate「jQuery中級編」学習(モーダル、ホバー、アコーディオン)【#30DAYSトライアル2nd】

 

addClass/removeClassの引数としてクラス名を書きます。

クラス名の前に「ドット」を書かないことに注意!!

あとは「メニューが1つ増えた時に、変更量が少ない書き方ってどんな書き方か?」を意識して書いてみるのも大事ですね。

 

以上、デイトラDAY22&DAY23の解説でした。

今回も、語るところが無い…(灬╹ω╹灬)

多分ココまで来ていれば、ある程度自走出来る気がします(やりたいことをググって実現)。