Web開発に特化した開発環境/エディタたち

熟練職人の道具箱には、いつもぴかぴかに磨き上げられている仕事道具が入っているように、Webクリエイターも自らが使うツールを磨く必要があります。自分にあった開発環境やエディタを使用できているかで、日々の開発効率は何倍も違ってきます。今回は自分にあった開発環境/エディタを選ぶにあたり、Web開発に特化した開発環境/エディタをご紹介します。

GUIベースの開発環境/エディタ

まずはGUIベースの開発環境からおさらいしてみましょう。

・Dreamweaver
・Aptana Studio
・NetBeans

■Dreamweaver

DreamweaverはAdobe(買収前はMacromedia)が販売しているプロプライエタリのWebアプリケーション開発プラットフォームです。HTML5エディタはもちろん、Webサイトを構成するファイルの管理・検索、FTP、ライブビューなどの機能が用意されています。

執筆時の最新バージョンはDreamweaver CS6です。スタンドアロン版が4万9,875円、Creative Cloudを使用する場合は月額2,200円から利用できます。Creative Cloudを使用する場合、最初の30日間は体験版として利用できます。

Dreamweaverの特徴は次のとおりです。

・CSS3をベースにした、クロスプラットフォーム/ブラウザに対応する可変グリッドレイアウト
・挿入パネルを利用した、HTML5要素の追加
・jQuery/jQuery Mobile/PhoneGapのサポート
・実際の表示を確認しながらコーディングをおこなうライブビュー
・複数の環境での表示を確認しながらコーディングをおこなうマルチスクリーンプレビュー
・WordPressやDrupalとのCMS連携
・HTML、JavaScriptを初めとした数々の言語のシンタックス・コード補完対応
・バージョン管理システム(Subversion)との連携

歴史の長いソフトウェアの分、機能の豊富さはほかのエディタと一線を画すものがあります。ここで取りあげた機能は数ある機能の一部なので、全容を知りたい方はぜひ体験版をインストールして、実際に試用してみましょう。

また、Adobeは2012年5月にBracketsと呼ばれるHTML/CSS/JavaScriptのコーディングに特化したエディタをオープンソースソフトウェアとしてGitHub上に公開しています(公式ブログ: Brackets Blog)。Dreamweaverとはまた趣向が違ったエディタですので、興味がある方はこちらもチェックしておきましょう。

■Aptana Studio

Aptana Studioは、Javaの統合開発環境として著名なEclipseをベースにしたWeb開発環境です。Appcelerator(買収前はAptana)を中心として開発・公開されています。HTMLエディタを中核とし、CSS/JavaScript/PHP/Rubyに対応したエディタ機能が提供されています。

執筆時の最新バージョンはAptana Studio 3です。GNU General Public License, version 3 (GPL-3.0)のライセンスのもとで公開されているオープンソースソフトウェアであり、スタンドアロン版かEclipseにプラグインを追加する形で無償で利用できます。

Aptana Studioの特徴は次のとおりです。

・HTML5/CSS/JavaScript/PHP/Rubyに対応したコードアシスト機能
・クロスブラウザ互換のコードヘルプ
・ブレークポイント、変数スコープ、実行制御をサポートしたJavaScriptデバッガ
・バージョン管理システム(Git)との連携。プラグイン追加で、ほかのSCMにも対応
・ビルトインターミナルにより、素早くCUIユーティリティを実行可能
・IDEのカスタマイズ

Ruby on Rails統合開発環境の老舗であるRadRailsとおなじ企業が開発していたこともあり、Rubyとの連携を得意とするエディタです。Ruby on RailsのPaaSであるHerokuやEngine Yardへのデプロイもビルトインの機能でサポートされています。

また、Appceleratorは著名モバイルアプリケーション開発プラットフォーム「Titanium Mobile」の主要開発会社でもあります。Aptana Studioをベースに、モバイルアプリケーションの開発に特化した統合開発環境「Titanium Studio」も公開されており、Aptana Studioと共にこれからの動向を注視したいプロダクトです。

