inkとは、ターミナル上で動くインタラクティブなアプリケーションをReactライクに作ることのできるフレームワークです。
あくまでもReact ライク であって、Reactそのものが動いているわけではありません。
React周辺の知識がある程度あれば、誰でもアプリケーションを作ることができます。
↓こんな感じのものが簡単にできます。(デモ用に作った、なるべくたくさんのコンポーネントを使っただけの無意味なアプリケーションです。GitHubのリポジトリ)
ちなみに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の知識もあれば後はコンポーネントを作り込んでいくだけです。
その他の特徴とか
-
componentWillMount等のライフサイクルもReactと同じ -
this.stateやthis.propsもReactと同じ - reduxも使える
- renderに使用できるプリミティブ要素は
<div>,<span>,<br>だけ。divとspanの違いは改行される・されない、程度の認識でOK。("プリミティブ要素"とは便宜的に使っているだけです) - 2017/07/24時点で以下の追加コンポーネントがある。最新はREADMEを参照
(手前味噌ですが、下２つの ink-marquee, ink-flower は私が作りました。)