入力とキーマップ
キーボードでデプロイ間を移動し、?のヘルプオーバーレイを追加します。
この章の内容
- `useInput`
- キーマップ
- ヘルプオーバーレイ
- フォーカス
キー入力はページ上の非表示の入力要素を通じてアプリに届くため、ページにフォーカスが必要です。そのため、どのText.jsアプリも最初にページをクリックするよう求めます。フォーカスが当たると、押したキーがすべてReactに届きます。
useInput
useInput は、ここまで使ってきた低レベルのフックです。正規化された key（"up"、"return"、"escape"）、入力された文字を格納する input、および ctrl、alt、shift、meta を含む KeyEvent を受け取ります。
useInput((e) => { if (e.ctrl && e.key === "k") openPalette();});キー入力がツリーの下位にあるハンドラーに届かないようにするには、e.stopPropagation() を呼び出します。
キーマップ
画面で使うキーが数個を超えたら、useKeymap で定義します。バインディングは文字列で、"up, k" はいずれかのキー、"g g" は順番に押すキー、"ctrl+k" は同時に押すキーを表します。ラベル付きのバインディングは、<KeyHelp>、<KeyHints>、コマンドパレットにも表示されます。
追加：import { useState } from "react";追加：import { Box, KeyHelp, Text, useKeymap } from "@textjs/app";追加：import { DEPLOYMENTS } from "../../lib/deployments";追加：追加：export default function DeploymentsPage() {追加： const [index, setIndex] = useState(0);追加： const [open, setOpen] = useState(false);追加： const move = (by: number) => setIndex((i) => Math.max(0, Math.min(DEPLOYMENTS.length - 1, i + by)));追加：追加： useKeymap({追加： "up, k": { label: "Previous deployment", run: () => move(-1) },追加： "down, j": { label: "Next deployment", run: () => move(1) },追加： enter: { label: "Toggle details", run: () => setOpen((o) => !o) },追加： "g g": { label: "First deployment", run: () => setIndex(0) },追加： });追加：追加： return (追加： <Box className="flex-row grow p-1 gap-2">追加： <Box className="flex-col grow">追加： {DEPLOYMENTS.map((d, i) => (追加： <Box key={d.id} className="flex-row h-1 gap-2 px-1" backgroundColor={i === index ? "selection" : undefined}>追加： <Text>{i === index ? "›" : " "}</Text>追加： <Text bold={i === index} wrap="truncate-end">{d.commit}</Text>追加： </Box>追加： ))}追加： </Box>追加： {open && <Details deployment={DEPLOYMENTS[index]} />}追加： <KeyHelp />追加： </Box>追加： );追加：}現時点では、DEPLOYMENTS は lib/deployments.ts 内の通常の配列です。第6章では、ルートハンドラーを介して取得する形に変更します。
ヘルプオーバーレイ
<KeyHelp /> は ? の入力を監視し、現在有効なラベル付きバインディングをすべてグループ別に表示するモーダルを開きます。コンソールで ? を押し、閉じるには ? または q を押します。モーダル内のバインディングはフォーカスを閉じ込めるため、モーダルを閉じるまで背後のリストは反応しなくなります。
フォーカス
<Input>、<Select>、<Table> などのコンポーネントは、フォーカスがある間だけキー入力を受け取ります。Tab でコンポーネント間のフォーカスを移動でき、useFocus() と useFocusManager() を使えば自分で制御できます。
試す
これは章の終わりに完成するAcme Deploysで、DevToolsで動作しています。パッドをクリックして、以下のキーを使います。
コンソールを開く
アプリはDevToolsに描画されます。まずSafariの「設定」→「詳細」で「Webデベロッパ用の機能を表示」をオンにします。 次にここをクリックして、↓を押します。
デスクトップで開く
このアプリはDevToolsのコンソールに描画されるため、デスクトップブラウザーが必要です。
クイズ
2問すべての問題に回答すると章を完了できます。