今年の5月ごろにOSSなJSライブラリとして非同期対応をしたReact Routerを実装して公開しました。
その時の気持ちやモチベーションをまとめたに記事なります。
今まで技術的な勉強をしたとしてもオープンな場にはアップせずにいましたが、一つの挑戦としてJSライブラリの公開まで行いました。
私自身はサーバサイドエンジニア(PHP)なので、フロントエンドはチョットデキル程度です。
そのため、至らないところや「すでに似たライブラリあるよー」など、アドバイスを頂けるとうれしいです！
React Routerの何が不満だったのか
- サーバサイドエンジニアとしてReact Routerの処理の流れが不満でした
- URL変更をキャッチ
- URLにマッチしたViewを表示
- Viewを表示後、APIに問い合わせしてデータをロード
- ローディング画像でロード中をアピール
- ロード完了でStateを更新
- Viewを更新
- やっと完成した画面に！
- 理想の処理はサーバサイドの再現
- URL変更をキャッチ
- APIに問い合わせしてデータをロード
- nprogressでさらっとプログレスバーを表示
- ロード完了でStateを更新
- URLにマッチしたViewを表示
- すでに完成した画面に！
- 理想のサイト
- Next.jsは機能がもりもり過ぎた
- async/awaitで管理できるのはとてもうれしく、これでいいのでは！？と思ったが、SSR前提はつらい
- Next.js v2.0の時に作ったので、変わっているかも。
=> Next.jsライクなReact Routerを作るっきゃない！
できあがったもの
Next.jsライクに非同期処理を扱えるReact Router、その名も「async-react-router」
※Next.jsと比較するとネーミングが地味。
特徴
- Next.jsライクに初期値が取得可能
-
getInitialProps()あります！
-
- async/awaitサポート
- path-to-regexでURLパラメーターをサポート
-
historyでブラウザ履歴をサポート
- Browser History
- Hash History
- Memory History
- SSRサポート
-
rxjs@5.x.xに依存
- async/awaitで管理しているので整合性を保つために導入
- React Routerには非依存
- Reduxやflux-utilsなどのFluxライブラリにも非依存
デモ
4つのデモを作成。
- Basic Example
- Redux Example(Hacker News)
- flux-utils Example(Hacker News)
- SSR ※cloneしないと試せないので、README.mdへのリンク
ものすごく参考にしたリポジトリ
作ってわかったこと
- npmjs.comにアップするのが簡単
-
npm publishと入力して、Enterをッターン!
-
- SaaSと連携すると一人で開発していても寂しくない
-
Travis Cl
- CI環境
-
Coveralls
- テスト
-
Code Climate
- コードの品質チェック
-
David-DM
- 依存パッケージチェック
-
Travis Cl
- SaaSのバッジつけるの楽しい
- OSS感が出てモチベーションがあがる
- デモづくり楽しい
- 普段使わないライブラリをめっちゃ試せる
-
react-scripts便利
- さくっとreactアプリケーション作れる
-
lru-cache便利
- さくっとキャッシュできる
- フロントエンドでもメモリキャッシュが簡単にできて面白い
-
react-scripts便利
- 普段使わないライブラリをめっちゃ試せる
- webpackが難しい
- SSRのデモで、本番環境と開発環境を一つの環境で完結できるように構築してみたが、すごいしんどい。
- 魔改造している感ある。
- 完成形がなかなか見えない。
- 費やした時間が、webpack＞＞＞＞越えられない壁＞＞＞＞ライブラリ実装
- SSRのデモで、本番環境と開発環境を一つの環境で完結できるように構築してみたが、すごいしんどい。
- babel-nodeやbabel registerは本番環境では使ってはいけない
- babel-node: Note that this is not meant for production use.
- babel register: Note that this is not meant for production use.
-
npmのあまり知られてない機能を知れた
-
npm publishでのタグ管理でとてもお世話になりました
-
- READMEを英語で書くのが難しい
- 英語能力の低さを痛感できる
- ライブラリを知らない人に向けて書くので、そもそも日本語でまとめるのも難しい
-
Starがつくとめっちゃうれしい！
課題
- READMEで、Attentionを書いて予防線を張っている
- メンタルが豆腐
- SSRのデモがごり押し
- 動作するけど調整が必要。webpack・・・。
- 本番導入はしていない
- 趣味で作った程度で終わっている。
- undocumentなAPIがある
- 実装に比べてドキュメントへのモチベーションが低い・・・。
まとめ
ダウンロード数やスター数を見てもあまりOSSとして貢献はできていませんが、世の中にOSSなライブラリとして公開するのはとても新鮮で良い経験でした。
versionも1.0までにしたので、最低限の目標にしていた実装まではやりきることができました。
少しずつですがOSSに貢献できるように今後もエンジニアとして頑張っていければと思います。
来年も一年がんばるぞい！