🏖️

プログラミング言語をすぐに試せる「プレイグラウンド」おすすめ。6選

2024/04/04に公開

Intro

https://www.publickey1.jp/blog/24/2024.html

新しいプログラミング言語やライブラリ、フレームワークを学ぶには、実際にそれらを試して挙動などを見てみることが大事ですが、実行環境を用意するのは手間がかかります。
そこで役立つのが、いわゆる「プレイグラウンド」と呼ばれる、Webブラウザでプログラミング言語やライブラリ、フレームワークをすぐに試すことができるサービスです。
主要なプログラミング言語の公式サイトには、実際にその言語をすぐに試せるプレイグラウンドが用意されていることも多く、また公式サイト以外にもネット上にはさまざまなプレイグラウンドがあります。
プレイグラウンドを使えば、気軽にいろんなプログラミング言語やライブラリ、フレームワークを試せます。
この記事ではそうしたプレイグラウンドをまとめてみました。ここで紹介したプレイグラウンドの他にも、あなたのお気に入りのプレイグラウンドがあればX/Twitterやブックマークのコメント、メールなどで教えてください。

私のお気に入りのプレイグラウンドが掲載されていなかったので、6つのプレイグラウンドを紹介していきたいと思います。

Playground

私がPlaygroundを使うときは、以下の点に注目しています。

  • 永続的なShare URLを生成したくない
    • ShareするコンテンツをGitやウェブサイトにまとめたいため
    • プライベートなコードをパブリックにしたくないため
    • パブリックにした場合、コンテンツに有効期限を設けたいため
  • デザインがよい
    • Playgroundはエディタ+αで成り立っているため
  • スマートフォンでも使える
    • PCと表示項目の乖離がないと嬉しい

対応言語と簡単な紹介、メリットとデメリットを何となくで書いていきたいと思います。

LeetCode Playground

https://leetcode.com/playground/new/empty

対応言語:C, C++, C#, Java, Scala, Kotlin, JavaScript, TypeScript, Dart, Bash, Python, Ruby, PHP, Go, Rust, Swift, Racket, Erlang, Elixirほか

LeetCodeはアルゴリズムの問題を解いてランクを上げたり就活のコーディング面接で出題される問題の学習を行えるサイトなのですが、Problemでも使われる結構ハイスペックなPlaygroundが専用ページで公開されています。
leetcode.comからアクセスした場合は途中Linked List, Binary Tree, Fibonacciのコードを紹介しているセクションを確認できると思いますが、その近くに"Create Playground"というリンクがありそこからPlaygroundページへアクセスすることができます。
私は後述するGitpodを使うようになるまで長いこと使っていましたし、今でも使用頻度は高いです。
なお、Playgroundページには選択肢がありませんが、ProblemではいくつかのSQLも提供しているようです。

https://support.leetcode.com/hc/en-us/articles/360011833974-What-are-the-environments-for-the-programming-languages

メリット

  • 様々なプログラミング言語、ランタイムが使える
  • 最新のOS(Ubuntu)、プログラム言語、ランタイムが使える
  • CodeMirrorエディタのキーボードショートカットが使える
    • エディタのテーマカラーを変更できる
    • VimとEmacsのキーバインドが使える
  • BashからLinuxコマンドが使える
  • stdinの入力フォームがあるので簡単にinputを渡せる
    • Python3でprint(input())書いてHello, World!をstdinに入れてみよう

デメリット

  • 出力がインタラクティブではないので一部Bashコマンドが使えない
  • ネットワーク通信もできないのでcurlやwgetも使えない
  • パッケージをインストールできないし、ファイルの書き込みもできない

CodePan

https://codepan-egoist.vercel.app/

対応言語:HTML/CSS/JavaScript, Less, Sass, Stylus, TypeScript, CoffeeScript

