DEV Community

Takaya Kobayashi
Takaya Kobayashi

Posted on

4 1

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

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 だけ書いたら形になるし便利な時代になった。

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay