ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|---|
|
JavaScript
方法 1: Array.from + slice
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const chunkSize = 3;
const chunked = Array.from(
{ length: Math.ceil(arr.length / chunkSize) },
(_, i) => arr.slice(i * chunkSize, (i + 1) * chunkSize)
);
// → [[1,2,3], [4,5,6], [7,8,9], [10]]
方法 2: reduce
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const chunkSize = 3;
const chunked = arr.reduce((acc, val, i) => {
const groupIndex = Math.floor(i / chunkSize);
if (!acc[groupIndex]) acc[groupIndex] = [];
acc[groupIndex].push(val);
return acc;
}, []);
// → [[1,2,3], [4,5,6], [7,8,9], [10]]
方法 3: while ループ
function chunk(arr, size) {
const result = [];
for (let i = 0; i < arr.length; i += size) {
result.push(arr.slice(i, i + size));
}
return result;
}
chunk([1,2,3,4,5,6,7,8,9,10], 3);
方法 4: lodash
import _ from "lodash";
_.chunk([1,2,3,4,5,6,7,8,9,10], 3);
// → [[1,2,3], [4,5,6], [7,8,9], [10]]
PHP
// array_chunk が標準で用意されている
$arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
$chunked = array_chunk($arr, 3);
// → [[1,2,3], [4,5,6], [7,8,9], [10]]
// キーを保持
$assoc = ['a' => 1, 'b' => 2, 'c' => 3, 'd' => 4];
$chunked = array_chunk($assoc, 2, true);
// → [["a"=>1, "b"=>2], ["c"=>3, "d"=>4]]
// 連想配列にも対応
$users = [
['name' => 'Alice'],
['name' => 'Bob'],
['name' => 'Carol'],
['name' => 'Dave'],
];
$pages = array_chunk($users, 2);
// → [[Alice, Bob], [Carol, Dave]]
Python
# リスト内包表記
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
n = 3
chunked = [arr[i:i+n] for i in range(0, len(arr), n)]
# → [[1,2,3], [4,5,6], [7,8,9], [10]]
# itertools (より高機能)
from itertools import islice
def chunked(iterable, n):
it = iter(iterable)
while batch := list(islice(it, n)):
yield batch
list(chunked([1,2,3,4,5,6,7,8,9,10], 3))
# more_itertools (3rd party)
from more_itertools import chunked
list(chunked([1,2,3,4,5,6,7,8,9,10], 3))
# numpy (行列として)
import numpy as np
arr = np.arange(1, 13)
matrix = arr.reshape(3, 4)
# → [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]]
Java
// Java 8+ Stream
import java.util.*;
import java.util.stream.*;
List list = Arrays.asList(1,2,3,4,5,6,7,8,9,10);
int chunkSize = 3;
List> chunked = IntStream.range(0, (list.size() + chunkSize - 1) / chunkSize)
.mapToObj(i -> list.subList(i * chunkSize, Math.min((i+1) * chunkSize, list.size())))
.collect(Collectors.toList());
// Guava
import com.google.common.collect.Lists;
List> chunked = Lists.partition(list, 3);
// Apache Commons Collections 4
import org.apache.commons.collections4.ListUtils;
List> chunked = ListUtils.partition(list, 3);
逆変換(多次元 → 1 次元)
JavaScript
const nested = [[1,2,3], [4,5,6], [7,8,9]];
// flat()
const flat = nested.flat();
// → [1,2,3,4,5,6,7,8,9]
// 深いネストも
const deep = [[1, [2, 3]], [4, [5, 6]]];
deep.flat(Infinity);
// → [1, 2, 3, 4, 5, 6]
// 古い書き方
[].concat(...nested);
nested.reduce((a, b) => a.concat(b), []);
PHP
$nested = [[1,2,3], [4,5,6], [7,8,9]];
// array_merge
$flat = array_merge(...$nested);
// → [1,2,3,4,5,6,7,8,9]
// 深いネストは再帰
function flatten($arr) {
$result = [];
array_walk_recursive($arr, function($v) use (&$result) {
$result[] = $v;
});
return $result;
}
Python
nested = [[1,2,3], [4,5,6], [7,8,9]]
# リスト内包
flat = [x for sub in nested for x in sub]
# itertools.chain
from itertools import chain
flat = list(chain.from_iterable(nested))
# numpy
import numpy as np
flat = np.array(nested).flatten()
応用: 表形式データの変換
1 次元 → 表(行 x 列)に分割
// 商品リストを 3 列のグリッド表示用に
const products = [
{id: 1, name: 'A'}, {id: 2, name: 'B'},
{id: 3, name: 'C'}, {id: 4, name: 'D'},
{id: 5, name: 'E'}, {id: 6, name: 'F'},
{id: 7, name: 'G'}
];
const rows = Array.from(
{ length: Math.ceil(products.length / 3) },
(_, i) => products.slice(i * 3, (i + 1) * 3)
);
// HTML 出力
rows.map(row => `
${row.map(p => `${p.name}`).join("")}
`).join("");
ページネーション風に分割
// 1000 件のデータを 1 ページ 20 件で分割
const allItems = [...]; // 1000 件
const pageSize = 20;
function getPage(items, pageNumber, pageSize) {
const start = (pageNumber - 1) * pageSize;
return items.slice(start, start + pageSize);
}
const page1 = getPage(allItems, 1, 20); // 0-19
const page2 = getPage(allItems, 2, 20); // 20-39
// PHP の array_chunk と equivalent
const allPages = Array.from(
{ length: Math.ceil(allItems.length / pageSize) },
(_, i) => allItems.slice(i * pageSize, (i + 1) * pageSize)
);
2 次元 → 3 次元(行列の分割)
// 行列を 2 x 2 のサブ行列に分割
const matrix = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
[13, 14, 15, 16]
];
const subSize = 2;
const subMatrices = [];
for (let i = 0; i < matrix.length; i += subSize) {
for (let j = 0; j < matrix[i].length; j += subSize) {
const sub = matrix.slice(i, i + subSize).map(row => row.slice(j, j + subSize));
subMatrices.push(sub);
}
}
// → [
// [[1,2],[5,6]], [[3,4],[7,8]],
// [[9,10],[13,14]], [[11,12],[15,16]]
// ]
注意点
- 余り処理: 配列長が chunk size で割り切れないと最後だけ要素少なめ
- メモリ効率: 大量データなら slice ではなく iterator / generator 使う
- 元配列の変更: slice / array_chunk は新配列を返す(元は変更されない)
- パフォーマンス: array_chunk (PHP) / partition (Guava) のような言語標準が最速
関連記事
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページ
子ページはありません
同階層のページ
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- IPv6とは|128bitアドレス・コロン16進表記/::省略・リンクローカル・SLAAC・デュアルスタック NEW 2026-06-22 12:34:44
- VPNとは|暗号トンネル・サイト間/リモートアクセス・IPsec/SSL-VPN/WireGuardを解説 NEW 2026-06-22 12:19:10
- MAC アドレスフィルタリングの仕組みと限界 | ネットワーク入門 NEW 2026-06-22 12:19:10
- gRPC とは HTTP/2 + Protocol Buffers の高速 RPC | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebRTC とは ブラウザ間 P2P の音声・映像・データ通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/2 とは 多重化・HPACK・バイナリフレーム | ネットワーク入門 NEW 2026-06-22 12:17:25
- Web通信プロトコル入門 HTTP/2・HTTP/3・WebSocket・gRPC・WebRTC | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/3 (QUIC) とは UDP ベースの低遅延 Web 通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebSocket とは 全二重リアルタイム通信 ws/wss | ネットワーク入門 NEW 2026-06-22 12:17:25
- 証明書と認証局(CA)とは|X.509・信頼チェーン・DV/OV/EV・失効(CRL/OCSP)を解説 NEW 2026-06-22 12:17:24
- ファイアウォールとは|パケットフィルタ・ステートフル・DMZ・次世代FW(L4/L7)を解説 NEW 2026-06-22 12:17:24
- iptables/nftablesとは|テーブル・チェーン・ルール例・永続化をLinux視点で解説 NEW 2026-06-22 12:17:24
- HAProxy とは frontend/backend と設定例 | ネットワーク入門 NEW 2026-06-22 12:17:24
- CDN とは エッジキャッシュ・TTL・Cloudflare/CloudFront | ネットワーク入門 NEW 2026-06-22 12:17:24
- TLS/SSLの仕組み|ハンドシェイク・暗号スイート・前方秘匿性・証明書検証をわかりやすく解説 NEW 2026-06-22 12:17:24
コメントを削除してもよろしいでしょうか?