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

はじめに

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

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

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

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

ある日のこと

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

$nodeWelcometoNode.jsv12.7.0.Type".help"formoreinformation.>varsprites=require('./src/assets/svg-sprites.svg')Thrown:/Users/yukihirop/JavaScriptProjects/sample/src/assets/svg-sprites.svg:1<svgwidth="0"height="0"class="hidden"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">^SyntaxError:Unexpectedtoken<>

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

Image may be NSFW.
Clik here to view.

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

$yarn-Daddinline-svg-register$nodeWelcometoNode.jsv12.7.0.Type".help"formoreinformation.>varunhook=require("inline-svg-register")undefined>varsprites=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だけのライブラリーを読んでみるもの面白いかなって思います。

以上です。