名刺の代わりにCLIアプリを書く

ここ1週間自己紹介用のCLIアプリを書くのが流行ってる。
はじまりはいつものSindre Sorhus。

My new business card pic.twitter.com/koVIsUT5np

— Sindre Sorhus (@sindresorhus) May 10, 2018

nodeが入っていれば

npx sindresorhus

すると自己紹介CLIアプリが起動。

```
$ npx sindresorhus
```https://t.co/QO3ogKmu1d pic.twitter.com/xZdQSzFLAq

— Sindre Sorhus (@sindresorhus) May 9, 2018

基本的には、このレポジトリを適当に書き換えれば簡単にできる。
はじめてのnpmライブラリにちょうどいいかも知れない。

また、使っている技術がちょっとおもしろくて、inkを使っている。
これは何かとCLIのためのReactだ。

普通にReactでCLIを書くことができる。
なお、ｖ０．５がちょっと壊れている雰囲気あってエラーが出るのでv0.4推奨です。

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

class Counter extends Component {
	constructor() {
		super();

		this.state = {
			i: 0
		};
	}

	render() {
		return (
			<Color green>
				{this.state.i} tests passed
			</Color>
		);
	}

	componentDidMount() {
		this.timer = setInterval(() => {
			this.setState({
				i: this.state.i + 1
			});
		}, 100);
	}

	componentWillUnmount() {
		clearInterval(this.timer);
	}
}

render(<Counter/>);

👁 Image

また、本家では、import-jsxを使って実行時にばべっているのだけど、これだとインストールに時間かかるので、普通にバベるのがいいと思う。

それでは、よいCLIライフを。

流行に乗るオタクなのでnpx akamecoつくってしまった https://t.co/CkdYHj2NGA pic.twitter.com/f8kGNT6FKk

— あかめ@社会性.js (@akameco) May 15, 2018