Posted at

inkでターミナルappを作る

More than 1 year has passed since last update.

inkとは、ターミナル上で動くインタラクティブなアプリケーションをReactライクに作ることのできるフレームワークです。

あくまでもReact ライク であって、Reactそのものが動いているわけではありません。

React周辺の知識がある程度あれば、誰でもアプリケーションを作ることができます。

↓こんな感じのものが簡単にできます。(デモ用に作った、なるべくたくさんのコンポーネントを使っただけの無意味なアプリケーションです。GitHubのリポジトリ)

demo

ちなみにreact-ink等の類似モジュールがありますが、それらとは無関係です。

この記事ではinkのREADMEを見ただけでは分かりにくいであろう、環境の作り方等を記します。


手順


0. 新規作成

適当なディレクトリを作り、普通のnpmと同じように yarn init します。

聞かれる各種事項には適当に答えてください。


1. 使用モジュールのインストール

ink本体の他にbabel-cli, babel-core, babel-plugin-transform-react-jsxも必要になるので併せてインストールします。

(厳密には必須ではないですが、ないと不便なので使用を推奨します。)

$ yarn add -D ink babel-cli babel-core babel-plugin-transform-react-jsx

なお、ink自体はコンポーネントとしては小さなライブラリですので、必要に応じで追加コンポーネントをインストールします。詳しくは後述します。


2. babelの設定

inkでは h というプラグマが使用されるため、以下のようにpackage.jsonに追加しておきます。

  "devDependencies": {

~
},
"babel": {
"plugins": [
[
"transform-react-jsx",
{
"pragma": "h",
"useBuiltIns": true
}
]
]
}


3. アプリケーション本体の作成

適当にアプリケーション本体をsrc/index.jsに作るとします。

const { h, render, Component } = require('ink');

class App extends Component {
render() {
return <div>Hello ink</div>;
}
}

render(<App/>);

前述したpragmaの h は一見不要に見えますが、ないと実行時エラーとなります。


4. アプリケーションの実行

最終的にはトランスパイルして出力されたファイルをnodeで実行しますが、開発時にはbabel-nodeで実行した方が便利だと思います。

私の場合はpackage.jsonに以下のようなスクリプトを書いておいて、 yarn ex ですぐに実行できるようにしました。

{

"scripts": {
~
"ex": "./node_modules/.bin/babel-node src/index.js"
},
~
}


ターミナルに"Hello ink"と出力されたら成功です。

ここまでできて、かつReactの知識もあれば後はコンポーネントを作り込んでいくだけです。


その他の特徴とか

(手前味噌ですが、下2つの ink-marquee, ink-flower は私が作りました。)