![見出し画像](https://assets.st-note.com/production/uploads/images/74337076/rectangle_large_type_2_d9bb9bc57e0cea6b083042673e4b2922.png?width=1200)
Google ColabでJavaScript!
PythonであればGoogle Colabが便利に使えます。(Googleアカウントが必要ですが)このColabですがJavaScriptも実行できるということを最近知り、ちょっと使ってみましたので記録しておきます。
JavaScriptは単独で表示することはできないので、まずは、JavaScriptを使わずにHTMLのみで表示します。
%%html
<h1>Title</h1>
<h2>title</h2>
<p>taro</p>
%%html
と書くことでHTMLを表示させることができます。
表示は
![](https://assets.st-note.com/img/1647409654269-zp7EriZuO3.png?width=1200)
となり、h1,h2タグの違いも表示できています。
JavaScriptを試してみます。
%%javascript
console.log('Hello')
と書いて実行すると開発者ツールのコンソールに出力されます。コンソール出力に関してはブラウザそのものでの処理となるようです。
![](https://assets.st-note.com/img/1647409867218-JfrZ4yjj9D.png?width=1200)
HTMLとの組み合わせで表示させてみます。Pythonでの命令の中でJavaScriptを実行しています。
import IPython
js_code = '''
document.querySelector("#output-area").appendChild(document.createTextNode("hello world!"));
'''
display(IPython.display.Javascript(js_code))
これで"hello world!"と出力されます。
もう少し複雑なもの
import IPython
from google.colab import output
display(IPython.display.HTML('''
The items:
<br><ol id="items"></ol>
<button id='button'>Click to add</button>
<script>
document.querySelector('#button').onclick = () => {
google.colab.kernel.invokeFunction('notebook.AddListItem', [], {});
};
</script>
'''))
def add_list_item():
# Use redirect_to_element to direct the elements which are being written.
with output.redirect_to_element('#items'):
# Use display to add items which will be persisted on notebook reload.
display(IPython.display.HTML('<li> Another item</li>'))
output.register_callback('notebook.AddListItem', add_list_item)
実行すると、
![](https://assets.st-note.com/img/1647695398390-fQiFwMYxQz.png)
と出力されるので、"Click to add"を押すと"1. Another item"が追加されます。
おまけ。Colabの使い方が紹介されているサイトです。
この記事が気に入ったらサポートをしてみませんか?