[[384219]]

フロントエンド コンポーネント コードはブラウザー、モバイル アプリ、またはさまざまなデバイスで直接実行できることは聞いたことがあるかもしれませんが、フロントエンド コンポーネントがコマンド ライン ウィンドウで直接実行され、フロントエンド コードがターミナル ウィンドウの GUI インターフェイスと対話ロジックを構築できるのを見たことがありますか?

今日は、非常に興味深いオープンソースプロジェクト「ink」についてご紹介します。このプロジェクトの目的は、Reactコンポーネントをターミナルウィンドウにレンダリングし、最終的なコマンドラインインターフェースを提供することです。

この記事では、実践的な応用に焦点を当てています。まず基本的な使い方を説明し、その後、実際のシナリオに基づいた実践的なプロジェクトに取り組みます。

第一印象

始めたばかりのときは、時間と労力を節約できるため、公式のスキャフォールディングを使用してプロジェクトを作成することをお勧めします。

 npx作成-ink-app --typescript  

次に、次のコードを実行します。

 Reactをインポートし、{useState、useEffect}を  「反応する」  
インポート { レンダリング, テキスト}から  'インク'   
 
 const カウンター = () => {
 const [ count , setCount] = useState(0)
使用効果(() => {
定数タイマー = setInterval(() => {
 setCount(カウント=> ++カウント)
 }, 100)
戻り値() => {
 clearInterval(タイマー)
 } 
     
 }) 
 
戻る（
 <テキストの色= "緑" >
 { count } 件のテストが合格しました
</テキスト>
 ）
 } 
 
レンダリング(<カウンター />);

次のインターフェースが表示されます。

そして、その数は増え続けています！デモは短いですが、要点を説明するには十分です。

1. まず、これらのテキスト出力は直接コンソール化されるのではなく、React コンポーネントを通じてレンダリングされます。
2. React コンポーネントの状態管理とフック ロジックは、コマンド ライン GUI に配置した場合でも機能します。

言い換えれば、フロントエンドの機能がコマンドラインウィンドウにまで拡張されたということです。これは紛れもなく強力な機能です。Gatsbyのような有名なドキュメント生成ツールやyarn2のようなパッケージ管理ツールは、どちらもこの機能を利用してターミナルGUIを構築しています。

コマンドラインツールプロジェクトの実践

このツールとその用途については既にご存知かもしれませんが、具体的な使い方がまだよくわからないという方もいらっしゃるかもしれません。具体的な例を使って、すぐに使い方に慣れていきましょう。コードリポジトリはGitにアップロードされています。こちらのアドレスからフォークできます：https://github.com/sanyuan0704/ink-copy-command

今からこのプロジェクトを最初から最後まで開発していきます。

プロジェクトの背景

まず、プロジェクトの背景をご説明いたします。TypeScriptのビジネスプロジェクトで、ある問題が発生しました。本番環境では、まずTSCを使ってJS出力コードを取得し、次にWebpackを使ってこれらの出力をバンドルしていました。

しかし、tscがts(x)以外のリソースファイルをアーティファクトディレクトリに移動できなかったため、ビルドプロセス中にエラーが発生しました。その結果、webpackはアーティファクトをバンドルする際に一部のリソースファイルが見つからないことを検出しました。例えば、src/asset/1.pngというパスの画像が存在しましたが、アーティファクトディレクトリdistには存在しませんでした。そのため、webpackがdistディレクトリ内のコードをバンドルする際に、画像が見つからないことが検出され、エラーが発生していました。

解決

それで、これをどうやって解決すればいいのでしょうか?

tsc の機能を拡張するのは明らかに困難です。現時点での最善の方法は、src ディレクトリ以下のすべてのリソースファイルを dist ディレクトリに手動でコピーするスクリプトを作成することです。これにより、リソースが見つからないという問題は解決します。

I. ファイルコピーロジック

解決方法を決定した後、次の TypeScript コードを作成しました。

インポート { join , parse }から  "パス" ;
インポート { fdir }から  'fdir' ;
 fseをインポート  'fs-extra'  
 const staticFiles = 新しい fdir() を待つ
.withFullPaths()
 // node_modules、ts、tsxを除外する
。フィルター（
 (p) =>
 !p.includes( 'node_modules' ) &&
 !p.endsWith( '.ts' ) &&
 !p.endsWith( '.tsx' )
 ）
 // srcディレクトリを検索
.crawl(ソースパス)
 .withPromise() を文字列[]として
 
 Promise を待機します。すべて(staticFiles.map(file => {
 const targetFilePath = file.replace (srcPath、distPath);
 // ディレクトリを作成し、ファイルをコピーする
fse.mkdirp(parse(targetFilePath).dir)を返します。
 . then (() => fse.copyFile(file, distPath))
 ）;
 }))

このコードは、ファイル検索にfdirライブラリを使用しています。これは非常に便利なライブラリで、構文も洗練されているので、どなたにもお勧めします。

このロジックを実行し、リソース ファイルをアーティファクト ディレクトリに正常に移動しました。

問題は解決しましたが、このロジックをカプセル化して他のプロジェクトで再利用しやすくしたり、再利用のために他のプロジェクトに直接提供したりすることはできますか?

そこで、コマンドラインツールを思いつきました。

II. コマンドラインGUIの設定

次に、Reactコンポーネントを使用する`ink`を使ってコマンドラインGUIを構築します。ルートコンポーネントのコードは次のとおりです。

 // index.tsx をインクルードするコードは省略されています
インターフェースAppProps {
ファイルコンシューマー: ファイルコピーコンシューマー
} 
 
