webで動くIDEライクなテキストエディタを作りたい

これは個人アプリ/サービス開発の進め方と運用、得た学び - 02【PR】 Lenovo Advent Calendar 2020の１２日目の記事です。

スマホでプログラミングすることは普通になるのか？

今ほとんどの人はパソコンでプログラミングしていると思います。スマホでもプログラミング用のIDEやテキストエディタアプリ数多く存在しますが、多くの人はスマホでプログラミングすることはなかなかないでしょう。その理由は画面が小さいからとかキーボードが打ちにくいとか色々あると思います。

一方、スマホも年々進化しています。１０年ほど前に生まれたスマートフォンは今や街では必ず見かけるものとなり、個人的に世界からスマホが消えたらとんでもないことになるのでは、と感じています。

で、最近考えていることが、

いつかスマホでプログラミングするのが普通になるのか？

ということです。

まだまだプログラミングするのはパソコンが普通だとは思います。
しかし、スマホがもっと進化して高機能なCPUを搭載するようになるのがそう遠くない未来のように感じます。ストレージについてはもうパソコンとスマホの違いは小さくなっていると思います。
例えば、これはAppleのiPhone 12とMacBook Air(M1)のメモリとストレージの比較です。

iPhone 12	MacBook Air
4GB	8GB/16GB
64GB/128GB/256GB	256GB/512GB/1TB/2TB

上段がメモリ、下段がストレージの容量です。

メモリはまだ足りないかもしれませんね。iPhone 12 Proは６GB だったと思います。ですが、シンプルなIDEを一つ使って開発するぐらいなら、おそらく4GBで足ります。（自分の経験）

しかし、AndroidStudioやUnityのようなものになると、ある程度スピーディーに動かすには最低8GBは必要だと思います。今スマホでそのようなアプリは使えるものは殆どないと思います。でもあと10年経てば8GBは使えそう。

一方、ストレージはもうパソコンに追いついたと言って良いのではないでしょうか。256GBあれば仕事で使うなら難しいかもしれませんが、個人で使うレベルではひとまず大丈夫そうです。外付けストレージも使えばどうにかなるのではないでしょうか。

それに今はGoogleDriveなどありますから、ローカルのストレージ容量が多くなくてもプログラミングできるかもしれませんね。

結論として、スマホのスペックの観点からいうとスマホでプログラミングすることは、大規模なものでなければ可能だと感じます。

自分は何を作りたいのか？

今考えているのは、Webアプリとして動作するテキストエディタです。コンソールでの実行もしたいので、すこしIDE的な要素も導入できたらと考えています。

なぜ作ろうと思ったのか？

上記の通り、スマホでプログラミングすることがこれから一般化するかもしれないと考えました。
そうでなくても、一度作ってみたかったのも事実です。自分が使うのに最適化したものも作ってみたかったです。

なぜWebアプリなのか？

自分にJavaなどのスマホアプリを作る言語の知識がありませんでした。ある程度知っている言語で作るほうがスムーズに開発できると考えました。
HTML&CSSやJavaScriptはバリバリ使える、というレベルではありませんが一通り知っていたので、頑張ってみようと思いました。

Webアプリにすることでいくつかメリットも生まれると感じました。

• インストールの手間がない（アップデートの手間もない）
• IOSとAndoroid向けそれぞれに行う動作を減らすことができる
• 開発時のデバッグが楽（だと思う）
• インストールする必要がないためストレージを使わないで済む

Webアプリにする際は、スマホで利用できるようにUIを設定したいと考えています。

どの言語のエディタなのか？

少しづつ言語のサポートは増やしていきたいと思っています。
Pythonを最初に実装すると思います。

理由

• 今使われている言語中でも人気だから
• 機械学習などに向いており、これからの時代に沿っていると感じるから
• 作業の効率化なども可能だから

など。その次に実装するとしたらJavaScriptですかね。Webでの用途が大きく、これからも使われる言語の一つだと思います。

少し本題からそれて.....スマホでのアプリ開発の長所、短所

長所

最大の利点はスマホのコンパクトさを生かした、「どこでもコーディングできる」という点ではないでしょうか。

パソコンは近年どんどん軽くなり薄くなり、ノートパソコンなるものも生まれ、持ち運びは気軽にできると思います。

しかし軽くてもサイズが大きく、どこに出かけるにも持っていこうとするのは大変なのではないでしょうか。自分の場合、身軽に散歩したいときにパソコンのためにショルダーバッグやリュックサックを使うのは気が重いです。

しかしスマホはどこへ行くにも持っていく人がほとんどだと思います。それに小さいため少々狭いところでもコーディングが可能です。

例えば満員列車の中。人と待ち合わせしていて、待っているちょっとした時間。出かけているとき、ふと思いついたアイデア。
いつでもどこでも、スマホをさっと開いて、コーディングすることが可能です。やはりこれが最大の長所ではないでしょうか。

次にこれは個人的な要素が多く含まれている意見です。

今の時代、多くの小学生、中高生はパソコンを使わずにスマホを使いこなしています。彼らはパソコンのキーボードよりスマホのフリック入力のほうが慣れていると思います。

IT人材が求められている今の日本、小中学校でも2020年度よりプログラミング教育が始まりました。
おそらく最初はScratchなどビジュアルプログラミング言語でプログラミングすると思います。

しかしScratchで実用的なものを作ることには限界があり、やはり文字を使うプログラミングが必要だと感じます。

