学習記録

学習したことをより深く理解するために、アウトプットする場所として利用しています。

別要素によるflexの高さを揃える

テキストによる、高さが変動する要素を2つ用意する。 下記のように、テキストが揃わない2つの要素がある場合、JavaScriptで計算して高さを揃える必要がある。

html

  <body>
    <div class="wrap">
      <ul class="list list-1">
        <li class="item-1">固定の要素</li>
        <li class="item-2">
          変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動
        </li>
        <li class="item-3">変動</li>
        <li class="item-4">固定の要素</li>
      </ul>
      <ul class="list list-2">
        <li class="item-1">固定の要素</li>
        <li class="item-2">
          変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動
        </li>
        <li class="item-3">
          変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動
        </li>
        <li class="item-4">固定の要素</li>
      </ul>
    </div>
  </body>

css

.wrap {
  display: flex;
}

.list {
  width: 200px;
  list-style: none;
  display: flex;
  flex-direction: column;
}

li {
  padding: 10px;
  border-bottom: 1px solid gray;
}

.item-1,
.item-4 {
  flex: 0;
}

.item-2 {
  flex: 1;
}

.item-3 {
  flex: 1;
}

変動する要素が1つの場合

ただし、変動する要素が1つの場合は、flex: 1; を指定することで高さを揃えることができる。

html（高さが変動する要素を1つに修正） html

  <body>
    <div class="wrap">
      <ul class="list list-1">
        <li class="item-1">固定の要素</li>
        <li class="item-2">
          変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動
        </li>
        <li class="item-4">固定の要素</li>
      </ul>
      <ul class="list list-2">
        <li class="item-1">固定の要素</li>
        <li class="item-2">
          変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動変動
        </li>
        <li class="item-4">固定の要素</li>
      </ul>
    </div>
  </body>

JavaScript から ::before, ::after のstyleを変更する方法

下記のように--dynamic-heightをキーとして、スタイルを変更することができる。

.sample::before {
  height: var(--dynamic-height, 0%);
}

const elem = document.querySelector('.elem');
elem.style.setProperty('--dynamic-height', 100 + '%');

gsapで有償にするか判断する基準（一部） 

You may use the code at no charge in commercial or non-commercial apps, web sites, games, components, and other software as long as end users are not charged a fee of any kind to use your product or gain access to any part of it.

If your client pays you a one-time fee to create the site/product, that's perfectly fine and qualifies under the "no charge" license. 

If end users are charged a usage/access/license fee, please sign up for a "Business Green" Club GreenSock membership which comes with a comprehensive commercial license. See https://greensock.com/club/ for details.

和訳

エンドユーザーがあなたの製品を使用したり、その一部にアクセスしたりするために、いかなる種類の料金も請求されない限り、商用または非商用のアプリ、ウェブサイト、ゲーム、コンポーネント、およびその他のソフトウェアでコードを無償で使用することができます。

クライアントがサイト/製品を作成するために1回限りの料金を支払う場合、それはまったく問題なく、「無料」ライセンスに該当します。

エンドユーザーが使用料/アクセス料/ライセンス料を請求される場合は、包括的な商用ライセンスが付属する "ビジネスグリーン "クラブグリーンソックメンバーシップにご登録ください。詳しくは https://greensock.com/club/ をご覧ください。

つまり、商用・非商用関係なく、無料で見れる部分かどうかで有償かどうか決まる。 greensock.com

JavaScript / new Map の使い方

一般的な動作は下記の通り

const map = new Map();

map.set("key_1", "value_1");
map.set("key_2", "value_2");
map.set("key_3", "value_3");

// 値の取得
const value_1 = map.get("key_1");
console.log(value_1); // value_1

// キーの存在チェック
const hasKey_2 = map.has("key_2");
console.log(hasKey_2); // true

// 特定のmapを削除
map.delete("key_1");
console.log(map); // Map(2) { 'key_2' => 'value_2', 'key_3' => 'value_3' }

// 全て削除
map.clear();
console.log(map); // Map(0) {}

// *************************************

// mapに対して処理を行ないたい場合
map.forEach((value, key) => {
  console.log(key, value);
});

// または

for (const [key, value] of map) {
  console.log(key, value);
}

value内の値を変えるには？

const map = new Map();
map.set("key_1", { object_1: "value_1", object_2: "value_2" });
console.log(map); // Map(1) { 'key_1' => { object_1: 'value_1', object_2: 'value_2' }}

const key3Value = map.get("key_1");
key3Value.object_1 = "edit";

console.log(map); // Map(1) { 'key_1' => { object_1: 'edit', object_2: 'value_2' }}