コードタブは、より多くの制御を求める開発者向けです。よりシンプルな変更には、Base44 のビジュアルエディタと AI ツールを使用してください。
コードタブにアクセスする
コードタブを開くには:- アプリのダッシュボードに移動します。
- Code タブをクリックします。
コードベースを操作する
Files used in this page 機能を使用すると、プレビュー中のページを動かしているファイルを確認できます。これにより、どのコードファイルが実行されているかが正確にわかり、ページを編集したり問題を調査したりする際にどこに行けばよいかがわかります。 リスト内の各エントリには、ファイル名とそのフォルダパスが表示され、pages や components などプロジェクト内の場所ごとにグループ化されます。 ページで使用されているファイルを表示するには:- アプリエディタに移動します。
- 右上の More Actions アイコンをクリックします。
- Files used in this page をクリックします。
ライブプレビューで編集する
コードタブでは、片側にコード、もう片側にアプリのライブプレビューを表示する分割画面ビューを提供しています。これにより、コンテキストを切り替えることなく変更を即座に確認できます。
- コードタブでファイルを開きます。
- 右上隅の分割画面トグルをクリックします。
- 左側でコードを編集し、右側で変更を確認します。
- 画面下部の Save をクリックして変更を適用し、最新のコードでプレビューを更新します。
- 未保存の編集をすべて破棄してファイルの最後の保存バージョンに戻したい場合は、画面下部の Discard をクリックします。
AI コードの変更を確認する
AI がアプリを編集すると、公開する前に Code changes モーダルを開いて変更内容を正確に確認できます。モーダルには、AI が触れたすべてのファイルがフォルダごとにグループ化され、それぞれに差分ビューが表示されます。 Code changes モーダルを開くには:- アプリエディタの AI チャットに移動します。
- AI がファイルを編集または作成したメッセージにカーソルを合わせます。
- その変更の横にある三点アイコンをクリックし、View Changes を選択します。
- 新しく追加されたファイルは緑色。
- 変更されたファイルは琥珀色で、横並びの差分ビューで開きます。
- 削除されたファイルは赤色。
FAQ
アプリのコードのあらゆる部分を編集できますか？
アプリのコードのあらゆる部分を編集できますか？
はい。pages、components、layouts、entity ヘルパーなど、Code files パネルに表示されるコードファイルを開いて編集できます。アプリの一部が自動生成されている場合でも、通常のコードとして表示され、変更可能です。
コードを編集するには分割画面を使う必要がありますか？
コードを編集するには分割画面を使う必要がありますか？
いいえ。より広いスペースを好む場合は、フル幅のコードエディタで作業できます。分割画面はコードの横にプレビューを表示したいときに便利ですが、いつでもオフにして後で再度開くことができます。
Discard をクリックするとどうなりますか？
Discard をクリックするとどうなりますか？
Discard は、アクティブなファイル内のすべての未保存の変更を削除し、最後に保存したバージョンを復元します。試したことがうまくいかなかったときにすばやく戻りたい場合に便利です。Discard をクリックすると、そのセッションの未保存コードは復元できません。
コードを編集するには経験豊富な開発者である必要がありますか？
コードを編集するには経験豊富な開発者である必要がありますか？
エキスパートである必要はありませんが、React と JSX の基本的な知識があると役立ちます。テキストの更新、コンポーネントの入れ替え、シンプルなスタイルの変更などの小さな変更から始めて、自信がついたらより高度なロジックに進むことができます。
このページは AI を使用して翻訳されました。最も正確で最新の情報については、英語版 を参照してください。