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

あなたが私と同じで、CLI とターミナル UI に完全に夢中になっているなら、この投稿はあなたのためです!

残念ながら、JavaScript で美しいターミナル UI を構築するネイティブな方法はありません。少なくとも私が知っている方法はありません。これは私自身が直面した問題であり、最終的に私は世にある最も素晴らしい TUI ライブラリの 1 つである Lipgloss を移植することになりました。これは Charm の人々によって作成されました。

信じられない？これをチェックしてください:

素敵ですね?

ここに落とし穴があります: リップグロスは Go で書かれています。普段は Go で作業していますが、最近、Node.js で Web 監視ツールを作成する必要がありました。洗練された美しい UI を手放すつもりはなかったので、気が付くと古典的な開発者チャレンジ モードに入っていました。

コードを深く掘り下げていると、予期せぬ何かがクリックされるような魔法のような瞬間をご存知ですか?こうして私はリップグロスの一部を WebAssembly (Wasm) に移植することになりました。そうして魅力が生まれたのです。

魅力とは何ですか？

Charsm は、Charm CLI Wasm の略称です。クールですよね？これを使用して JavaScript で素晴らしい TUI を構築する方法を詳しく見てみましょう。

---

はじめる

簡単な npm コマンドを使用して charsm をインストールします。

npm install charsm

---

単純なテーブルを作成する

まず、charsm をインポートし、スクリプト内で初期化します。

import { initLip, Lipgloss } from "charsm";

(async function () {
  const ini = await initLip();
})();

initLip 関数は Wasm ファイルをロードし、レンダリングの準備をすべて整えます。表を印刷してみましょう:

const rows = [
  ["Chinese", "您好", "你好"],
  ["Japanese", "こんにちは", "やあ"],
  ["Arabic", "أهلين", "أهلا"],
  ["Russian", "Здравствуйте", "Привет"],
  ["Spanish", "Hola", "¿Qué tal?"],
];

const tabledata = { 
  headers: ["LANGUAGE", "FORMAL", "INFORMAL"], 
  rows: rows 
};

(async function () {
  const ini = await initLip();
  const lip = new Lipgloss();

  const table = lip.newTable({
    data: tabledata,
    table: { border: "rounded", color: "99", width: 100 },
    header: { color: "212", bold: true },
    rows: { even: { color: "246" } },
  });

  console.log(table);
})();

色に 16 進コードを使用することもできます (アウトロの完全な例へのリンクを確認してください)

結果:

シンプルですよね？それでは、リストのレンダリングに進みましょう。

---

リストのレンダリング

現在、単純なリストをレンダリングできます。仕組みは次のとおりです:

const subtle = { Light: "#D9DCCF", Dark: "#383838" };
const special = { Light: "#43BF6D", Dark: "#73F59F" };

const list = lip.List({
  data: ["Grapefruit", "Yuzu", "Citron", "Pomelo", "Kumquat"],
  selected: [],
  listStyle: "alphabet",
  styles: {
    numeratorColor: special.Dark,
    itemColor: subtle.Dark,
    marginRight: 1,
  },
});
const combined = table + "\n\n" + list
console.log(combined);

選択したアイテムのカスタマイズ

選択した項目にカスタム列挙子アイコン (例: ✅) を使用して、さらに派手にしてみましょう:

const customList = lip.List({
  data: ["Grapefruit", "Yuzu", "Citron", "Pomelo", "Kumquat"],
  selected: ["Grapefruit", "Yuzu"],
  listStyle: "custom",
  customEnum: "✅",
  styles: {
    numeratorColor: special.Dark,
    itemColor: subtle.Dark,
    marginRight: 1,
  },
});

console.log(customList);

選択した項目には✅アイコンが表示されます。

---

レンダリングマークダウン

Charsm は、マークダウン レンダリングを処理するために Charm の Glamour ライブラリをラップします。

npm install charsm

---

カスタムスタイル

charsm のスタイルは端末用の CSS と考えてください。独自のスタイルを作成する方法は次のとおりです:

import { initLip, Lipgloss } from "charsm";

(async function () {
  const ini = await initLip();
})();

このスタイルをテキストに適用するには:

const rows = [
  ["Chinese", "您好", "你好"],
  ["Japanese", "こんにちは", "やあ"],
  ["Arabic", "أهلين", "أهلا"],
  ["Russian", "Здравствуйте", "Привет"],
  ["Spanish", "Hola", "¿Qué tal?"],
];

const tabledata = { 
  headers: ["LANGUAGE", "FORMAL", "INFORMAL"], 
  rows: rows 
};

(async function () {
  const ini = await initLip();
  const lip = new Lipgloss();

  const table = lip.newTable({
    data: tabledata,
    table: { border: "rounded", color: "99", width: 100 },
    header: { color: "212", bold: true },
    rows: { even: { color: "246" } },
  });

  console.log(table);
})();

その他のオプションについては、github の Readme を参照してください。さらに良いのは、ここに「完全な」例があることです

レイアウトが必要ですか? Chasm は、単純な flex のようなレイアウトをサポートしています:

const subtle = { Light: "#D9DCCF", Dark: "#383838" };
const special = { Light: "#43BF6D", Dark: "#73F59F" };

const list = lip.List({
  data: ["Grapefruit", "Yuzu", "Citron", "Pomelo", "Kumquat"],
  selected: [],
  listStyle: "alphabet",
  styles: {
    numeratorColor: special.Dark,
    itemColor: subtle.Dark,
    marginRight: 1,
  },
});
const combined = table + "\n\n" + list
console.log(combined);

---

まとめ

これで完成です! charsm を使用すると、テーブル、リスト、マークダウンをレンダリングしたり、カスタム スタイルを作成したりすることができます。すべてターミナル内で行うことができます。ちなみに、リストやマークダウンはテキストであるため、ラップすることもできます

const customList = lip.List({
  data: ["Grapefruit", "Yuzu", "Citron", "Pomelo", "Kumquat"],
  selected: ["Grapefruit", "Yuzu"],
  listStyle: "custom",
  customEnum: "✅",
  styles: {
    numeratorColor: special.Dark,
    itemColor: subtle.Dark,
    marginRight: 1,
  },
});

console.log(customList);

テーブルとリストは、パディングとマージンを備えた枠線で囲まれます!

これはほんの始まりにすぎません。すぐにインタラクティブなコンポーネント (フォームなど) を追加する予定ですので、しばらくお待ちください。 JavaScript で独自の美しいターミナル UI を楽しく実験して構築してください。

乾杯!

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