名前と機能が完全にCodePenのパクリになっていますが、CodePenとは異なりオープンソースで、オフラインでも使える非常にシンプルなWebページのPlaygroundです。
作者はEGOISTさんです。
EGOISTさんは独自ドメインを取得していくつかのWebツールを公開していたのですが、ドメインを変えた際、このCodePanは新しいドメインへ移行されませんでした。
なのでGitHubのリポジトリページで紹介している独自ドメインのCodePanへアクセスすると変なサイトへリダイレクトされます。
コミットログを見るとVercelで公開されていることが分かるので、codepan-egoist.vercel.appからアクセスしましょう。

https://github.com/egoist/codepan/commit/37828d7596062eed5ec9272077989e976540fd6f#commitcomment-74670992

メリット

  • PWAでインストールできる
  • index.htmlを保存しなくても簡単にHTMLとCSSを書いて、結果を表示できる
  • DevToolsのConsoleを開かなくても簡単にJavaScriptを書いて、結果を出力できる
  • Hot Reload(Auto-run)がデフォルトでオンなので、書いてすぐ結果を出力できる
  • ReactやVueなどフロントエンドで完結するフレームワークが使える
  • CodeMirrorエディタのキーボードショートカットが使える
  • フロントエンドフレームワークのテンプレートが用意されている
  • GitHub Gistと連携できる
  • HTMLのかわりにMarkdownとPugが使える
  • SassなどのaltCSSが簡単に使える
  • TypeScriptなどのaltJavaScriptが簡単に使える

デメリット

  • HTML/(alt)CSS/(alt)JavaScriptしか書けない
  • AngularやSvelteなど、Node.jsでビルドが必要なフロントエンドフレームワークは使えない
  • パッケージをインストールできないし、ファイルの書き込みもできない
  • 長らく更新されていないので使い続けてよいか不安
    • 謎の技術で動いているのでセキュリティが心配
  • フロントエンドフレームワークのテンプレートも古い
  • JavaScriptのPlaygroundは非常に多く、TypeScript公式のTS Playgroundで型安全に書ける
    • TypeScriptだけ書きたいのであればTS Playground使った方が良い

Sqlime

https://sqlime.org/

対応言語:SQLite

Sqlimeは非常にシンプルなSQLiteのPlaygroundです。
内部では便利なSQLiteのExtensionをまとめてセットにしたsqleanとSQLite WASMを組み合わせたsqlean.jsを使用しており、ウェブサイト含めすべてオープンソースで公開しています。
シンプルながら必要最低限の機能とスマートフォンでも使いやすい操作性が素晴らしいので、ローカル環境でSQLite3が使えない時に使ったりしています。

メリット

  • SQLite3をインストールしなくても簡単にSQLを書いて、結果を出力できる
  • SQLiteファイルを開いてテーブル表示できる
    • そのままSQLも実行できる
  • crypto, text, uuidなどExtensionでしか使えない関数が使える
  • GitHub Gistと連携できる

デメリット

  • SQLiteしか書けない
  • エディタがコード用ではないのでキーバインドが使えない
  • .helpのようなSQLiteのコマンドが使えない
  • プログラミング言語のPlaygroundと比べて使用する機会が少ない
    • SQLite3自体簡単にローカル環境で使用できるので
  • SQLite3公式のSQLite3 Fiddleが多機能でSQLiteのコマンドも使える
    • スマートフォンで使わないのであればこっちを使った方が良い

Colaboratory

https://colab.research.google.com/

対応言語:Python

生成AIの爆発的普及ですっかり有名になったGoogle Colaboratoryですが、10年ぐらい前から存在しており、完成度の高いPlaygroundとしてプログラミング初心者にうってつけの存在として一定の知名度がありました。
10年間でTPUが使えるようになったりGPUの性能が上がったりしましたが、CPUだけを使いPythonを簡単に動かせる使いやすさはそのままですので、まだ使ったことのない人はぜひ使ってみてください。

