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にアクセスすると...
ちゃんといつものが表示された。