StyleSheet — とは、React Nativeでのスタイル作成

StyleSheetとは？

StyleSheet — コンポーネントのスタイルを定義するための組み込みReact Native APIです。Web開発のCSSとは異なり、RNはスタイルを記述するためにJavaScriptオブジェクトを使用します。StyleSheet.create — 主要メソッド — はスタイルオブジェクトを受け取り、数値IDを持つオブジェクトを返します。

StyleSheetはReact Nativeコアの一部であり、追加パッケージのインストールは不要です。Meta（2026年）によると、React Nativeプロジェクトの95%が静的スタイルにStyleSheet.createを使用しています。代替案：styled-components、Emotion、NativeWind（RN向けTailwind）— しかし、組み込みのStyleSheetがコアの標準であり続けています。

歴史と進化

React Native（2015年）の初期バージョンでは、スタイルは専らインラインオブジェクトとして定義されていました。StyleSheet.createはRN 0.4で最適化として登場しました。コンセプトはCSSから借用しています：読みやすさとパフォーマンスのためにスタイルをロジックから分離します。長年にわたり、APIは拡張されました：absoluteFill、hairlineWidth、flattenが追加されました。

StyleSheet.create vs インラインスタイル

StyleSheet.createとインラインスタイルの違いはパフォーマンスにとって重要です。インラインスタイルは、コンポーネントのレンダリングごとに作成されるプレーンなJavaScriptオブジェクトです。StyleSheet.create — モジュールロード時に一度作成され、数値IDに変換されるオブジェクトです。

インラインスタイルを渡すと、React Nativeは毎回オブジェクト全体をJavaScript-Nativeブリッジを介して送信します。複雑なスタイルを持つコンポーネントの場合、毎回数十のプロパティが転送されることになります。StyleSheet.createは数値IDのみを渡すため、ブリッジの負荷が軽減されます。

// StyleSheet.create — 最適化されたアプローチ
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// インラインスタイル — レンダリングごとに新しいオブジェクトを作成
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

インラインを使用する場合：状態（ pressed、selected、active）に依存する動的スタイル。静的スタイルには常にStyleSheet.createを使用します。ルール：静的 → create、動的 → インライン関数。

StyleSheetを使ったFlexboxレイアウト

Flexbox — React Nativeで唯一のレイアウトメカニズム（CSS Gridは未サポート、floatは存在しません）。StyleSheet.createはフレックスコンテナとその子要素を記述するために使用されます。主要プロパティ：flex（充填係数）、flexDirection（row | column）、justifyContent、alignItems。

デフォルトでは、React NativeのflexDirectionはcolumnです（CSSではrow）。これはWeb開発から移行する際に最初に覚えるべきことです。すべてのViewコンポーネントはデフォルトでフレックスコンテナです。要素を中央揃えするには、alignItems: 'center' + justifyContent: 'center'を使用します。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

重要：React Nativeでは、すべてのサイズは単位なしで指定されます（単なる数値）。パーセンテージは機能しますが、親に対する幅と高さにのみ有効です。marginとpaddingは数値を受け入れます。レスポンシブ対応には、パーセンテージの代わりにflexを使用してください — 異なる画面間でより信頼性が高くなります。

StyleSheet API：create、flatten、hairlineWidth、absoluteFill

StyleSheet APIには、create以外にもいくつかのメソッドが含まれています。StyleSheet.flattenはスタイルの配列を1つのオブジェクトにマージします — 構成やサードパーティコンポーネントへのスタイルの受け渡しに便利です。StyleSheet.hairlineWidthはデバイス上の最小表示ライン幅を返します。

StyleSheet.absoluteFill — 事前定義されたスタイル { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }。オーバーレイレイヤー、モーダルウィンドウ、画面全体の絶対配置に使用されます。StyleSheet.absoluteFillObject — 拡張用のオブジェクトとして同じものを提供します。

// flatten — スタイルのマージ
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — 最小ライン
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidthは区切り線や境界線に便利です — 画面密度に関係なく常に1物理ピクセルとして表示されます。Retinaディスプレイでは0.5論理ポイント、通常のディスプレイでは1ポイントです。厳密に特定のサイズが必要な要素にはhairlineWidthを使用しないでください。

Dimensions APIを使ったレスポンシブレイアウト

Dimensions APIは、さまざまな画面サイズに対応するレスポンシブレイアウトのためにStyleSheetと一緒に使用されます。Dimensions.get('window')はウィンドウの幅と高さを返します。画面回転時のリアクティブな更新には、React NativeのuseWindowDimensionsフックを使用します。

StyleSheet.createはCSSのようなメディアクエリをサポートしていませんが、create内でDimensionsに基づいて値を計算したり、関数を介して動的スタイルを使用したりできます。ブレークポイントについては、異なる幅の範囲ごとに個別のスタイルを作成します。

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensionsは、画面の回転やSplit Viewを使用するタブレットでのウィンドウサイズ変更時に自動的に更新されます。SSR（React Native Web）の場合、サーバーとクライアント間の不一致を避けるために、コンポーネントマウント後にDimensions.getが呼び出されるようにしてください。

プロジェクトでのスタイル構成

StyleSheetの構成は、プロジェクトの保守性とコードの再利用性に影響します。3つのアプローチ：コンポーネント内のローカルスタイル（コンポーネントの隣にstyles.js）、グローバルスタイル（色、スペーシング、タイポグラフィの定数を含むtheme.js）、および合成によるモジュール式スタイル。

推奨構造：theme.js（色、サイズ、タイポグラフィの定数）、Component.styles.js（各コンポーネントの隣にその固有のスタイル）、ベーススタイルと固有スタイルを組み合わせるためのStyleSheet.flatten。大規模プロジェクトでは、テーマ生成を備えたデザインシステムを使用します。

// theme.js — グローバル定数
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

モジュール式構成の利点：色とスペーシングの単一情報源、簡素化されたリファクタリング（primaryを変更すると全ボタンが更新）、flattenによるスタイルの再利用、コードの可読性と予測可能性。TypeScriptプロジェクトでは、declare moduleを介してテーマの型を追加します。