例えば日本語プログラミング言語のなでしこを使うことで、日々の作業の効率化が可能です。

そして本格的なプログラミングをする際、彼ら小中高生には、パソコンを使うより、スマホを使うほうがプログラミングへの敷居が低くなるのでは、というのが自分の考えです。

違う可能性もありますが、もしそうであるならば、身近にあるスマホはプログラミングへの扉になります。

そして、プログラミング言語を使う、そしてそれによる結果の喜びを覚えることができれば、プログラミングする子供がもっと増えるのではと思います。

例えば実用性があるかはここでは考えませんが、

• Webスクレイピングをして好きなアニメキャラの情報を集める。
• 英単語を音声検索するとシンプルに意味や例文を教えてくれる
• 自分に最適な単語帳を作る

などなど。かんたんなものではありませんが、このようなものを作ることによって自分の趣味や勉強に役立てることができると思います。

短所

Paiza.ioなど、オンライン開発環境はたくさんあります。このような実行環境は多くの言語をサポートしており、ログインして利用することで更にログインしないで利用するよりも便利に使うことができます。

しかし、このようなオンライン開発環境にスマホからアクセスしてみると、どうしても使いづらく感じてしまいます。（使えないわけではありません）

おそらく理由として、パソコンでの使用を前提にしてUI・UXが設計されていると思うので、スマホで使うとそれが仇になってしますのかと思います（スマホに最適化されているものがあったらごめんなさい）。

例えばPaiza.ioにスマホでアクセスしてコードを書こうとすると、

エディタ画面
コンソール（実行結果表示）
キーボード

が三段に表示されます。
キーボードがスマホ画面の三分の一は占めるため、結果的にエディタ画面が小さくなり、コードが見づらくなります。

さらに、スマホのキーボードは小さいため指が大きい方は特に、そうでなくてもしばしば打ち間違いを起こします。

それを削除してまた入力するのは非常に非効率です。
フリック式キーボードだと打ち間違いは多少減るかもしれませんが、QWERTY式キーボードだとキーはとても小さいです。

第二に、プログラミングするときに使用する記号（{}や()、;、:、""など）や演算子は日常での使用頻度が非常に低いため、スマホのキーボードではぱっと使うことができません。

スマホ用のIDE・テキストエディタではこのような記号のみ別に配置して使いやすくしているものもありますが、やはりパソコンには劣るでしょう。

第三に、スマホの画面が小さい以上仕方がない部分ですが、コードが長くなった場合、一覧性が悪くなります。
行番号を利用して移動することもできますが、スクロールし続けるのは大変だと思います。

第四に、スマホの画面は多くのパソコンやパソコンのモニタと違い、縦に長く、横は短いです。そのため、長いコードを書いていると横にスクロールするか、折り返す必要性がすぐ発生します。

個人的にコードが折り返されているのが苦手なのですが、縦のスクロールに加えて横にスクロールするするとなると、開発効率は下がるでしょう。

細かい設計

ここからはどのような言語で作るかなどと細かい部分について考え、記述していこうと思います。

フロントエンド

基本

HTML など基本の言語、JavaScriptを使用しようと考えました。

altJS や Sass は使えないため今回は使用しません。

加えて、ReactをUIに使用する予定です。
Reactは今、Progateで学んでいます。

2021/1/10追記：
Reactではなく、テンプレートエンジンのEJSを使うことにしました。

コードエディタのためのライブラリなど

CodeMirrorというJavaScriptライブラリを使用します。GitHubなどでも使われているライブラリです。シンタックスハイライトやオートインデントなど、エディタに要求するものは一通り揃っているようです。

今の所考えているものはこれくらいですが、必要性が出てきたら追加していくかもしれません。

画面構成

画面の構成としては、エディタ画面と、コンソール（結果表示）画面を作り、Webブラウザのタブのように切り替えられたらなと思います。エディタ画面に実行ボタンを配置します。

最低限の機能でできるだけシンプルに作ることで、スマホでも使いやすくしたいと考えています。

ライトテーマとダークテーマを二つ用意したいです。自分はダークテーマ派なのでダークテーマばかり増える可能性もありますが。

サーバーサイドなど

サーバーサイド

基本的にNode.jsのフレームワーク、Expressを利用します。

オンラインで実行するためにどうするかと考え、検索していたところこのようなものが見つかりました。
paizaのオンラインジャッジを支えるDockerとその周辺
Progateユーザーのコード実行環境

こちらのサイトを見たところ、どちらもDockerを使用しているようです。

自分もならってDockerを利用することにしました。

オンライン上でDockerを使用するために、オンライン上でコマンドを実行することが必要だと考えました。

【Node.js入門】python-shellによるNode.jsとPythonのデータ連携方法まとめ

こちらとPythonのimport osを利用してできないかと考えています。できなかったら教えて下さい。そしたらこのアイデアすら危ういですが。

サーバー

Heroku を使ってデプロイしたいと考えています。

その他

Google でのログイン機能を作りたいのでFirebase は使うかもしれません。GoogleDrive でファイルのアップロード・ダウンロードをしたいので、GoogleDriveAPI を使用すると思います。

ですがログイン機能を作るのは後回しになるかもしれません。

まとめ

実際に完成するのは、来年の半ばごろを目標にしています。ですが来年は忙しくなりそうな年でもあるので、遅れる可能性もあると思います。

実際に完成したらQiitaで紹介したいと考えています。

最後までお読みいただきありがとうございました。