JavaScript フォームで美しいターミナル UI (TUI) を構築する方法!

私は TUI に夢中です。もしかしたらあなたもそうかもしれません!まだの方は、ぜひそうなっていただきたいと思います。楽しいだけでなく、非常に便利だからです!

約 2 か月前、私は Lipgloss を Go から WebAssembly に移植しました。以上、このシリーズの最初の記事でした！私の次の計画はフォームを移植することでしたが、簡単に言えば、一部の機能は WASM に移行できませんでした。ネイティブ機能とランタイム制限により障害が発生したため、私は一歩下がった DLL と SO ファイル (共有ライブラリ) に進みました。そしてついに、フォームが完成しました!

注: JavaScript で共有ライブラリを使用するには、ネイティブ モジュール サポートを備えた Node.js と、C バインディング用の node-gyp が必要です。

最も簡単な方法は? Node.js を再インストールし、セットアップ中にネイティブ モジュール オプションを選択します:

手動インストールをご希望ですか?この README に従ってください。

---

DLL と SO ファイルを使用する理由

これらは WASM に比べてはるかに小さいので、それを利用するためにすべてを書き直すことになるかもしれません!

実際に始める準備ができたら、新しい JavaScript プロジェクトをセットアップし、charsm をインストールします。

pnpm add charsm

---

CLI のフォーム

1. テーマのカスタマイズ

フォームの外観をカスタマイズするには、テーマを使用します:

import { huh } from "charsm";
huh.SetTheme("dracula");

その後定義されるすべてのコンポーネントは、Dracula テーマを使用します。テーマはいつでも上書きできます:

huh.SetTheme("dracula"); 
// Components here use Dracula
huh.SetTheme("Catppuccin");
// Components here use Catppuccin

// Available themes: default, Charm, Base16, Dracula, Catppuccin

---

2. 確認ダイアログを作成します

カスタマイズ可能なはい (肯定) ボタンといいえ (否定) ボタンを備えた簡単な確認ダイアログ:

const m = huh.Confirm("Do you want to proceed?", "Yes", "No");

実行すると、Yes の場合は「1」、No の場合は「0」が返されます。共有ライブラリ内の文字列へのポインタは簡単に返すことができます。

if (m.run() === "1") {
  console.log("User chose the affirmative option");
} else {
  console.log("User chose the negative option");
}

---

3. 入力フィールドを作成します

例 1: 単一入力

検証とプレースホルダーを使用して入力フィールドを定義します:

const i = new huh.NewInput(
  {
    Title: "Username",
    Description: "Enter your name",
    Placeholder: "e.g., John Doe",
    validators: "no_numbers,required", 
  },
  0 // Mode: Single Input
);
i.load();
console.log(i.run());

バリデータはカンマ区切りの文字列として定義されます。たとえば、「no_numbers,required」は、続行する前に入力がすべての条件を満たしていることを確認します。

バリデータには次のものが含まれます:

• 必須
• 電子メール
• no_numbers
• アルファのみ
• no_special_chars

モード:

• 0: 単一行入力
• 1: 複数行のテキスト領域

例 2: 複数行の入力

pnpm add charsm

---

4. 選択コンポーネントを作成します

import { huh } from "charsm";
huh.SetTheme("dracula");

---

5. スピナーを追加

huh.SetTheme("dracula"); 
// Components here use Dracula
huh.SetTheme("Catppuccin");
// Components here use Catppuccin

// Available themes: default, Charm, Base16, Dracula, Catppuccin

---

6. フォームの作成

フォームは複数のグループを保持し、それらを順番にレンダリングできます。以下に例を示します:

const m = huh.Confirm("Do you want to proceed?", "Yes", "No");

フォームからの値は、各コンポーネントの value プロパティに保存されます:

if (m.run() === "1") {
  console.log("User chose the affirmative option");
} else {
  console.log("User chose the negative option");
}

---

Linux ではフォームのバリデータに少しバグがある可能性があります (更新された .so ファイルの構築をスキップしていた可能性があります。おっと!)。興味がある場合、または手を貸したい場合は、これらのリポジトリで最新情報をチェックしてください。さらに良いことに、貢献してください。

• 特徴: 良い最初の問題 – 入力のロード メソッドを削除して、huh.NewInput.

で自動的に呼び出されるようにします。

• うーん、共有ライブラリ コード: 最初の 2 つの良い問題 – 誤った README ドキュメントを修正し、macOS サポート用のビルド ファイルを追加します。

それでは、グループについて話しましょう。次のように複数のグループを作成し、単一のフォームに渡すことができます:

const i = new huh.NewInput(
  {
    Title: "Username",
    Description: "Enter your name",
    Placeholder: "e.g., John Doe",
    validators: "no_numbers,required", 
  },
  0 // Mode: Single Input
);
i.load();
console.log(i.run());

これを実行すると、Huh はグループを交互にレンダリングします:

かなりクールですね? Charm の素晴らしいツールに大感謝です!これは氷山の一角にすぎません。このツールをさらに便利にするために、今後も更新と改良を続けていきます。

完全な例が必要ですか?ターミナルコーヒーショップの建設をご覧ください。

DLL と同じ精神で軽量なものについては、Node.js での Go プロセスのロードに関する私の記事を読んでください。

ブログ向きではない、深く掘り下げたコンテンツに興味がある場合は、開発スキルをレベルアップするために設計された長いシリーズや洗練されていない宝石を思い浮かべてください。Substack で私をフォローしてください。x でも私を見つけることができます。

Substack に関する今後の記事とシリーズ:

• P2P シリーズ: Go でオープンソースのピアツーピア書き込みアプリ (デスクトップおよびモバイル) である Livescribe を構築します。
• カスタム テンプレート エンジン: ゼロから作成します。
• 低レベル Libuv サーバー: カスタム プロトコルとサーバーの構築を調査します。
• Windows Universal Meets WebView: スタイリッシュな支配。
• RAG アプリ: 検索拡張生成の詳細。
• カスタム Node.js C/C モジュール: Node.js を限界まで押し上げます。

読んでいただきありがとうございます。素晴らしい 2025 年になりますように! ?

以上がJavaScript フォームで美しいターミナル UI (TUI) を構築する方法!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。