定数ACTIVE_TAB_NAME = {
状態: 「実行ステータス」
ログ: 「実行ログ」  
 } 
 
 const App: FC<AppProps> = ({ fileConsumer }) => {
 const [activeTab, setActiveTab] = useState<文字列>(ACTIVE_TAB_NAME.STATE);
 const handleTabChange = (名前) => {
 setActiveTab(名前)
 }
 const WELCOME_TEXT = dedent`
 `ink-copy` コンソールへようこそ！機能の概要は次のとおりです（**Tab** で切り替えます）。
 ` 
 
戻る<>
 <フルスクリーン>
 <ボックス>
 <マークダウン>{WELCOME_TEXT} </マークダウン>
 </ボックス>
 <タブ onChange={handleTabChange}>
 <タブ名={ACTIVE_TAB_NAME.STATE}>{ACTIVE_TAB_NAME.STATE}</タブ>
 <タブ名={ACTIVE_TAB_NAME.LOG}>{ACTIVE_TAB_NAME.LOG}</タブ>
 </タブ>
 <ボックス>
 <ボックス display={ activeTab === ACTIVE_TAB_NAME.STATE ? 'flex' : 'none' }>
 <状態 />
 </ボックス>
 <ボックス display={ activeTab === ACTIVE_TAB_NAME.LOG ? 'flex' : 'none' }>
 <ログ />
 </ボックス>
 </ボックス>
 </フルスクリーン>
 </>
 }; 
 
デフォルトアプリをエクスポートします。

ご覧の通り、これは主に「状態」と「ログ」という2つのコンポーネントで構成されており、それぞれ別のタブに対応しています。具体的なコードについてはリポジトリをご覧ください。以下はスクリーンショットです。

III. GUI で業務状況をリアルタイムに表示するにはどうすればよいですか?

ここで問題が生じます。ファイル操作ロジックが開発され、GUIインターフェースが構築されました。では、この2つをどのように組み合わせれば良いのでしょうか？言い換えれば、GUIでファイル操作のリアルタイムステータスをどのように表示すれば良いのでしょうか？

これに対処するには、これら2つのモジュール間の通信を容易にするサードパーティ製のメカニズムを導入する必要があります。具体的には、ファイル操作ロジック内にEventBusオブジェクトを保持し、このEventBusをContext経由でReactコンポーネントに渡します。これにより、UIとファイル操作モジュール間の通信が可能になります。

ここで、この EventBus オブジェクト、具体的には以下の FileCopyConsumer を開発してみましょう。

エクスポートインターフェースEventData {
種類: 文字列;
ペイロード:任意;
 } 
 
エクスポートクラスFileCopyConsumer { 
 
プライベートコールバック: Function [];
コンストラクター() {
 this.callbacks = []
 }
 // Reactコンポーネントのコールバックを提供します
onEvent(fn:関数) {
 this.callbacks.push(fn);
 }
 // ファイル操作が完了した後に呼び出されます
onDone(イベント: イベントデータ) {
 this.callbacks.forEach(コールバック => コー​​ルバック(イベント))
 }
 }

次に、ファイル操作モジュールとUIモジュールに適切な調整を加える必要があります。まずはファイル操作モジュールを見て、それをカプセル化してみましょう。

エクスポートクラスFileOperator {
ファイルコンシューマー: FileCopyConsumer;
 srcPath: 文字列;
 targetPath: 文字列;
コンストラクター(srcPath ?: 文字列, targetPath ?: 文字列) {
 // EventBusオブジェクトを初期化する
this.fileConsumer = 新しい FileCopyConsumer();
 this.srcPath = srcPath ?? join (process.cwd(), 'src' );
 this.targetPath = targetPath ?? join (process.cwd(), 'dist' );
 } 
 
非同期コピーファイル() {
 // ログ情報を保存する
定数統計 = [];
 // src内のファイルを検索する
const staticFiles = ... 
     
 Promise を待機します。すべて(staticFiles.map(file => {
 // ...
 // ログを保存する
. then (() => stats.push(` [${file}]から[${targetFilePath}]にファイルをコピーしました`));
 }))
 // onDone を呼び出す
this.fileConsumer.onDone({
種類: "仕上げ" 、
ペイロード: 統計
})
 }
 }

FileOperatorを初期化した後、React Contextを介してfileConsumerがコンポーネントに渡されます。これにより、コンポーネントはfileConsumerにアクセスし、コールバック関数をバインドできるようになります。コードデモは以下の通りです。

 // fileConsumer を取得し、コンポーネント内のコールバックをバインドします
エクスポートconst状態: FC<{}> = () => {
 const コンテキスト = useContext(コンテキスト);
 const [終了、setFinish] = useState( false );
コンテキスト?.fileConsumer.onEvent((データ: EventData) => {
 // ファイルのコピーが完了すると、次のロジックが実行されます。
 if (data.kind === 'finish' ) {
 setTimeout(() => {
 setFinish( true )
 }, 2000)
 }
 }) 
 
戻る  
 //(JSXコード)
 }

このようにして、UIとファイル操作ロジックの連携に成功しました。もちろん、スペースの都合上、一部のコードはここには掲載していませんが、完全なコードはGitリポジトリにあります。ぜひフォークして、プロジェクト全体の設計を体験してみてください。

総じて、Reactコンポーネントコードをコマンドラインターミナルで実行できる機能は非常に魅力的で、フロントエンド開発の可能性をさらに広げてくれます。この記事ではこの機能のほんの一部を紹介したに過ぎません。他にも多くの活用方法が見つかるはずですので、ぜひ探索してみてください！