JSライブラリを1日1つ紹介する
1日1つJSのライブラリを調べます。
① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する
本日は、react-router-domのドキュメントを読んで実際に業務で使っているところを調べました。
実際に使ってみる
create-react-appで適当なアプリを作成します。
Installationの通りにインストールして動かします。
npm install react-router-dom
App.jsに1st Example: Basic Routingで書いてあるコードを貼り付けます。
ルーティングができてる...！
react-router-domを使うと、サーバーとの通信なしでルーティングを変えることができるとわかりました。
react-router-domと似たライブラリで、react-routerというライブラリもあるんですね。（Quiitaを読んでもイマイチ違いがわからず。）
qiita.com
react-router-domを使うと、サーバーとの通信が不要になるのでより複雑なSPAが作れそうですね！
3行以内でまとめる
react-router-domを導入すると、
- サーバーとの通信なしでルーティングを作成できる。
フィードバック
- react-router-domと似たライブラリで、react-routerというライブラリもある
react-router は react-router-dom と別のものというよりは、react-router-dom でも使えるようになっている、といったほうが正しいかもしれません。以下のファイルを見るとわかりやすいですが、react-router から import したものをそのまま export しています。ざっくりいうとブラウザのAPIを使っているものは react-router-dom のほうに実装されていて、ブラウザのAPIに依存しておらず、react-router-dom や react-router-native で再利用できる実装は react-router に実装されています。
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/index.js
reacr-router の Router の実装には以下の5つがありますが、このうちブラウザのAPIを使うのは BrowserRouter, HashRouter のふたつなので、その二つは reacr-router-dom にあります。NativeRouter は Native 用の実装なので react-router-native にあります。それ以外は react-router のなかに実装がある、とそんな風になっています。
BrowserRouter https://reacttraining.com/react-router/web/api/BrowserRouter
HashRouter https://reacttraining.com/react-router/web/api/HashRouter
MemoryRouter https://reacttraining.com/react-router/web/api/MemoryRouter
NativeRouter https://reacttraining.com/react-router/native/api/NativeRouter
StaticRouter https://reacttraining.com/react-router/web/api/StaticRouter
react-router のやっていることを単純化すると history として渡された object （これは実際なんでもいい）の変更を Listen して Component を出し分ける仕組み、になっているんですね。
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Router.js#L31-L37
で、例えば BrowserRouter だとその history の変更のトリガーがブラウザから通知される、ということなのです。（間違っていたらごめんなさい）
https://github.com/ReactTraining/history/blob/master/modules/createBrowserHistory.js#L269-L279
このブラウザのAPIは History API というものなので、こちらも確認しておくと少し理解が進むと思います。
https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history
- 私がライブラリを使うだけでなく考察が少ないことに悩んでいることに対して
ドキュメントとか読むときにPhilosophyとかMotivation、Back Storyとか書かれている章やページがあったら、ぜひ時間とって読んでみてください。その作者がどういうモチベーションでそのライブラリを作ったのか、なにができてなにができないのか、他の似たライブラリと比べて優れている点はなにか、などなど、勉強になることがたくさん書かれていますし、そのライブラリの思想を知る、というのはそのライブラリとうまく付き合う上で重要なことだと思います。
https://reacttraining.com/react-router/web/guides/philosophy
そういえばRuby on RailsにもDoctrine(教義)がありますね。こちらは読んでみたことがなければぜひ読んでみてください。
https://rubyonrails.org/doctrine/
PhilosophyといえばUNIX哲学を外すわけにはいかないのでご存知かもしれませんがWikipedia置いておきますね。「UNIXという考え方」という書籍もあるので、もし読んだことがなければ読んでみると楽しいかもしれません。
https://ja.wikipedia.org/wiki/UNIX%E5%93%B2%E5%AD%A6
以上です！
