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

## はじめに

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

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

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

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

## ある日のこと

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

```javascript

$ 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](https://github.com/chrismendis/inline-svg-register)というものを見つけたのですが、🌟がゼロでした。(今は一個あります。色々勉強になったので私がつけました。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113181/d9ad39de-9ad8-0985-818d-4c60fff69b7f.png)

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


```javascript
$ 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` は[非推奨](https://nodejs.org/api/modules.html#modules_require_extensions)。
    - 非推奨どうしたらいいのか[stackoverflow](https://stackoverflow.com/questions/28884377/better-way-to-require-extensions-with-node-js/61818312#61818312)を見たのですが、ピシャッとくる回答がない。

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

現在の`babel-register` では当然非推奨の対応をしてあるだろう。もしかしたら、`babel-register` での非推奨対応のPRを見つけたら勉強になるかもしれないぞと思って、[babel-registerのコード](https://github.com/babel/babel/blob/master/packages/babel-register/src/node.js#L97-L100)のコードを見に行きました。

📌実際にbabel-registerのコードが差し替えられた時のPRは[こちら](https://github.com/babel/babel/pull/3670)

すると現在では、`require.extensions` が使われておらず、[pirates](https://github.com/ariporad/pirates) というものが使われている事を知りました。

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

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

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

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

## 知識の還元

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

- `inline-svg-register` で `pirates` を使うようにして[PR](https://github.com/chrismendis/inline-svg-register/pull/1)を送りました。
- stackoverflowに回答を書きました。[こちら](https://stackoverflow.com/a/61818312/9434894)

## まとめ

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

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

#### 知識還元フェーズ
- 知見を得るきっかけになった `inline-svg-register` に[PR](https://github.com/chrismendis/inline-svg-register/pull/1)を送った。
- `require.extensions` の代わりに何を使えばいいか困っている人に[回答](https://stackoverflow.com/a/61818312/9434894)を書いた。
- この記事を書いた。

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

以上です。