AI AIワークナビ AI Work Studio
メニュー
AIワークナビ ホーム

使い方

AI Work Studio完全ガイド

AI Work Studioは、HTML、CSS、JavaScript、Python、C/C++をブラウザだけで編集・実行できる学習・試作用Web IDEです。インストールは不要です。コード、ファイル一覧、プレビュー、コンソールを同じ画面で確認し、現在開いているファイルをAI Reviewで見直せます。

まずはAI Work Studioを開くと、すぐにゲストとして利用できます。短いコードの練習ならアカウント登録は必須ではありません。

最初の3分で使う手順

  1. HTML、CSS、JavaScript、Python、C/C++から使いたい言語を選びます。
  2. 中央のコードエディタへコードを書きます。
  3. 画面上部の「実行」を押します。
  4. HTML/CSS/JavaScriptは「プレビュー」、PythonとC/C++は「コンソール」で結果を確認します。
  5. エラーや改善点を確認したいときは「AIレビュー」を押します。

画面の見方

ファイル

左側にプロジェクト内のファイルとフォルダが表示されます。ファイルを選ぶと、その内容がコードエディタに開きます。

コードエディタ

中央が編集エリアです。HTML、CSS、JavaScript、Python、C/C++のタブを押すと、その言語の代表ファイルへ切り替えられます。

実行結果

右側では「プレビュー」「コンソール」「両方」を切り替えられます。Webページの見た目はプレビュー、プログラムの出力やエラーはコンソールで確認します。

上部ツールバー

「実行」「保存」のほか、「AIレビュー」「プレビュー更新」「コピー」「ダウンロード」「初期化」があります。スマホでは一部の操作が「その他」にまとまります。

HTML・CSS・JavaScriptを実行する

  1. HTMLタブでページの構造を書きます。
  2. CSSタブで色、余白、レイアウトを指定します。
  3. JavaScriptタブでクリックなどの動きを追加します。
  4. 「実行」を押してプレビューを確認します。
<h1 id="message">Hello</h1>
<button onclick="changeMessage()">変更</button>
function changeMessage() {
  document.getElementById("message").textContent = "AI Work Studio";
}

変更が見えない場合は「プレビュー更新」を押し、JavaScriptのエラーがコンソールへ出ていないか確認してください。

Pythonを実行する

  1. Pythonタブを選びます。
  2. コードを書きます。
  3. 必要なら「標準入力」へ入力値を用意します。
  4. 「実行」を押し、コンソールで結果を確認します。
name = input()
age = int(input())
print(f"{name} は {age} 歳です")

このコードでは、標準入力へ次のように1行ずつ入力してから実行します。

Taro
20

1個目のinput()がTaro、2個目のinput()が20を読み取ります。

C/C++を実行する

  1. 「C / C++」タブを選びます。
  2. コードを書きます。
  3. cinやscanfを使う場合は「標準入力」へ値を入力します。
  4. 「実行」を押し、コンソールの出力と終了コードを確認します。
#include <iostream>
using namespace std;

int main() {
  int a, b;
  cin >> a >> b;
  cout << a + b << endl;
  return 0;
}

標準入力へ10 20と入力すると、コンソールへ30と表示されます。

標準入力の使い方

AI Work Studioの標準入力は、ターミナルのように実行途中で文字を入力する方式ではありません。実行前に必要な値を「標準入力」欄へまとめて用意します。

  • Pythonの複数のinput()には、1行目、2行目の順で値を渡します。
  • C/C++では空白区切りまたは改行区切りで値を渡せます。
  • 入力行が不足すると、PythonではEOFErrorなどが表示されます。
  • int(input())へ数字以外を渡すとValueErrorになります。

ファイルとフォルダを管理する

  • ファイル追加：新しいファイルを作成します。拡張子まで入力してください。
  • フォルダ追加：ファイルを整理するフォルダを作成します。
  • 名前を変更：選択中のファイルまたはフォルダ名を変更します。
  • 削除：選択中の項目を削除します。
  • 元に戻す：直前に削除した項目を復元します。
  • すべて削除：作業場を空の状態へ整理します。必要なコードは先に保存してください。

