> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.
# コードタブ
> Base44 のコードタブでアプリのソースコードを直接編集し、ライブプレビューと完全な開発者制御を利用できます。
コードタブでは、アプリのソースコードを直接表示・編集でき、アプリの機能、デザイン、動作を制御しながら変更を即座に確認できます。
コードタブは、より多くの制御を求める開発者向けです。よりシンプルな変更には、Base44 のビジュアルエディタと AI ツールを使用してください。
## コードタブにアクセスする
**コードタブを開くには:**
1. アプリのダッシュボードに移動します。
2. **Code** タブをクリックします。
コードタブには、左側のファイルエクスプローラーに[プロジェクトファイル](../overview/project-structure)が表示され、メインスペースをコードエディタが占めます。
## コードベースを操作する
**Files used in this page** 機能を使用すると、プレビュー中のページを動かしているファイルを確認できます。これにより、どのコードファイルが実行されているかが正確にわかり、ページを編集したり問題を調査したりする際にどこに行けばよいかがわかります。
リスト内の各エントリには、ファイル名とそのフォルダパスが表示され、pages や components などプロジェクト内の場所ごとにグループ化されます。
**ページで使用されているファイルを表示するには:**
1. アプリエディタに移動します。
2. 右上の **More Actions** アイコンをクリックします。
3. **Files used in this page** をクリックします。
この絞り込み表示から完全なファイル構造に移動したい場合は、**See all files** をクリックします。これにより、完全なコードファイルビューに移動し、そこから探索を続けることができます。
## ライブプレビューで編集する
コードタブでは、片側にコード、もう片側にアプリのライブプレビューを表示する分割画面ビューを提供しています。これにより、コンテキストを切り替えることなく変更を即座に確認できます。
**ライブプレビューで編集するには:**
1. コードタブでファイルを開きます。
2. 右上隅の分割画面トグルをクリックします。
3. 左側でコードを編集し、右側で変更を確認します。
**コードを変更するたびに:**
* 画面下部の **Save** をクリックして変更を適用し、最新のコードでプレビューを更新します。
* 未保存の編集をすべて破棄してファイルの最後の保存バージョンに戻したい場合は、画面下部の **Discard** をクリックします。
**重要:** アプリのコードに変更を加える場合は、**Publish** をクリックしてアプリに反映させてください。
分割画面を終了する準備ができたら、**Exit split** をクリックします。
独自の IDE でのローカル開発については、[GitHub インテグレーション](../local-development/github)を参照してください。
## AI コードの変更を確認する
AI がアプリを編集すると、公開する前に **Code changes** モーダルを開いて変更内容を正確に確認できます。モーダルには、AI が触れたすべてのファイルがフォルダごとにグループ化され、それぞれに差分ビューが表示されます。
**Code changes モーダルを開くには:**
1. アプリエディタの AI チャットに移動します。
2. AI がファイルを編集または作成したメッセージにカーソルを合わせます。
3. その変更の横にある三点アイコンをクリックし、**View Changes** を選択します。
左側にファイルツリー、右側に選択したファイルの差分が表示されるモーダルが開きます。上部のステータスバーには、追加、変更、削除されたファイル数の内訳が表示されます。
ツリー内のファイルは状態ごとに色分けされます:
* 新しく追加されたファイルは**緑色**。
* 変更されたファイルは**琥珀色**で、横並びの差分ビューで開きます。
* 削除されたファイルは**赤色**。
ツリー内の任意のファイルをクリックすると、その差分に直接ジャンプできます。
## FAQ
はい。pages、components、layouts、entity ヘルパーなど、Code files パネルに表示されるコードファイルを開いて編集できます。アプリの一部が自動生成されている場合でも、通常のコードとして表示され、変更可能です。
いいえ。より広いスペースを好む場合は、フル幅のコードエディタで作業できます。分割画面はコードの横にプレビューを表示したいときに便利ですが、いつでもオフにして後で再度開くことができます。
Discard は、アクティブなファイル内のすべての未保存の変更を削除し、最後に保存したバージョンを復元します。試したことがうまくいかなかったときにすばやく戻りたい場合に便利です。Discard をクリックすると、そのセッションの未保存コードは復元できません。
エキスパートである必要はありませんが、React と JSX の基本的な知識があると役立ちます。テキストの更新、コンポーネントの入れ替え、シンプルなスタイルの変更などの小さな変更から始めて、自信がついたらより高度なロジックに進むことができます。
このページは AI を使用して翻訳されました。最も正確で最新の情報については、[英語版](/) を参照してください。