エディタには、プログラム言語の関数名を補完してくれたり、HTMLファイルに書かれている言語を見やすくしてくれたりと、高機能なものがたくさんあります。
便利なものや動作が軽いものなどよりさまざまです。
今回はWEBプログラマーにとって、最適なエディタをご紹介します。
そもそも、なぜ最適なテキストエディタが必要なの?
エディタはただ文字を書いていくだけならメモ帳です。どうして個々のプログラマーに合ったエディタが必要なのでしょうか。
「みんながこのエディタがいいいいといっているから」と選ぶのはちょっとお粗末な気がしませんか。
WEBプログラム(HTML、CSS、Javascipt、PHP、Rubyなど)を扱う時には下記のような問題が生まれます。
・タグ名、関数名、変数名の文字間違いによるエラー
・構文間違いによるエラー
・保存する文字コードによる文字化け
慣れていても単純な入力間違いやタグの閉じ忘れなどをしてしまいます。たった1文字違っているだけでもエラーになっちゃうんですね。
単純なミスほど、なぜエラーになっているのか探すのは難しいです。
小さな字で書いている辞書の1ページから、スペルミスを探すこと同じ、時間と労力がかかってしまいます。
エディタは、スペルミスを未然に防ぐために色を付けたり、太字にしてたりと、見やすくくれます。
また、関数名や属性名など途中まで文字を入力したときに該当する可能性のある関数一覧を表示してくれるような補完機能もあります。
便利でミスも少なくなる、効率よく時間を短縮するためのツールでもあるのです。
エディタの選び方によって、時間の無駄が省けるわけです。
WEBプログラマーにおすすめするテキストエディター3選
高機能なエディタであればあるほど使い方を覚える必要があります。
簡単で覚えやすく、なおかつオーソドックスなエディタを3つに絞ってご紹介します。
テキストエディタ:Vim
最強のエディタとも言われている「Vim」。
操作をキーボードだけで実行することができます。
WEB関連プログラマーだけでなく、サーバー系のプログラマーにもおすすめです。
元々UNIX/Linuxにはvi(vim)というコマンドが備わっており、CUI画面(コマンド入力画面)から実行することが出来ます。
「別に自分のパソコンはWindowsだし、関係なくない?」と思うかもしれませんがサーバー系のOSはUNIX/Linux系が多く使われており、ちょっとしたファイルの内容変更だとviコマンドで行った方が早いです。
・FTPソフトでログインしてファイルをダウンロード。ファイルを編集して保存。ファイルをアップロード。
という流れを、
・viコマンドで開いて該当の箇所を編集して保存
という単純な方法で行うことができます。
便利で早いのですが使い方が特徴的です。
実際の操作ではコマンドモードと編集モードがあり、内容を見る時・編集するとき・保存や終了するときも全てキーボードで操作します。
vimエディタがなくても、サーバーにSSHでログインしてつかえるので、覚えるまでは時間がかかりそうですが、WEB関連の仕事に携わる場合は知っておいて損はないです。
テキストエディタ:サクラエディタ
細かいところに手が届くエディタがサクラエディタです。
例えば、メモ帳でファイルを開くとウィンドウがたくさん表示されてどれがどのファイルかわからなくなる時があります。テキストエディタの場合は1つのウィンドウでそれぞれのファイルをタブ毎に表示してくれます。
それだけなら他のエディタと一緒なのですが、閉じるボタンの×を押したときの挙動を「ファイルを閉じる」か「全体を閉じる」か選ぶことができます。
また、HTMLやCSS、PHPなど開いたファイルの種類毎に表示の設定を行うことができるのですが、自分でこのワードにはこのようなスタイルで強調表示する、といったカスタマイズが出来ます。
文字コードを変換する場合にSJIS、EUC、UTF-8などの相互変換を一部だけ行うことや、自動で同じ動作を繰り返すマクロの機能もあります。
最初の設定と昨日の使い方を覚えるまでに多少時間はかかるかもしれませんが、マクロ機能などは大幅な時間の短縮が見込めるため検討する価値は高いでしょう。
利用者が多いため使い方の情報を検索することが簡単なのもいいですね。
テキストエディタ:Sublime Text 3
Sublime TextはWEBプログラムやサーバーサイドのプログラムでも軽快に使うことができます。
特徴的な機能はプラグインの管理機能です。
テキストエディタの機能を追加する場合、外部ファイルをダウンロードして所定の場所へ保存してエディタへ認識させるようなエディタが多いです。
しかしSublimeTextの場合は、エディタからインストール・アンインストールが3クリック程度で行えます。
例えば
プラグイン:Emmetを使うと
ul>li.item*5
と入力して「Ctlr+e」を押すと、
と表示してくれます。また、
html:5
と入力して「Ctlr+e」を押すと、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <ul> <liclass="item"></li> <liclass="item"></li> <liclass="item"></li> <liclass="item"></li> <liclass="item"></li> </ul> と表示してくれます。また、 html:5 と入力して「Ctlr+e」を押すと、 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> </head> <body> </body> </html> |
と表示してくれます。
わざわざテンプレファイルを準備していなくても簡単に作成することができますね。
「lang=”en” 」となっているところは設定ファイルを変更することで変更可能なので便利です。
上記の機能はプラグイン機能なので他のエディタでも使うことは可能です。
プラグインを使う操作が簡単というだけでなく、無駄な時間を省くことができるのでとても便利。
恋に落ちるエディタと言われているだけあって、使い勝手が洗練されていますね。自分もメロメロになりました(笑)
どのエディタが良いか?
便利なエディタはたくさんありますが、他人が決めるものではありません。あなたにピッタリでないと意味がないからです。
まずは今まで使ってきたエディタをベースとして比べてみるといいと思います。
使いやすいなぁと思ったら、自分に合っているエディタです。
私の場合は3年ほどサクラエディタを使っていましたが、現在はSublimeTextを使っています。
これは、マクロを使うような作業が減り、WEBに特化した作業が多くなったからです。
最適なものを選ぶというのは難しいかもしれませんが、使ってみないとわからないのでどんどん活用していきましょう。