HTML/CSS/PHP等のコーディングに、無料のNetBeansが快適過ぎる件

私は結構エディタ難民で、HTML/CSS/PHP等をコーディングする際のエディタをWindows・Mac含め色々試してきましたが、最近は NetBeans IDE に落ち着いています。
NetBeans IDE は厳密にはエディタではなく、Windows・Mac・Linux用の無料で利用できるIDE︵統合開発環境︶の一種です。

ちなみに、↓のキャラクターは NetBeans IDE 日本語コミュニティの公式マスコットの﹁ねこび〜ん﹂です。


私はWordPressのテーマファイルを作成しているときに、PHPで独自のCMSを開発されている @kawagooch さんに勧められて使い始めたのですがとてもしっくりきたので、以後 HTML/CSS/PHP などWebサイトのコーディングには NetBeans IDE をメインで使っています。

私自身、NetBeans IDE を使うようになってからサイト制作がとても快適になったのですが、残念ながら NetBeans IDE はあまり知られていないようなので概要と使い方のまとめ記事を書くことにしました。

4月下旬にHTML5対応の NetBeans IDE 7.0 がリリースされたので、その新機能も含めて NetBeans IDE の魅力を紹介できればと思います。

IDEとは

Wikipediaによると、

統合開発環境︵とうごうかいはつかんきょう︶、IDE (Integrated Development Environment) は、ソフトウェアの開発環境。
従来、コンパイラ、テキストエディタ、デバッガなどがばらばらで利用していたものをひとつの対話型操作環境︵多くはGUI︶から利用できるようにしたもの。最近のIDEには、GUIアプリケーション開発のための迅速なプロトタイピング (RAD) が可能なものが多い。統合開発環境を使うことによって、巨大かつ複雑なソフトウェアでも、作成者に負担をかけることなく開発することが可能になる。

とのことで、要するに単なるエディタではなく開発に必要な機能が揃ったアプリということですね。
NetBeansの場合、


●テキストエディタ

●FTP/SFTP/FTPS

●デバッグ機能


などの機能があり、そのテキストエディタには


●色分け

●エラー箇所の表示

●CSSプロパティ等の補完

●タグをたたむ

●マクロ


などソースコードを書くのに役立つ機能が豊富についています。

NetBeans IDE のメリット

これだけだと、﹁Dreamweaver や Eclipse と何が違うの？﹂と思われるかもしれませんが、個人的に感じている NetBeans IDE のメリットは


●Dreamweaver や Eclipse より軽く、動作が安定している︵Mac 32bit環境の場合︶

●必要な機能が揃っていて、余計なことはしない

●初期設定がかなり使いやすい


などです。
とにかく、インストールした直後の状態で使いやすいのはいいですね。

NetBeans IDE の画面

私は普段、こんな画面でコーディングしています。
MacBook Pro 13インチ、1280x800pxです。
NetBeans IDE はサイトごとに﹁プロジェクト﹂とよばれるまとまりを作成します。
左上がプロジェクトに含まれるファイルをツリー表示したもので、ファイルをダブルクリックすると開きます。

IDEによってはプロジェクトと関係ないファイルは開けなかったりするらしいですが、NetBeans IDE の場合は﹁お気に入りフォルダ﹂として書類フォルダなどを登録しておけばその中にあるファイルを開くことができるので、ちょっとしたスクリプトを書いたりテストしたりも簡単にできます。

左下はFTPのログです。
普段は詳しくログを見る必要はなく、今転送中なのか分かればよいのでこのサイズにしています。
もし転送時にエラーが発生した際は赤文字でエラー表示されるので、その時だけログ画面を大きく表示しています。

右はエディタです。
ブラウザのように、タブで複数のファイルを切り替えることができます。

ファイルのアップロード

私は普段、ローカルではMAMPというソフトを使ってApacheやMySQLを動かしていて、動作に問題がない事を確認してから本番環境にアップロードしているのですが、Netbeans IDE では一度設定しておけば [F6] キーを押してから [Enter] キーを押すだけで本番環境にアップロードされるのも便利ですね。

F6キーを押すと上のようなダイアログが現れ、前回のアップロード後に変更があったファイルやフォルダにチェックが入っています。
NetBeans IDE以外のアプリで変更したり、Finder から追加された画像にもチェックが入っているので便利です。

エディタの補完機能

NetBeans IDEは、特に設定や追加プラグインなしでCSSプロパティやPHPの関数︵自作関数含む︶等を補完してくれます。
PHPの自作関数を補完するときは、その関数がどのファイルに記述されているかも補完候補の中に表示してくれます。

CSSプロパティやPHPの標準関数を補完するときは補完候補の下に辞典のようなものも表示されるので、font や background をショートコードで記述する際も便利です。
しかもこれらの補完候補や辞典の表示は軽量で、今のところもたついたことはありません。

大括弧や開始タグを入力したときは、補完候補として終了タグを表示し、[Enter] キーを押すと適切なインデントが付いた状態で閉じタグ等が入力されます。
HTMLやPHPでシングルクォートやダブルクオートを入力した際は自動的に閉じます。

リアルタイム構文解析

NetBeans IDE には編集中のHTML・PHP・JavaScriptなどを解析し、エラー箇所をリアルタイムに表示する機能があります。
エディタを使っていたときは、タグや大括弧の閉じ忘れは目視かバリデータなどで確認していましたが、書いている途中にエラー箇所が分かれば時間の無駄がなくていいですね。

エラーがあった場合は、その行の行番号の部分に黄色または赤の▲マークが出たり、エラー箇所に波線が引かれます。

過去のバージョンとの差分を確認する・履歴から戻す

複数人で本格的にプログラミングをされている方であれば Git や Subversion などのバージョン管理システムを利用し、トラブルがあっても過去のバージョンに戻せるようにしているかと思いますが、私は個人でサイトや WordPress テーマを制作している程度でそういったものを導入しておらず、過去のバージョンに戻りたい時はどうしようかなと思っていたのですが、NetBeans には﹁ローカル履歴﹂機能がついているため現在はそれを利用しています。


画面左のファイルツリーの中から過去に戻したいファイルを右クリックし、﹁ローカル履歴﹂をクリックすると上のような画面になり、差分を確認したり、必要な部分をコピーしたり、過去のバージョンに戻すことができます。
標準では過去7日分までしか保管されていませんが、私は90日に設定しています。

デバッグ機能

私はまだまだ NetBeans IDE の機能を使いこなせていないのですが、 NetBeans IDE では PHP にブレークポイントを指定して処理を一旦そこで止めることもできます。

具体的な使い方は @keso10 さんのこちらの記事に書かれています。
PHP開発にデバッガを利用してみる

NetBeans IDE のダウンロード

というわけで、NetBeans IDE の魅力のほんの一部しか紹介していませんが、この他にもショートカットキーを簡単に変更したり、マクロや Zen-Cording の導入など便利な機能がたくさんあります。しかも全て無料です。

NetBeans IDE 7.0 では関数名の上にカーソルがある状態で [control]+[R]︵Macの場合︶を押すと関数名を安全にまとめて変更する機能や、その他にも さまざまな機能 が導入されました。

興味をもたれた方は、以下のページからダウンロードできます。
NetBeans IDE ダウンロード

使い方︵プロジェクトの設定など︶は以下のページに書かれています。
NetBeans IDE PHP クイックスタートチュートリアル