TL;DR

セルにそれぞれこう入力して実行。

!npx create-react-app myapp

from google.colab import output
output.serve_kernel_port_as_window(3000, path="")

!cd MyApp && npm start

三番目のセルを実行中、二番目のセルの出力のURLにアクセスするとReactが立ち上がっている。

本編

Google Colaboratoryというのをご存知だろうか。簡単に言うと、Googleが提供する機械学習の教育・研究用のサイトだ。しかも無料である。Pythonユーザにはお馴染みのJupyter labのWeb版のようなものである。

さて、このColabだが、Linuxコマンドを実行する機能がある。

!pip install pygame
!gcc hello.c -o hello && ./hello

みたいに頭に!をつければよい。なければapt installすればいいのだ。

ここで思いついてしまった。create-react-appとかも動くんじゃね？

セルにこう入力する。（npmは最初から使えた）

!npx create-react-app myapp

動くのかよ。
ちゃんと「Happy Hacking!」が表示された。正直予想外だった。

ここであせってnpm startなんてしてはいけない。これで立ち上がるのはColab上のlocalhost:3000であり、我々のPCのそれには何ら影響がない。つまり、起動ページを見ることができないのである。

こちらの記事の方法を使わせてもらった。

from google.colab import output
output.serve_kernel_port_as_window(3000, path="")

この下に出てきたURLに、npm startの結果が出てくる。

!cd myapp && npm start

セルでコマンドを実行するときは常にルートから始まるようなので、cdしてから鯖立てする。先程のURLにアクセスすると...

ちゃんといつものが表示された。