調査・研究レポートReport

今日は私のウェブサイト制作業務における開発環境のうち、テキストエディタをご紹介してみたいと思います。

私のウェブサイト制作の業務において利用する開発言語は主に次のものです。

• HTML/CSS
• JavaScript
• PHP/WordPress

この記事は上記言語を利用した制作を行う上で便利なエディタ選びのご紹介記事です。一つの参考事例としてお読みいただければと思います。

2018年まで使い続けてきたIDE（統合開発環境）「PhpStorm」

非常に高機能なIDE（統合開発環境）であるPhpStormを昨年までは利用し続けてきました。PhpStormは以下URLよりご確認いただけます。

公式サイト（ダウンロード）

PhpStorm

https://www.jetbrains.com/phpstorm/

PhpStormの特徴

PhpStromは JetBrains 社が開発・販売しているIDE（統合開発環境）である IntelliJ IDEA のPHPに特化させた派生プロダクトという位置づけになっています。JetBrains社はPHPStormの他にも、JavaScriptやウェブフロントエンドの制作に特化したWebStorm や、Ruby、.NETなど、その他多くの言語用に派生させたプロダクトの開発・販売も行っています。IntelliJ IDEA ベースのIDEに慣れている方にとっては、言語が変わっても抵抗なくそのまま使い続けることが可能なため、言語間の移行をスムーズに行うことができるという面がIntelliJ IDEAユーザーにとっての非常に大きな強みになるかと思います。

特徴を簡単に挙げるとすると、Java のIDE（統合開発環境）であるEclipse などと比べると比較的軽量に動作するということを売りにしていますが、実際に動かしてみるとそれでも結構なメモリの使用量が必要になりますし、低スペックなマシンでは実運用には耐えられないと個人的には感じています。最低でも16GB以上のメモリを積んだWindowsマシンである必要がある点に注意してください。過去に8GBメモリのWindowsマシンで利用していたときはメモリ使用量に耐えられずに定期的にフリーズしたりアプリが落ちるといったことが多くあった記憶があります。

コストとしては昔は$100以下だったのですが、いつのまにか年額で$199と結構な高額になってしまいましたね。それでも非常に有名なエディタであることには変わりはありませんし、多くの会社や個人のエンジニアのファンの方に利用されているエディタだとは思います。

Visual Studio Codeとの違い

次に紹介するVisual Studio Code に乗り換えた理由としては、ライセンス料の部分とメモリ使用量（軽量）の問題の2点が決め手となりました。その上でテキストエディタとしての機能としてはどちらも十分な機能を備えていますし、ターミナルやGitクライアントとしての機能など、IDEとしての機能もどちらも充実しています。

極論をすればテキストエディタは好みで選べばいいのですが、無料で利用できる物の中では非常に使い勝手が良いと噂になっていたVSCode（Visual Studio Code）を試してみたらこれが噂通り非常に良かったんですね。

違いを整理すると以下のようになります。

• 動作が非常に軽い（メモリをあまり消費しない）
• 無料で利用できる

それでは少しだけVSCodeについてご紹介してみたいと思います。

Visual Studio Code (VSCode)

Visual Studio Code （以降VSCode）は、マイクロソフト製の無償配布されているテキストエディタです。ダウンロードは以下からできます。

公式サイト（ダウンロード）

Visual Studio Code

https://code.visualstudio.com/

VSCodeの特徴

先ほど上記でも挙げた通り、無償で利用できる上に、有償のPhpStormと比較しても大差ない高機能さを備えているといったことや、非常に軽量に動作するといった利点の多いテキストエディタになっています。

VSCodeはプロジェクト毎に設定をカスタマイズすることが可能です。コーディング規約などが存在するプロジェクトにおいては、それらを設定ファイルに落とし込むことによって様々な設定を変更することが可能となります。例えば、タブキーを押したときのスペースを4つにするか2つにするかみたいなところをカスタマイズすることが可能です。

VSCodeカスタマイズのススメ

デフォルトでも十分に利用できるのですが、StyleLint や ESLint といったLintツールを利用している場合には、デフォルトの設定のままでは通らないといった状況にも実際に出会ったことがありますので、必要に応じて設定を変更してあげる必要がでてきます。私自身あまり詳しく設定をいじったことがないのですが、以下のサイトにウェブサイト制作における非常に使い勝手の良い設定方法についての説明がありますので参考にされるとよろしいかと思います。

Visual Studio Code の初期設定と最低限必要な拡張機能 – フロントエンド向け –

https://qiita.com/hi85/items/eaede5ebb509f21f27f5

まとめ

実際にエディタを切り替えてからもこれまでとそん色なく利用できていますので、今回のエディタの変更に関しては結果的には変えて良かったと感じています。実際に様々な開発プロジェクトに身を置きながら環境を変えていかないといけないようなケースにおいては、設定ファイルを自由自在に変更できないといけないと思いますのでその際はじっくりと設定変更できるように研究する必要がありますね。私個人においては、基本的にはウェブサイトの制作がメインなのもあるし、基本的には個人開発が多いので自分が使いやすい設定をしておけばOKではありますが、おすすめの設定方法などあれば共有いただけると非常にうれしいです。

Electronで開発されているテキストエディタとしてはGitHubのAtomもありますが、現状ではVSCodeが優勢といことを各所から聞くことが多いので、今現状ではVSCodeの利用を続けようと思います。個人的にプロダクトのブランドイメージとしてはAtomの方が好きだったりしますので、今後Atomにしかない画期的な機能が実装されたりした暁にはAtomに乗り換える可能性もありますが、それはまたその時のお楽しみですね。

余談

3年くらい前には Sublime Text というテキストエディタを使っていた時期があります。その時に購入した書籍を持っているので1冊だけご紹介しますね。

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ

https://amzn.to/2GGj04C