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 の画面

NetBeans IDEの画面

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

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

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

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

ファイルのアップロード

NetBeans IDEの画面

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

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

エディタの補完機能

CSSプロパティの補完

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 クイックスタートチュートリアル

Related Posts Plugin for WordPress, Blogger...
  • Private Abstract Void Factory

    そのとおりです。NetBeansが使いやすいのは当然です。
    これ一つでいろんなプラットフォームのアプリケーションを開発出来ます。

    この記事はNetBeansを知らない方達への周知に貢献しています。素晴らしい事だと思います。

    しかし、一つ気に入らない事があります。
    あなた達の事です。このエントリをブックマークしているあなた達。

    あなた達PHPerはいつも表層をつついているだけ。
    それがこのエントリをブックマークするという事に現れています。
    あなた達はこのエントリ中に設けられているNetBeansIDEホームページへのリンクさえも辿らないのですか?
    どうしてNetBeansIDEホームページをブックマークしないのですか?
    ホームページのトップにはPHPチュートリアルへのリンクも用意されています。

    きっとあなた達PHPerは少しも何らかの深層に迫ること無く、人生を終えるのでしょう。

    ここまで書いてこのコメントを読んだ方の反応がどのようなものになるか考えてみました。

    1. コメントをほんの少し眺め「くだらない」などと言い無視する。
    あなたは生粋のPHPerです。何も言う事はありません。せいぜいPHPerとして余生を楽しんで下さい。

    2. このコメントを読み、言い知れない不快感を感じる。
    おそらくあなたはPHPerを自認している。さらにPHPerとしての自負もあるかもしれない。
    あなたは私が上で挙げた「表層をつつくことしかできない」方とは異なるかもしれません。
    確かにPHPはWEBサイトやWEBアプリケーションを作る際のハッキングツールとしては優れています。しかし、そこまでです。PHPにそれ以上の事はできないのです。
    何故あなたはPHPにこだわるのですか?

    3. コメントを読み、特に感想がない、もしくは大方同意する。
    あなたPHPerではない。
    たとえあなたがPHPというツールを自在に使いこなせたとしてもあなたはPHPerでは無い。

  • A295393

    大統領様ごめんなさい。
    もうあなたに一生付いていきます。
    世の中のプログラマーはあなたの言うとおりに動くようになるでしょう。

  • BeeCrashGoogle

    PHPerはブックマークすることだけで、この記事を理解しているつもりになっています。

    これは当然です。なぜなら、彼らの目的は学習ではなくブックマークすることだからです。

    PHPerは学習しないのです。

    大統領や私のコメントを見て笑うことができないのであればあなたもPHPerです。

    残念ながらPHPerは完全には治りません。ですが、あきらめずに努力を続ければ良くなっていくと思います。

    せめて軽度のPHPerまで回復できるよう頑張ってみてください。応援しています。

  • Work

    ↑みたいなコメントを放置するのがこのサイトの意向なの?

  • 大統領LOVE

    あ、だいとうりょうのこめんとがきえた!

  • 大統領LOVE

    あ、だいとうりょうのこめんとがきえた!

  • Shingo Matsumura

    Aptana Studio っていう選択肢もあるよ・・・

  • http://www.feering.jp/etc/1084.html ネットビーンズが良さそう – FeeRing News
  • http://edu.shirapro.com/?p=14314 HTML/CSS/PHP等のコーディングに、無料のNetBeansが快適過ぎる件 :: Stocker.jp / diary « Education News & APP

    [...] ディタをWindows・Mac含め色々試してきましたが、最近は NetBeans IDE に落ち着いています。 NetBeans IDE は厳密に…read more…. 5月 11th, 2011 | Category: はてなブックマーク – 人気エントリー [...]

blog comments powered by Disqus