Reactでnpmの依存モジュールのホームページを開くための簡単なSPA作った。

dpndon.ioというものを作った
現在はgithub pagesでホストしている。

作ったもの

unpkg.comというcdnから、package.jsonを取得し、依存関係にあるモジュールを列挙するというもの。
unpkg.comはnpm registoryと同様の内容を配信している。
最初はnpm registoryからpackage.jsonやらをfetchしてこようと思ってたのだけれど、CORSを許可していないために、ブラウザからfetchできなかった。
ブラウザのみで動作し、ページを配信するHTTPサーバだけがあれば動作するというものにしたかったから、unpkg.comを代替として使った。

作った動機

node.jsで開発を始めたこともあり、ES6の知識がついたのでフロントエンドのフレームワークを嗜むことにした。
なにつくろっかと考えた時、そもそも、npmやら使ってJSで開発してると依存モジュールめっちゃ増えるよね。っていう課題があった。
そんで、ローカルでそれらの公式サイトとかのリンク集みたいなページ配信するサーバとか立てたらめっちゃ捗るんじゃねと思った。
どうやろっかなと考えた時、package.json使えばできるんじゃねと思った。

いろいろ試した結果として、とりあえずpackage.jsonとネットワークがあれば、必要な情報を集めることはできることがわかった。
現在のようにWebで公開している限りには、ローカルのプロジェクトの依存モジュールは閲覧できないけど、ローカルでサーバ立てればできると思う。

今後やりたいこと

  • ローカルで動作するプロジェクトの依存関係モジュールを列挙するツールとしても使えるようにする
    • プロジェクト依存関係に追加して、ルートのパッケージJSONを取得して生成したページを配信するサーバ立てる
    • Electronでネイティブアプリとして作る。
      • 組み込みのブラウザ
      • ローカルや、npm上のプロジェクトのpackage.jsonのアドレスを保存する。
  • 独自ドメインを取得して、そこから配信する
    • 広告を表示する

Reactを使ってみた所感

React使うことにしたのは3年遅れで魂が震えたからなんだけど、Reactは実際かなりシンプルで使いやすい。
すでにHTML/CSSの知識があって、ES6がわかって、create-react-appもある今なら1日で覚えられると思う。
ただし、Reduxなんかを導入すると簡単に精神が暗黒面に落ちるので、そこが分厚い壁。
あと、create-react-appから卒業する方法がわからない。
とりあえず今後はその辺と、FacebookつながりでJestとFlowあたりを覚えたい。