見出し画像

Google ColabでJavaScript!

donguri

PythonであればGoogle Colabが便利に使えます。(Googleアカウントが必要ですが)このColabですがJavaScriptも実行できるということを最近知り、ちょっと使ってみましたので記録しておきます。

JavaScriptは単独で表示することはできないので、まずは、JavaScriptを使わずにHTMLのみで表示します。

%%html
<h1>Title</h1>
<h2>title</h2>
<p>taro</p>

%%html

と書くことでHTMLを表示させることができます。

表示は

となり、h1,h2タグの違いも表示できています。

JavaScriptを試してみます。

%%javascript
console.log('Hello')

と書いて実行すると開発者ツールのコンソールに出力されます。コンソール出力に関してはブラウザそのものでの処理となるようです。

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)

実行すると、

と出力されるので、"Click to add"を押すと"1. Another item"が追加されます。


おまけ。Colabの使い方が紹介されているサイトです。


この記事が気に入ったらサポートをしてみませんか？