【java script】グリッド状に要素を自動生成する

先日GSAPの公式サイトを見ていたら、デモでグリッド状に要素を自動生成するjava scriptが使用されていました。生成される要素の幅が、ウィンドウ幅に合わせて可変するタイプではなかったのですが、可変した方が便利だよね、ということで自分で作成してみました。

備忘録を兼ねて記事にします。

グリッド状に要素を自動生成する
まとめ

グリッド状に要素を自動生成する

See the Pen stagger-01 by Michi (@Michi_) on CodePen.

コードはこちら。

var grid = [5, 15];

function buildGrid(vars) {
  vars = vars || {};
  var container = document.createElement("div"),
    rows = vars.grid[0] || 5,
    cols = vars.grid[1] || 5,
    width = vars.width || "100%",
    gutter = vars.gutter || 1,
    className = vars.className || "",
    parent = (typeof vars.parent === "string") ? document.querySelector(vars.parent) : vars.parent || document.body,
    l = rows * cols,
    i, box;

  // グリッドコンテナのスタイル設定
  container.setAttribute("style", `
    display: grid;
    grid-template-columns: repeat(${cols}, 1fr);
    gap: ${gutter}px;
    width: ${width};
    margin: 0 auto;
  `);

  // グリッドボックスを作成
  for (i = 0; i < l; i++) {
    box = document.createElement("div");
    box.style.cssText = `
      background-color: #B2D3A5;
      aspect-ratio: 1 / 1; /* 正方形に保つ */
    `;
    box.setAttribute("class", className);
    box.index = i;
    box.setAttribute("data-index", i);
    container.appendChild(box);
  }

  // 親要素にグリッドコンテナを追加
  parent.appendChild(container);
  return container;
}

// グリッドを#container内に構築
buildGrid({grid: grid, className: "box", gutter: 3, parent: "#container"});

まずざっくりと説明すると、このコードでは、指定した行と列数でグリッドを作成することができます。各ボックスは、横並びに正方形で並び、指定した数だけグリッド状に配置されます。

コードを確認していきましょう。

var grid = [5, 15];

グリッドに行数と列数を指定します。この場合、5行、15列のグリッドを作成します。

function buildGrid(vars) {

関数を定義します。ここではbuildGridと名前をつけました。

  vars = vars || {};

varsは、この関数に渡されるオブジェクトです。もしvarsという変数が空だったら、varsに空のオブジェクト {} を入れます。

  var container = document.createElement("div"),
    rows = vars.grid[0] || 5,
    cols = vars.grid[1] || 5,
    width = vars.width || "100%",
    gutter = vars.gutter || 1,
    className = vars.className || "",
    parent = (typeof vars.parent === "string") ? document.querySelector(vars.parent) : vars.parent || document.body,
    l = rows * cols,
    i, box;

生成するグリッド全体を入れる要素（div）を作成します。

rowsとcolsで行数と列数を設定しています。vars.gridが渡されない場合、デフォルトは5行×5列になります。

widthは、containerの幅です。デフォルトでは100%（親要素の幅いっぱい）です。

gutterは、ボックス同士の間隔（マージン）です。デフォルトでは1pxです。

classNameは、ボックスに追加するクラス名です。

parentは、このグリッドを表示する場所（親要素）です。文字列で親要素を指定する場合、querySelectorで取得します。何も指定されていなければ、ページの本体（document.body）に置かれます。

lは、グリッドに配置するボックスの総数です（行×列）。

  container.setAttribute("style", `
    display: grid;
    grid-template-columns: repeat(${cols}, 1fr);
    gap: ${gutter}px;
    width: ${width};
    margin: 0 auto;
  `);

上記で生成したボックスにcssのスタイルを追加します。

  for (i = 0; i < l; i++) {
    box = document.createElement("div");
    box.style.cssText = `
      background-color: #B2D3A5;
      aspect-ratio: 1 / 1; /* 正方形に保つ */
    `;
    box.setAttribute("class", className);
    container.appendChild(box);
  }

forループを使って、グリッドを生成します。

lは前に定義された変数で、rows * cols（行数×列数）の値が入っているので、ボックスの総数だけループが実行されます。

  parent.appendChild(container);
  return container;
}

ここで、作成したcontainer（グリッド全体）をparent（指定した親要素）に追加し、画面上に表示します。

buildGrid({grid: grid, className: "box", gutter: 1, parent: "#container"});

最後にグリッドを作成する関数を実行します。

className: ""でボックスにつけるクラス名を指定します。gutter: でボックス同士の間隔を指定し、parent: ""でグリッドを配置する親となる要素を指定します。

まとめ

単にグリッド状に要素を生成するだけのコードですが、どなたかの参考になれば幸いです。