エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

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

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

デイトラ課題

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

 

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

 

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

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

 

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

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

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

 

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

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

github.com

 

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

まず、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もできるはず)↓

qiita.com

 

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

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

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

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

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

 

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

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

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

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

 

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

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

 

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

 

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

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

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

 

他の日の記事はこちらにまとめています↓

www.engineer-step.com