初Udemy!!「(JavaScript&CSS)ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)」をガチでレビュー 後編

code
2021.05.07

Sec6 JavaScript基礎

“52”で基本的な書き方、“53”で関数とは、についてです。Progateなど学習した方は「説明されなくてもわかってるよ」かもしれませんが、もう一度見ておきましょう。複雑な関数も結局はこの形に集約するのであって、引数や戻り値の“矢印の向き”を理解しておきましょう。”55”先頭に追加がunshiftで、最後を削除がpop、先頭を削除がshift、とかイメージしづらいですよね(笑)最後に追加がpushはまだいいけどね。先頭を操作するのはshift系、最後を操作するのはp系

“56”恐怖のthisが出ます…「宣言したオブジェクトのこと」と読むという解説…ここではまだ出てきていないですが「このクラスの～」と読むと勝手に思っていたけどマズかったですかね…

“58”for inとfor of、こんなのもあるんですね。

const arry = [1, 2, 3, 4, 5, 6];
for (let i = 0; i < arry.length; i++) {
    console.log(i);
}

があったとして

for (let i  in  array) {
    console.log(i);
}

で0,1,2,3,4,5と添え字indexが出力され

for (let i  of  array) {
    console.log(i);
}

で1,2,3,4,5,6と値が出力される

このあとちょっとだけ使いますが、その後は最後まで登場しません。便利そうだけどあまり大事じゃない？”61”でアロー関数、いよいよ本番というカンジです。ここからドッと難しくなります。「引数が１つで()省略、実行文1行なので{}省略できる」省略記法に関してはこのあとのレッスンでもあまり使いません。”62”「引数に渡す関数をコールバック関数と呼ぶ」怪しくなってきましたね…「()をつけると関数を実行を意味する」「()無しのgetNameは関数そのものを意味する」ここも大事ですね。「～～の引数が渡ってくる、渡してあげる」という表現は良くないかな、「これがここに来ます!!いいですか、これがここです。そしてこの値を受け取ったこの関数が実行されます」とカーソルで(何度も書きますが)”矢印の向き”を示してあげることが重要。

“65”reduceメソッド 積み上げというニュアンスの操作をしますが、reduce自体は「減らす」という意味です。“配列を減らしていく”とも取れますね。このレッスンは文字では無理ですね(笑)ポイントは第2引数ですか、

const result = strArry.reduce((accu, curr) =>  {
    return  accu  +  ‘<’  +  curr  +  ‘>’ ;
})

では最初のループが「a<n>」になってしまい次は「a<n><i>」とこれが続いてしまうということです。第2引数に空文字「’’」を入れることで

const result = strArry.reduce((accu, curr) =>  {
    return  accu  +  ‘<’  +  curr  +  ‘>’ ;
},  ‘’)

最初のループが「’’<a>」になるイメージです。ちなみにテンプレートリテラルを使うと実行文はreturn `${accu}<${curr}>`;と書けるそうです。わかりにくい…

“67”で「querySelectorが主流、getElementByIdは古い書き方」と言われ少しショック…ドットインストールではgetElementByIdばかりだったので(笑)まぁTagNameとかClassNameとか使い分けるの面倒くさいですからね。”68”EventListenerの設定でも「thisはclickされた要素」と解説があるのでthisを「このclassの～」とだけ読むのはやはり間違いです。クラスの中ではそれでもいいのかもしれないけど、本質の理解ではないということでしょう。”70”ここも慣れないテンプレートリテラルが出たので

`<span class=”char”>${c}</span>`

‘<span class=”char”> + c + </span>’

の2つは同じものを表しています。「変数が文字列の一部として扱われる時にテンプレートリテラル」なるほどね。

“71”「クラスとは」の最初のレッスンのはずなのに難しすぎないか？“矢印の向き”の解説は無いのでそんなときは時間は掛かりますがconsole.log()で1行ずつ調べてみてもいいかと思います。console.log(this.chars)であったり特にthisが付いたものは細かくチェックしてみることをオススメします。「プライベートメソッドはそのクラスの中だけで、パブリックメソッドはクラスの外でも可」PHPはprivateとかpublicとか付けるんでしたっけ？言語の違いに対応するのも大変ですよね。”72”でbind() 先ほども出ましたが「thisはclickされた要素」なのであって、ここではanimateメソッドのthisは.animate-titleではなく#btnになってしまうのでした。なのでta.animate.bind(ta)になります。

btn.addEventListener(‘click’, function() {
   ta.animate();
});

のほうがわかりやすいですけどね。

