BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Ink 3を備えたインタラクティブターミナルアプリ - 新しい組み込みフック、Suspense、React Dev Toolのサポート

Ink 3を備えたインタラクティブターミナルアプリ - 新しい組み込みフック、Suspense、React Dev Toolのサポート

原文(投稿日:2020/08/05)へのリンク

Inkは、インタラクティブなコマンドラインアプリ用のReactレンダラーだが、最近、ターミナルでのフォーカスとストリーム管理(stdinなど)を向上させる新しい組み込みフックを備えたバージョン3を発表した。開発者は、React開発ツールを活用して、Inkアプリのアウトプットを検査できる。Ink 3ではコンポーネントも更新され、それによって、CLIのスタイリング、組み込みのエラーハンドラーとログのインターセプトが改善され、そして、その他のパフォーマンスと安定性が向上した。

Ink 3は、インタラクティブなコマンドラインアプリの開発者に対して7つの新しいフックを提供する。useInputは、ユーザが何かを入力したときに各文字に対して呼び出されるコールバックを使用してユーザ入力を処理する。useAppは、アプリを手動で終了する(unmount)メソッドを提供する。useStdinuseStdoutuseStderrを使用すると、stdinstdoutstderrストリームに直接アクセスできる。useFocusフックを使用するコンポーネントは、Inkがそのフォーカスが持つため、ユーザがTabキーを押すと、Inkはフォーカスをこのコンポーネントに切り替える。useFocusフックを実行するコンポーネントが複数ある場合、レンダリングされる順序でこれらのコンポーネントにフォーカスが与えられる。useFocusManagerは、すべてのコンポーネントに対するフォーカス管理を有効または無効にするメソッドや、フォーカスを次のコンポーネントまたは前のコンポーネントに手動で切り替えるメソッドを提供する。

InkはReact Devtoolsをデフォルトでサポートする。開発者は、Inkアプリの出力を検査し、コンポーネントのプロパティを手動で変更し、CLIを再起動することなく、その場で更新を確認できる。

dev tool integration with Ink screenshot
(Source: release note)

Ink 3は、<Color>コンポーネントのすべての機能を<Text>コンポーネントにマージし、テキストコンテンツの色の宣言を簡素化した。次のコードを例に挙げる。

<Color red>
  <Text bold>Hello World</Text>
</Color>

Ink3では次のように置き換えられる。

<Text bold color="red">
 Hello World
</Text>

開発者は、HEXまたはRGBカラーを使用できる(ターゲット端末がサポートしている場合)。

<Text  color="green">Green</Text>
<Text  color="#005cc5">Blue</Text>
<Text  color="rgb(232, 131, 136)">Red</Text>

開発者は、backgroundColorプロパティを使用してカラフルな背景を設定することもできる。

<Text  color="black"  backgroundColor="green">
 Black on Green
</Text>

Ink 3のボックスは、7つの異なるボーダースタイルを持つことができる。

Ink 3's 7 border styles

Ink3は、グローバルなReactエラーバウンダリを使用してReactのエラーメッセージもインターセプトする。Ink 3は、インターセプトしたエラーメッセージとスタックトレースを読みやすい形式で表示し、関連情報のみを保持する。Ink 3は、consoleメソッド(console.errorなど)の呼び出しもインターセプトし、ログがターミナルアプリのUIの上に正しく表示され、相互に干渉しないようにする。

Ink 3では、パフォーマンスと安定性がさらに向上する。Inkは、ターミナルのサイズが変更されると、再レンダリングする。そして、リファクタリングによってコードベースがTypeScriptになりReact Suspenseをサポートする。Ink 3は、FlexBoxサポートのレンダリングのバグと不整合を修正している。そして、Gatsby、TerraformtapPrismaShopifyNew York Timesなどのユーザから受け取ったフィードバックを取り入れている。

Ink 3の完全なリリースノートはオンラインでアクセスできる。Ink.jsは、MITオープンソースライセンスの下で利用できる。GitHubパッケージを介したコントリビューションは歓迎する。

この記事に星をつける

おすすめ度
スタイル

BT