何を作ったの？
今回自分が作ったライブラリはこちらになります。
このリンクだけだとまだ分からないと思うので説明していこうと思います。
どういうライブラリ？
簡単に言うと従来のconsole.logを改造する様なライブラリです。
まず以下のコードを見てみてください
import log4debug from "log4debug"
log4debug.set(log4debug.defaultTemplate)
console.log("This Package is JavaScript and TypeScript's Logger")
これ普通にログ出力されると思いますよね？
実はこれlog4debug.setをやることによって、console.logが改造されて以下のようにログが出力されるんです。
使い方
大まかな使い方としては以下のようなものがあります。
import log4debug from "log4debug"
log4debug.set(log4debug.defaultTemplate)
log4debug.setClear(3000,"Clear Log",log4debug.defaultFrameTemplate)
console.log("HelloWorld")
console.clear()
// 出力結果
// [2024-1-4:1711017584119][LOG]: HelloWorld
// -------------
// | Clear Log |
// -------------
// 三秒後にログクリア
このように、このライブラリを使う事でconsole.clearとconsole.logの挙動を変えることができます。
※ プラグインや詳しい仕組みについては次項で解説しています。
console.logを変える場合にはlog4debug.setを使います。
引数にはプラグインを設定することができます。
プラグインは右から順番に読み込まれます。
console.clearを変える場合はlog4debug.setClearを使います。
引数には左から順番に
ログをクリアするまでの秒数 - 即時クリアの場合はnull or 0でOK
クリアする前に出力する文字 - 出力する必要がないならnullを代入
上のやつに何のプラグインを適用するか - 何も選択しなければ普通のconsole.log又はlog4debugで選択されたものが使われます。
プラグイン
このライブラリにはプラグインという概念があります。
簡単に言うと、そのライブラリを使う事によって色々なフォーマットでログを出力することができます。
また、仕組み自体は簡単なので、沢山の人にプラグインを作っていただければ幸いです。
※デフォルトでlog4debug.defaultTemplateとlog4debug.defaultFrameTemplateというプラグインが搭載されています。
プラグイン作成方法
まずプラグインは以下のような型を持つ関数にする必要があります。
type options = (content:string) => string
簡単に言うと引数と戻り値が文字列型って事ですね
これをもとに実際にプラグインを組むと、以下のようになります。
import log4debug from "log4debug"
function testPlugin(content:string):string {
return `[TEST]${content}`
}
log4debug.set(testPlugin,log4debug.defaultTemplate)
console.log("This Package is JavaScript and TypeScript's Logger")
ログ出力するとログの最初に[TEST]が含まれていると思います。
このように簡単にプラグインを作る事ができるので、良かったら作ってみてください。
解説
どうしてこのようなライブラリを作ることができたか説明していきます。
コードすべてを説明するわけではないので、詳しく見たい方はGitHubでコードを公開していますので、そちらをご覧ください
このコードの肝になっているのは以下の部分です。(一部抜粋)
type options = (content:string) => string
function set(...func:options[]) {
let newConsole = console.log // console.logをnewConsoleに代入
console.log = (...data: any[]) => { // console.logに新しい関数を代入
let content = data.join(" ")
if (func.length !== 0) for (let i = func.length-1; -1 < i; i--) content = func[i](content)
newConsole(content)
}
}
このコードの内容としてはconsole.logの関数を一度newConsoleという関数に写して、実際のconsole.logにはnewConsoleなどの関数を利用した新しい関数を入れるという感じです。
関連リンク
注意点
何かこの記事や自分のライブラリ等に改善点等ありましたら、コメント欄で優しくご指摘していただけるとさ