モノサスサイトでは初めて記事を書かせて頂きます、コーディングファクトリー（以下、略して CF ）コーダーの大坂です。

突然ですが、職人道具って面白いですよね。別業種の人が見たら使い方がまったく分からないものがあったり日常で使うものとは別の使い方で使ったり。理由を聞くと感心することが多いです。

我々コーダーの職人道具といえば、マークアップに関連する言語とエディタ（と言っても過言ではないはず）。特にフロントエンドのエディタは様々な種類があり特徴もそれぞれ異なります。

そんなエディタを最先端のコーダー達はどのようにして選び、使っているのか。個人的に気になったので、CF コーダー全員に聞いて調査してみました。
中でも数が多かった3つのエディタについて紹介します。

エディタのカスタマイズにはこだわりがある金さん
 

エディタ紹介
 

1. atom

インデントが分かりやすいよう水色の太線のカスタマイズを入れたことがこだわりポイントです。

• プラグインが豊富で初期設定が楽

Github 製のオープンソースのエディタということもあり、利用者がテーマやパッケージを整えることで常に発展しています。私は今でも atom を使っています。

自分で使っていて一番便利だと感じるのはショートカット。例えば文章を複製する際は通常のテキストエディタだとテキストを選択して「Ctrl+C」を押した後「Ctrl+V」のコピー&ペーストですが、atomはそれ以外にも「Ctrl + Shift + D」( D は duplicate の D と覚えると便利）でコピーをせずにそのまま下の行に複製することが出来ます。

押さえるキーの総合計は同じだとしても「一回押せば済む」だけで編集の時間は変わってきます。そのような細かい部分こだわる所は職人らしくていいなと思います。
 

2. Dreamweaver

右上のサイト管理のウィンドウ内で画像名称を変えるとパスを変えてくれます。

• 大規模サイトの案件だとサイト管理や一括置換時に重宝する
• ファイルの位置を変えるとパスが変わる機能が便利

Adobe 製品の「 Dreamweaver 」は独自の機能が多い反面、カスタマイズはしにくい為、サブエディタとして使っている人が多かったです。

なぜ大規模サイトに向いているかというと、例えば画像ファイルを一つ下の階層に移動した際、関連するパスも書き換えなければならないので管理するファイルが多ければ多いほど書き換える場所も増えてきます。しかし Dreamweaver なら画像を移動するとそれに関連するパスを自動で書き換えてくれます。

後は特に多かった意見として、シニアコーダーは「長年使っているから慣れたものは使いやすい」というものがありました。自分の職人道具に愛着を持つというのも素晴らしいことですね。
 

3. PHP Storm(Web Storm)

• プラグインを入れなくても最初から入っている機能が多くて便利
• パフォーマンスが安定していて、環境が整っているのでsassやjadeも使いやすい
• データベースとか色々あるから将来的に backend にも使える

今、CF チームでは Jetbrains 製品の PHP Storm が大流行しています。とあるコーダーSさんが営業かの如くセールスポイントを教えてくれるので「なるほど、確かに便利だ」と、使う人が増えているようです。
特にプラグインを入れなくていいというのは使っている人間からすると地味に便利で「エディタ自身をアップデートした関係でプラグインが動かなくなった」「あのプラグインとあのプラグインが競合して動作が不安定」「たくさんプラグインを入れたらどれかのせいで重くなった」などの悩みがなくなります。

そこまで色々良い機能があるなら実際に使ってみようかということで早速ダウンロードしてみました。有料ではありますが30日間のお試し期間があるのでそこで見極めるのもいいかなと思いました。

PHPStorm 画面。大好きな「 Monokai 」テーマが標準で入っていて安心
 

確かに色々な機能がデフォルトで入っている！

通常画面で「 Shift を2回」押すことでファイル名、クラス名、シンボル名、ショートカット設定などササっと検索出来たり、標準でエラー表示が出たり(他エディタだとプラグインを入れなければいけない)、「 Ctrl + Space 」でコード補完出来るので、画像のパスを入れる際にも補完出来て便利など、他エディタでは出来なかった痒い場所に手が届く仕様が非常に使いやすいです。
 

Sass のオートコンパイルが便利！

通常 Sass （ SCSS ）ファイルをコンパイルするのには専用ツールを使ったり小難しいコードを書いたりしなければならないのですが PHP Storm の自動保存と組み合わせると Sass を書いた直後にコンパイルしてくれます。「あれ？ページを更新したのに反映されない…あ、コンパイルしてなかった」という”Sassあるある”とはもうオサラバ出来ます。
 

日本語化があまり進んでいない…

公式に日本語化がされていないためデフォルトのメニュー画面が全て英語となっています。普段使う分にはあまり支障は無いですが、細かい設定を変更する際は少し不便です。

自分好みのエディタの議論には特に熱くなってしまいます。
 

「スピード重視」のためのエディタ

話を聞いていて、全員に共通していたのは「いかに効率良く、短時間でコードを書くか」を極めるためにエディタを選んでいることでした。ショートカットも様々なオート機能も結局は時間効率を上げるためのもの。上手く使いこなしてこそ意味があります。みんなの良いものをスピーディーに作ることにかける情熱には、熱い職人魂を感じました。
 

最初は標準のテキストエディタから

思い起こせば神山ものさす塾（第一期）で初めてコーディングを学んだ際は、特に機能のついていない Windows 標準のテキストエディタでした。改行してもインデントが自動でつかない為、慎重にスペースキーを押してコードを書いていたのを覚えています。

CSS のプロパティ名を入力しても自動で候補が出てくるわけでもない分、プロパティの書き方を単語カードに書いて暗記するなど、コードを書くというデジタルな処理に対してアナログな勉強をしていました。
しかし、苦労の甲斐があってどのように書くとページがどう動くかが身に染みて理解でき、コツがつかめました。

また、神山ものさす塾で講師の伊藤がエディタについて「良い調理道具を揃えても料理が出来なければ意味がない。ツールに頼りすぎるのはあまり良くない」と言っていたのが印象に残っています。エディタの便利機能を使う際はいつもその言葉を思い出し、”自分自身がツールに使われていないか？頼りすぎていないか？”を確認しながら少しずつ使うよう、心がけています。

どれだけ良い機能があっても、使いこなせなければ意味がありません。これから職人らしくスピーディーに仕事をこなすために、自分の選んだエディタを使いこなしていきたいと思います。