ウェブベースのコードエディタは、ローカルソフトウェアのインストールを必要とせず、ウェブブラウザ上で直接コードを記述できるアプリケーションです。開発者がコードを記述し、その効果をプレビューし、コードを修正し、チームメンバーとリアルタイムで共同作業できるオンライン開発環境を提供します。

Web ベースのコード エディターはチームのコラボレーションに不可欠であり、次のような多くの利点があります。

• アクセシビリティ：Webベースのコードエディタは、インターネット接続があればあらゆるデバイスからアクセスできるため、チームメンバーはリモートでも簡単に共同作業を行うことができます。このアクセシビリティにより、柔軟性が向上し、地域やタイムゾーンをまたいだコラボレーションが可能になります。
• リアルタイムのチームコラボレーション：Webベースのコードエディタは通常、リアルタイムコラボレーション機能をサポートしており、複数のチームメンバーが同時に同じコードで作業できます。開発者はプロジェクトで共同作業を行い、コードを共同で編集・レビューし、即座にフィードバックを提供できます。
• バージョン管理の統合：Gitなどのバージョン管理システムとの統合により、チームはコードベースの変更を管理・追跡できます。この統合により、一元化されたコードリポジトリが提供され、スムーズなワークフローコラボレーションが促進され、共同作業プロセスが簡素化されます。
• コードの共有とレビュー：Webベースのコードエディタは、コードスニペットやプロジェクト全体をチームメンバーと簡単に共有できる手段を提供します。これによりコードレビュープロセスが簡素化され、チームメンバーはエディタ内で直接コメントを残したり、変更を提案したり、フィードバックを提供したりできるようになります。
• クロスプラットフォームの互換性：Webベースのコードエディタは一般的にプラットフォームに依存しないため、開発者は異なるオペレーティングシステム（Windows、macOS、Linux）を使用していても互換性の問題に悩まされることなく共同作業を行うことができます。また、非常に包括的なため、チームメンバーは開発環境に関わらずプロジェクトに貢献できます。

この記事では主に、直接体験したり製品に埋め込んだりできる優れたオープンソースの Web コード エディターをいくつか推奨します。

1. モナコエディター

https://github.com/microsoft/monaco-editor

MonacoはMicrosoftが開発したWebベースのコードエディターで、VS Codeの機能サポートを受けています。こちらからお試しいただけます: https://microsoft.github.io/monaco-editor/playground.html

アドバンテージ：

• 構文の強調表示、コード補完、デバッグなどの豊富な機能を備えています。
• 高度にカスタマイズ可能で拡張性があります。
• 大規模なコードベースでも優れたパフォーマンスを実現します。
• 複数のプログラミング言語をサポートします。
• 他のツールやフレームワークとの統合。

欠点:

• よりシンプルなコードエディターと比較すると、学習曲線は急です。
• 機能が豊富であるため、実行にはより多くのリソースが必要です。
• 主にネットワーク環境で動作するため、オフライン機能は制限されています。

2. OpenVSCode サーバー

https://github.com/gitpod-io/openvscode-server

このプロジェクトは、リモート サーバーで実行でき、Web ブラウザー経由でアクセスできる VS Code を提供します。

これは、GitpodとGitHub Codespacesの技術アーキテクチャに基づいています。VS Codeチームは、ブラウザベースの作業モードをサポートするためにアーキテクチャをリファクタリングしました。このプロジェクトでは、最新バージョンのVS Codeを使用するために必要な最小限の変更点を共有し、シンプルなアップグレードパスと低いメンテナンス負荷を実現しています。

3.ecode

https://github.com/SpartanJ/ecode

ecodeは、最新のハードウェア向けに設計された軽量コードエディタで、応答性とパフォーマンスに重点を置いています。ハードウェアアクセラレーション対応のeepp GUIを活用し、eepp GUIライブラリを改良しています。

機能的特徴:

• 軽量で持ち運びに便利
• ミニマリストGUI、カスタマイズ可能なカラースキーム
• 50 以上の言語のテキスト強調表示と LSP セマンティック強調表示をサポートします。
• マルチカーソルのサポートにより、効率的な編集が可能になります。
• ターミナル統合により、シームレスなコマンド実行が可能になります。
• エディタ機能に素早くアクセスするためのコマンドライン
• オートコンプリートとカスタマイズ可能なキーボードバインディング

4. コードサーバー

https://github.com/coder/code-server

Code-Serverは、ブラウザでVS Codeを実行できるようにするオープンソースプロジェクトです。あらゆるデバイスで一貫した開発環境を提供します。また、クラウドサーバーの利用をサポートし、実行速度を向上するとともに、モバイルユーザーのバッテリー寿命を節約します。

5. タビー

https://github.com/TabbyML/タビー

Tabbyは、GitHub Copilotをベースにしたオープンソースとローカルの両方のデプロイメントオプションを提供する、プライベートにデプロイ可能なAIコーディングアシスタントです。スタンドアロンで動作し、DBMSやクラウドサービスを必要とせず、簡単に統合できるOpenAPIインターフェースを備え、コンシューマーグレードのGPUをサポートしています。

さらに、Tabby は Docker を使用して簡単にインストールできます。

6. Neko コードエディター

https://github.com/flyingcatdeveloper/nce

