Text: その概要、テキスト表示とReact Native

React NativeにおけるTextとは

Textはテキストコンテンツを表示するためのReact Nativeコンポーネントです。ウェブ開発にはテキスト用の多くのセマンティックタグが存在しますが、React Nativeではすべてのテキスト要素がTextを通じて作成されます。このコンポーネントは単純なテキストだけでなく、ネストされたTextやスタイル化された断片を含む複雑な構造も表示できます。

Textは自動的に改行を処理し、フォントファミリー、サイズ、色、配置を管理します。このコンポーネントはタッチイベント（onPress）をサポートしており、追加のラッパーなしでクリック可能なリンクを作成できます。重要な制限事項：TextはView内に直接ネストすることはできません — 他のTextコンポーネント内、または直接の子としてのみ配置できます。

React Native Nested Text（2024年）によると、ネストされたTextコンポーネントは親からスタイルを継承します。これにより、最上位でベーススタイルを設定し、特定の断片に対して個別のプロパティを上書きできます — ウェブでspanがCSSと連携するのと同様です。

TextコンポーネントのプロパティとAPI

Textコンポーネントは、表示、動作、アクセシビリティを制御するためのプロパティセットを提供します。主なカテゴリ：スタイルプロパティ（フォント、サイズ、色、配置）、表示プロパティ（numberOfLines、lineBreakMode）、インタラクティブプロパティ（onPress、onLongPress）。

テキスト表示プロパティ

numberOfLinesは表示行数を制限し、末尾に省略記号を追加します。ellipsizeModeは省略記号の位置を制御します（head、middle、tail、clip）。adjustsFontSizeToFitは設定された枠内にテキストを収めるためにフォントサイズを自動的に縮小します。lineBreakModeはnumberOfLinesを超えたテキストの切り詰め方法を決定します。

インタラクティブプロパティ

Textはタッチ処理のためにonPressとonLongPressをサポートしています。これにより、TouchableOpacityを使用せずにテキストリンクを作成できます。onTextLayoutはレンダリング後のテキストレイアウト情報を返します — アニメーションや位置決めに便利です。

プラットフォーム固有のプロパティ

iOSでは、disabled（テキスト無効化）、selectable（選択有効化）、dataDetectorTypes（リンク、電話番号、住所の自動検出）が利用できます。Androidでは、selectable（textSelectable経由）とincludeFontPadding（余分なパディングを削除）が利用できます。

TextとHTMLのp・span要素の違い

Textは見た目がHTMLタグのpやspanに似ていますが、アーキテクチャ上の違いは重要です。React Nativeにはセマンティックなテキスト要素を持つDOMモデルがなく、すべてのテキストノードは様々なプロパティを持つ単一のTextコンポーネントで処理されます。

主な違いは、Textのネスティングによるスタイル継承です。外側のTextがfontSize: 18とcolor: blueを持つ場合、ネストされたすべてのTextコンポーネントがこれらのスタイルを継承します。任意のプロパティは、内部のTextで特定の値を設定して上書きできます。これによりコードが節約され、構造がよりクリーンになります。

テキストのスタイリングとフォント

TextはタイポグラフィのためのほとんどのCSSプロパティをサポートしています：fontFamily、fontSize、fontWeight、fontStyle、color、letterSpacing、lineHeight、textAlign、textDecorationLine、textTransform。React Nativeでは、フォントは@font-faceではなくプラットフォームレベルで接続されます。

カスタムフォントの使用

カスタムフォントを使用するには、assets/fontsフォルダに追加し、react-native.config.jsで指定する必要があります。アプリケーションの再ビルド後、fontFamilyを通じてフォントが利用可能になります。React Nativeはウェブフォント（Google Fonts）を直接サポートしておらず、.ttfまたは.otfファイルのダウンロードが必要です。

スタイルの継承とカスケード

Textの継承メカニズムはCSSとは異なります。スタイルはTextからネストされたTextにのみ渡され、ViewからTextには渡されません。アプリケーション全体にフォントを設定するには、TextコンポーネントのdefaultPropsまたはカスタムラッパーコンポーネントを使用します。

<Text style={{ fontSize: 18, color: '#333' }}>
    This text is 18px and color #333
    <Text style={{ fontWeight: 'bold', color: '#007AFF' }}>
        bold and blue
    </Text>
    back to #333 color
</Text>

この例では、外側のTextがfontSize: 18とcolor: #333を設定しています。内側のTextはfontSize（18）を継承しますが、fontWeightをboldに、colorを#007AFFに上書きします。外側のTextは自身のスタイルのみを継承します。これはHTMLでネストされたspanが動作するのと正確に類似しています。

Textを使った実践例

React NativeにおけるTextの2つの典型的な使用例を見てみましょう：ネスティングを使ったテキストの書式設定と、行数制限付きのクリック可能なコンポーネントの作成です。

例1：書式設定付きニュースカード

この例では、Textを使用してハイライトされた要素（タイトル、日付、リンク付きコンテンツ）を含む複数行テキストを表示しています。

const NewsCard = ({ title, date, content }) => (
    <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.date}>{date}</Text>
        <Text style={styles.content}>
            {content}
            {' ' }
            <Text
                style={styles.link}
                onPress={() => Linking.openURL(url)}
            >
                Read more
            </Text>
        </Text>
    </View>
);

この構造には3つの独立したTextコンポーネント（タイトル、日付、コンテンツ）があり、それぞれ独自のスタイルを持っています。コンテンツTextの中には、リンク用のonPressを持つ別のTextがネストされています。このパターンはニュースフィード、ブログ、コメントで使用されます。

例2：行数制限付きテキスト

省略記号付きのテキストプレビューを表示するには、numberOfLinesを使用します。これは商品カードや記事リストの標準的なパターンです。

<Text
    numberOfLines={2}
    ellipsizeMode="tail"
    style={styles.preview}
>
    {longDescription}
</Text>

numberOfLines = 2プロパティはテキストを2行に制限します。テキストが長い場合、React Nativeは自動的に2行目の末尾に省略記号を追加します。ellipsizeMode: 'tail'パラメータは省略記号が末尾にあるべきことを指定します（head、middle、clipも利用可能です）。