こんにちは！侍エンジニア塾ブログ編集部の井上です。近年注目を集める、JavaScriptですが、効率的に書いていくのに実際どのテキストエディタが適しているのか、気になりますよね。
実際テキストエディタは、「料理人の包丁」と例えられるくらい、エンジニアにとって大切なツールです。そこで今回は、特にJavaScriptを書く際に最適な、無料で使えるおすすめのテキストエディタを紹介していきます！
まだテキストエディタにこだわっていない方は、学習や開発効率が段違いになりますのでこの記事で是非導入してみてください。
そもそもテキストエディタって？
そもそもテキストエディタがどういうもので、なにが便利なのかイマイチわからないという方もいるかと思います。テキストエディタにはそれぞれ特徴があり、用途によってどれが向いているか多少変わってきます。
そんなテキストエディタの概要や、用途別の紹介などは下記もご参考ください。
JavaScriptを使用する時に使いたい機能
プレビュー機能
例えば、HTMLやCSSを表示させる機能です。イメージ通りに表示されているか、その都度確認できると作業が楽になります。この機能がないと、いちいち画面を切り替えたりする手間が発生します。
ちょっとしたことですが、この機能があるのとないのとでは作業ストレスと作業効率が断然変わります。
リビジョン機能
プログラムを組む上で、リビジョンの確認は重要です。何かトラブルが発生した場合、トラブル前に環境を戻さなければならないこともあります。
また、どの時点で問題が発生したのかや誰がいつ行なった作業なのかを特定しなければなりません。品質保証の観点からリビジョンを簡単に確認・管理できるのはとても大切な機能です。
予測変換機能
全ての構文を書かなくても、予測変換で表示してくれると記述量が少なくて作業もはかどります。また、スペルミスを未然に防ぐこともできます。熟練者であれば、構文を短縮できて楽…程度ですみます。
しかし、初心者は構文やスペルをいちいち確認しなければなりません。その作業が省かれるだけでも、プログラミング学習に対してのハードルがだいぶ下がります。
構文の色分け表示機能
構文を色分けで表示してくれると、見やすいので作業の効率化にもつながります。プログラミングは文字の羅列であり、長文や記述量が多くなればなるほど解読が難しくなります。
また、HTML や PHP 内のスクリプトを VBScript といった別の構文色分けで表示できる埋め込みHTML構文に対応していればさらに使い勝手がいいでしょう。
ショートカットキー機能
マウスを中心に操作する人もいますが、キーボードで作業される方はショットカットキーが作業に大きく影響します。
ショートカットキーがなければ、いちいちマウスでボタンをクリックしなければならないストレスが発生します。キーボード操作に慣れているプログラマにとって、大きなストレスです。
また、別のエディタから乗り換えた時に、もともと使っていたエディタのショートカットキーの癖というのはなかなか抜けません。新しい使い勝手が良いエディタが登場しても、ストレスなく操作できるという理由で乗り換えられない人は多くいます。
しかし、自分の使いやすいショートカットキーにカスタマイズできると、使い慣れたエディタとほとんど変わらずに操作できます。
2画面で動きを確認しながら操作できる機能
動きを確認しながらプログラミングを組めると、ミスが起きにくくなります。また、頭の中で描いていた方法をその都度確認できるので非常に便利です。書いたプログラムをいちいち確認するための作業工数が減る分、作業効率化とストレスが無くなります。
コードの記述ミスがわかる機能
スペルチェック機能は、初心者だけでなく熟練したコーダーでもあると非常に便利な機能です。やはり人間なので、ちょっとした凡ミスはしてしまいます。
また、凡ミスほど見つけにくく、作業の手間がかかります。そういった無駄な作業を未然に防ぐことができます。
エディタをカスタマイズできる機能
テキストエディタは使い勝手が命です。見た目など、自分が欲しいところに欲しい機能を表示できるようにできるといいでしょう。
ショートカットキーでも述べましたが、一つのエディタを使い込めば使い込むほど、他のエディタが使いづらくなります。同じ会社が作っているエディタであればそこまで大きな変更はないかもしれません。
また、よく使う機能は人によって異なります。少しでも自分が使いやすい環境に整えるために、エディタがカスタマイズできるのは大きなメリットです。
Atom
Atomとは？
まずAtomの公式サイトでは下記のように紹介されています。
Atom is a text editor that’s modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file.
＞Atomはモダンなテキストエディタです。ややこしい設定ファイルを一切触ること無くカスタマイズして、あなたの生産性をあげることが出来るツールです。
Atomは、GitHubというプログラミング共有サービスを運営している企業から提供されているテキストエディタです。プログラムの扱い方のエキスパートたちが作成したエディタなので、その精錬された使い心地は「クール」という他ありません。
おすすめポイント
自分で好きなプラグインを入れてカスタマイズ出来るのは勿論、何より細かな挙動の使い心地が秀逸です。JavaScriptにおいても勿論、見やすくしたり、書きやすくしたりするプラグインが有ります。
Atomについての詳しいインストール方法などはこちらでも紹介していますので合わせてご覧ください。
こんな人におすすめ！
- 最新のツールを使いたい！
- 格好良いのが好き！
SublimeText
SublimeTextとは？
Sublime Text is a sophisticated text editor for code, markup and prose.
You’ll love the slick user interface, extraordinary features and amazing performance.
＞Sbline Textは（HTMLなどの）マークアップや（プログラミング言語のような）文章など複雑なコードを編集するためのテキストエディタです。あなたはこのなめらかな使い心地で、驚くようなパフォーマンスをあげられることにやみつきになるでしょう。
SublimeTextは、特にHTMLやCSS、JavaScriptといった、フロント言語を扱うコーダーさんに特に人気のあるテキストエディタです。SublimeTextの詳しいインストール方法などはこちらで紹介していますのでご参考ください。
おすすめポイント
拡張性の高いテキストエディタの中ではかなり軽量で、起動時などでも待ち時間が発生しにくいのでストレスがかかりません。Atomよりも歴史があるため、専用のカスタマイズ用の書籍もあります。
こちらでテキストエディタを使いこなすための学習をすることも出来ます。
なお、しばしば当ブログでもオススメしている「Cloud9」もデフォルトでSublimeTextのエディタが採用されています。Cloud9でJavaScriptを学習するのも効率的なので、Cloud9について知りたい方はこちらも合わせてご覧ください。
こんな人におすすめ！
- サクサク動かしたい！
- フロントエンジニアを目指している！
WEB制作会社で務める人、努めようと思っている人、皆が使っているものを使いたい人におすすめです。
Vim
※画像、およびリンクはKaoriyaさんが開発しているWindows専用のVimです。
※通常のLinux用のVimや、Mac専用のVimなどもあります。
Vimとは？
最後に比較的玄人向けですが、Vimというエディタを紹介します。キーボードだけでファイル選択から編集まですべて行える、コマンドライン（黒い画面）上で使えるエディタです。
慣れるとものすごいスピードで編集出来るようになりますが、普通に文章を書くためにも最低限の練習が必要です。
テキストエディタ専用のコマンドや操作感を習得するためには、プログラミング言語をひとつ覚えるくらいの時間が必要では有ります。
ドットインストールにもVimも学習動画があるので興味の有る方は見てみて下さい。
Vimの詳しい使い方や便利なコマンドなどに関してはこちらをご参考ください。
おすすめポイント
Vimはなんといってもその編集スピードの速さが魅力です。もちろんJavaScriptなどのコードを書きやすくする機能拡張用のプラグインが豊富に揃っています。
また、今後JavaScriptを学習し終わった後に、RubyやPHPなどのサーバサイドの言語を学ぶようになると、サーバ上で直接ソースを編集するときにも便利に使えるようになります。
こんな人におすすめ！
- 多少学習コストがかかっても開発効率を上げたい！
- 珍しい物好き！
どうせ使うなら時間を使ってすごい玄人向けのエディタ使えるようになりたい！なんかカッコいい！と思える人におすすめです。
まとめ
JavaScriptに最適なテキストエディタを紹介してきましたがいかがでしたか？もちろんどれを使っても自分の作りたいものを作っていくということは可能では有ります。
ただ、プログラマにとってのテキストエディタは料理人にとっての包丁のようなもの。是非こだわりを持って自分なりにカスタマイズしてみてくださいね！
こちらで他のテキストエディタの比較記事も取り扱っておりますので合わせてご覧ください。
JavaScriptカリキュラム無料公開中！
この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。
JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。
JavaScriptを最短で習得したい方へ
弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように
- プログラミング基礎学習
- オリジナルアプリ開発
- 仕事獲得
まで徹底したサポートを行っています。
まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか？
JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。
詳しくは下の画像をクリックして弊社サービス内容をご確認ください。