メリット

  • PythonやJupyter Notebookを簡単に動かせる
  • Markdownも書ける
  • 特殊な記法でLinuxコマンドが使える
  • GPUに適した生成AIが使える
  • *.googleusercontent.comドメインでFlaskなど動かせる
    • from google.colab.output import eval_jsを使えばいける
  • 様々な入力フォームを作れるので簡単にinputを渡せる
  • 様々なパッケージツールが使える
    • FFmpegが使えるため画像や音声を変換できる
  • インストールしなくても様々なPythonパッケージが使える
    • RequestsとBeautifulSoupが使えるので簡単にWebスクレイピングできる
  • パッケージマネージャーのpipが使えるので様々なPythonパッケージをインストールできる

デメリット

  • Googleアカウント必須
  • 変なスクリプトを走らせて万が一Googleアカウントが凍結すると全てが終わる
  • エディタが独特なので使い慣れたキーバインドが使えない
  • しばらく操作しないと自動的に止まる
  • GPUには使用制限がある

Glitch

https://glitch.com/

対応言語:HTML/CSS/JavaScript, Bash, Python, Ruby, SQLiteほか

少し前にFastlyというCDN企業に買収されたGlitchですが、今も機能変わらず謎の技術で動き続けています。
アカウントがなくてもアクセスするだけで簡単にVMが立ち上がり、そのままNode.jsを動かしたり、npmでパッケージをダウンロードしたり、SQLiteの読み書きできたり、コンソールでLinuxコマンドを叩いたりできて、使えば使うほど無料で使えていいのか不安になるサービスです。

メリット

  • ある程度のプログラミング言語、ランタイムが使える
    • Node.jsだけではなくPythonやRubyも使える
  • CodeMirrorエディタのキーボードショートカットが使える
  • 公式で豊富なテンプレートが用意されている
  • *.glitch.meドメインでWebアプリケーションフレームワークやWebサービスを動かせる
  • Gitが使える
  • BashからLinuxコマンドが使える
  • curlやwgetでバイナリを取ってくれば様々なランタイムやWebサービスを動かせる

デメリット

  • OSが古い
    • Ubuntu 16.04 (Xenial Xerus)らしい
    • glibcが2.23なのでそれ以上を要求するバイナリは動かない
  • インストールされているランタイムが古い
    • Node.jsはデフォルトでv14、頑張ってもNode.js v16.14.2までしかインストールできない
    • 他にもPythonが3.7、Rubyが2.5.8でインストールされている
    • Python 2.7もインストールされているのでpython3コマンドではなくpythonコマンドを使うと2.7が使われる
    • SQLiteも3.11がインストールされている
    • SQLite 2.8もインストールされているのでsqlite3コマンドではなくsqliteコマンドを使うと2.8が使われる
  • /appディレクトリ以外はしばらく経つと初期化される
    • 例えば/tmpディレクトリに置いたファイルはしばらく経つと削除される。それはそう
  • /appディレクトリの空き容量が200MBしかないため、使い方に難がある
    • 200MB超える場合は削除されることを前提にして/tmpディレクトリに置いたりする
  • しばらく使わないと自動的に削除される
    • 自動的に削除されるメリットでもある

Gitpod

https://www.gitpod.io/

対応言語:C, C++, C#, Java, Scala, Kotlin, Clojure, HTML/CSS/JavaScript, TypeScript, Bash, Python, Ruby, PHP, Go, Rust, Erlang, Elixir, SQLite, PostgreSQL, MySQL, MongoDBほか

最後に紹介するのはGitpodです。
WorkspaceなのでPlaygroundと呼んでいいのか不明ですが、私が一番使いやすいと感じるPlaygroundはやっぱりこれです。
アカウント必須でいくつかの制限がありますが出来ることは圧倒的に多く、何と言ってもVS Codeでコードが書ける開発体験は最高です。
対応言語もメジャーな言語を一通り揃えて、アップデートし続けてくれるため安心して毎日使うことができます。
少し前に類似サービスのGitHub Codespacesが無料でも使えるようになったため話題になることは減りましたが、GitHub Codespacesのような事前準備は必要なく、gitpod.newにアクセスしてログインするだけで使える。
まさに最強で無敵のDXを備えたPlaygroundのチャンピオンです。

https://gitpod.new/

