【備忘】いまさらフロントエンド開発

タイトル通りです。普段バックエンドよりの開発をしているので、フロントは適当にやってきたのですが、基本的な部分は流石に学んだほうがいいなと思いました。

今まで勉強した記録を残したことがなかったので、備忘録的に書いていこうと思います。主に自分用です。

対象教材

【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）

動画教材です。20時間ありました。ガッツリ。

なるほどポイント　HTML編

インライン要素とブロック要素

インライン：横に配置 幅高さ指定できない ex. <span>
ブロック：縦に配置 幅高さ指定できる ex. <div>

ただし、インライン要素でもdisplayなどでblock指定すれば、ブロック要素のように振る舞える。逆も然り。

なるほどポイント　CSS編

セレクタの優先順位

詳細度が高い記述が優先される。
詳細度は絞ったセレクタの指定の仕方になればなるほど高くなる。

コードが複雑化するとどの記述が優先されているか分かりにくくなるので、Chromeのデベロッパーツール等で確認。

transitionプロパティ

アニメーションの速度を操作する。

ex. 2秒かけて全ての要素を変遷する

transition: all 2s;

要素は指定可能。要素ごとにカンマ区切りで別の挙動を設定することも可能。

ex. 3秒後に2秒かけて文字列を変遷する

transition: color 2s ease 3s;

遅延して変遷させることも可能。

Sass記述

cssでは扱えない、ネスティングや変数を扱える。
拡張子.scssで記述したものをコンパイルするとcssファイルが出力される（バリ便利）。
ソース変更する際は、scssファイルを編集するようにし、cssファイルは触らないようにする。

疑似要素

spanタグなどを使わずとも、::before ::afterの記述をすることで同じ内容が実現できる。
疑似要素は、contentを設定することで生成される。
同じHTMLに設定できるbefore,afterはそれぞれ一つずつまで。

アニメーション設定

アニメーション用のプロパティを使うことで、タイミング・秒数・回数・始点などを設定することができる。キーフレームを用いることで始点と終点の状態をcssで定義することができ、また%で途中経過状態を表現することもできる。

@keyframes sk-bouncedelay {
    0% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
    80% {
        transform: scale(0);
    }
    100% {
        transform: scale(0);
    }
}

Sassでは、mixinという関数に似た記法を取ることができ、アニメーション関連のプロパティの初期値などを容易に設定できるようになっている。

なるほどポイント　JavaScript編

変数定義

var, let, constが使える。
letは定義した変数を上書きすることができ、constは上書き不可能。
varは使わなくて良い。

ループ

for in
全要素の添字が渡ってくる。
for of
全要素の値が渡ってくる。

アロー関数

記述の簡略化ができる。

const arry = [1,2,3,4,5,6];
arry.forEach(value => console.log(value));

コールバック関数

引数に渡す関数のこと。

function doSomething(a, b, callback) {
    const result = callback(a, b);
    console.log(result);
}

function multiply(a, b) {
    return a * b;
}

function plus(a, b) {
    return a + b;
}

doSomething(2, 2, multiply);
doSomething(2, 3, plus);

reduce関数

配列の（左から右へ） 2 つの値に対して同時に関数を適用し、単一の値にする。元となる配列があって、それを累積して新しい単一の値を作りたいときに使用。（ex.配列の文字を全て足し合わせる,配列内の文字列を結合して一つにする）

同機能を記述したメソッド

function reduce(arry, callback, defaultValue) {
    let accu = defaultValue;

    for(let i = 0; i < arry.length; i++) {
        let curr = arry[i];
        accu = callback(accu, curr);
    }

    return accu;
}

DOM

HTMLをJavaScriptから操作できるようにしたインターフェース。
document.querySelector()をよく使う。getElementBy~系を使わなくて良くなった。
querySelector()は一致する最初の要素のみ出力し、document以外のオブジェクトにも適用できる。全要素を取得したい場合は、querySelector All()を使用しリストで取得。