Progateのようなブラウザで変更できるエディタの自作

Question

前提・実現したいこと

プログラミングの教材を作成するためと、自分の技術・知識向上のためにブラウザでコードを変更できるエディタの作成を目指しています。
vscodeやatomでもいいのですが、対象が初心者や無知識の人ですので、煩わしさなど少しでも敬遠する苦手意識を下げたものを作成したいです。
将来的には穴埋めのようにしてゲーム感覚を少しでも取り入れたいと思っています。

難しいのはわかっているのですがどうしても作成したいので質問しました。

できている範囲

・vscodeのmimosaというのを使い、ブラウザにエディタを表示して書き込めるようにする
・iframeとxampp（vsc起点ならhttp-serverコマンドで可能？）でリアルタイムでプレビューが変わる
・穴埋めはtextareaとjsで一応作成（将来的にはDBとlaravelかなと）

次にしたいこと

入力補完に尽きます。

ほぼできているのでデザインを決めてその通りにコーディングすればある程度できますが、入力がすごく面倒になるので実現したいブラウザエディタにはなっていません。
emmetなどを読み込めればできるのかと思ったのですが方法がわからず、自作しようにもよくわからないので教えてください。

補足情報

OS：windows 10
エディタ:vscode（限定ではない）

CODEPENやpaizaなどを使えばいいといわれますが、自作が目的ですのでお願いします。

Answer 1

どこから自作するかによりますがとりあえず React なんかの Web フレームワークくらいは使う体で話しますね。それすら知らない場合はお調べください。

まず入力補間ですが、ごく単純なものだったら結構単純にできるでしょう。カーソル位置は[selectionStart か selectionEnd] (https://developer.mozilla.org/ja/docs/Web/API/HTMLTextAreaElement)から取れるので、その後方を見ていけばプログラミング言語は概ね記号かスペースで区切られているので入力途中の単語を抽出でき、後はキーワードリストから絞っていけばよいでしょう。

しかし使い物にするためには例えば自分で宣言した変数をサジェストしてもらいたかったり、特定のキーワードの後には特定の種類の変数しか来なかったりという補完もしてもらいたいと思います。そうなると今度はプログラミング言語の構文解析とか意味論というめちゃくちゃ難しい領域に足を突っ込んでいくことになります。それぞれそれだけで分厚い本が書けるレベルのお話ですね。しかもそれをプログラムに落とし込むのはかなりの力量がいります。

また、<textarea> もぜひシンタックスハイライトを効かせたいことでしょう。ですがあの中身、HTML 入れらんないんっすよ！つまり単語個別に色付け無理なんです。でも Codepen とかやってんじゃーんって思うかもしれませんが、F12 を押して開発者ツールで見てみると、<textarea> の上に一行一単語ずつ <div> や <span> で囲んだりしてます。狂気ですね！

……とまあ自作するの結構大変なんですよね、アレ。どこまで自作するか、どこから他人の物頼るか考えながら作ると良いと思います。