CodeMirror,Expressでエディタを作る

ピン留めされたアイテム

初めて個人開発をやる者がマイペースに更新しています。
備忘録及び開発日記のようなものです。したがって、（続けば）グダグダ続きます。
ここに載せたコードに、間違っているとか、こうした方がいいとか、意見があれば教えてくださると嬉しいです。

Web上で動くエディターアプリのようなものを作りたい。
スマホからアクセスしてプログラミングしたり、今使っている人が多くなっているChromeBookで使えたりしたらいいなと思っている。もちろんWindowsやMacからでもOK。
詳しくはQiitaで書いているので、アイデアの理由などはそちらを参照してください。

i_rei

技術構成

フロントエンド

React

バックエンド

Express（Node.js）

ライブラリなど

Codemirror（エディタ）
xterm.js（もしかしたら使うかも）

開発ツールなど

Vimで開発する。
ESLint使用
Prettier使用

2021/3/21追記: Reactで開発することにした。

以下は何の飾り気もないHTMLとCSSでやろうとしていた頃の独り言.

素のHTML＆CSSにちかい状態でやるので、無謀。まぁいいか。

VueやReactを使えばいいのだけれど、なぜ使わないかというと、Vueは学習コスト低いと言われるけれど、個人
的に変な感じがする（HTMLとJavaScriptが交じっているような感じ）。

Reactは興味あるけれど、今からこの開発をしたくて、Reactは学ぶのに時間が少々かかりそうで、という理由で
やっていない。

どうしよう。

i_rei

CodeMirrorに慣れる。
textareaのサイズをどう変えるかわからず、そしたら

html

<textarea row=50 cols=30></textarea>

でもなく、

css

textarea{
  width:100%;
  height:100%;
}

でもなく、

javascript

const editor = CodeMirror.fromTextArea...  //以下略
editor.setSize(400,600);

だった。
CodeMirrorは日本語の情報があまりない。

i_rei

色々考えて、Reactで開発することにした。
そのため、React勉強中。

i_rei

随時更新する予定です。

Reactの勉強に使っているサイトなど。

これから使いたいサイトなど。

i_rei

Reactを身構えていたのだけど、やって見ると意外とシンプル。
JSXという独自の記法を使っているのも何となく避けていた一つの原因だけど、HTMLやJavaScriptを知っていればすんなりと慣れる。
HTMLをコンポーネントで分けるから、管理もしやすそう。

i_rei

CSSもフレームワークを使うことにした。
TailwindCSSと、Bulma で悩んでいるけれど、TailwindCSS にすると思う。
codemirror は react-in-simple-editor or react-codemirror2 かな。