初心者

この記事で分かること CSS Gridの基本的な使い方と、Flexboxとの使い分けを理解できます。 「Flexboxは分かるけど、Gridはいつ使えばいいの？」という疑問を解消します。 FlexboxとGridの違い ざっくり言うと： Flexbox → 一方向（横並び or 縦並び）のレイアウト Grid → 二次元（縦横同時）のレイアウト カードを横に並べるだけならFlexbox。ヘッダー・サイドバー・メイン・フッターのようなページ全体のレイアウトにはGridが向いています。 手順 ステップ1: 基本のGridを作る まず、3列のグリッドを作ってみます。 <div class="grid-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> /* 親要素にdisplay: gridを指定 */ .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3等分 */ gap: 16px; /* 要素間の余白 */ } .item { background: #e0f2fe; padding: 24px; text-align: center; border-radius: 8px; } grid-template-columns で列の数と幅を指定します。1fr は「残りのスペースを均等に分ける」という意味です。fraction（分数）の略ですね。 これだけで、6つの要素が3列×2行に並びます。 ステップ2: 列幅を変える 均等分割だけでなく、列ごとに幅を変えられます。 /* サイドバー200px + メイン（残り全部） */ .grid-container { display: grid; grid-template-columns: 200px 1fr; gap: 16px; } px と fr を混ぜて使えるのがGridの便利なところです。サイドバーは固定幅、メインは画面幅に合わせて伸縮します。 ...

この記事で分かること JavaScriptの配列メソッド map、filter、reduce の使い方が分かります。 「for文で書けるけど、もっとスマートに書きたい」という人向けです。 前提知識 配列（[1, 2, 3]）が何か分かる アロー関数（() => {}）を見たことがある 分からなくても、コード例を見れば雰囲気はつかめます。 手順 ステップ1: map — 全要素を変換する map は配列の各要素に処理を適用して、新しい配列を返します。 const prices = [100, 200, 300]; // 全商品を10%値上げ const newPrices = prices.map((price) => price * 1.1); console.log(newPrices); // [110, 220, 330] 元の配列 prices は変更されません。新しい配列が返ってくるのがポイントです。 for文で書くとこうなります： // for文バージョン（同じ結果） const newPrices = []; for (let i = 0; i < prices.length; i++) { newPrices.push(prices[i] * 1.1); } map の方がやりたいことが一目で分かりますよね。 ステップ2: filter — 条件に合う要素だけ取り出す filter は条件を満たす要素だけを集めた新しい配列を返します。 const scores = [45, 82, 67, 93, 31, 78]; // 60点以上だけ取り出す const passed = scores.filter((score) => score >= 60); console.log(passed); // [82, 67, 93, 78] コールバック関数が true を返した要素だけが残ります。 実務でよく使うパターン： ...