javascriptのfunctionを文字列で扱う方法

2021年8月17日

Javascript テクノロジー

eyecatch Javascriptの効率的な使い方を、日々研究している、ユゲタです。 ASPサービスを個人的に作っている時に気がついたんですが、Javascriptライブラリはたくさんありますが、 1つのサービス(機能)で1ライブラリ構成になっているため、比較的大きなくくりでのライブラリがJavascriptの特徴です。 これを、細かな1機能ごとに、ライブラリとして持たせることは、効率的なのか? また、実際にそんなASPを作ったとしたら、ユーザーライクなのか?、開発側で管理しやすいのか? そもそも、実現可能なのか??? という疑問の元、とりあえず、javascriptの関数を文字列として扱って、実行できるようにする方法を見つけたので、備忘録しておきます。

Javascriptのfunctionを文字列に変換する方法

まず、サンプルとして、次のようなプログラムを用意してみました。 function test(){ console.log("test"); this.init(); } test.prototype.init = function(a){ console.log("test-init"); }; これを実行するには、次のようにするだけで、それぞれのconsole.logの値がコンソールに表示されます。 new test(); > test > test-init 普通に、関数をコンソールに表示しようとすると・・・ console.log(test); > ƒ test(){ > console.log("test"); > this.init(); > } 関数内部の文字列が取得できてはいますが、ファンクション記号がついてきて気持ち悪いです。 でも、次のようにすると、いい感じに取得できるます。 console.log(test.toString()); > function test(){ > console.log("test"); > this.init(); > } でも、実はこの段階では、property関数の部分が、取得できておらず、文字列としては、未完成です。 そこで次のようにしてみると、いい感じにprototype関数も全て取得することができます。 function get_func(func){ if(!func){return null;} let prg = func.toString(); for(let prt in func.prototype){ prg += func.name+".prototype."+prt+"="+func.prototype[prt].toString(); } return prg; } $ get_func(test) > "function test(){\n console.log(\"test\");\n this.init();\n}test.prototype.init=function(a){\n console.log(\"test-init\");\n}" 改行もタブもそのまま取得できますが、trimなどを使って、圧縮化してあげると、いい感じのコード文字列jになると思います。

文字列可した関数を実行する方法

次にfunctionから取得した文字列を実行するには、eval関数に入れるだけでもセットできます。 eval("function test(){\n console.log(\"test\");\n this.init();\n}test.prototype.init=function(a){\n console.log(\"test-init\");\n}") new test(); > test > test-init セキュリティの観点から、evalは使わないという方は、Function関数を使って、実行してみることをおすすめします。

文字列関数を使って何ができる?

この文字列を下位互換性をもたせるバージョン管理として、管理して、localStorageなどにキャッシュすれば、 webサイトで、無駄な読み込みの発生しないjavascriptが構成できます。 開発側としては、バージョン管理と、モジュール同士の互換性や、コンフリクト管理をするということで、これまでよりも、大きなプロジェクト対応に対応することが可能になります。 さらにその文字列を暗号化したり圧縮化することで、さらなる効率アップにつながるでしょう。 ここまでのASPサービスを行っているSaaS提供会社って、どのくらい有るんでしょうね? 最近Googleのツールも、JSエラーが出まくっているのは、みんな気がついていないのかしら???

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。