logo-idv ico_pp

お気に入りのエディタを求めて

デザイン

designer_09_ttl

こんにちは。デザイナーのIです。
私は2015年に入社してからずっと、コーディング作業にはEclipseエディタを使っていました。
ある日のことです。いつものようにEclipseで、荒ぶるIEブラウザをCSSで鎮めていると、ふとこのような声が聞こえてきたのです。

「聞こえているか・・・わかっていると思うがお前にはEclipseなど過ぎた力だ・・・」

うるさいやい、Eclipseさんは多機能でGitもSVNも使えて便利なんだい・・・他の先輩デザイナーだってみんな・・・!
そう思いふと周りを見渡してみると、Web Stormを使っていたり、sublimeを使っていたり・・・
そうです、入社したての頃は誰もが使っていたEclipseは、今ではすっかり少数派になっていたのです。その声をきっかけに、私は改めてエディターについて調べてみました。そして、HTMLとCSS(+JS)のコーディング程度であれば、どのエディタでもさほど支障はでないのではないか、という結論に達しました。

思えば私のEclipseは、sublimeに憧れてワークスペースが黒でした。私の使い方が悪いのか謎のエラーも出ていましたし、文字を打っても反映されるまでにラグがありました。
ここらが潮時なのかもしれません。あの謎の声は、エディタを使いこなせずにいる私に対しての怒りの声だったのかもしれません。毎日エラーを吐きながら、私に一生懸命応えてくれたEclipseさん・・・。すべてはその良さを引き出すことのできなかった私の責任です。私はそっとEclipseさんに心からの感謝と別れを告げ、新たなエディターを探すことにしました。

Atomに乗り換えました

結論として新たなパートナーとして選んだのはAtom(アトム)でした。
導入が長くなりましたが本日は、私がエディタをAtomに乗り換えて良かったことをいくつかご紹介します。新たなエディタを探している方がいらっしゃいましたら、参考になれば幸いです。

Atomのいいところ

01[1]

Atomは、GitHubが開発したオープンソースのテキストエディタです。2015年の6月に、正式リリースされました。
特徴はやはり、その拡張性でしょうか。とにかくパッケージが多く、自分好みのエディタにカスタマイズすることができます。入れてよかった便利なプラグインは後ほどご紹介するとして、個人的にではありますが嬉しかったポイントを幾つかあげたいと思います。

・無料である(起動時に広告や有料版にしてねというポップアップもない!)
・拡張が簡単で充実!
・動作が軽い
・設定が簡単
・かわいい

無料だなんて、どうせ広告や有料案内が出るんでしょう・・・?半信半疑でインストールしたところ、広告も何もでず、そしてずっと無料でした。
02[1]

初期の状態では英語表記ですが、日本語化するのも非常に簡単です。深い階層まで入り込んで、ソースを変更する、なんて作業も必要なくできます。間違ったところに記述して、起動すらしなくなるといった危険性もありません。また、エディタの初期設定も非常に簡単で充実しており、タブやスペースの設定、自動インデントなど、プラグインを入れなくてもある程度快適に作業できます。
03[1]
ワークスペースはこのような感じです。インターフェーステーマ4種と、シンタックステーマ8種がデフォルトでインストールされています。

うれしいパッケージ

Atomはパッケージがとても充実しています。インストールもとても簡単です。設定から簡単に検索・インストール・アンインストール・使用停止ができます。
04[1]
画像ではすでに日本語化されていますが、初期では英語です。日本語化もパッケージで行います。インストールして有効にするだけで、とても簡単です。もちろん便利なパッケージは日本語化だけではありませんので、早速ご紹介したいと思います。

(1)リアルタイムでコードをチェック!linterシリーズ

うっかりタグを閉じ忘れたり。うっかりタイピングミスをしていたり。うっかりCしてVする範囲を間違えたり。そんなうっかりミスほど、発見に時間がかかったりするものです。何分もコードを睨みつけて、ようやく見つけて脱力する・・・そんな事はありませんか?linterパッケージを使えば、リアルタイム構文チェックができるのです!
05[1]
ErrorとWarningの二種類が赤とオレンジで色分けしてあり、該当箇所にカーソルがあると吹きだしでエラー内容が表示されます。吹き出しとは別に、ワークスペース下部にlinterステータスバーが表示され、一覧を確認することができます。表示は[Line]、[File]、[Project]とそれぞれ切り替えることができ、[at line xx col xx]という部分をクリックすると、該当箇所にジャンプできます。設定ファイルに記述する必要がありますが、細かいカスタマイズも可能です。
私が使用しているのは、linter-scsslintlinter-scsshintlinter-htmlhintlinter-jshintの4種類です。
js初心者の私にとっては、jshintはとても重宝します。括弧が一つ足りていないとか、セミコロンが足りないだとか!そういったうっかりミスは、初心者のやる気を物凄い勢いで削いでいきます。リアルタイムでチェックが入ると、勉強にも精が出るというものです。

(2)pigmentsで、カラーコードの背景に実際のカラーを表示!

SCSS/CSSでカラーコードを見ても、実際の色の見た目はなかなか思い出しづらいですよね?かと言ってその度にデザインを見るのも面倒です。pigmentsなら、カラーコードの背景に、実際の色を表示してくれるのでわかりやすいです!
06[1]
pigmentsのいいところは、なんと言っても変数に格納したカラーもきちんと表示してくれるという点です。弊社ではSASSを使用しており変数の登場頻度も高めなので、このプラグインはとても便利でした。
ちなみに、コメントアウトしていてもカラーはきちんと表示されます(*´ω`*)

(3)ファイル一覧が可愛い^^file-icons

ファイル一覧を表示したとき、名前+拡張子でもわからないことはないのですが、それぞれアイコンが表示されたらもっと見やすく(かわいく)わかりやすくなると思いませんか?
07[1]
なんてかわいいのでしょうか!いえ、なんて見やすいのでしょうか!もちろんhtmlやcssだけではなく、他のファイルもある程度はアイコンが表示されます。多くのファイルが混在している場合は、このようにパッと見た目でも判断できたほうが良いですよね。

もちろんこれだけではありませんが、すべてを紹介すると時間がかかりますので詳しくご紹介するのはここでやめておきます。
他にもFTP接続をしたり、ターミナルを使ったり、gitを使ったりと、一般のエディタにできることは殆どできます。繰り返しますがこんなにたくさんのことができて、Atomエディタは無料なんです!なんて良い世の中なのでしょうか。

終わりに

こうして私の新たなエディタ探しの旅は、Atomとの出会いによって幕を閉じました。私を恨んでいたであろうEclipseさんも、Dockから消えるときにはどこか穏やかな笑みを浮かべていたように思います。
コーディング作業が多いWeb制作には、使い勝手の良いエディタが必要不可欠だと思います。ちょっとした操作性の不満、ちょっとした仕様、ちょっとしたエラーが、あなたとエディタの溝を深く取り返しのつかないものにしてしまうのです。
新たにエディタを探している方、すでに使っているエディタを変えようか迷っている方は、ぜひAtomエディタをお試しください。
みなさまにとって唯一の、素敵なエディタが見つかるよう心からお祈りしています。

 

執筆者プロフィール

インターンを経て、2015年に新卒で入社したデザイナー。クリエイティブデザイン推進室所属。
3歳の飼い猫を溺愛しているが、非情にも猫は母に夢中。ブラッシングをしたり、食事の用意をしたりと身を尽くしているが、いつまで経っても母性に勝てないのが悩み