PHPでアプリとか作るとき、JavaScriptを埋め込むことってよくありますよね。
もちろんJSファイルを読み込むこともありますが、大抵はPHP内に直に書くことが多いです。
ということでPHPコード内でJavaScriptを呼び出し(出力)する方法についてまとめてみます。
PHP内にJS埋め込みする２つの方法
その方法とは次の２つ
- ヒアドキュメントを使う方法
- PHP閉じタグを使う方法
この２つをいくつかのコード例と一緒に紹介したいと思います。
ヒアドキュメントを使う方法
まず１つめはヒアドキュメントを使ってJSを埋め込む方法
PHPだとおなじみの構文ですがJSの出力にも使えます。
例えば次がヒアドキュメントを使ったJS出力のPHPコード例
|
1 2 3 4 5 6 7 8 9 10 11 |
/** JavaScript出力開始 */ echo <<<EOM <script type="text/javascript"> $(function(){ $('#my_button').on('click', function(){ alert('Button is clicked'); }); }); </script> EOM; /** JavaScript出力終了 */ |
<<<EOM から次の EOM; までの内容がそのまま出力されます。
つまり上のコードだと次のようなJavaScriptが出力されるということ
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(function(){ $('#my_button').on('click', function(){ alert('Button is clicked'); }); }); </script> |
コードをPHP内に書いたままの見た目で一気に出力できるのが便利ですよね。
そしてさらに便利な所は変数を簡単に使えることです。
ヒアドキュメント中では {$変数} のように {} で変数を囲めばその変数が展開されます。
なので次のようにJSコード内に配列などのデータを渡すことも可能
|
1 2 3 4 5 6 7 8 9 10 11 |
/** JS側に渡したい配列 */ $fruits = '["Apple", "Banana", "Cherry"]'; echo <<<EOM <script type="text/javascript"> var fruits = {$fruits}; for(i = 0; i < fruits.length; i++){ console.log(fruits[i]); } </script> EOM; |
上の例のコンソールへの出力は次の通り
|
1 2 3 |
Apple Banana Cherry |
もちろん配列だけなく文字列や数値、真偽値などあらゆるデータを渡すこともできます。
だだし次記事でも書いたようにデータごとに渡し方の作法があるので、単純にデータ展開すればいいという訳でもありません。
普通に展開するだけだとJS側で正しくデータ解釈できないので要注意
PHPの閉じタグを使う方法
PHP内でJSコードを出力する方法の２つめが閉じタグを使う方法
閉じタグというのはPHPの開始を表す <?php に対応する ?> のタグことです。
なので逆に ?> と <?php で囲ってやればそのままHTMLなどを出力できるという訳です。
例えば次が閉じタグを使ったJSコードの出力例
|
1 2 3 4 5 6 7 8 9 10 11 |
/** JavaScriptを出力開始 */ ?> <script type="text/javascript"> $(function(){ $('#my_button').on('click', function(){ alert('Button is clicked'); }); }); </script> <?php /** JavaScriptを出力終了 */ |
上のコードのように ?> から <?php で囲った部分までがJSコードとして出力されて呼び出されます。
それでこの方法はヒアドキュメントとどう違うのか、
ということですが違いはPHPの構文を出力中に書けることです。
例えば次がJSコード出力中にforeach文を使っているコード例
|
1 2 3 4 5 6 7 8 9 10 |
/** JS側に渡したい配列 */ $greetings = ['Good morning', 'Good night', 'Hello', 'Good evening']; ?> <script type="text/javascript"> <?php foreach( $greetings as $greeting ): ?> console.log('<?php echo $greeting; ?>'); <?php endforeach; ?> </script> <?php |
上のコードでいうなら
<?php foreach( $greetings as $greeting ): ?> ～ <?php endforeach; ?>
までの部分がPHPコードです。
その間の内容がループして出力されるのでコンソールへの出力結果はこうなります。
|
1 2 3 4 |
Good morning Good night Hello Good evening |
コンソール出力しているJSコードは１行ですが、PHPループによって実際は４回出力されます。
foreach以外にも xxx(): ～ endxxx; のような構文はいくつかあって、対応しているのは次の４つ
- if(条件式): ～ endif;
- while(ループ式): ～ endwhile;
- for(ループ式): ～ endfor;
- switch(値): ～ endswitch;
基本的で得使われる if、while、for、foreach、switch の５つに対応しているみたいです。(PHP4以上)
これらを使いこなせば長いHTMLやJSコード出力も楽になりそうですね。
ここまでのまとめ
PHPコード内でJavaScriptを埋め込み・呼び出しする方法は次の２つ
- ヒアドキュメントを使う
echo <<<EOM ～ EOM; までのJSコードを出力
- PHP閉じタグを使う
?> ～ <?php までのJSコードを出力
そしてそれぞれの方法は次のような場面で使い分けると便利
- 出力中に変数を展開したいとき
ヒアドキュメントを使う。変数の中身は {$変数} で展開可能
- 出力中にPHP構文を使いたいとき
閉じタグで囲む方法を使う。
<? xxx(式): ?> ～ <?php endxxx; ?> の構文が便利
PHP変数しか展開しないときはヒアドキュメント、変数に加えてPHP構文も使いたいときは閉じタグで囲む方法を使う、というように使い分けると良さそうです。
ということでPHP内でJavaScriptを呼び出す方法についてでした。
