投稿者: mimihokuro

UI・コンポーネントライブラリはWebアプリを作るときに、開発はしたいけどデザインに苦手意識を持っていてなかなか進まない、そんなときに便利な存在ですが、Reactを使う人の中には「Chakra UI」を使っている人も多いんじゃないでしょうか？

ただ、Chakra UIを使い始めた人が気になるであろう点があります。

それが「Stack系の種類の多さ」と「Flexコンポーネントとの違い」です。

今回はそんな似たようなコンポーネントの違いと使い分けについてみていきたいと思います！

そもそもChakra UIって？

Chakra UIはアクセシビリティを重視したコンポーネントライブラリで、2024年4月に改正された障害者差別解消法に対するアクセシビリティ対応に有効とされるライブラリの一つです。

豊富なコンポーネントが用意されていて、レスポンシブ対応も行われている使いやすくなっています。

[

Chakra UI – A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System

v2.chakra-ui.com

](https://v2.chakra-ui.com/ "Chakra UI – A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.")

Chakra UIにはレイアウトを組むためのコンポーネントがいくつも用意されていて、その中の一つにStackやFlexがあります。

Stackとは？

Web制作でCSSを使っている人にはFlexコンポーネントの使い方は説明を見なくてもなんとなくイメージできると思いますが、Stackコンポーネントって聞きなじみがないかもしれません。

Chakra UIの公式ドキュメントにはこんな説明が。

Stack is a layout component used to group elements together and apply a space between them.

スタックは、要素をグループ化し、それらの間にスペースを適用するために使用されるレイアウトコンポーネントです。（DeepL訳）

Chakra UI公式ドキュメント「Stack」コンポーネント

つまり、StackはFlexのように横並びや縦並びをさせたいときに使うコンポーネントです。

StackとFlexってどう違うの？

StackもFlexも横並びや縦並びをしたいときに使うコンポーネントと説明しましたが、じゃあどう違うん？どう使い分ければええの？って思いますよね？

まずはそれぞれの特徴を見ていきましょう。

Stack（HStack、VStack）

Stackコンポーネントには、Stack・HStack・VStackの3種類が用意されています。

HStackとVStackはそれぞれ横並びや縦並びのために特化した、言わばショートカットのようなコンポーネントです。

HStackは子要素を横並びに、StackとVStackは子要素を縦並びに配置します。

StackもVStackも同じじゃん！と思うかもしれませんが、そこはショートカットたる所以と言いますか、デフォルトでStackは左寄せ、VStackは中央寄せになります。（HStackも横並びのまま、垂直方向に中央寄せとなります。）

Flex

Flexコンポーネントは言わずもがな、デフォルトで横並びになるコンポーネントです。

ただStackと異なるのは、使えるプロパティが違うという点とデフォルトでの子要素間の余白です。

例えば、Stack系では子要素間の余白を指定するspacing属性（CSSでいうgapプロパティ）が使えますが、Flexでは使えません。

逆にFlexではflexレイアウト専用のプロパティのショートハンドが用意されていて、flexDirectionならdirection、flexWrapならwrapといった、属性を省略して指定することができます。

違いがよくわからんのだが？

ここまで説明を見るとそれぞれのコンポーネントの違いがあまりないように感じますね。

それではどう使い分けるといいのでしょうか？

Chakra UIの公式ドキュメントにはこんなことが書いてあります。

The Stack component and the Flex component have their children spaced out evenly but the key difference is that the Stack won’t span the entire width of the container whereas the Flex will. Another thing to note is that the items in both Stack and Flex are aligned in the center by default.

---

StackコンポーネントとFlexコンポーネントは、子コンポーネントの間隔が均等ですが、重要な違いは、Stackがコンテナの幅いっぱいに配置されるのに対し、Flexはコンテナの幅いっぱいに配置されないことです。もうひとつ注意すべき点は、StackとFlexのアイテムはどちらもデフォルトで中央に配置されていることだ。（DeepL訳）

Chakra UI公式ドキュメント「Stack」コンポーネントより

Flex and Spacer vs Grid vs Stack#

The Flex and Spacer components, HStack treat children of different widths differently.

• In HStack, the children will have equal spacing between them but they won’t span the entire width of the container.
• With Flex and Spacer, the children will span the entire width of the container and also have equal spacing between them.

---

フレックスとスペーサーとグリッドとスタックの比較

FlexとSpacerコンポーネント、GridとHStackでは、異なる幅の子コンポーネントの扱いが異なります。

HStackでは、子コンポーネントの間隔は等しくなりますが、コンテナの幅全体には及びません。
Gridでは、子要素の始点の間隔は等しくなりますが、子要素間のギャップは等しくなりません。
FlexとSpacerを使用すると、子要素はコンテナの幅全体に広がり、子要素間の間隔も等しくなります。（DeepL訳）

Chakra UI公式ドキュメント「Flex」コンポーネントより

引用が長くなってしまいましたが、つまりFlexではSpacerという子要素間の余白を自動調整するコンポーネントと一緒に使うと、子要素が親要素の幅いっぱいまで広がって配置されて、Stackでは幅いっぱいまで広がらない、ということでした。

それ（Spacer）、Stackにやらせてください

が、一つ疑問に浮かぶ方もいるかもしれません。

そう、FlexとSpacerをセットで、というのなら、StackとSpacerをセットでは使えないのか？というところ。

実際のところ・・・使えます。

Chakra UIの公式ドキュメントにはお試し機能があるので、ぜひ下のコードをコピペして試してみてください。

import { Stack, HStack, Flex, Spacer, Box } from '@chakra-ui/react';

export const App = () => {
  return (
    <Stack spacing={4} px={4} py={16}>
      <HStack spacing='0' h={100} border="1px">
        <Box w='40px' h='40px' bg='yellow.200'>
          1
        </Box>
        <Box w='40px' h='40px' bg='tomato'>
          2
        </Box>
        <Spacer />
        <Box w='40px' h='40px' bg='pink.100'>
          3
        </Box>
      </HStack>
      <Flex border="1px" h={100} align="center">
        <Box w='40px' h='40px' bg='yellow.200'>
          1
        </Box>
        <Box w='40px' h='40px' bg='tomato'>
          2
        </Box>
        <Spacer />
        <Box w='40px' h='40px' bg='pink.100'>
          3
        </Box>
      </Flex>
    </Stack>
  )
}

ttps://play.chakra-ui.com

サンプルコードではHStackとFlexを使って横並びにしていますが、全く同じ見た目を再現できており、StackでもしっかりSpacerが使えています。

ただ、HStackにはデフォルトでgapプロパティが付与されるようになっているので、余白なしで配置したい場合には打消しのための属性指定が必要なので少し冗長になってしまいますので、その場合はFlexを使うといいでしょう。

結論

FlexとStackの違いについてみてきましたがどうでしょうか？

どの場面でどれを使っても同じように再現はできるので、ここではコレ！という決まりはありません。

ですが、コンポーネントによってスタイルの打消しが必要だったり、重複したりする場合もあるので、コードが煩雑にならないように気を付けて使っていきましょう。

こんにちは、みみほくろです。

Youtubeって面白い動画が多くて時間を忘れちゃいますよね。

自分の動画もみんなに見てほしい！ってことで自分のサイトにYoutube動画を設置することもあると思います。

ですが、YouTube動画を埋め込む際、単にコードを貼り付けるだけでなく、「ページの表示速度（Lighthouseスコア）」や、近年主流となっている「YouTubeショート（縦長動画）」への対応は、UX（ユーザー体験）に直結する重要な要素なため、適材適所を見極める必要があります。

今回は、主要な3つの実装方法について、それぞれのメリット・デメリットを詳しく解説します。

紹介する実装方法はこの3つです。

• Youtube発行のIframeをそのまま貼り付け
• DOM操作による埋め込み
• Youtube Player API

それでは一つ一つ見ていきましょう！

標準的な埋め込み：「公式Iframe」

YouTubeの共有機能から取得した埋め込みコードをそのままHTMLに配置する、手っ取り早くてスタンダードなやり方です。

赤枠の「共有」ボタンから発行されます。（画像はYoutube公式サイトで使われているYoutube動画のキャプチャ）

メリット：圧倒的な導入スピードと安定性

• 実装が容易: HTMLを1行貼り付けるだけで完了し、プログラミングの知識がなくても対応可能です。
• メンテナンス性: YouTube側の仕様変更があっても、公式が提供するコードであるため壊れにくく、保守が容易です。

デメリット：ページパフォーマンスへの悪影響

• レンダリングブロック: ブラウザはIframe内のリソースを読み込むためにメインスレッドを占有し、ページの初期表示を遅延させます。
• Lighthouseスコアの低下: 動画が重い場合、LCP（最大視覚コンテンツの表示時間）などのスコアに悪影響が出てしまい、SEO面でのマイナス要因になり得ます。

パフォーマンス重視：「DOM操作」による遅延読み込み

ユーザーが「再生ボタン」を押すまで動画を読み込まない、あるいはCSSや画像などページ全体の読み込みが完了した後にIframeを生成してHTMLに追加する手法です。

メリット：初期表示速度の劇的な改善

• リクエストの削減: ページロード時にYouTube関連の重いスクリプトや画像（サムネイル以外）を読み込まないため、Lighthouseスコアを高く維持できます。
• ユーザーファースト: 「動画を見たい」という明確な意思表示（クリック）があって初めて通信が発生するため、モバイルユーザーのデータ通信量節約にも貢献します。

デメリット：ユーザーの手間の増加

• 2ステップの操作: 「動画読み込みボタンを押す」→「動画の再生ボタンを押す」という2段階の操作が必要になる場合があり、直感的なUXを損なうリスクがあります。
• JavaScript依存: スクリプトがオフの環境では動画が全く表示されないため、フォールバックの検討が必要です。

実装例：

<button id="createYoutubeButton">動画を読み込む</button>
<div class="youtube-container"></div>

<script>
const youtubeContainer = document.querySelector(".youtube-container");
const createYoutubeButton = document.querySelector("#createYoutubeButton");

createYoutubeButton.addEventListener("click", () => {
    youtubeContainer.innerHTML = `<iframe src="https://www.youtube.com/embed/M7lc1UVf-VE" title="YouTube video player" frameborder="0" allowfullscreen></iframe>`;
});
</script>

読み込んでいるYoutube動画は公式で紹介しているものを使っています。

3. 高度な制御：「YouTube Player API」

JavaScriptでプレーヤーの挙動を詳細にコントロールする、開発者向けの手法です。

メリット：リッチなUXと細かい挙動制御

• 細かなパラメータ管理: 再生終了時に特定の処理を走らせる、特定の時間から再生を開始する、といった柔軟な制御が可能です。
• 非同期読み込み: API自体が非同期で読み込まれるため、標準のIframe貼り付けよりもパフォーマンスへの影響を抑えつつ、高度な機能を提供できます。

デメリット：実装コストと複雑性

• 学習コスト: APIの仕様を理解する必要があり、単純な埋め込みに比べてコード量が増え、デバッグの手間も発生します。
• 外部スクリプトへの依存: YouTube側のAPIサーバーが万が一ダウンしたり、スクリプトの読み込みに失敗したりした場合、プレーヤーが正しく初期化されないリスクがあります。

実装手順の詳細

YouTube Player APIを導入するための具体的なステップは以下の通りです。

① APIスクリプトの非同期読み込み

まず、APIの本体となるJavaScriptファイルを動的に読み込んでDOM上に組み込みます。

// APIのスクリプトタグを生成
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";

// 最初のscriptタグの前に挿入
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

② プレーヤーの初期化

APIの読み込みが完了すると、グローバル関数 onYouTubeIframeAPIReady が自動的に実行されます。この中でプレーヤーのインスタンスを生成します。

let player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', { // HTML側のIDを指定
        height: '360',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        playerVars: {
            'playsinline': 1, // iOSでインライン再生を許可
            'rel': 0          // 関連動画を自身のチャンネルに限定
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

playerVarsでは動画の状態を設定する「パラメータ」を指定することができます。よくあるパラメータは後述していますので、そちらを参考にするか、Youtube Player APIの公式ページをご覧ください。

[

YouTube Player API Reference for iframe Embeds  |  YouTube IFrame Player API  |  Google for Developers

アプリに YouTube プレーヤーを埋め込みます。

developers.google.com

](https://developers.google.com/youtube/iframe_api_reference?hl=ja "YouTube Player API Reference for iframe Embeds  |  YouTube IFrame Player API  |  Google for Developers")

③ イベントによる制御

動画の準備が整ったときや、再生状態が変わったとき（再生・停止・終了）に独自の処理を挟むことができます。

// プレーヤーの準備が整ったとき
function onPlayerReady(event) {
    // 例：準備ができたら自動でミュートにして再生
    event.target.mute();
    event.target.playVideo();
}

// 状態が変化したとき
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        console.log("動画の再生が終了しました。");
        // 次の動画へ遷移させる、などの処理が可能
    }
}

挙動を制御する「プレーヤーパラメータ」の活用

Youtube動画にはURLの末尾にパラメータを付与することで、動画の挙動をカスタマイズすることができます。

よく使うパラメータ一覧

パラメータ

値

内容

autoplay

1

自動再生する。

mute

1

消音状態で再生する（自動再生には必須）。

controls

0 / 1

プレーヤーのコントロールを表示するか。

loop

1

ループ再生する（playlistパラメータとの併用が必要）。

rel

0

再生終了時、同じチャンネル内の関連動画のみを表示する。

start

数字

再生を開始する秒数を指定する。

end

数字

再生を終了する秒数を指定する。

具体的な使用例

① 背景動画として「ループ再生」させる

環境映像などを背景として使う場合、音声を消し、コントロールを隠してループさせます。

※loop=1を使う際は、playlistパラメータに同じ動画IDを入れる必要があります。

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=VIDEO_ID&controls=0"></iframe>

② 動画の「見どころ」だけを再生する

長い動画の中で、特定の30秒間だけを見せたい場合などに有効です。

<!-- 60秒目から再生開始し、90秒目で終了する -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID?start=60&end=90"></iframe>

実装時の注意点：自動再生のルール

現在のブラウザポリシーにより、autoplay=1 を指定する場合は必ず mute=1 をセットにする必要があります。音声が出る状態での自動再生は基本的にブロックされます。

【重要】通常動画とショート動画のレスポンシブ戦略

YouTubeショート（9:16）を埋め込む際は、通常の動画（16:9）とは異なる設定が必要です。

1. 埋め込み用URLへの変換

Youtubeショートには埋め込み用のコードがデフォルトでは用意されていないので、自分でカスタマイズする必要があります。

• 視聴用URL: https://www.youtube.com/shorts/VIDEO_ID
• 埋め込み用: https://www.youtube.com/embed/VIDEO_ID

といってもshortsをembedに変えるだけです笑

2. デバイスごとの最適なアスペクト比

モダンなCSSプロパティ aspect-ratio を活用します。

/* 動画共通のベース設定 */
.video-wrapper {
    position: relative;
    width: 100%;
    margin: 20px auto;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* 通常動画 (16:9) */
.video-normal {
    aspect-ratio: 16 / 9;
    max-width: 800px;
}

/* ショート動画 (9:16) */
.video-shorts {
    aspect-ratio: 9 / 16;
    width: 100%;
    max-width: 400px;
}

/* PC向けの調整 */
@media screen and (min-width: 768px) {
    .video-shorts {
        max-width: 315px; 
    }
}

通常の動画では16：9、ショートの場合には9：16と切り替えることができます。

まとめ：要件に合わせた手法の選択

さて、ここまでYoutube動画の埋め込み方法をいくつかご紹介しましたが、下記のような使い分けがオススメです。

• スピード最優先のスポット案件 → 公式Iframe
• Lighthouseスコアを改善したいサイト → DOM操作による後読み
• 複雑なインタラクションが必要なキャンペーン → YouTube Player API
• ショート動画 → URL変換とデバイスごとのサイズ管理を徹底する

ちなみにYoutube Player APIには40以上の関数と6つのイベントに20ほどのプロパティーが用意されているので、より細かい調整を行いたい場合にうってつけです。

なので、オススメとしてはYoutube Player APIですが、現場の要件に合わせて、ケースバイケースで使い分けてみてください。

最近スクロールで追従するヘッダーがスタンダードかってほど見かけるようになりました。

グローバルナビゲーションを常に表示させることでページのどこにいても見たいページにアクセスできて、ユーザーとしては欲しい情報を探しやすくサイト運営者としては回遊性を高めやすい手法だと思います。

でも追従するヘッダーって時にはユーザーの閲覧の邪魔になってしまうんですよね。

常にメインコンテンツの一部をヘッダーで隠していることになって、画面サイズの小さいノートPCやスマートフォンだと余計に見づらくなりやすく、メインコンテンツの魅力が十分に伝えられなかったり、見にくくてUXの悪化につながります。

そこで今回は、下スクロール時は非表示、上スクロール時に表示させるようなスクロールの向きに合わせて要素を変化させる方法をご紹介します。

この記事ではスクロールでヘッダーが上方向に隠れる仕様で説明しています。下左右へ隠れる仕様については応用の章のCodePenをご覧ください。

基本のコード

説明用なのでHTMLはかなりシンプルになっています。

<div class="header">
  スクロールで非表示
</div>

以下はJavaScriptです。

// 現在の位置を保持
let currentPosition = 0;

// ヘッダーの高さを取得
const header = document.querySelector(".header");
const headerHeight = header.clientHeight * -1;

window.addEventListener("scroll", () => {

  // スクロール位置を保持
  let scrollPosition = document.documentElement.scrollTop;

  // スクロールに合わせて要素をヘッダーの高さ分だけ移動（表示域から隠したり表示したり）
  if (currentPosition <= scrollPosition) {
    header.style.transform = "translate(0," + headerHeight + "px)";
  } else if (currentPosition > scrollPosition) {
    header.style.transform = "translate(0, 0)";
  }
  currentPosition = document.documentElement.scrollTop;
})

解説

まず現在の位置を0として定義し、スクロールごとに発生するイベントによってスクロール位置を取得、現在の位置とスクロール位置を比較しています。

現在の位置の数値に対してスクロール位置の数値が大きく（下スクロール）なればヘッダーを非表示に、逆に小さく（上スクロール）なればヘッダーを再表示する仕組みです。

今回はヘッダーの高さを明確に設定していないのでJavaScriptによってヘッダーの高さを動的に取得してCSSスタイルを操作する仕様にしていますが、ヘッダーのサイズが明確ならばクラスの付け外しで表示・非表示を切り替えてもいいかと思います。

応用編

応用では上下左右にスクロールで表示・非表示が切り替わる要素を配置しています。

See the Pen
scroll to hide by mimihokuro (@mimi_hokuro)
on CodePen.

さていかがでしたでしょうか？

スクロールに合わせて要素の変化させることは使いやすさだけでなく、使いようによってはユーザーの目を引く演出も実装できそうですね。

この記事が参考になれば幸いです～。