> ## Documentation Index
> Fetch the complete documentation index at: https://support.labex.io/llms.txt
> Use this file to discover all available pages before exploring further.
# LabEx VM WebIDE インターフェース
> LabEx WebIDE は、コーディングタスク向けのモダンな VS Code のような開発環境を提供します。Ubuntu 22.04 をベースに構築されており、複数のプログラミング言語でコードを記述、コンパイル、実行するための使い慣れたインターフェースを提供します。
## WebIDE プレビュー
WebIDE 環境は、特に以下の場合に役立ちます。
1. さまざまなプログラミング言語 (Java、JavaScript、Python など) でのコードの記述とデバッグ
2. ライブプレビュー機能を備えた Web 開発プロジェクトについては、[WebIDE で最初の HTML ページを作成する](https://labex.io/tutorials/html-create-your-first-html-page-in-webide-451041) を参照してください。
3. 直感的なインターフェースを介したプロジェクトファイルとディレクトリの管理
4. コマンドラインタスク用の統合ターミナル操作
## 環境レイアウト
WebIDE インターフェースは、いくつかの主要コンポーネントで構成されています。
1. 左サイドバー:
* プロジェクトナビゲーション用のファイルエクスプローラー
* 検索機能
* Git 操作用のソース管理
* 拡張機能パネル
2. エディター領域：メインコーディングワークスペース
3. 下部パネル：ターミナル、問題、および出力
4. ステータスバー: 設定とライブプレビューへのクイックアクセス
5. 上部メニューバー: ファイル、編集、表示、およびその他のオプション
## ターミナルへのアクセス
ターミナルは次の 2 つの方法で開くことができます。
1. 左下の隅にある アイコンをクリックし、ターミナルタブに切り替えます。
2. 上部メニューを使用します：ターミナル > 新しいターミナル
## HTML のプレビュー
HTML ファイルをプレビューするには：
1. WebIDE で、右下の「Go Live」ボタンをクリックします。
2. HTML ページがレンダリングされた新しいブラウザタブが開きます。
3. または、「Web 8080」タブをクリックしてプレビューを開くこともできます。
4. プロジェクトがサブディレクトリにある場合は、エクスプローラーでサブディレクトリ名をクリックしてアクセスできます。すると、そのディレクトリの `index.html` ファイルが自動的にプレビューされます。
5. プロジェクトに `index.html` を含む複数の HTML ファイルがある場合は、ファイル名を URL に追加して直接プレビューできます。たとえば、`https://xxx.labex.io/another-file.html` です。
6. 「新しいタブで開く」ボタンをクリックして、プレビューを新しいタブで開くことができます。新しいブラウザタブでプレビューが開きます。
「Go Live」は自動的に以下を実行します。
* Web サーバーを起動します
* コードを変更するとリアルタイムで更新を提供します
> ヒント：LabEx VM はポート 8080 でプレビューをホストします。他の人とプレビューリンクを共有して、作業を紹介できます。ラボ VM が停止すると、プレビューリンクは機能しなくなります。
## 使用シナリオ
これは、LabEx WebIDE を使用して、シンプルな Java
プログラムを記述、コンパイル、実行する方法を示す Java ラボのサンプルです。
WebIDE での Java プロジェクトの操作：
1. エクスプローラーから新しい Java ファイルを作成します
2. 構文の強調表示を使用して Java コードを記述します
3. ターミナルでコンパイルして実行します。
```bash theme={null}
javac MyClass.java
java MyClass
```
4. コンパイルエラーと警告をリアルタイムで表示します
これは、LabEx WebIDE を使用してシンプルな Web ページを作成する方法を示す HTML
ラボのサンプルです。
フロントエンド開発タスクの場合：
1. HTML、CSS、および JavaScript ファイルを作成します
2. 右下の「Go Live」ボタンをクリックします
3. Web ページにアクセスするには：
* LabEx VM の上部にある Web 8080 タブ
* * ボタンを使用して新しいポートプレビュータブを作成します
注：プロジェクトは LabEx サーバー上のパブリック URL に自動的にデプロイされるため、Web タブからアクセスできます。
これは、LabEx WebIDE を使用して宇宙飛行士の名前を処理する方法を示す Python
チャレンジのサンプルです。
Python プログラミングの場合：
1. エクスプローラーで Python ファイルを作成します
2. 次の機能を使用して Python コードを記述します。
* 構文の強調表示
* コード補完
* エラー検出
3. ターミナルでスクリプトを実行します。
```bash theme={null}
python3 script.py
```
4. 統合デバッガーを使用してステップバイステップで実行します
## よくある質問
LabEx VM は、Web プロジェクトを自動的にデプロイします。
1. デフォルトポート 8080:
* LabEx VM の上部にある「Web 8080」タブをクリックします
* アプリケーションはパブリック URL を介してアクセスできるようになります
2. カスタムポート：
* * ボタンをクリックして、新しいポートプレビュータブを作成します
* 各ポートには独自のパブリック URL があります
* 複数のサービス (フロントエンドとバックエンドなど) を実行する場合に便利です
注：ローカル開発とは異なり、LabEx はクラウドで実行されるため、localhost に直接アクセスすることはありません。
WebIDE の一般的なショートカット：
* **ファイル操作**
* 新規ファイル：Ctrl+N
* 保存：Ctrl+S
* 検索：Ctrl+F
* 置換：Ctrl+H
* **パネルコントロール**
* サイドバーの切り替え：Ctrl+B
* ターミナルの切り替え：Ctrl+\`
* コマンドパレット：Ctrl+Shift+P
* **エディター機能**
* マルチカーソル：Alt+ クリック
* すべての出現箇所を選択：Ctrl+Shift+L
* ドキュメントのフォーマット：Shift+Alt+F
はい、Ubuntu パッケージマネージャーを使用して追加のツールをインストールできます。
```bash theme={null}
sudo apt update
sudo apt install package-name
```
言語固有のパッケージマネージャーの場合：
* Node.js/npm:
```bash theme={null}
npm install package-name
```
* Python/pip:
```bash theme={null}
pip install package-name
```
インストールは一時的であり、セッションが終了するとリセットされることに注意してください。
WebIDE には、ファイルを管理するためのいくつかの方法があります。
1. **ファイルのアップロード:**
* ファイルをエクスプローラーにドラッグアンドドロップします
* エクスプローラーを右クリックした後、アップロード/ダウンロードを使用します
2. **ファイルのダウンロード:**
* エクスプローラーでファイルを右クリックします
* 「ダウンロード」を選択します
3. **コピー/貼り付け:**
* テキストコンテンツは、ローカルマシンと WebIDE 間で直接コピーできます
* バイナリファイルは、アップロード/ダウンロード機能を使用する必要があります
すべてのファイルは一時的であり、セッションが終了すると失われることに注意してください。