15
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScriptでクラス名からクラスを動的に生成する方法

Last updated at Posted at 2018-09-12

クラスオブジェクトからクラス名文字列を取得するのは簡単だが、どうにかしてクラス名文字列からクラスオブジェクトを動的に生成できないだろうかと探し回ってたら意外な方法があった。ずっと見つけられなかったので感動記念に小ネタ投稿する。

とりあえずクラスオブジェクト -> クラス名

主題ではないが、とりあえずご存知のコード。

class->classname
class SampleClass{};

// クラス名(文字列)を取得する方法 その1
let classname1 = SampleClass.name();

//クラス名(文字列)を取得する方法 その2
let obj = new SampleClass();
let classname2 = obj.constructor.name;

クラス名->クラスオブジェクト その1: evalを使う方法(非推奨)

当たり前と言えば当たり前だが、evalを使えばもちろんできる。ただし、evalの利用はそもそも推奨されていないだけではなく、コード実行速度が遅くすることもあるのでオススメはできない。

classname->class(eval)
//クラス名をevalする
let class1 = eval("SampleClass");

//evalを利用して目的が達成できることを確認
let classobj1 = new class1();
classobj1 instanceof SampleClass
> true

クラス名->クラスオブジェクト その2: Functionを使う方法(推奨)

こちらの方法が大本命。MDNのeval解説ページに載っていたのを思い出して、やってみたら大正解。

classname->class(Function)
//Functionを利用してコード評価を実施する関数を作成する
function getClass(classname){return Function('return (' + classname + ')')();}

//作成したgetClassNameにクラス名を渡す
let class2 = getClass("SampleClass");

//Functionを利用して目的が達成できることを確認
let classobj2 = new class2();
classobj2 instanceof SampleClass
> true

まとめ(この小ネタの用途)

オブジェクトのJSON文字列変換時にクラス名を覚えておけば、逆にオブジェクトに戻すときに正しいクラスに戻せそうかな、と思っている。

15
14
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?