■NetBeans

NetBeansはJavaで動作する統合開発環境です。Oracle(買収以前はSun Microsystems)がスポンサーとなり、NetBeans Communityを中心として開発が進められています。PHPやJava、C、HTML/JavaScriptなど、様々な言語をサポートしています。

執筆時の最新バージョンは7.3です。Common Development and Distribution License (CDDL-1.0)およびGNU General Public License, version 2 (GPL-2.0)のデュアルライセンスのもとで公開されているオープンソースソフトウェアであり、無償にて利用できます。

バージョン7.3ではHTML5に関するコーディング機能が大幅に強化されており、インスペクタやJavaScriptデバッガが利用可能になりました。また、WebKitブラウザが組みこまれており、Google Chromeとの連携が可能です。Chromeの拡張としてレスポンシブWebデザインに対応したページの表示を確認するためのツールが用意され、簡単な操作で複数環境での表示確認がおこなえます。

NetBeansの特徴は次のとおりです。

・コーディングしながら表示を確認できる、ライブプレビュー機能
・レスポンシブWebデザインの表示確認ツール
・JavaScript, jQuery, JSONシンタックス対応
・DOMを確認しながらのCSSルール編集機能
・JavaScriptのデバッギング、Jasmine・JsTestDriverを利用したユニットテスト
・クロスブラウザ互換のコードヘルプ
・バージョン管理システム(CVS, Subversion, Git, Mercurial)との連携

有志の手によるプラグイン開発も充実しており、PluginPortalにて成果物をダウンロードできます。たとえばWordPressに関する便利機能を追加したければPHP WordPress Blog/CMSがあります。Vimのようなキーバインドで操作したい場合はjViといったプラグインによる機能拡充が可能になります。

NetBeansはWebサイト上よりダウンロードできます。自分が利用する環境や言語に応じてダウンロードバンドルを選択しましょう。

GUIベースの開発環境で共通した特徴として、次の点が挙げられます。

・コード補完、構文チェック、ヘルプ呼び出し、WYSIWYG対応などの機能が豊富
・HTML/CSS/JavaScriptのみだけでなく、PHPやRubyといったサーバサイドで動作する言語にも対応

サーバサイドのプログラミングもおこないながら、HTMLやJavaScriptといったコーディングもおこなうクリエイターにとっては、ひとつの開発環境だけでほとんどの仕事をこなすことができるようになります。各種ソフトウェアとの連携もサポートされており、さまざまな作業を自動化して作業の省力化が可能です。

以上、3種類のGUIベース開発環境を紹介しました。統合開発環境は非常に多機能ですが、その分ソフトウェアの動作も重く、スペックを満たすマシンでも操作がもたつくことがあります。この場合、設定で不必要な機能を無効にすることで多少の改善が可能です。

CUIベースの開発環境/エディタ

前述のとおり、統合開発環境は非常に多機能な分ソフトウェアの動作も重く、スペックを満たすマシンでも操作がもたつくことがあります。「自分はこの機能だけあれば充分！」ということであれば、最初はシンプルでプラグインによる拡張が可能なエディタの導入を検討してみましょう。ここでは、CUIベースのエディタを見ていきましょう。

・Vim
・Emacs

■Vim

Vimはviを前身とした高機能エディタです。Bram Moolenaar氏を中心に開発がおこなわれており、GPL互換のチャリティウェアライセンスのもとに公開されているオープンソースソフトウェアです。

執筆時の最新バージョンはVim 7.3です。各種ソースコードをダウンロードして、コンパイルして利用します。

Vimの特徴は次のとおりです。

・モードを切り替えての操作
・マルチバッファ
・ウィンドウ分割/タブ表示
・プラグイン(スクリプト)による拡張

ここでは書ききれないほどの機能があるので、詳細は省略します。Vimの機能は、起動後に特定のコマンドを実行するか、設定ファイル(.vimrc)により有効/無効を切り替えます。

