みんなの「作ってみた」

Markdownスクリプト言語インタプリタ actual-code

2018/12/20

erukiti
erukiti
React/TypeScript/VSCodeやメタプロが好きです。元々バックエンドエンジニア経験および、UNIX/Win32ネイティブアプリ開発経験の方がフロントエンド経験より遙かに長いので、フロントエンド初心者です。

erukitiです。ごきげんよう。

個人開発 Advent Calendar 2018の20日目の記事です。もうほぼ21日ですが、まだギリギリ20日です!!!!

先日 Markdown を実行できるツールを作ってみた - Qiita という記事を書いたところですが、それから色々とバージョンアップをしました。

何をするものか?

Markdownのコードブロックをそのままそれぞれの言語として動かすものです。たとえば、JavaScrpitのコードブロックであれば、JavaScript Sandbox (Node.js の VM API)を使って動かします。

現時点ではJavaScript/TypeScript/shell scriptが動きます。

ここまでは、12/10の記事の時点ですでに実装されていたものです。

そのあとGUIモードを追加しました。

デモ動画があるんですが、Qiitaにはそのままだと貼り付けられないようなので https://github.com/erukiti/actual-code の先頭にあるアニメーションGIFをご覧ください。Markdownのコードブロックに記述したコードがリアルタイム動作しています。

モチベーション

大きくわけて2つのモチベーションがあります。

Jupyterの記法が Not for me だったこと

Jupyter Notebookはいいツールだと思いますが、ライン指向だったり、マジックコメントだったり、そういうやり方が好みでは無いこと、僕はVSCodeで開発がしたいことなどがあります。

VSCodeで Markdown を書いて、それが実行出来る方が望ましいと考えこと。これが1つめのモチベーションです。

技術書や技術記事で「実際に動作させたい」

技術書や技術記事を書くときにサンプルコードの取り扱いは得てして面倒なものです。いったん動かしたコードをコピペで原稿のファイルに書く、あるいはプリプロセッサで取り込む。これらはどうしても面倒だし事故が起こりやすいものです。

そこで、原稿に書かれたコードがそのまま動かしたかったこと、これが2つめのモチベーションです。

現代によみがえる文芸的プログラミングのようなものではあります。

過程

元々考えていたこととしては、アプリとかのプロジェクトディレクトリに、記事用のMarkdownファイルを置いて、Markdownにコードの断片を貼り付けることと、それをアップロードできる仕組みを考えていました。

ただ、その考え方だとピンと来ない部分があったんですが、12/10の朝目覚めた時に、今回のアイデアである「Markdownのコードブロックをスクリプトと見なして走らせたらええやん!」というのを思いついたのです。

目指しているもの

今のところまだ始めたばかりでバギーな挙動も多いことと、言語対応がJS/TS/shだけしかできていないので、任意の拡張が出来る仕組みを作るなどを考えています。

それ以外の部分でいうと、新しいブログサービスの立ち上げと、電子書籍を進化させたいと思っています。

新しいブログサービス

actual-code のコマンド一発でアップロードできるサービスを作りたいと思っています。出来れば年内をめどに。

電子書籍を進化させる

既存の電子書籍はどれも不便です。せいぜい検索できたり、ペンでマーキング出来たりする程度のしょうもない機能しか持っていません。

どうせ電子書籍なのだから「コードを実際に走らせられる」電子書籍が理想じゃないですか?