HTML/CSS/JavaScriptでは、複数ファイルを同じプロジェクト内に作成できます。HTML内の相対パスとファイル名を一致させてください。

保存・コピー・ダウンロード

ゲスト利用

作業内容は同じ端末とブラウザ内へ自動保存されます。ただし、ブラウザデータの削除、シークレットモード、端末変更などで失われる可能性があります。

アカウント保存

ログイン後に「保存」を押すと、ワークスペースをサーバー側へ保存できます。詳しくは作業を保存する方法を確認してください。

コピーとダウンロード

「コピー」は現在開いているファイルのコードをクリップボードへコピーします。「ダウンロード」はプロジェクトを端末へ保存するときに使います。重要な作業は端末側にもバックアップしてください。

AI Reviewの使い方

  1. 確認したいファイルをエディタで開きます。
  2. 一度「実行」して、動作やエラーをコンソールで確認します。
  3. 「AIレビュー」を押します。
  4. コンソールへ表示された良い点、問題の可能性、次の確認点を読みます。
  5. 自分でコードを修正し、もう一度実行します。

AI Reviewは現在開いているファイルを見直す学習補助です。自動修正ではなく、修正すべき場所を考えるために使います。詳しい手順はAIでコードレビューする方法にまとめています。

コード、ファイル名、言語、直近のコンソール出力がAI処理基盤へ送信される場合があります。APIキー、パスワード、個人情報、非公開情報は入力しないでください。

初期化とやり直し

「初期化」はワークスペースを初期状態へ戻します。現在の作業が消える可能性があるため、必要なコードはコピー、ダウンロード、アカウント保存のいずれかで残してから実行してください。

スマホ・タブレットで使う

短いコードの確認や実行はスマホ・タブレットでも利用できます。画面幅が狭い場合、AIレビュー、コピー、ダウンロード、初期化などは「その他」にあります。長いコードの編集や複数ファイルの管理はPCのほうが快適です。

うまく動かないとき

プレビューが変わらない

「実行」または「プレビュー更新」を押してください。HTMLのタグ、CSSのセレクタ、JavaScriptのファイル名やエラーも確認します。

PythonでEOFErrorが出る

input()の数に対して標準入力の行数が足りません。入力が2個なら、標準入力も2行用意します。

PythonでValueErrorが出る

int()やfloat()へ変換できない文字が入力されています。数値が必要な場所へ半角数字を入力するか、例外処理を追加します。

C/C++で出力されない

cinやscanfに必要な値が標準入力へ入っているか確認してください。コンパイルエラーがある場合は、コンソールの最初のエラーから確認します。

保存した内容が見つからない

ゲスト保存は利用したブラウザと端末に依存します。別端末で続ける場合はアカウント保存またはダウンロードを利用してください。

安全に使うための注意

  • AI Work Studioは学習、試作、短いコードの確認に向いています。
  • 重要なプロジェクトは端末側にもバックアップしてください。
  • 実行結果やAI Reviewの内容が常に正しいとは限りません。
  • APIキー、パスワード、個人情報、業務上の秘密をコードへ含めないでください。

データの扱いはプライバシーポリシー、サービス利用時の注意は利用上の注意も確認してください。

おすすめの学習手順

  1. 短いサンプルコードを入力する
  2. 実行して結果を予想と比べる
  3. 値や条件を1か所だけ変える
  4. エラーが出たらコンソールを読む
  5. 必要に応じてAI Reviewで確認点を見つける
  6. 自分で直してもう一度実行する

練習テーマを探す場合は学習記事一覧から選べます。

よくある質問

無料で使えますか？

基本機能は無料で利用できます。ゲストでもコード編集と実行を始められます。

インストールは必要ですか？

不要です。対応ブラウザでAI Work Studioを開いてください。

input()が2個ある場合はどう入力しますか？

標準入力へ1行ずつ順番に入力します。1個目のinput()が1行目、2個目が2行目を読み取ります。

ターミナルのように実行途中で入力できますか？

現在は実行前に標準入力をまとめて用意する方式です。実行中にコンソールへ対話入力する方式ではありません。

AI Reviewはコードを自動修正しますか？

自動修正ではありません。現在開いているファイルについて、良い点、問題の可能性、次の確認点を表示するレビュー機能です。