“73”からおさらい「クラスでオブジェクトを初期化」”74”「thisはオブジェクトを参照するキーワード」クラスをnewで初期化したタイミングでオブジェクトが作られる、これまで僕がイメージしていたthis=「このclassの～」はやはり正確ではなかったわけです。”76”ta.animate();は「オブジェクトのメソッド」 EventListenerの中でコールバック関数としてのta.animateは「関数」で呼ばれるため、taは無視され直近のEventListenerが付いたbtnをオブジェクトとして見てしまうのでbindが必要になる。

Sec7 JavaScriptより実践

“80”InterSecting 少し勘違いしてました。entriesをforEachでentryとしていることはイメージできていましたが、「entryとentry.targetは同じじゃないの？」と思ってました。forEachでループを回したものがentryでその“それぞれ”にとってtargetですね。

“81”TextAnimationと絡めて document.querySelector(el)では「最初に見つかった要素を取るため」7:35の時点ではnew TextAnimation(‘.animate-title’)なので最初の.animate-titleを何度も取ってきてしまう、ということなんですね。なのでnew TextAnimation(entry.target)になりますね。ただ「DOMの場合はthis.DOM.el = elでDOMじゃない場合はthis.DOM.el =　document.querySelector(el)」DOMじゃない場合って何でしょうか？Selectorの文字列？まだ「const els = ~~」のようにDOMになってない？もののこと？

“82”ここで脱落するかと思うくらい難しいです。クラスを2つ行き来していますが、const ta = new TextAnimation(el);は前回までの文字が“グネン”となるものです。このレッスンのスクロール感知とは切り離して考えましょう。 constructorの中でthis._init();がありますがここで_init()を動かしてるんですね、「作ったはいいけどどっかで使った？」って思ってました。cbっていう名前もよくないかも、「要素をとらえてアニメイトする関数」ってことだからgetAnimateとか名前である程度「これはあの機能か」が想定出来て、それをthis.cb = getAnimate;とか代入するには1ページ内でもわかりやすいはず。と思いましたが(笑)”83”からはcover-slideを左から表示させる処理を同じScrollObserverクラスを使うので…cbで正解でしたね、getAnimateじゃおかしいですから。el.classList.add(‘inview’)だけで「要素をスクロール感知したら.inviewを付けてね」が簡単に実装できます。

“84”モバイルメニュー 簡単とは言わないですけど、最大のヤマは越えたかなという印象ではないでしょうか。window.ontouchstartがスマホにはあるんですね、そこまで考えてプロは仕事しているということです。”85”BEM .mobile-menu{}の中に&__mainと書くことで.mobile-menu__mainクラスを表すことをBEMと呼ぶ。3Dアニメーション時に使うtransform-style: preserve-3d;とperspective: ○○px;も久しぶりの登場です。”86”薄い黒幕にopacity: 0;とvisibility: hidden;を併用しますが、「opacity: 0;は”見えない”がそこにある」”87”ローダー これはコピペ作業です。「ふ～ん」と一緒に書いてみましょう。

“88”ライブラリswiper jsの導入ですが動画と公式ではCDNが異なるので注意、

レッスンの動画では

<link rel=”stylesheet” href=”https://unpkg.com/swiper/css/swiper.min.css” />

現在の公式ページでは(2021.4/27時点)

<link rel=”stylesheet” href=”https://unpkg.com/swiper/swiper-bundle.min.css” />

実際にレッスン動画にあるCDNではスライダーは動きませんでした。

“91”autoaplyのstart()の時にthis.swiper.params.autoplayとparamsがこの講座でこの1回だけかな？Progateのrubyでparams.idとか出てきましたよね。よく覚えてませんが…

Sec8-9 Webサイト制作

ここから実際に1ページの動きのある完成品を作りますが、基本はこれまでのレッスンで見てきたものの貼り付け作業ですので、サッといけると思います。理解している前提でパーツを使用しますので、改めての解説はありません。それよりも多くなる記述のまとめ方や保守性を意識したコーディング術を学ぶスクションになります。1ページの量とは思えない程styles/breakpointsファイルやjsファイルを多く扱うので、読み込みの記述を間違えないように気を付けてください。ファイルの中身の記述が合っているのに読み込みが出来ていない、なんてこともあります。

“95”「PC版の方が複雑な作りであることが多いので、そちらを基準にするとスマホ版でそれらを打ち消す記述が多くなる。よって比較的シンプルなモバイルファーストをオススメ」これまでデイトラなどでもPC版から作るのが当たり前だったので、これは印象的でした。そして”96”では画面幅breakpointsに応じてのファイルの読み込みですが、もっと大規模なサイトを作る際にはこうした書き方が有効になってくるのでしょう。

