このブログのコンセプトって○○なん、知ってた? 何それ気になる〜

【コーディング週間日報】7/4(日)〜 7/10(土)の学習

たーやま

7/4(日)〜 7/10(土)の週に行ったことを記載しました。

目次

7/6(火)のアウトプット

Map と Set

Map

データを管理するための入れ物のことで、コレクションと呼ばれることもあります。

Map は Object と同じようなイメージですが、異なる点もあります。

・Map:キーに制約がない。for…in のループができず、for…of はできる。
・Object:キーは文字列のみ。for…in のループができるが、for…of はできない。

パフォーマンスにも性能差があり、記述量が多い場合は Map の方が良いとされています。

const map = new Map();
const key1 = {};

map.set(key1, 'value1');
console.log(map.get(key1)); // value1

const key2 = function () { }

map.set(key2, 'value2');
map.delete(key2);
console.log(map.get(key2)); // Undefined

let key3 = 0;

map.set(key3, 'value3');
console.log(map.get(key3));

for (const m of map) {
    console.log(m); // value3
}

key1 にはオブジェクト、key2 には関数、key3 には数値をキーにしています。

key2 だけ delete を使っているので Undefined が出力されていますが、他は value1 と value3 が出力されています。

さて Map の構造についてですが、[[ Entries ]] 内にキーと値を持っています

が、オブジェクトのように自分のプロパティに持っているわけではありません。[[ Entries ]] というところで格納しています。

たーやま

オブジェクトとは値の管理方法が違うわけやな。

Set

今度は Array と Set の違いについてみていきます。

・Set:重複値を持てず、for…in ができません。for…of はできます。
・Array:重複値は持てますし、for…in も for…of もできます。

const map = new Map();
const key1 = {};

map.set(key1, 'value1');
console.log(map.get(key1)); // value1

let key3 = 0;

map.set(key3, 'value3');
console.log(map.get(key3));

for (const m of map) {
    console.log(m); // value3
}

const s = new Set();
s.add(key1);
s.add(key3);

for (let k of s) {
    console.log(k); // {}, 0
}

s に Set をインスタンス化し、add メソッドで値をセットしました。実行すると map の時に使った key1 と key3 が表示されます。

たーやま

ちなみに set は、値が同じやと1つしか表示されません。

7/7(水)のアウトプット

イテレーター

反復操作を行う際に使用するオブジェクトのことです。

イテレーターは必ず next メソッドを保持し、next メソッドは return 値としてオブジェクトを返却する必要があります。

そして、done と value というプロパティを返します。

function genIterator() {
    let i = 0;

    return {
        next: function () {
            return {
                done: false,
                value: i++
            }
        }
    }
} 

const iterator = genIterator();
console.log(iterator.next()); // {done: false, value:0}

done を false にすると、ループが継続するという意味になります。i++ によって、next メソッドが呼ばれるたびに1ずつ増えていく i が定義されます。

function genIterator(max) {
    let i = 0;

    return {
        next: function () {
            if (i >= max) {
                return {
                    done: true
                }
            } else {
                return {
                    done: false,
                    value: i++
                }
            }
        }
    }
} 

const iterator = genIterator(10);
let a = iterator.next();

while (!a.done) {
    console.log(a.value);
    a = iterator.next();
} // 1 ~ 10 が出力される

引数 max をいれて、10 までの値を取れるようにしました。done が true のときは、value は設定する必要はありません。

!a.done にすることによって、done が false の場合に true の値を返すため、ループが継続します。

7/8(木)アウトプット

Google タグマネージャーと、仕事で罠にはまったものがあったのでまとめておきます。

Google タグマネージャー

様々なタグを一括管理できるツールのこと。google アナリティクス、Google 広告、SNS を動作させるのに必要なタグなどを全て管理できます。

タグマネージャーを導入することで得られるメリットは以下の通りです。

・タグ管理が簡単になる
・ページの表示速度が速くなる

それぞれ見ていきましょう。

タグ管理が簡単になる

タグマネージャーから全ページにあるタグの確認や変更などができるようになります。

ページの表示速度が速くなる

通常のHTMLタグに埋め込む場合に比べて、表示速度が上がります。Googleタグマネージャーを経由したタグが「非同期タグ」になるためです。

たーやま

いちいち全部読み込んでたけど、読み込みが1つになるから速なるんやな。

しかし、タグマネージャーへのデメリットもあります。それは…

・既存サイトへの導入が手間
・全てのタグには対応していない
・システム障害が起きたら終わり

ということでこれらも見ていきます。

既存サイトへの導入が手間

全てのHTMLのページにタグを設置していて、新しくタグマネージャーを設置したいとします。

となると、前に設置していたタグを全部外して、再設定しなければなりません。利用しているタグやサイトが多いほど、作業が面倒です。

全てのタグには対応していない

同期処理が必要なタグ(Google アナリティクスのウェブテスト機能など)や、ページ構造にかかわるタグなどには対応していません。

これらが必要なときは、大人しく設置していく必要があります。

システム障害が起きたら終わり

タグマネージャーである程度管理ができる分、タグマネージャーに何らかの障害が出てきたら全て終わりです。

まぁ、分散させていてもリスクあるけど…(笑)

とりあえずGoogleタグマネージャーについての理解をざっくり深めました。次のアウトプットでは、実践をする予定です。

たーやま

いっつも JavaScript やし、たまにはこういうのもよきよね。

justify-content: space-between; の罠

たーやま

Sさん、justify-content: space-between; って、左右に分かれて余白できますよね?

はい、何かあったんですか?

ある医療系サイトの見た目を調整しているときに事は起こりました。

display: flex; と justify-content: space-between; を指定し、子要素を両サイドにしようと思ったのにうまく配置ができません。

flexbox についての指定方法が間違えているとか、そんなこともなさそう…。

少し考えたのちに…

あ、これですね。

とSさん。どうやら、疑似要素が邪魔をしていたみたいです。

flexbox の前後に疑似要素があった場合、疑似要素分の余白が生じます。その余白が邪魔をして、space-between が効きませんでした。

たーやま

疑似要素と flexbox を使うときは、気つけんとあかんな。

今回参考にした記事も載せておきます。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

この記事を書いた人

大阪出身26歳。宮古島の制作会社に勤めています。
コーディングとデザインにシバかれてます。

生き物や自然が好きやけど、特にクワガタムシが好き。
他、チャリとか釣りとか筋トレとかも好き。

目次
閉じる