プログラミング言語を実行する仕組み

Question

どういう仕組みですか？とくにpaiza.ioに興味があります。なぜブラウザで実行できるのですか？自分で作るにはどうしたらいいですか？
もちろん作っると言ってもpaizaほどの量ではありません。
HTML,CSS/CSS3,JavaScript,PHP(できるのならば)です。
c++でできますか？
アプリで言うとAIDEです。ああいうのが理想なんですけど...

Answer 1

一般には「オンライン コンパイラ」サイトと呼ばれるものでしょうか。

動作の仕組みとしては大まかにフロントエンド部とバックエンド部から構成されるはずです。

• フロントエンド：Webブラウザ上でのコード入力支援、ソースコードをサーバへ送信、プログラム出力結果をサーバから受信して画面に表示、など。このレイヤはHTML＋JavaScriptで記述するのが一般的でしょう。
• バックエンド：サーバ上でフロントエンドから受信したソースコードのコンパイル＆実行、プログラム出力結果をフロントエンド（Webブラウザ側）に送信、など。このレイヤは任意のプログラミング言語で記述可能です。

WandboxやProcGardenという同種Webサービスを開発・運用されている方が、その仕組みや全ソースコードを公開されています。ご参考にどうぞ。

• Wandboxを支える技術
• 鳥小屋のシンチョク#1

Comments

[退会済みユーザー]

一番わかりやすかったです。ありがとうございます。

Answer 2

ブラウザに特化した話になりますが、簡単に言うとＨＴＭＬをプログラムで作り出してブラウザに送るだけです。paiza.ioの「宝くじを照合して獲得金額を算出する」のソースを見れば、292行あたりからＨＴＭＬを書き出しているのが判ります（言語はPython2ですね）。
なので、難易はありますが文字列を出力できるプログラムならどれでも出来ます。
が、Ｃ＋＋なんかだとサーバへの依存性が高いのでお勧めできません。
好みの問題もあると思いますが、Java,PHP・・・当たりがいいかと思います。
・・・答えになっているかどうかわかりませんが？・・・