数あるVimの特徴ですが、突出したものとして「モードを切り替えての操作」があります。Vimにはモードがいくつかあり、キーバインドとともにこのモードを覚えない限りは、満足にエディタの操作をもおこなうことができないでしょう。

■Emacs

EmacsはGNU Projectが中心となって開発がおこなわれている高機能エディタです。

執筆時の最新バージョンEmacs 24.3です。GNU General Public License, version 3 (GPL-3.0)のもとに公開されているオープンソースソフトウェアであり、無償にて利用できます。

Emacsの特徴は次のとおりです。

・Emacs Lispによるカスタマイズ
・マルチバッファ
・ウィンドウ分割/タブ表示
・プラグイン(スクリプト)による拡張

Emacsもここでは書ききれないほどの機能があるので、詳細は省略します。Emacsの機能も、起動後に特定のコマンドを実行するか、設定ファイル(.emacs)により有効/無効を切り替えます。

EmacsはLispによる拡張で、自分に必要な機能を有効にしたり、機能の追加を図っていきます。有志の手により多種多様なEmacs Lispライブラリが開発・公開されており、エディタ機能の拡張にとどまらず、IRCクライアントやWebブラウザといった機能まで実現できます。

CUIベースのエディタで共通した特徴として、次の点が挙げられます。

・軽快に動作する
・プラグインの組み合わせや設定ファイルを洗練させることで、自分の手にあったエディタとなる

ここで紹介した2種類のエディタは、ともに大変軽快に動作します。すべての操作にキーボードショートカットが用意されているため、すべての操作がキーボード上で完結します。また、SSH接続でリモート先のマシン上でVim/Emacsを起動して作業することも可能です。ターミナル接続が可能なデバイスを持ち歩けば、いつでもどこでも自分のエディタを起動できます。

VimやEmacsを最初に起動したときの機能は、先に紹介した統合開発環境の機能と比較すると、一見非常に頼りないものに見えます。しかし、設定ファイルやプラグインを組み合わせていくことで、自分自身の仕事のやり方や考え方に特化した開発環境を構築していくことが可能になります。

ある程度キーバインドを覚えるようになるまではとっつき辛い面もあります。逆にこれらを覚えた後は、思考→キータッチ→次の作業の一連の流れが高速化し、コーディングが快感に変わると言っても過言ではない開発環境に変貌します。

開発環境やエディタに優劣はない

開発環境やエディタ自体に優劣は存在しません。重要なのは、自分の手に馴染むかどうかです。「開発環境やエディタ選びそのものが面倒で、何となく惰性で今の開発環境・エディタを使い続けている」ようであれば、ぜひ他の開発環境・エディタを試用してみることをおすすめします。

エディタにそもそもどのような機能が存在するかを知らない方は、まずは総合開発環境を試してみて機能をひととおりチェックしてみましょう。その後、不要な機能を無効にしていきながら環境を整えていくのも良し。1から自分に馴染むエディタを、時間をかけてコツコツと整えていきたい場合はCUIベースのエディタがおすすめです。

「GUIのエディタは総じて動作が重いから」「CUIのエディタはキーバインドを覚えるのか面倒だから」と食わず嫌いのクリエイターの方々も、しばらく使っていないようであれば一度最新版のエディタに触れてみてください。ソフトウェアの進化は早く、以前に使って自分には合わないと思っていたものが、びっくりするくらいの進化を遂げていて仕事道具の仲間入りを果たすことになるかも知れません。

料理人がつねに包丁を磨くように、クリエイターは自らが使うツールを磨き続ける必要があります。自分に合っているエディタを使いこなせるようになれば、日々の作業効率は何倍にもなると言ってよいでしょう。仕事の休み時間中や休日の空き時間を利用して、さっそく仕事道具の手入れをしてみましょう。

富田宏昭 Hiroaki Tomida
「株式会社キクミミ」でFileMakerやオープンソース言語などを用いた、Webアプリ開発 企業の業務改善のためのシステム開発や環境構築を行っている。主な著書に「HTML5/JavaScriptとPhoneGapで作るiPhoneアプリ開発入門」(マイナビ)など。