Simple C++ Editor について

Simple C++ Editor は、Web ブラウザで動作するプログラミング入門者向けのエディタ及び実行環境です。 主に競技プログラミング・情報オリンピックなどを始めるプログラミング初心者をターゲットに作られています。 全くプログラミングに触れてきた事が無い人にとっては C++ を動かす環境を用意するのも大変ですが、これを使用することで、面倒な環境構築せずとも、C++ のコードを実行することができます。

また、一部のエラーメッセージを日本語で補足する機能、エラーの箇所を波線で教えてくれる機能、実行時に発生したエラー(オーバーフロー、配列外参照など)を教えてくれる機能もあり、他の Web で C++ を実行できるサイトにはない機能もあります。

操作方法

Simple C++ Editor は以下の5つのパートに分かれています。

※スマートフォン等でアクセスした場合、スクロール(移動)ができずに実行ボタンが押せなくなる事があるかもしれません。その場、「ソースコードエディタ左にある行番号部分」「コードコピーボタン」「ソースコードエディタ右スクロールバー」などをスワイプすることでスクロールできます。

「ソースコード」エディタ

ここに動かしたいプログラムのコードを記述していきます。右上の「実行」ボタンを押すことで、プログラムを実行する事ができます。 「Ctrl」と「Enter」キーを同時に押すことでもプログラムを実行させることができます(Macの場合は「Command」と「Enter」キー)。 エディタ上に表示される「・」は半角スペースを示しています。行の先頭や末尾、スペースが2個以上連続している場所を「・」で表示されています。

「プログラムへの入力」エディタ

実行させたプログラムへ入力させるテキストを入れます。例えば C++ では、ソースコードで「int x; std::cin >> x;」と書くことで、整数 x を入力させることができます。プログラムの内容は変えず、プログラムに与える入力を変えることで、同じプログラムを使いまわして様々な入力の計算をさせることができます。

「プログラムの出力」

実行したプログラムの出力が表示されます。ソースコードで「std::cout << "Hello!" << std::endl;」と書くことで、「Hello!」と表示させたり、「std::cout << x << std::endl;」と書くことで変数 x の中身を表示させたりできます。

「メッセージ」

コンパイルメッセージ、実行時のエラーメッセージ、プログラム中で「std::cerr << "Hello!" << std::endl;」の様に標準エラー出力に出力したテキストが表示されます。エラーに関する情報が表示されるので、ここを見るクセをつけましょう。

ここに表示された一部のエラーや警告は、ソースコード上に赤線や黄色線が引かれ、マウスを上に乗せるとメッセージが表示されます。赤はエラーで、C++の構文が間違えていたり実行時にオーバーフローなどのエラーが発生したときに表示されます。黄色は警告で、C++の構文としては正しくて実行はできるけど、変数の初期化を忘れていたりときっと何か間違えているかもしれないときに表示されます。

※ C++ のエラーは、1つ発生すると連鎖的に沢山のエラーを発生させてしまうことがあります。沢山エラーが発生しても1つエラーを修正すると正しく動くことは多々あります。とりあえず一番上のエラーを1つ修正したらもう一度実行してみるのも良いです。

C++ の実行に関して

Wandbox と言う高機能なプログラム実行Webサービスの公開APIを使用し、プログラムの実行を Wandbox 上で行ってもらい、実行結果やメッセージなどを Simple C++ Editor で加工して表示しています。Wandbox は高機能な反面、様々なオプションがあり初心者には混乱のもとであるので、C++学習に特化して機能を絞って、デバッグなどをやりやすくしたのが Simple C++ Editor です。

(分かっている人向けの説明:) Simple C++ Editor は、GCC 9.1 を使用して、「」オプションを追加して実行されます。これは AtCoder で2021年11月現在使用されているC++コンパイラと同じバージョンであり、またデバッグ用のオプションを多く追加しています。デバッグに特化した実行なので高速化オプションを付けた C++ よりは遅いですが、これはブラウザ上でのコーディングに関しては高速であることよりもバグの検出を重視した方が良いという方針のためです。またデバッグ用のオプションが付いているとはいえ、Python などのスクリプト言語と同等以上の速度は出ます。

ショートカットキー

「ソースコード」エディタ上には様々なショートカットキーがあります。キーボードの以下のキーを使うことで、プログラムを書くのが速くなり、上達への一歩になります。一気に全て覚える必要はありませんが、よく使うキーは覚えておくと良いでしょう。(Mac の場合は「Ctrl」を「Command」に置き換えて読んでください。)

Simple C++ Editor のコード・保存する情報について

Simple C++ Editor のソースコードは GitHub のプロジェクトページ に公開されています。 このエディタはデータを使用者のブラウザのみに保存し、コードの実行はWandboxに任せているため、コードの保存や実行に必要なサーバーは必要ありません。