オンラインコードエディタの使い方｜JavaScriptの実行とファイル操作

オンラインコードエディタは、ブラウザでコードを書いて試せる自作のWebツールです。プログラミング学習や、小さなコードの動作確認に使えるよう制作しました。この記事では、画面の使い方とJavaScriptの実行例を紹介します。

画面の使い方

画面には「エクスプローラー」、コードの入力欄、実行結果を表示する「出力」欄があります。ファイルを作る・開く・保存する操作は、画面左上のボタンから行えます。

「新規ファイル」ボタンでファイルを作成できます。その隣には「ファイルを開く」と「保存」のアイコンがあります。作成したコードは、必要に応じて保存してください。

コード入力欄の上にある言語メニューで切り替えます。メニューにはJavaScript、Python、Ruby、C、C++、C#、Java、PHP、Lua、HTML、CSSがあります。この記事ではJavaScriptの実行手順を扱います。

言語メニューを「JavaScript」にし、入力欄の内容を次のコードに置き換えます。

CODE

console.log(1 + 2);

「実行」ボタンを押すと、「出力」欄に計算結果の 3 が表示されます。初めから入力されているコードが残っている場合、そのコードの出力も一緒に表示されます。新しい例を試すときは、入力欄全体を置き換えてください。

出力欄の「クリア」アイコンは、表示された結果を消すために使います。コードを書き換えて「実行」を押し、結果の違いを確認してみてください。

2025年3月17日のβver0.1更新では、HTML表示に影響する自動改行位置を修正し、Tabキーによる予測変換を追加しました。短い更新告知に分かれていた内容を、この紹介ページにまとめています。

2026年9月30日、パソコンのChromeで言語メニュー、ファイル操作のボタン、JavaScriptの計算結果の出力を確認しました。言語ごとの実行環境や端末によって、利用できる機能や動作は異なる場合があります。

不具合や改善のご要望は、お問い合わせからお寄せください。再現に使ったコード、選択した言語、ブラウザ、画面のエラー内容を添えると状況を確認しやすくなります。

＼最新情報をチェック／