Neko コード エディターは、コンソール、新しいタブでコードを開く、複数ファイルの機能、プロジェクト管理、DevLog の更新、ローカル データの保存、カスタマイズ可能な設定など、Monaco エディターと同様の機能を備えたシンプルなコード エディターです。

機能的特徴:

• Monaco エディターの機能には、コードの自動補完と MDN アプリケーション機能が含まれます。
• コンソール: ワンクリックで簡単にコンソールを表示できます。
• 新しいタブでコードを開きます。コードを表示すると、Web ページとまったく同じように見えます。
• マルチファイル機能: HTML、CSS、フォルダー、JS ファイルなど、幅広いファイルをサポートします。
• ダッシュボード: すべてのエディターと、最後に開かれた時刻を 1 か所で表示します。
• プロジェクトのインポート: プロジェクトをインポートして、新しいデバイスで作業を開始したり、削除されたデータを復元したりします。
• プロジェクトのダウンロード: 偶発的なデータ損失を防ぐために、プロジェクト全体を安全にダウンロードします。
• 最新情報を入手: DevLog で新機能や修正についての最新情報を入手します。
• データのバックアップ: データは localStorage と IndexedDB を使用して保存され、プロジェクトに簡単に読み込むことができます。
• カスタム設定: エディター名、自動保存、ファイル圧縮などのエディター設定をカスタマイズします。

7. コードミラー

https://github.com/codemirror/dev/

https://codemirror.net/

CodeMirror は、高度な編集機能と豊富なプログラミング インターフェイスを備えたテキスト入力を可能にし、さらなる拡張をサポートする拡張可能な Web コード エディター コンポーネントです。

機能的特徴:

• アクセシビリティ: スクリーン リーダーとキーボード ユーザーに適しています。
• モバイル サポート: モバイル フォンでプラットフォームのネイティブの選択および編集機能を使用します。
• 双方向テキスト: 右から左、左から右への混合テキストをサポートします。
• ハイライト: 構文構造を反映する色分け。
• 行番号を表示: コードの横のスペース、行番号、その他の情報を表示します。
• 自動補完: エディターで言語固有の補完候補を表示します。
• コードの折りたたみ: ドキュメントの特定の部分を一時的に非表示にします。
• 検索/置換: エディター固有の検索、正規表現の検索、置換機能。
• 完全な分析: 詳細な解析ツリーにより、さまざまな種類の言語を統合できます。
• 拡張インターフェース: 要求の厳しいエディター拡張を堅牢に実装します。
• モジュラー: ほとんどの機能は共通のパブリック API 上に実装されています。
• 速度: 大きなドキュメントや長い行でも応答性を維持します。
• 自動閉じ括弧: 入力すると、対応する括弧が自動的に挿入されます。
• リンティング: エディターにエラーと警告メッセージを表示します。
• 柔軟なスタイル設定: フォント スタイルとサイズを組み合わせて、コンテンツにウィジェットを追加します。
• テーマ別: カスタム ビジュアル エディター スタイルをインポートまたは作成します。
• 共同編集: 複数のユーザーが同じドキュメントを編集できます。
• 履歴の元に戻す: 共同編集のための元に戻す機能とやり直し機能をサポートします。
• 複数選択: ドキュメントの複数の範囲を一度に選択して編集します。
• 国際化: ユーザーに表示または通知するためのカスタム テキストを提供します。

8. コードフラスク

https://github.com/kazzkiq/コードフラスク

CodeFlaskは、軽量でカスタマイズ可能なWebベースのコードエディタです。構文のハイライト、自動補完、コードフォーマットといっ​​た基本的なコード編集機能を備えています。使いやすさを重視して設計されたCodeFlaskは、Webアプリケーションへの統合も容易です。シンプルで軽量なコードエディタが必要な場合に最適です。

9. コードジャー

https://github.com/antonmedv/codejar

CodeJar は、強力でオープンソースの埋め込み可能な Web コード エディターです。

機能的特徴:

• 軽量（わずか2.45 kB）
• 依存性なし
• Chrome、Safari、Firefox、iOS、iPadOS、Android と互換性があります。
• 新しい行のインデントを保持することをサポート
• 右括弧と引用符を自動的に追加する
• インデントするには Tab キーを使用します。
• 元に戻す、やり直しをサポート
• PrismJS や highlight.js などの任意のハイライト ライブラリ、またはカスタム開発を使用できます。

10. ラストパッド

https://github.com/ekzhang/rustpad

Rustpadは、演算変換アルゴリズムをベースにした、高性能で最小限の機能しか持たないオープンソースの共同テキストエディタです。必要なのは小さなDockerイメージだけで、データベースは不要です。サーバーはRustで書かれたワープWebサーバーフレームワークで、フロントエンドはTypeScriptで書かれたReactとMonacoインターフェースを使用しています。

エディターは WebSocket 経由でサーバーと通信するため、非常に効率的ですが、サーバーが再起動したり 24 時間非アクティブになったりすると接続が失われ、一時的なドキュメントが失われる可能性があります。

11. ICEコーダー

https://github.com/icecoder/ICEcoder

ICEcoderは、ウェブサイトの開発とメンテナンスを効率化するブラウザベースのコードエディタです。オンラインでもオフラインでも使用でき、Linux、Windows、Macプラットフォームに対応しています。必要なバージョンはPHP 7（7.4推奨）のみです。

ただし、このオープンソース ライブラリは現在更新されなくなっていることに注意してください。