Firebaseを使ったWeb開発に便利なエディタ
Firebase を使って Web 開発する場合、どんなソフトウエア（アプリ）が必要か迷う場合あると思います。 皆さんはどのようなアプリをお使いですか？
今日は、Firebase とは直接関係ありませんが、Firebase を使って Web 開発をする場合にお勧めのエディタについての記事です。
開発内容によって変わるアプリ
今回、敢えて「Firebase を使った Web 開発」と書いたのには理由があります。 単にプログラミング（ソフトウエア開発）と言っても色々な開発があるからです。
例えば、あくまで個人的ですが、Java などの開発の場合は、IDE(Integrated Development Environment)と呼ばれるツールの方が便利なことが多いからです。私は、Java の開発の場合は Netbeans／Eclipse を中心に利用しています。一方で、Web 開発になると少し事情が変わってきます。
Netbeans などでも、Javascript の開発ができますが、色々試した結果、現在はエディタはマイクロソフトの Vscode に落ち着いています。他には利用者が多いエディタは Atom かなと思います。好みにもよると思いますが、Web 開発の場合はこの２つが２０２０年１２月時点ではお勧めのエディタです。
この記事では、Vscode を中心に記事を書いて行きます。
Vscode をお勧めする理由
いくつかありますが、主なものは以下の通りです。
＊ 無料（良いものならばお金を払うのは問題ないのですが、無料で高機能です）
＊ プラグインが豊富
＊ エディタからターミナル（コマンドプロンプト）が使える
このあたりが便利です。
上にも書いていますが、VSCODE は無料で提供されていますが、機能は豊富で色々なプログラミング言語に対応しているためとても高機能です。その中の一つが豊富なプラグインです。
私の場合、主に Web 開発で使っているので以下のようなプラグインを使っています。
＊ Prettier
＊ simple React Snippets
＊ Vetur
＊ Markdown Preview Enhanced
です。Prettier はコードの体裁を整えてくれるのが便利です。特に、コードのコピー＆ペーストをする場合には便利で多少インデントがズレていても修正してくれるので効率がアップします。 また、フレームワークとして、React や Vue を使うので、Simple React Snippets や Vetur は便利です。
Markdown Preview Enhance は、GitHub などにコードをおく場合ドキュメントを Markdown で書く場合が多いので、エディタで Markdown を描きながら表示を確認できるので重宝しています。
ターミナルがエディタから使えるのはとても便利です！
Web 開発の場合ターミナル（コマンドプロンプト）がエディタから使えるのはとても便利です。 Web 開発を行う場合、複数のユーティティを使う場合も多く、いくつかのプロジェクトを同時に広げてつかう場合も多いのでエディタからターミナル（コマンドプロンプト）を使えると助かる場合がたくさんあります。
例えば、Firebase を使って React で Web アプリを開発する場合です。
よくあるパターンは
ユーザーインターフェースで React のプロジェクト
バックエンドは Firebase で別のプロジェクト
などの場合です。 それぞれフォルダが違うので、ターミナル（コマンドプロンプト）のウインドウを別に開ける場合は、そのフォルダまで移動する必要がありますが、VSCODE でプロジェクトのフォルダを開いている場合はその必要がありません。また、開いているプロジェクトのフォルダなので別のプロジェクトの物と間違えることも少なくなります。
Firebase を利用してバックエンドも使った開発の場合は、バックエンドとフロントエンドは分けて開発する場合が多くなります。
バックエンドのファンクション（functions）は、Firebase のエミュレータを動かす場合が多いので
$ firebase serve
を動かす場合が多いので、まずはバックエンドのプロジェクトを開いているウインドウで動かします。 Typescript で開発する場合が多いので、別にコードを変更するとコンパイルするための、ターミナルが必要ですが、VSCODE の場合複数の別のターミナルを開けるのでコンパイルはそこで実行できます。
フロントエンドのユーザーインターフェースは React でつくるので、React の開発用のサーバーを使います。
$ npm start
で別の開発用のサーバーを動かします。
またコードを書いている途中で、NPM の別のモジュールを導入したい場合も、VSCODE のターミナルからインストールのコマンドを実行できるのでとても便利です。
Git の対応もしています
Git や GitHub を使っている場合にも、便利です。Git 対応もしているので、エディタからコードのコミットやプッシュもできますし、変更したファイルや変更箇所もわかるようになっていて、便利です。変更の破棄も簡単にできるので、試してみてうまくいかない場合は元の状態に戻して再度別のやり方を試すこともできます。
Mac でも Windows でも使える！
もうひとつ便利なのは、Mac でも Windows でもほぼ同じ環境で使えるのは魅力的です。 完全に別のエディタだと操作方法が違ったりする場合も多いですが、VSCODE の場合は操作方法もほぼ同じです。
私は、Mac と Windows を使い分けていますが、その際も便利です。
両方の開発用の PC を利用している場合だけでなく、将来的に Windows から Mac あるいはその逆に切り替える際にも、同じエディタを使えるのも魅力です。
プロジェクト単位で開ける！
IDE もそうですが、VSCODE や ATOM の場合プロジェクト単位で開いて、複数のファイルを編集できるのも便利です。ある程度の規模の開発の場合、非常に多くのファイルに設計が分けられる場合が多く、ファイル毎に開くタイプだと不便です。
プロジェクト全体を開いて、フォルダに振り分けられていても比較的簡単に必要なファイルがすぐに開けると開発効率がアップします。
まとめ
Firebase を使って Web アプリを開発する場合、複数のプロジェクトに分割される場合も多く、エディタからターミナル（コマンドプロンプト）を使えたりすると非常に開発の効率が上がります。エディタとターミナル（コマンドプロンプト）を別々に複数開けるとどれがどのフォルダの物か間違えやすくなり面倒です。
マイクロソフトの VSCODE は無料で高機能なエディタでこうした Web 開発にはとても便利なエディタです。
何をつかうか迷われている場合は是非お試しください。
