GitHub 上のソースコードの一部を Gist のように埋め込む Cloudflare Workers

本記事は Cloudflare Advent Calendar 2024 25日目の記事だ。
空いていたので埋めちゃおう。

TL;DR

gist-it が動かなくなっちゃったので、 Cloudflare Workers で実装してみた話

ブログに GitHub 上のコードを埋め込みたい

ブログでコードの解説記事を書いていると、 GitHub 上のコードの一部を GitHub Gist のように埋め込んで表示したくなることがよくある。

以前は Gist-It というサービスを利用させていただいていたのだが、 ホストしている Google App Engine で Python 2.7 がサ終した 1 せいか、動作しなくなってしまっている。

欲しい機能は、処理内容は GitHub のソースコード取ってきて、 <pre> タグに書き込んでシンタックスハイライトを適用するような、割と単純でステートレスなもの。
このため、 Cloudflare Workers で実装してみた。

使い方

続きを読む

TypeScript の async/await を Electron で使ってみる

TypeScript とは、 いわゆる altJS のひとつで、 ECMAScript (JavaScript) に静的型付けを加えたスーパーセットとなるプログラミング言語だ。
この TypeScript には、 ES6 (ECMAScript 6, Harmony) 相当のコードから ES5, ES3 にコンパイル (トランスパイル) する機能のほか、 ES7 で予定されている一部の機能を先取りし ES6 にコンパイルして使用することもできる。

そんな時代を先取りした機能の一つが "async/await" だ。

"async/await" とは 2012年に C# 5.0 とともに登場した記述方法で、 これを使うと、 非同期な処理を コールバック地獄にならず、 あたかも同期的な処理のように書くことができる。
同様の記述が、最近 Python 3.5 でもサポートされ、これからの非同期処理のスタンダードとなるだろう。

しかし、 TypeScript で async/await を使うには コンパイル後の ECMAScript の実行環境が ES6 をサポートしていなくてはならない。
現行のブラウザのシェアを考えると、 ES6 をサポートしないブラウザ (主に IE, Safari だが) を切り捨てる選択肢はちょっと厳しい。

一方でサーバサイド JavaScript として有名な node.js では、最近になって組織の変更のおかげで開発が活発化し、 ES6 のサポートが入ってきている。
しかし、 node.js はサーバサイドの技術。 クライアントアプリで使えた方がいろいろな用途で使えて夢が広がる気がする。

そこで Electron ですよ。

Electron (旧 Atom-Shell) とは、 Chromium の HTML5 と node.js の技術を使って、クロスプラットフォームのデスクトップアプリを作れるアプリケーションエンジンだ。

JavaScript エンジンごと中に内包しているため、 OS や インストールされたブラウザのバージョンを一切気にせずに HTML5 アプリケーションが作れるという、 IE に苦しめられている諸兄には夢のような技術 (?) だ。
Slack のデスクトップクライアントや、Visual Studio Code なんかも、 Electron を使って作られている。

そしてこの Electron は node.js の技術を使っていると述べたとおり、 ES6 がつかえるではないか!

…ということで、 Electron + TypeScript で async/await を使ってみようと思う。

続きを読む