DEV Community

Takaya Kobayashi
Takaya Kobayashi

Posted on

ランダムに色を表示するだけのサービスをつくった

https://color.kbys.tk/

野暮用でランダムな色がちょいちょい必要になったのでサクッと作ろうとおもった。

最近 unpkg.com という CDN を知って、ここでは npm に登録されているパッケージとバージョンを指定するとファイルが配信されるようになっている。面白いのが ?module を付けると ES modules に対応したかたちにトランスパイルされて送られてくるところ。

例えば https://unpkg.com/@angular/router@4.3.5/@angular/router.es5.js?module だと

// ...
import { BehaviorSubject } from 'https://unpkg.com/rxjs@^5.0.1/BehaviorSubject?module';
import { Subject } from 'https://unpkg.com/rxjs@^5.0.1/Subject?module';
import { from } from 'https://unpkg.com/rxjs@^5.0.1/observable/from?module';
import { of } from 'https://unpkg.com/rxjs@^5.0.1/observable/of?module';
import { concatMap } from 'https://unpkg.com/rxjs@^5.0.1/operator/concatMap?module';
import { every } from 'https://unpkg.com/rxjs@^5.0.1/operator/every?module';
// ...
Enter fullscreen mode Exit fullscreen mode

というような感じで import 句のあとも unpkg.com にリライトされている。これを使って、手元でビルドせずにアプリを作ってみようとしたのだが、CommonJS で依存が書かれていると解決できないようで、自分好みのミニマルなライブラリは使えなかった。残念。

そこで、どうしようか迷った結果 preact-cli でパパッと雛形を作ってパパッと Netlify にデプロイした。

特に大層なことはしてなくて、素直に JS と CSS だけ書いたら形になるし便利な時代になった。

Top comments (0)