Skip to main content
Base44 アプリのどの部分のコードでも編集して、レイアウト、コンテンツ、動作を細かく調整できます。これにより、テンプレートや AI 生成コードを超えた完全な柔軟性を得て、思い描いた通りにアプリを仕上げることができます。 分割画面をオンにすると、コードエディタの隣にライブアプリのプレビューを表示でき、別のプレビューに切り替えることなく変更を適用できます。
アプリのコードを編集してすぐに変更をプレビューする

​
アプリのコードへのアクセス

アプリのダッシュボードからコードエディタを開きます。そこから、左側にプロジェクトファイルが表示され、すぐにファイルにアクセスして編集を開始できます。 アプリのコードにアクセスするには:
  1. アプリのダッシュボードに移動します。
  2. Code をクリックします。
Base44 でアプリのコードにアクセスする

​
分割画面で変更をプレビューする

分割画面では、コードエディタで作業しながら、横にアプリのプレビューを表示し続けることができます。コードビューを離れることなく、編集がページにどのように影響するかを確認できます。プレビューが常に画面に表示されるため、別のプレビューモードを行き来する必要はありません。コードを書き続け、準備ができたら保存し、すぐにページがどのように見えるかを確認できます。
コード変更をプレビューするための分割画面
分割画面に入ると、左側に編集中のファイルのコードが表示され、右側に同じページまたはルートのライブプレビューが表示されます。 コードを変更するたびに:
  • 画面下部の Save をクリックすると、変更が適用され、プレビューが最新のコードで更新されます。
  • 画面下部の Discard をクリックすると、保存されていない編集内容がすべて破棄され、ファイルの最後に保存されたバージョンに戻ります。
重要: アプリのコードを変更した場合は、Publish をクリックしてアプリ上で公開してください。
分割画面を終了する準備ができたら、Exit split をクリックします。

​
コードファイルの変更

コードエディタは、アプリをフォルダーとファイルに整理しているため、変更したい部分をすばやく見つけることができます。アプリ内のどのファイルでも作業でき、次のような変更を行えます:
  • Pages フォルダー内のページファイルの編集。
  • ヒーローセクション、フィーチャーグリッド、カード、フッターなどのコンポーネントの更新。
  • アプリがエンティティや API に接続する方法の変更。
  • セクション、タイポグラフィ、間隔が思い通りに見えるように、レイアウトとスタイリングクラスを調整。
  • コンポーネントの名前変更、移動、再利用によるアプリ構造のリファクタリング。
アプリのコードファイルの表示と操作
React に慣れている方は、複数のページでコンポーネントをインポートして再利用したり、データの流れやインタラクティブ性を制御するためにプロップスとフックを更新したり、JSX 内でセクションを追加または削除してページの構造を変更したりできます。

​
よくある質問

アプリ内のコード編集について詳しくは、以下の質問をクリックしてください。
はい。Code files パネルに表示される、ページ、コンポーネント、レイアウト、エンティティヘルパーなど、あらゆるコードファイルを開いて編集できます。アプリの一部が自動生成されていても、通常のコードとして表示され、変更可能です。
いいえ。もっと広いスペースが必要な場合は、全幅のコードエディタで作業できます。分割画面は、コードの横にプレビューを表示したいときに便利ですが、いつでもオフにして後で再度開くことができます。
Discard は、アクティブなファイル内のすべての未保存の変更を削除し、最後に保存されたバージョンを復元します。これは、うまくいかないことを試したときにすばやく元に戻したい場合に役立ちます。Discard をクリックすると、そのセッションの未保存のコードは復元できません。
エキスパートである必要はありませんが、React と JSX の基本的な知識があると役立ちます。テキストの更新、コンポーネントの入れ替え、簡単なスタイルの変更などの小さな変更から始めて、自信がついたらより高度なロジックに進むことができます。
このページは AI を使用して翻訳されました。最も正確で最新の情報については、英語版 を参照してください。