@media (min-width: 600px) {
  @import 'breakpoints/600up';
}

これをいくつも書いていきます。”98”reset.cssはブラウザの初期設定プロパティを打ち消す、normalize.cssはブラウザごとの差異をならす・統一する。

”99”WebFontのcssファイル読み込みはfont-family: 英字フォント, 日本語フォント, sans-serif;のように英語を先に持ってくる、日本語を先だと文字数の多い日本語を探してから英語を探すため時間が掛かる、へぇ～。“100”統一感 .font-mdとか.mb-smとか作るならBootstrap使えばいいのに。.content-widthも.containerのことでいいはず、widht: 90%;とmargin: 0 auto;とmax-widthか。

イメージしずらいのは“104”のflexでサイズ指定 flex: grow shrink basis;の使い方もできると便利です。base.scssでflex-direction: column;で基本は“縦”にしておいて600up.scssでflex-direction: row;にし“横”に上書き、display: flex;はbaseの.houses__innerを引き継いでいるので。”105”では.popular__containerにjustify-content: space-between;で.popular__itemにflex-basis: 47%; 親と子での役割の違いですね。@include p-baseを少し説明しますが、なんだかよくわからないですね、$top: 10%, $height: 90%, ”106”「画像はobject-fitを付けないと縦横のアスペクト比が保たれる」ので親要素いっぱいに広がってくれない。“107”z-indexで画像内側に影 ローカルコンテキストが久しぶりの登場、どれとどれを比較しているかが重要です。p-baseの便利さがあまりわからないですね…

“109”親の影響を受けるemとhtml(何も指定なしで16px)の影響を受けるのがrem

“110”ヘッダー　.headerのheight: 100px;とヘッダー分の余白#contentのpadding-top: 100px;を「これは常に同じ高さなので」$navHeight: 100px;として変数に。こういう考え方こそ保守性ですね。text-transform: uppercase;で小文字を大文字に、参考までにってカンジですかね。”112”今更ですがリンク下線無しはaに対してtext-decoration: none;なんですね、a:hoverのような気もしますが。

“115”から再びclass 張り付けてバラバラな関数をまとめます。Mainクラスを作りconstructor()にthis._observers = [];と空の配列を用意しインスタンス化されたオブジェクトをpushで配列に１つずつ入れていく。難しい…と思ったら”116”でそのobserversもメソッドにします。

set observers(val) {
  this._observers.push(val);
}
get observers() {
  return this._observers;
}

setとgetを定義しましたが、このまま使うわけではなく

this.observers = new ScrollObserver(‘.nav-trigger’, this._navAnimation)

のように代入文が続くとsetがよばれ

console.log(this.observers);

のように代入文が続かないとgetでreturnされてconsoleで確認できることになります。

”117”appearを使いますが、これはデイトラで使ったWOWみたいなものでしょうか？WOWの方が色んな複雑なアニメーションできたけどね。下からフワッと表示させたいなら表示させる要素の親にclass=”appaer up”、子にclass=”item”のという要領で付けるだけです。これで完成！

Sec10 作ったサイトを公開

レンタルサーバーをお持ちの方はそちらでもいいかもしれませんが、このレッスンではGitHubにアップしてnetlifyのサーバーに連携させる方法です。公開方法は動画にある通りですが、Sec9の最後でtextAnimationにrootMarginを付けた時に{once: false}をつけたままアップしてしまって、下に行ってから上に戻ってくるとtextAnimationが正しく表示されなくなっていました。そこでGitHubの直しが必要になったわけです。

とツイートもしたので貼っておきます。netlifyの方もページを“更新”しただけで反映されていて表示ページも正しく動いていました。

まとめ

Sec11で一言もらい修了です。長い…お疲れさまでした。こうやって1周目は普通に学んでみて2周目はレビュー記事を書く目的も兼ねて復習することにしましたが、記事にもできて復習にもなってなかなかいい試みでした。1回最後までやったからこそ2周目で「これが後で使ったアレだったか」もわかり理解に繋がりました。

初Udemyでしたが「ガチ、フロントエンド」セール価格で1,380円!!ボリュームといい内容といい、満足です!!買うか買わないかを悩んでここまで読んだ方もいないかと思いますが(笑)よかったら是非。

スポンサーリンク

コメント

タイトルとURLをコピーしました