GitHubでindex.jsだけのライブラリーを使った学習法

はじめに

ある程度プログラミングできるようになったけど、レベルを上げるためにどうやって勉強したらいいのかわからない人向けの勉強法です。

何か困った時、プログラマーならまずライブラリーを探すかと思います。

探したライブラリーのGitHubにコードを見に行った時に⭐️がゼロだったらスルーしてしまうかもしれないですが それは非常にもったいないです。

具体的にどういう風にもったいないか説明します。

ある日のこと

.svgなファイルをrequireしたらどうなるのかなって思ってreuqireしたらエラーになりました。

$ node
Welcome to Node.js v12.7.0.
Type ".help" for more information.
> var sprites = require('./src/assets/svg-sprites.svg')
Thrown:
/Users/yukihirop/JavaScriptProjects/sample/src/assets/svg-sprites.svg:1
<svg width="0" height="0" class="hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
^

SyntaxError: Unexpected token <
>

なんか読み込めるようにするライブラリーないか探したところ、 inline-svg-registerというものを見つけたのですが、🌟がゼロでした。(今は一個あります。色々勉強になったので私がつけました。)

「星ないのかー...」って思ったのですが、使い方はシンプルなので使ってみました。

$ yarn -D add inline-svg-register
$ node
Welcome to Node.js v12.7.0.
Type ".help" for more information.
> var unhook = require("inline-svg-register")
undefined
> var sprites = require("./src/assets/svg-sprites.svg")
undefined
> sprites
'<svg width="0" height="0" class="hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <!-- yukihirop -->

エラーも起きずに文字列で出力されるようになりました。

知識の獲得

すぐに仕組みが気になりました。 100行程度の index.js しかないしコード見てみるかと思って見たら、ラッキーな事に babel-register のコードを参考にして作ったとあったので読んで見ました。

そこで以下の知識を得ました。

• nodeの require は require.extensions という関数を使って、拡張子で判定してコンパイルできる。
  • だが、require.extensions は非推奨。
  • 非推奨どうしたらいいのかstackoverflowを見たのですが、ピシャッとくる回答がない。

するとすぐに次のような興味が湧きました。

現在のbabel-register では当然非推奨の対応をしてあるだろう。もしかしたら、babel-register での非推奨対応のPRを見つけたら勉強になるかもしれないぞと思って、babel-registerのコードのコードを見に行きました。

📌実際にbabel-registerのコードが差し替えられた時のPRはこちら

すると現在では、require.extensions が使われておらず、pirates というものが使われている事を知りました。

pirates って何だろうって思ってコードを見に行ったらこれまたラッキーな事に index.js しかなく100行程度だったので読んでみました。

そこで以下の知識を得ました。

• nodeのビルトインModuleのModule._extensions をうまく使って拡張子で判定してコンパイルできるようにしている事を知りました。
  • ビルトインモジュールに機能拡張しているライブラリーを見たのは初めてでした。新鮮でした。

使い方が簡単だったので、すぐに inline-svg-register のコードに還元してやろうと思いました。

知識の還元

得た知識はすぐに使ったほうが定着がいいと思ったのですぐに知識の還元を行いました。

• inline-svg-register で pirates を使うようにしてPRを送りました。
• stackoverflowに回答を書きました。こちら

まとめ

「svgファイルをrequireで読み込んで見たい」って思っただけで思わぬ収穫がありました。

知識獲得フェーズ

• babel-register というコードが何をするのか想像ができた。
• require.extensions という関数で拡張子毎にコンパイルを変えれるが非推奨である。
• require.extensions の代わりに pirates というライブラリーが使われているようである。

知識還元フェーズ

• 知見を得るきっかけになった inline-svg-register にPRを送った。
• require.extensions の代わりに何を使えばいいか困っている人に回答を書いた。
• この記事を書いた。

いつもこんなラッキーが続くとは思いませんが、たまには index.js だけのライブラリーを読んでみるもの面白いかなって思います。

以上です。