---
url: https://nsh.dev/ja/elements
description: "すべての NSH アプリを構成するプリミティブと基本コンポーネント(Rust と TSX)、およびそれらすべてに共通するプロパティ、イベント、ref メソッドについて説明します。"
---
# 要素
Native Shell は、すべての画面を少数の要素から構築します。`View`、`Text`、`Image` などのプリミティブと、`Button`、`Dialog`、`NavStack` などのベースコンポーネントです。各プリミティブはネイティブビューです（iOS と Mac Catalyst では UIView のサブクラス、Android では `View`、デスクトップでは AppKit、GTK、Win32 のビュー）。ビューの作成とレイアウトは NSH ランタイムが行います。アプリが表示するものはすべてこれらで構成されます。アプリのボタン、カード、行、画面はアプリ自身のコンポーネントであり、これらの要素で描画され、アプリがスタイルを定めるため、見た目は完全にアプリ独自のものになります。
このページのすべての例は Rust と TSX の両方で示されます。タブを選ぶと、ページ内のすべての例が切り替わります。
```rust
use nsh_core::prelude::*;
fn app() -> impl IntoElement {
let count = signal(0_u32);
view()
.flex_1()
.items_center()
.justify_center()
.gap_3()
.child(text(move || format!("Tapped {} times", count.get())).text_2xl())
.child(
view()
.rounded_lg()
.bg(rgb(0x2563eb))
.px_4()
.py_2()
.active(|s| s.opacity(0.6))
.on_press(move || count.update(|n| *n += 1))
.child(text("Tap").text_color(white())),
)
}
```
```tsx
import { mount, signal, Text, View } from "nsh";
function App() {
const count = signal(0);
return (
Tapped {count()} times
count.update((n) => n + 1)} class="rounded-lg bg-blue-600 px-4 py-2 active:opacity-60">
Tap
);
}
mount(App);
```
Rust では、プリミティブは `nsh_core::prelude` の関数（`view()`、`text(..)`、`image(..)`）であり、ベースコンポーネントは `nsh_base` クレートから提供されます。スタイルは型付きメソッド（`.flex_1()`、`.gap_3()`、`.px(px(20.0))`、`.bg(..)`）で指定し、状態スタイルはクロージャ（`.active(|s| s.opacity(0.6))`）を取ります。リスナーはそのイベントを受け取るクロージャ（`.on_press(move || ..)`、`.on_change(move |text: &str| ..)`）で、`.child(..)` で子要素を追加します。UI の断片は `impl IntoElement` を返す通常の関数で、一度だけ実行されます。クロージャ内（`text(move || ..)`、`.bg(move || ..)`）で読み取られたシグナルは、バインドされた対象を更新します。[Building with Rust](https://nsh.dev/translations/ja/docs/rust.md) を参照してください。
TSX では、すべてのタグは PascalCase で、スコープ内のバインディングの名前になります。プリミティブは `nsh` から、ベースコンポーネントは `nsh/base` から提供されます。インポートが不要なグローバルは `` と `` だけです。`` のような小文字のタグはビルドエラーになります。TypeScript が名前ごとに 1 つのグローバル型に照らして検査することになり、`List` や `Each` のようなジェネリックコンポーネントはアイテムの型を推論できないためです。コンパイラはインポートを通じて要素を認識し、ネイティブビューをその場で生成するため、インポートに実行時のコストはかかりません。[JSX and components](https://nsh.dev/translations/ja/docs/jsx-and-components.md) を参照してください。
```tsx
import { Canvas, Image, List, Overlay, Scroll, Shader, Text, Video, View, WebView } from "nsh";
import { Button, Dialog, Menu, NavPage, NavStack, Popover, Sheet, Tooltip, Input } from "nsh/base";
```
## プリミティブ
TSX では `nsh` から、Rust では `nsh_core::prelude` からインポートします。
| 要素 | Rust | ネイティブビュー (iOS / Android) | ページ |
|---|---|---|---|
| `` | `view()` | UIView / ViewGroup。`selectable` を指定すると、内部のテキストがまとめて選択される | [View](https://nsh.dev/translations/ja/elements/view.md)、[Text selection](https://nsh.dev/translations/ja/elements/text-selection.md) |
| `` | `text(content)` | CoreText view / StaticLayout view | [Text](https://nsh.dev/translations/ja/elements/text.md) |
| `` | `image(src)` | 画像レイヤーを持つビュー / イメージビュー | [Image](https://nsh.dev/translations/ja/elements/image.md) |
| `` | `scroll()` | UIScrollView / ScrollView | [Scroll](https://nsh.dev/translations/ja/elements/scroll.md) |
| `` | `virtual_list(count, \|at\| row)` | セルをリサイクルする UIScrollView / ScrollView | [List](https://nsh.dev/translations/ja/elements/list.md) |
| `