プログラミングはできあがったものを一気に見せても理解するのが困難です。そのため細かく分けたり、動画を使ったりと様々な手段を講じる必要があります。ちょっとずつ説明することで全体としては難しいことをしていないと理解してもらえます。 そんなプログラミングコードのデモを表現するのに使えるのがGloriousです。

Gloriousの使い方

Gloriousのコード例です。

const code = `const message = "Hello world!";
console.log(message);`;

const highlightedCode = Prism.highlight(
  code,
  Prism.languages.javascript,
  'javascript'
);

gdemo
  .openApp('editor'/{ minHeight: '400px'/windowTitle: 'demo.js' })
  .write(highlightedCode/{ onCompleteDelay: 2000 })
  .openApp('terminal'/{ minHeight: '400px'/promptString: '$' })
  .command('node ./demo')
  .respond('Hello World!')
  .command('')
  .end();

実行すると、以下のようにコードが書かれながら実行されていきます。

Gloriousはライブラリやプログラミング言語などで実際の利用法をインタラクティブに紹介するのに使えそうです。各コマンドとレスポンスを設計する必要があったり、あらかじめコードをハイライト処理しておくと言った手間はありますが、それを行ってあまりある見た目のインパクトが大きいソフトウェアです。

GloriousはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Glorious Demo glorious-codes/glorious-demo: The easiest way to demonstrate your code in action.