javascript内でjsコードを実行するには?2通りの方法を紹介

javascriptは基本的にファイルから読み込んだりPHPとかに直書きする場合がほとんどです。

でも何らかの事情でjsコード側からjsコードを実行したい時もありますよね?

例えば要素を動的に追加して動的にスクリプトを実行するとかの場合、そういうトリッキーな方法が必要になってきます。

そういう訳でここではjsコード内でさらにjsコードを実行する書き方を紹介してきます。

jsコード実行の二通りのやり方

javascript内でさらにjsコードを実行する方法は次の二通り

  • 純粋なjavascriptだけでコード実行
  • jQueryを使ってコード実行

開発の現場だとjQueryを使うことが多いですが、一応このふた通りで説明していきます。

純粋なjavascriptだけでコード実行

まず1つめの方法はライブラリとか使わずにjavascriptの機能だけでコード実行することです。

どうやってやるかというとscriptタグを生成してbody要素にねじ込むだけです。

 

例えば次がスクリプト側でアラート表示するコードを実行するコード例

scriptタグをcreateElemetnで生成 ⇒ その中にコードを入れる ⇒ bodyタグにappendChildで挿入

手順はたったこれだけですごく単純です。

 

コードを見れば分かるのでこれ以上は説明しようがありません(笑)

でもいざやろうとすると中々この方法は思いつきにくいんですよね・・・

jQueryを使ってjsコード実行

次の方法はjQueryを使ってコード実行することです。

今時純粋なjavascriptだけ使うことの方が少ないのでこちらの方が役立つかもしれません。

やることは先ほどと同じでbody要素にscript要素を入れるだけです。

 

例えば次がDOM読み込み時にコードを実行するコード例

さっき紹介したコードをjQuery風に書き直しているだけです。

 

ただコードというのはスクリプト内で文字列として定義しないといけません。

なのでコード中では次のような  \"  とか  \'  みたいなエスケープを忘れないことは注意したいですね。

ここまでのコードまとめ

最後にここまでのコードをもう一度まとめます。

 

まず純粋なjavascriptだけでjsコードを実行する場合のコード例が次の通り

script要素を生成してそこにコードを突っ込むだけです。

ちなみにscript要素を挿入する要素はbodyでなくてもDOM内にある要素ならなんでもOKです。

 

そして次がjQueryからscript要素を生成してコード実行する例

jQueryの機能を使うと少しだけスマートな感じになりますね。

 

という訳で以上がjavascript内でjsコードを実行する方法です。

コード内でコード実行と書くとすごくトリッキーな感じですがやり方はすごく簡単でした。

ではでは($・・)/~~~