メリット

  • PWAでインストールできる
    • ただWorkspaceを立ち上げるとOriginから離れるので使い勝手は悪い
  • GitHub, GitLab, Bitbucketから簡単にログインできる
  • *.gitpod.ioドメインでWebアプリケーションフレームワークやWebサービスを動かせる
  • VS Codeが使える
  • 公式で豊富なテンプレートが用意されている
  • 様々なプログラミング言語、ランタイムが使える
    • SDKMAN!がインストールされているためaltJavaが簡単に使える
  • 最新のOS(Ubuntu)、プログラム言語、ランタイムが使える
  • ApacheとNginxも使えるためPHPのWebアプリケーションフレームワークを動かしやすい
    • CGIのテストもできる
  • SSH接続できる
  • Gitが使える
  • Dockerも使える
  • BashからLinuxコマンドが使える
    • ZshとFishも使える
  • 様々なパッケージツールが使える
    • Linuxbrewがインストールされているため管理者権限なしでパッケージをインストールできる
    • Nixもインストールされているため様々な環境を構築できる
  • VSCodeの拡張機能をインストールできる
    • Open VSXと呼ばれるレジストリからインストールするので、C# Dev KitなどMicrosoftがライセンスを所有している拡張機能は使えない

デメリット

  • アカウント必須
    • ですがGitHub, GitLab, Bitbucketから簡単にログインできます
  • Playgroundと比較して起動が遅い
  • /workspaceディレクトリ以外は再起動時に初期化されるため、使い方に難がある
    • .gitpod.ymlの仕組みを覚える必要がある
    • パッケージインストール先が/workspaceディレクトリになるよう色々いじってある
    • パッケージインストール先が/workspaceディレクトリではない場合、再起動時に再インストールが必要
  • 1ヶ月50時間しか無料で使えない
    • スペックの高いWorkspaceを使うと更に短くなる
  • しばらく操作しないと自動的に止まる
    • ビルドしながら別タブ開いて作業してても止まる
  • GitHub Codespacesと比較されがち

Outro

私はプログラミング言語のJavaScript, Python, Go, PHP, C#, Ruby, Java, Rust, SQLとaltJSのTypeScript、altJavaのKotlin, Scalaを一応書くことができるのですが、ほぼ全てローカル環境に環境構築をしておらず、今回紹介した6つのプレイグラウンドで開発しています。
以下のように使い分けています。

  • LeetCode Playground
    • ログインせずにREPLのようにプログラミング言語を書いてテストする時
    • Bashでファイルを読み込むテストをする時
  • Gitpod
    • ログインしてGitとDockerをベースにWebアプリケーションフレームワークを動かしてドメインからアクセスしたい時
    • OSSをソースコードからビルドする時
    • ログインしないとアクセスできないようなプライベートなコードを書く時
  • CodePan
    • JavaScriptを書いて最速でREPLしたい時
    • HTMLとCSSの表示をリアルタイムで確認したい時
  • Glitch
    • ログインせずにNode.jsのWebアプリケーションフレームワークを動かしてドメインからアクセスしたい時
    • ログインせずにDeno, Caddyのようなバイナリアプリケーションを動かしてドメインからアクセスしたい時
    • Bashでファイルを読み書きしたい時
  • Sqlime
    • PostgreSQLやMySQLでも使えるSQLを書いてテストする時
    • SQLiteファイルの中身をブラウザ上で確認したりSQLで取得したい時
  • Colaboratory
    • ログインしてPythonでプライベートなコードを書く時
    • 生成AIを動かしたり生成したコンテンツをFFmpegで変換する時
    • ログインしてリモート環境からWebスクレイピングしたい時

もちろん検証環境ではFly.ioを使っていますし、保守運用しているソフトウェアはVercelで動いていますし、ローカル環境にDenoとSQLiteとCaddyのバイナリを適当に置いて開発していますし、Raspberry Pi Zero WHでBashとPythonを書くこともあります。
ただ手間をほとんどかけずに書くことのできるプレイグラウンドを使えば簡単に目的を達成できるので、皆さんもぜひお気に入りのプレイグラウンドを見つけてみてはいかがでしょうか。

Discussion