「コード」タブ：アプリのコードを読んで編集する
要点「コード」タブには、アプリのすべてのファイルがフォルダーのツリーで表示され、その横にエディターがあります。ファイルをクリックして読み、入力して変更し、「保存」（または ⌘S / Ctrl+S）を押します。保存するたびに、戻れるバージョンが作られます。アプリは TanStack Start、React、TypeScript で作られています。コードはあなたのものです。プロジェクト設定 → エクスポートからダウンロードするか、GitHub に保管できます。
コードを開く必要はまったくありません。MonstarX があなたの代わりに書き、変更します。それでも、あなた（や一緒に働く開発者）が見たくなったときのために、すべてのコードがいつでも見られるようになっています。コード タブには、アプリのすべてのファイルが表示され、自分で変更することもできます。
「コード」タブには何が表示されますか？
Section titled “「コード」タブには何が表示されますか？”左側にはアプリのすべてのファイルが入ったフォルダーのツリー、右側には選んだファイルが、色分けされたコードと行番号付きで表示されます。
スマートフォンでは、上部のファイル名をタップすると、ツリーがシートとして開きます。
何がどこにありますか？
Section titled “何がどこにありますか？”知らなくても大丈夫ですが、コードを読むときの手がかりになります。
| フォルダーまたはファイル | 中身 |
|---|---|
src/routes/ | ページごとに1つのファイル。index.tsx がトップページ、pricing.tsx が /pricing です。 |
src/components/ | ヘッダーやフッターなど、複数のページで使う部品。 |
src/server/ | サーバーで動くコード。予約の保存やスケジュールの読み込みなど。 |
src/db/ | アプリのデータの形。 |
migrations/ | データベースのテーブルを作ったり変えたりする手順。 |
public/ | アイコンなど、そのまま配信されるファイル。 |
src/styles.css | 色、フォントなどの見た目の設定。 |
アプリは何で作られていますか？
Section titled “アプリは何で作られていますか？”MonstarX が作るアプリは、次の技術で作られたモダンな Web アプリです。
- TypeScript：アプリが動く前にミスを見つけるチェック機能の付いた JavaScript。
- React：Web の画面を作るための、最も広く使われている方法。
- TanStack Start：React のページをサーバー付きの本格的なアプリにするフレームワーク。ページの表示が速く、データはサーバー側で安全に守られます。
- Tailwind CSS：色、余白、レイアウトのためのスタイルのツールキット。
プロジェクトページのカードにも、TanStack Start · React · TypeScript のようにこの構成が表示されます。インポートしたアプリは、元の技術構成のままです。
自分でファイルを編集するには？
Section titled “自分でファイルを編集するには？”-
コード タブを開き、ツリーでファイルをクリックします。
-
エディターをクリックして変更します。上部に 未保存 と、破棄 と 保存 のボタンが表示されます。
-
保存 をクリックするか、⌘S（Mac）または Ctrl+S（Windows）を押します。プレビューはすぐに更新されます。
保存するたびに、Edit とファイルのパスを組み合わせた名前（Edit src/routes/schedule.tsx など）でバージョンとして残るので、うまくいかなかったときは元に戻せます。プロジェクトを GitHub と連携していて自動プッシュがオン（標準の設定）なら、変更は GitHub にもプッシュされます。MonstarX は、次に何かを頼んだときにあなたの編集を把握します。
破棄 を押すと、保存していない変更は消えます。
編集できないのはどんなとき？
Section titled “編集できないのはどんなとき？”- MonstarX がアプリを変更しているとき。 終わるまでファイルは読み取り専用です：「MonstarX がアプリを変更中のため、完了するまでファイルは読み取り専用です。」
- 編集を始めた後にファイルが変わったとき。 その間に MonstarX やほかの人がファイルを保存すると、「編集を始めた後にこのファイルが変更されました。」と表示され、保存 はグレーになって押せません。下書きは破棄するまで残るので、見比べてから破棄し、もう一度変更してください。
- MonstarX が管理しているファイル。 MonstarX が作るアプリでは、設定ファイル（
package.jsonや Vite、TypeScript の設定など）と、アカウント、データベース、メール、ストレージ、AI の組み込みサービスは MonstarX が管理しています。ツリーには表示されませんが、エクスポートした zip には入っています。 - 閲覧のみの権限のとき。 閲覧・コメント可 で共有された人には「閲覧のみ：コードは読めますが、変更はできません。」と表示されます。編集可 の人は、あなたと同じようにファイルを編集して保存できます。
コードをダウンロードできますか？
Section titled “コードをダウンロードできますか？”できます。コードはあなたのものです。MonstarX で作ったものは、MonstarX が書いたコードも含めてあなたが所有します。持ち出す方法は2つあります。
- zip をダウンロードする：ワークスペースで 設定エクスポート を開き、.zip をダウンロード を押します。自分のパソコンで動く独立したプロジェクトが手に入ります。詳しくは アプリをエクスポートする をご覧ください。
- GitHub に保管する：リポジトリを連携すると、変更のたびにコミットされます。詳しくは GitHub をご覧ください。
よくある質問
Section titled “よくある質問”MonstarX を使うのに、プログラミングの知識は必要ですか？
必要ありません。「コード」タブは見たいときのためにあるものです。すべて、チャットでやりたいことを伝えるだけでできます。
自分で編集した内容を MonstarX が元に戻してしまうことはありますか？
ありません。次のリクエストを送ったときのファイルを、あなたの編集も含めてそのまま読みます。なぜ変えたのかを知っておいてほしいときは、チャットで伝えてください。
「コード」タブで新しいファイルを追加できますか？
「コード」タブでは既存のファイルを編集します。新しいページやファイルは、チャットで MonstarX に作成を頼んでください。
パッケージやライブラリを追加するには？
チャットで頼んでください（「予約フォームに日付選択のライブラリを使って」など）。MonstarX がパッケージを追加します。
MonstarX が書いたコードは誰のものですか？
あなたのものです。MonstarX の利用規約では、プロンプト、ファイル、コード、アプリはあなたが所有し、いつでもエクスポートできると定めています。