CodeMirror,Expressでエディタを作る
i_rei初めて個人開発をやる者がマイペースに更新しています。
備忘録及び開発日記のようなものです。したがって、（続けば）グダグダ続きます。
ここに載せたコードに、間違っているとか、こうした方がいいとか、意見があれば教えてくださると嬉しいです。
i_reiWeb上で動くエディターアプリのようなものを作りたい。
スマホからアクセスしてプログラミングしたり、今使っている人が多くなっている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_reiCodeMirrorに慣れる。
textareaのサイズをどう変えるかわからず、そしたら
<textarea row=50 cols=30></textarea>
でもなく、
textarea{
width:100%;
height:100%;
}
でもなく、
const editor = CodeMirror.fromTextArea... //以下略
editor.setSize(400,600);
だった。
CodeMirrorは日本語の情報があまりない。
i_rei色々考えて、Reactで開発することにした。
そのため、React勉強中。
i_rei随時更新する予定です。
Reactの勉強に使っているサイトなど。
- すぐ実務に入りたい人のためのReact入門
- React(Progate,1のみ）
- 初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう！
- Reactチュートリアル1：犬画像ギャラリーを作ろう
- [初心者向け]Reactの基礎を徹底解説してみた
-
QiitaやZennのReactやコンポーネントに関する記事
これから使いたいサイトなど。
i_reiReactを身構えていたのだけど、やって見ると意外とシンプル。
JSXという独自の記法を使っているのも何となく避けていた一つの原因だけど、HTMLやJavaScriptを知っていればすんなりと慣れる。
HTMLをコンポーネントで分けるから、管理もしやすそう。
i_reiCSSもフレームワークを使うことにした。
TailwindCSSと、Bulma で悩んでいるけれど、TailwindCSS にすると思う。
codemirror は react-in-simple-editor or react-codemirror2 かな。