Aikの技術日記

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。

トップ > Webプログラミング > Theiaで自作IDE構築をしよう その1

Theiaで自作IDE構築をしよう その1

Webプログラミング

はじめに

自作IDE構築にTheiaを使う事になりましたので…色々とまとめていこうと思います。
今回の記事では、Theiaの概要について見ていきたいと思います。

※翻訳等に十分気をつけておりますが、もしかしたら誤訳や間違った記述等もあるかもしれません…。
もし発見された場合は、コメントをしていただけると助かります…！

Theiaとは

まずは公式ページより、Theiaの概要について見ていきましょう。

Theia is an extensible open-source framework to develop multi-language IDEs for the cloud and desktop using state-of-the-art web technologies.
訳: Theiaは最先端のWeb技術を使用した、クラウド/デスクトップ用の多言語IDEを開発するための拡張可能なオープンソースフレームワークです。

※Theia公式ページより引用

また、Theiaの特徴に関して簡潔にまとめると、以下の様な感じです。

  • 全てTypeScriptで記述されている
  • フロントエンド部分とバックエンド部分は切り離されている
  • ブラウザ上で動くアプリケーションとしても使えるし、Electronのデスクトップアプリケーションとしても使える
  • 拡張機能で構成されており、自作の拡張機能やプラグインも簡単に追加できる
  • Theia上でターミナルも開ける
  • VS Codeベースである
  • Language Server Protocolに則った言語サポート機能
  • PhosphorJSベースのUI

参考に、公式ページの原文も載せておきます。

原文を表示

※Theiaの主な3つの特徴:

1. Cloud and Desktop: - Theia is entirely written in TypeScript and clearly separates the UI frontend from the backend. The frontend runs in modern browsers or as a Desktop app using Electron with either local or remote (cloud) backends.

  1. Extensible:
  2. Theia applications consist of extensions. Composing a custom IDE-like product is as easy as listing all needed extensions in a package.json file. Adding new functionality by implementing your own extensions or plug-ins is easy.
  3. VS Code Powered:
  4. Theia provides the VS Code experience in the browser. Developers familiar with Microsoft's great editor will find many familiar features and concepts, to minimze the gap when switching between desktop and cloud environment.

※Theiaの主な3つの特徴(日本語訳):

1. クラウドやデスクトップに: - Theiaは全てTypeScriptで記述されており、フロントエンド(UI)部分とバックエンド部分は切り離されています。
フロントエンド部分はモダンブラウザ上か、ローカルまたはリモート(クラウド)バックエンド環境を使用した、Electronデスクトップアプリケーションとして動作します。 1. 拡張が可能: - Theia自身は拡張機能によって構成されています。
IDEのような自作アプリケーションを作るのは、必要な拡張機能をpackage.jsonファイルに列挙するのと同じくらい簡単な事です。
また、独自の拡張機能やプラグインを実装し、新しい機能を追加する事も簡単に出来ます。 1. VS Codeを使用: - Theiaは、ブラウザ上でVS Codeの様なUXを提供します。
Microsoftの、この偉大なるエディタに精通している開発者は、デスクトップとクラウド環境を切り替える際のギャップを最小限に抑えるために、たくさんの使い慣れた機能や概念を見つけるでしょう。

※Theiaのその他の特徴:
- Supports JavaScript, Java, Python and many more - Built on the Language Server Protocol, Theia benefits from a growing ecosystem of over 60 available language servers, delivering intelligent editing support for all major programming languages. - Integrated Terminal - Theia integrates a full featured terminal, that reconnects on browser reload keeping the full history. - Flexible Layout - Theia's shell is based on PhosporJS, which provides a solid foundation for dragable dock layouts.

概要を見るだけでも、なかなかたくさんの技術を用いられている様子…。
少なくともTypescriptの知識はいるでしょうし…PhosphorJSの知識もいるかなぁ。

また、公式ドキュメントでは「TheiaはDI(依存性注入)という思想のもとで元で作られている」とあり…。
DIフレームワークとしてInversify.jsを用いているそうです。
ドキュメント中に、

DI is an integral part of Theia. Therefore, we highly recommend learning at least the basics of Inversify.js.
訳: DIという考え方はTheiaにとって不可欠な部分です。Theiaに関わる際は、Inversify.jsの基本を学ぶことを強くお勧めします。

ともありましたので…このInversify.jsも学んだ方が良さそうです。
筆者はこれらのフレームワークならまだしも、Typescriptすら全然知らない状態なので…。
Theiaに本格的に触れられる様になるには、かなり長い道のりを辿りそうです…気合い入れていくぞ！！

※なお、Typescriptに関しては別記事に学んだ事をまとめていこうかと思います。

補足説明-Theiaにおけるフロントエンドとバックエンドとは

Theiaにおけるフロントエンドとは、クライアントを示すものであるそうです。
また、このフロントエンド部分はUIをレンダリングする役割って事みたいですね。
※参考: Theia公式ドキュメント-Overview-Frontend

なお、バックエンド部分はNode.jsで動いているとのことです。
※参考: Theia公式ドキュメント-Overview-Backend

そして、フロントエンド部分とバックエンド部分同士の通信は下記の様に行われているそうです。
アプリケーションの形態によって、挙動が異なるみたいですね…。

  • ブラウザアプリケーションとして実行: JSON-RPCメッセージを通じたHTTPのWebSocketまたはREST API通信
  • Electronアプリケーションとして実行: ローカル環境下かリモート環境下であるならばリモートホスト上で実行

補足説明-DIに基づいた設計

Theiaは「依存性注入(DI)」という設計思想の元で作られているらしく…。
このDIを行うために、DIフレームワークのInversify.jsを用いているそうです。

そしてTheiaのドキュメントに「Theiaに関わる際はこのInversify.jsの基本を学んでおくことを強く推奨します。」との記載が。
それほどこのフレームワークは、Theiaと深く結びついているって事なんですね…。
※参考ページ: Theia - Cloud and Desktop IDE Platform

次回記事について

今回の記事で、とりあえずではありますがTheiaの大まかな概要や、使われている技術群には触れられたと思います。
もう少し公式ドキュメントの概要を深掘りしても良さそうですが、その前に一度、Theiaに実際に触れた方がいいかなとも思うので…。

次回の記事では、Theiaに触れる…具体的には、Theiaのインストールやら起動やらをやっていこうかと思います。
ではでは|дﾟ)

※なお、今回出てきた聞きなれない事柄や単語については、別記事にまとめようかと思います。
具体的には以下の様な事柄をまとめていこうかと…。

  • Theiaという単語の意
  • Typescriptとは
  • LSP(Language Server Protocol)とは
  • PhosphorJSとは
  • JSON-RPCとは
  • WebSocketとは
  • REST APIとは
  • Node.jsとは
  • DIとは
  • Inversify.jsとは

本当はこの記事に一緒に載せたいのですが、今回は分からない用語が多く、さらにその単語1個1個の重さもやばいので…この様な形をとりました。
さてこのまとめ記事がいつ出来上がるか…(遠い目)。

※出来上がりましたが、前後編の2記事になっちゃいました。
おまけの方が長いってどういうこと…。
Theiaで自作IDE構築をしよう その1(余談-前編) - Aikの技術日記