サンプルコードエディタは、ブラウザのみでJavaScript、HTML、CSSのプログラミングができる実行機能の備わった簡易オンラインエディタです。
サンプルコードの作成やロジック確認、プログラミング学習などにご利用ください。
エディタテンプレート
サンプルコードエディタには、JavaScriptまたは、JSX（Babel）、HTML、CSSがコーディングができる４種類のエディタが用意されています。
※JSXをコーティングしたい場合は、「JSX（Babel）カテゴリのエディタ」を選択してください。
実行結果がすぐわかる
サンプルコードエディタ上でコーディングしたプログラムはブラウザ上で実行でき、その結果もすぐ確認することができます。
ブラウザ単体実行機能を使えば、bootstrapなどレスポンシブデザインの動作確認も効率よくできます。
また、作成したコードは単一のhtmlファイルとしてダウンロードが可能。
ダウンロードしたhtmlファイルはローカル環境でも実行できます。
さらに、ダウンロードしたhtmlファイルをサンプルコードエディタにインポートすることで編集の続きができます。
プログラムの編集、実行には「ログイン」が必要です。
スマホやタブレットでもJavaScriptプログラミング
サンプルコードエディタでは、PCのみならず、スマホやタブレットでもプログラミング可能です。スマホだけでもある程度楽にプログラミングできる入力補助機能付き。
エディタ画面上部の「入力補助」にチェックを入れてください。記号や定型文を入力するためのボタンが表示されます。
布団の中でも、外出先のちょっとした空き時間でもスマホさえあればすぐにJavaScriptプログラミングができます。
※スマホやタブレットで込み入ったプログラムをコーディングする場合は、外付けキーボード推奨です。
ウィジェットを作成して公開
作成したコードは、その実行結果とともにウィジェットとして自サイトやブログなどに公開することができます。
※WordPressでは動作確認済み。ウィジェット貼り付け先のブログシステムによっては動作しない可能性があります。
下は、サンプルコードエディタで作成したウィジェットの一例です。ウィジェットを作成するには、「ログイン」が必要です。
three.jsのサンプルコード
three.jsのサンプルコード。この例のように、JavaScriptエディタにimportキーワードを書くことでmoduleモードとして動作せることができます。
ウィジェットは作成時に、ソースコードの初期表示設定やブラウザプレビューの有無、表示領域の高さなどを指定できます。
使い方詳細についてはこちらを参照してください。