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

Sentry image

Make it make sense

Only the context you need to fix your broken code with Sentry.

Start debugging →

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay