ReactでuseEffectとwindow.innerWidthを使った動的スタイル変更の実装方法

動的スタイル変更は、現代のWebアプリケーションにおいて重要な役割を果たします。特に、画面サイズに応じたスタイル変更は、レスポンシブデザインやユーザー体験の向上に欠かせません。本記事では、ReactのuseEffectフックとJavaScriptのwindow.innerWidthプロパティを利用して、画面幅に応じた動的スタイル変更を実現する方法を詳しく解説します。初心者でも実践しやすいように基本から応用まで段階的に説明するので、ぜひ最後までご覧ください。

動的スタイル変更の基本概念

動的スタイル変更とは、ユーザーの操作や環境の変化に応じて、リアルタイムでスタイルを更新する技術を指します。これは、レスポンシブデザインの一環として、画面サイズやデバイス特性に応じたスタイルの調整に特に有用です。

動的スタイル変更のメリット

ユーザーエクスペリエンスの向上：異なるデバイスや画面サイズに最適化された表示を提供します。
柔軟なデザイン適用：リアルタイムで見た目を変えることで、よりインタラクティブなUIが実現できます。
パフォーマンス最適化：必要に応じたスタイルだけを適用することで、不要なリソースを削減します。

主なユースケース

レスポンシブデザイン：デバイスや画面幅に応じたレイアウトの変更。
テーマ変更：ユーザーの選択や時間帯に応じたダークモードやライトモードの切り替え。
動的コンテンツ表示：特定の条件下でのみスタイルを適用する柔軟なコンテンツ管理。

動的スタイル変更を効果的に実現することで、アプリケーションのデザインがよりユーザー中心になり、エンゲージメントを高めることが可能になります。

ReactのuseEffectフックの概要

ReactのuseEffectフックは、関数型コンポーネントで副作用を処理するための重要なツールです。副作用とは、データの取得やイベントリスナーの登録、DOMの更新など、コンポーネントのレンダリング以外の処理を指します。

useEffectの基本構文

以下は、useEffectの基本的な使い方の例です：

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    console.log('Component mounted or updated');
    return () => {
      console.log('Cleanup on unmount or before update');
    };
  }, []); // 第二引数は依存配列
  return <div>Hello, World!</div>;
}

useEffectの役割

初期レンダリング時の処理：依存配列を空（[]）に設定することで、コンポーネントが初めてレンダリングされた際にのみ実行されるコードを記述できます。
依存関係に基づく再実行：依存配列に指定された値が変化した場合のみ実行されます。これにより、効率的にリソースを管理できます。
クリーンアップ処理：戻り値として関数を設定することで、コンポーネントのアンマウント時や再実行前にリソースのクリーンアップを行えます。

動的スタイル変更での応用

useEffectは、ブラウザの幅や高さの変化を検知して動的にスタイルを変更する処理にも適しています。次のセクションでは、この具体的な実装例について解説します。

useEffectを適切に活用することで、Reactコンポーネントの動作をよりインタラクティブで効率的に制御することができます。

window.innerWidthの役割

window.innerWidthは、ブラウザのビューポート（表示領域）の幅をピクセル単位で取得するためのプロパティです。このプロパティを使用することで、画面幅に応じた動的なスタイル変更が可能になります。

window.innerWidthの基本的な使い方

以下は、window.innerWidthを使って画面幅を取得するシンプルな例です：

console.log(window.innerWidth); // ビューポートの現在の幅を出力

JavaScriptでこのプロパティを利用すると、リアルタイムでブラウザの幅を取得し、それに応じて適切なスタイルを適用できます。

動的なイベントリスナーでの活用

window.innerWidthは、resizeイベントリスナーと組み合わせることで、ブラウザサイズの変化を検知できます：

function handleResize() {
  console.log(`Current width: ${window.innerWidth}px`);
}

window.addEventListener('resize', handleResize);

Reactでの使用例

Reactでは、useEffectフックと組み合わせて利用することで、コンポーネントのライフサイクルに応じた動作が可能になります：

import React, { useState, useEffect } from 'react';

function DynamicWidthComponent() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize); // クリーンアップ処理
    };
  }, []);

  return <div>Current width: {width}px</div>;
}

注意点

パフォーマンスの最適化：resizeイベントは頻繁に発生するため、デバウンス（処理間隔を調整する技術）の実装が推奨されます。
サーバーサイド環境：windowオブジェクトはブラウザに依存するため、サーバーサイドレンダリング（SSR）環境では直接使用できません。その場合、条件付きレンダリングやdefault値の設定が必要です。

window.innerWidthを活用することで、動的なスタイル変更の基盤を効果的に構築できます。次のセクションでは、これをuseEffectと組み合わせた具体的な実装方法を紹介します。

動的スタイル変更を実現する基本コード

ReactのuseEffectフックとwindow.innerWidthを組み合わせることで、画面幅に応じた動的スタイル変更を簡単に実装できます。ここでは、基本的なコード例を通じてその実装方法を解説します。

基本的なコード例

以下のコードは、画面幅が600px以下の場合に背景色を変更する簡単な例です：

import React, { useState, useEffect } from 'react';

function DynamicStyleComponent() {
  const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 600);

  useEffect(() => {
    const handleResize = () => {
      setIsSmallScreen(window.innerWidth <= 600);
    };

    window.addEventListener('resize', handleResize);

    // クリーンアップ処理を追加
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  const style = {
    backgroundColor: isSmallScreen ? 'lightblue' : 'lightgreen',
    height: '100vh',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  };

  return (
    <div style={style}>
      <h1>{isSmallScreen ? 'Small Screen' : 'Large Screen'}</h1>
    </div>
  );
}

export default DynamicStyleComponent;

コードの解説

初期状態の設定
useStateを使用して、画面幅が600px以下かどうかの状態（isSmallScreen）を管理します。
イベントリスナーの設定
useEffectフックを利用して、resizeイベントリスナーを追加します。画面幅が変更されるたびにhandleResizeが呼び出され、状態を更新します。
クリーンアップ処理
resizeイベントリスナーはコンポーネントのアンマウント時に削除されるよう、useEffect内でクリーンアップ関数を返します。これにより、メモリリークを防止します。
スタイルの適用
スタイルはisSmallScreenの値に応じて動的に変更されます。この例では、背景色を条件に応じて変更しています。

動的スタイル変更のポイント

リアルタイム更新：状態管理を使うことで、画面幅に応じた動的なスタイル変更が可能です。
パフォーマンスを考慮：頻繁に発生するresizeイベントでは、必要に応じてデバウンス処理を導入するとパフォーマンスが向上します。

この基本コードを応用することで、より複雑な動的スタイル変更の実装に繋げることができます。次のセクションでは、高度な技術を用いた実装例を紹介します。

高度な動的スタイル変更の実装

動的スタイル変更の基本的な実装を踏まえ、さらに高度な技術を活用して、より柔軟で効率的なスタイル変更を実現する方法を解説します。このセクションでは、状態管理や複雑なレスポンシブデザインへの応用について詳しく説明します。

CSS変数と状態管理の組み合わせ

CSS変数を使うことで、状態に応じたスタイル変更をより簡潔に実現できます。以下はその例です：

import React, { useState, useEffect } from 'react';

function AdvancedDynamicStyle() {
  const [theme, setTheme] = useState(window.innerWidth <= 600 ? 'small' : 'large');

  useEffect(() => {
    const handleResize = () => {
      setTheme(window.innerWidth <= 600 ? 'small' : 'large');
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div style={{ '--bg-color': theme === 'small' ? 'lightblue' : 'lightgreen' }}>
      <style>
        {`
          div {
            background-color: var(--bg-color);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.3s ease;
          }
        `}
      </style>
      <h1>{theme === 'small' ? 'Small Screen Mode' : 'Large Screen Mode'}</h1>
    </div>
  );
}

export default AdvancedDynamicStyle;

特徴

CSS変数の使用：styleタグ内でCSS変数を定義し、状態に応じて値を動的に変更します。
トランジション効果：transitionを使い、スタイル変更時に滑らかなアニメーションを適用します。

メディアクエリと動的クラスの組み合わせ

以下は、CSSモジュールを活用した動的クラス切り替えの例です：

import React, { useState, useEffect } from 'react';
import styles from './DynamicStyle.module.css';

function ResponsiveComponent() {
  const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 600);

  useEffect(() => {
    const handleResize = () => {
      setIsSmallScreen(window.innerWidth <= 600);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div className={isSmallScreen ? styles.small : styles.large}>
      <h1>Responsive Styling</h1>
    </div>
  );
}

export default ResponsiveComponent;

特徴

CSSモジュールの使用：CSSをモジュール化し、クラス名の衝突を防止。
動的クラスの適用：画面幅に応じて異なるクラスを適用することで、スタイルを変更。

グローバル状態管理の活用（Context APIまたはRedux）

アプリケーション全体で画面サイズに応じたスタイルを共有する場合、Context APIやReduxを使うと便利です。以下はContext APIの例です：

import React, { createContext, useContext, useState, useEffect } from 'react';

const ScreenSizeContext = createContext();

export function ScreenSizeProvider({ children }) {
  const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 600);

  useEffect(() => {
    const handleResize = () => setIsSmallScreen(window.innerWidth <= 600);

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <ScreenSizeContext.Provider value={isSmallScreen}>
      {children}
    </ScreenSizeContext.Provider>
  );
}

export function useScreenSize() {
  return useContext(ScreenSizeContext);
}

利用例：

import React from 'react';
import { useScreenSize } from './ScreenSizeProvider';

function GlobalResponsiveComponent() {
  const isSmallScreen = useScreenSize();

  return (
    <div style={{ backgroundColor: isSmallScreen ? 'lightblue' : 'lightgreen', height: '100vh' }}>
      <h1>{isSmallScreen ? 'Small Screen' : 'Large Screen'}</h1>
    </div>
  );
}

高度な実装のメリット

再利用性の向上：CSS変数やContext APIを使うことで、スタイル変更ロジックを複数のコンポーネント間で共有できます。
コードの簡潔化：状態管理とCSSモジュールを組み合わせることで、可読性が高く、メンテナンスしやすいコードが実現します。
パフォーマンスの向上：アプリ全体で一貫した状態管理を行うことで、不要な再レンダリングを回避できます。

次のセクションでは、動的スタイル変更を実装する際の注意点やベストプラクティスを解説します。

注意点とベストプラクティス

動的スタイル変更を実装する際には、効率的で安定したコードを書くためのいくつかの注意点とベストプラクティスを押さえる必要があります。以下にその詳細を解説します。

注意点

1. パフォーマンスの影響

画面サイズ変更（resize）イベントは頻繁に発生するため、そのたびに処理を実行するとアプリケーションのパフォーマンスが低下する可能性があります。これを回避するために、デバウンスやスロットリングを導入しましょう。

デバウンスの例：

import debounce from 'lodash/debounce';

useEffect(() => {
  const handleResize = debounce(() => {
    setIsSmallScreen(window.innerWidth <= 600);
  }, 300); // 300msの遅延

  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

2. クリーンアップ処理の不足

resizeイベントリスナーや他のリソースは、不要になった時点で必ず削除する必要があります。クリーンアップ処理を忘れると、メモリリークや意図しない動作を引き起こします。useEffect内でクリーンアップ関数を確実に実装しましょう。

3. サーバーサイドレンダリング（SSR）環境での問題

Reactのサーバーサイドレンダリング（Next.jsなど）を使用している場合、windowオブジェクトはブラウザ環境に依存しているためエラーが発生します。この場合は、typeof window !== "undefined"を使用してブラウザ環境でのみコードを実行するようにします。

例：

const isBrowser = typeof window !== 'undefined';
const width = isBrowser ? window.innerWidth : 0;

ベストプラクティス

1. 状態管理を適切に利用

画面サイズの状態をグローバルに管理する場合は、React ContextやReduxを使用すると便利です。これにより、複数のコンポーネントで状態を簡単に共有できます。

2. メディアクエリとの併用

動的スタイル変更はJSだけでなく、CSSのメディアクエリを併用することで、コードを簡潔に保ちながら効率的にスタイルを管理できます。

例：CSSメディアクエリの使用

@media (max-width: 600px) {
  .container {
    background-color: lightblue;
  }
}

@media (min-width: 601px) {
  .container {
    background-color: lightgreen;
  }
}

3. アクセシビリティを考慮

動的スタイル変更がアクセシビリティに影響を与えないよう、ユーザー補助技術やデバイスの設定を考慮した設計を心がけましょう。

まとめ

動的スタイル変更の実装では、効率性と安定性を両立させることが重要です。適切なイベントリスナーの管理や状態管理、CSSとの組み合わせを活用することで、スムーズでメンテナンスしやすいコードを構築できます。次のセクションでは、実際のプロジェクトでの応用例を紹介します。

実際のプロジェクトへの応用例

動的スタイル変更を活用することで、ユーザー体験を向上させる多様な機能を実現できます。このセクションでは、動的スタイル変更を利用した実際のプロジェクト例を紹介し、適用方法を詳しく解説します。

応用例1: ナビゲーションメニューの動的表示

画面幅に応じてナビゲーションメニューのスタイルを切り替える例です。モバイル画面ではハンバーガーメニューを表示し、デスクトップ画面ではフルメニューを表示します。

コード例：

import React, { useState, useEffect } from 'react';

function ResponsiveNavbar() {
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <nav style={{ padding: '10px', backgroundColor: 'gray' }}>
      {isMobile ? (
        <button style={{ fontSize: '24px' }}>☰</button> // ハンバーガーメニュー
      ) : (
        <ul style={{ display: 'flex', listStyleType: 'none', gap: '15px' }}>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      )}
    </nav>
  );
}

export default ResponsiveNavbar;

特徴

モバイル画面とデスクトップ画面で異なるUIを提供。
状態管理と条件付きレンダリングを活用して、画面幅に応じたメニューを動的に表示。

応用例2: ダッシュボードのレスポンシブカードレイアウト

ダッシュボードで、画面幅に応じてカードのレイアウトを変更する例です。小さな画面ではカードを1列で表示し、大きな画面ではグリッドレイアウトを適用します。

コード例：

import React, { useState, useEffect } from 'react';

function ResponsiveDashboard() {
  const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 600);

  useEffect(() => {
    const handleResize = () => {
      setIsSmallScreen(window.innerWidth <= 600);
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  const gridStyle = {
    display: 'grid',
    gridTemplateColumns: isSmallScreen ? '1fr' : 'repeat(3, 1fr)',
    gap: '15px',
  };

  return (
    <div style={gridStyle}>
      <div style={{ padding: '20px', backgroundColor: 'lightblue' }}>Card 1</div>
      <div style={{ padding: '20px', backgroundColor: 'lightgreen' }}>Card 2</div>
      <div style={{ padding: '20px', backgroundColor: 'lightcoral' }}>Card 3</div>
    </div>
  );
}

export default ResponsiveDashboard;

特徴

グリッドレイアウトを画面幅に応じて動的に変更。
レスポンシブデザインを実現し、見た目の一貫性と機能性を向上。

応用例3: 動的テーマ切り替え

ユーザーの選択や画面幅に基づいて、ライトテーマとダークテーマを切り替える例です。

コード例：

import React, { useState, useEffect } from 'react';

function DynamicThemeSwitcher() {
  const [theme, setTheme] = useState(window.innerWidth <= 600 ? 'dark' : 'light');

  useEffect(() => {
    const handleResize = () => {
      setTheme(window.innerWidth <= 600 ? 'dark' : 'light');
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  const themeStyles = {
    backgroundColor: theme === 'dark' ? '#333' : '#fff',
    color: theme === 'dark' ? '#fff' : '#000',
    height: '100vh',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  };

  return (
    <div style={themeStyles}>
      <h1>{theme === 'dark' ? 'Dark Theme' : 'Light Theme'}</h1>
    </div>
  );
}

export default DynamicThemeSwitcher;

特徴

ユーザー環境や画面サイズに応じた動的なテーマ変更。
スタイルをリアルタイムで切り替えることで、視覚的なアクセントを強化。

まとめ

これらの応用例を参考にすることで、動的スタイル変更の可能性をさらに広げることができます。実際のプロジェクトでは、これらを組み合わせることで、より高度で使いやすいインターフェイスを構築することが可能です。次のセクションでは、練習問題を通じて実装スキルを磨いていきましょう。

練習問題: 動的スタイル変更のコードを実装

本セクションでは、動的スタイル変更の実装スキルを身につけるための練習問題を提示します。問題に取り組むことで、記事で学んだ内容を実践に移せるようになります。

練習問題1: 背景色を動的に変更

課題

Reactを使用して、画面幅が500px以下の場合は背景色を「lightcoral」に、それ以外の場合は「lightseagreen」に動的に変更するコンポーネントを実装してください。
クリーンアップ処理を忘れないようにしてください。

ヒント

useEffectとwindow.innerWidthを利用する。
背景色の変更はインラインスタイルで実装可能。

練習問題2: ナビゲーションメニューの切り替え

課題

画面幅が768px以下の場合は「ハンバーガーメニュー」、それ以上の場合は「フルナビゲーション」を表示するナビゲーションコンポーネントを作成してください。
ハンバーガーメニューではボタンをクリックすると「Menu Opened」と表示する機能を追加してください。

ヒント

状態管理にはuseStateを使用。
resizeイベントリスナーを正しく登録し、クリーンアップを行う。

練習問題3: ダッシュボードのグリッドレイアウト

課題

カードを表示するダッシュボードを作成し、画面幅が600px以下の場合は1列、それ以上の場合は3列のグリッドレイアウトになるように実装してください。
カードの背景色をランダムに設定する機能を追加してください。

ヒント

グリッドレイアウトはCSSのgrid-template-columnsプロパティを使用。
背景色のランダム化にはJavaScriptのMathライブラリを活用。

解答例と解説

各問題の解答例とコードの解説を以下に示します。

解答例1: 背景色を動的に変更

import React, { useState, useEffect } from 'react';

function DynamicBackground() {
  const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 500);

  useEffect(() => {
    const handleResize = () => setIsSmallScreen(window.innerWidth <= 500);
    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const style = {
    backgroundColor: isSmallScreen ? 'lightcoral' : 'lightseagreen',
    height: '100vh',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  };

  return <div style={style}>Resize the window!</div>;
}

export default DynamicBackground;

解答例2: ナビゲーションメニューの切り替え

import React, { useState, useEffect } from 'react';

function ResponsiveNav() {
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <nav>
      {isMobile ? (
        <button onClick={() => setMenuOpen(!menuOpen)}>
          ☰ {menuOpen && 'Menu Opened'}
        </button>
      ) : (
        <ul style={{ display: 'flex', listStyleType: 'none', gap: '15px' }}>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      )}
    </nav>
  );
}

export default ResponsiveNav;

解答例3: ダッシュボードのグリッドレイアウト

import React, { useState, useEffect } from 'react';

function RandomColorGrid() {
  const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 600);

  useEffect(() => {
    const handleResize = () => setIsSmallScreen(window.innerWidth <= 600);
    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const randomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;

  const gridStyle = {
    display: 'grid',
    gridTemplateColumns: isSmallScreen ? '1fr' : 'repeat(3, 1fr)',
    gap: '15px',
  };

  return (
    <div style={gridStyle}>
      {Array.from({ length: 9 }).map((_, index) => (
        <div
          key={index}
          style={{ backgroundColor: randomColor(), padding: '20px', textAlign: 'center' }}
        >
          Card {index + 1}
        </div>
      ))}
    </div>
  );
}

export default RandomColorGrid;

まとめ

これらの練習問題に取り組むことで、useEffectとwindow.innerWidthを活用した動的スタイル変更の実装スキルを磨けます。実際にコードを書き、アプリケーションに取り入れることで、知識を実践的なレベルに引き上げてください。

まとめ

本記事では、ReactでuseEffectフックとwindow.innerWidthを活用した動的スタイル変更の実装方法について解説しました。動的スタイル変更の基本概念から、高度な応用例、実際のプロジェクトへの適用方法、そして練習問題を通じて、実装スキルを体系的に学べたのではないでしょうか。

動的スタイル変更は、レスポンシブデザインやインタラクティブなUI構築において欠かせない技術です。特にReactでは、useEffectを活用することで、効率的に状態を管理し、画面幅やユーザー操作に応じた柔軟なスタイル変更が可能になります。

ぜひこの記事で学んだ内容を活かして、魅力的なUIを構築してください。実際のプロジェクトやさらなる学習でこれらの知識を応用し、スキルを深めていきましょう。

ReactでuseEffectとwindow.innerWidthを使った動的スタイル変更の実装方法

動的スタイル変更の基本概念

動的スタイル変更のメリット

主なユースケース

ReactのuseEffectフックの概要

useEffectの基本構文

useEffectの役割

動的スタイル変更での応用

window.innerWidthの役割

window.innerWidthの基本的な使い方

動的なイベントリスナーでの活用

Reactでの使用例

注意点

動的スタイル変更を実現する基本コード

基本的なコード例

コードの解説

動的スタイル変更のポイント

高度な動的スタイル変更の実装

CSS変数と状態管理の組み合わせ

特徴

メディアクエリと動的クラスの組み合わせ

特徴

グローバル状態管理の活用（Context APIまたはRedux）

高度な実装のメリット

注意点とベストプラクティス

注意点

1. パフォーマンスの影響

2. クリーンアップ処理の不足

3. サーバーサイドレンダリング（SSR）環境での問題

ベストプラクティス

1. 状態管理を適切に利用

2. メディアクエリとの併用

3. アクセシビリティを考慮

まとめ

実際のプロジェクトへの応用例

応用例1: ナビゲーションメニューの動的表示

特徴

応用例2: ダッシュボードのレスポンシブカードレイアウト

特徴

応用例3: 動的テーマ切り替え

特徴

まとめ

練習問題: 動的スタイル変更のコードを実装

練習問題1: 背景色を動的に変更

練習問題2: ナビゲーションメニューの切り替え

練習問題3: ダッシュボードのグリッドレイアウト

解答例と解説

解答例1: 背景色を動的に変更

解答例2: ナビゲーションメニューの切り替え

解答例3: ダッシュボードのグリッドレイアウト

まとめ

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル