【JavaScript開発環境構築】NetBeansでHTML5+JavaScript+CSSの開発を行う

ネットでHTML5+JavaScript+CSSでの開発環境を調べてみたところ、NetBeansの評判が良いので、実際インストールして、試してみました。
HTML5で開発するには、大変便利で、無料ですので、是非使ってみてください。

１、開発環境構築
NetBeansは、無料で利用できるIDE（統合開発環境）です。
(1)Java SE Development Kit 8インストール
下URLをクリックして、Java EEの列のダウンロードをクリックして、インストールします
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
※x86 パッケージが 32 ビット版用、x64 パッケージが 64 ビット版

(2)NetBeans 8.0 インストール
下URLをクリックして、HTML5/Javascriptのダウンロードをクリックして、インストールします
https://netbeans.org/downloads/

(3) NetBeans Connector拡張機能をインストール
 ChromeブラウザのNetBeans Connector拡張機能をインストールします。
プロジェクト作成して、初めて実行するときに、次のようなダイアログが表示されますので、インストールします。
・Chrome Webストアへ移動をクリック

・CHROMEに追加をクリック

・拡張機能を追加をクリック

※以下のURLでもインストール手順が記載されています。
ChromeブラウザのNetBeans Connector拡張機能をインストール
https://netbeans.org/kb/docs/webclient/html5-gettingstarted_ja.html

２、プロジェクト作成
・NetBeansを立ち上げる
・メイン・メニューで「ファイル」→「新規プロジェクト」
・新規プロジェクト・ウィザードで、「HTML5」カテゴリを選択、「既存のソースを利用するHTML5アプリケーション」を選択

・サイトルート及びプロジェクト名を入力

次へを押して、プロジェクトを作成完了する。

作成したプロジェクトにHTMLファイルを追加する
※必要に応じて、JavaScriptファイルを追加する
・ サイトルート選択して、右クリックメニューでHTMLファイルを選択して、ファイル名を必要に応じて
変更する

・ツールバーで「実行」ボタンをクリックする(F6)

３、デバッグ
(1) プログラム実行及びデバッグ
 サイトルート選択して、右クリックメニューでJavaScriptファイルを選択して、JavaScriptファイルを作成しておきましょう。
作成したファイルをscript.jsとします。

・「プロジェクト」ウィンドウで、「script.js」をダブルクリックし、エディタでそのファイルを開きます。

・左マージンをクリックして、script.jsに行ブレークポイントを配置します。
※　「ウィンドウ」→「デバッグ」→「ブレークポイント」を選択して「ブレークポイント」ウィンドウを開き、プロジェクトで設定したブレークポイントを表示できます。

 ・ツールバーの「実行」ボタンをクリックして、プロジェクトを再度実行します。

・script.js内の変数の上にカーソルを移動し、変数に関するツールチップ情報を表示します。
　ツールチップをクリックしてツールチップを展開し、変数と値のリストを表示します。
 ※・「ウィンドウ」→「デバッグ」→「変数」を選択して、「変数」ウィンドウにリストを表示することもできます。

 ・ツールバーの手順ボタンを使用して、JavaScript関数をステップ実行するか、「続行」ボタン(F5)をクリックしてアプリケーションを再開します。

(2) ライブプレビュー
NetBeans上でコードを変更して保存をおこなうことで、自動的にGoogle Chromeで表示されている画面が更新されます。エディタで保存して、ウィンドウを切り替えて、更新ボタンをクリックして、エディタに戻って修正して・・といった一連の作業は、ライブプレビューで軽減が図れます。

(3) 入力の自動補完機能
HTMLファイルにて、何も入力していない状態でCtrl + Spaceキーを押した場合、フォームや特定のHTMLを自動で生成するためのサブメニューが表示されます。
JavaScriptファイルやCSSファイルでも、 Ctrl + Spaceキーを押すと、補完候補とヘルプが表示されます。

【参考URL】
https://netbeans.org/kb/docs/webclient/html5-js-support_ja.html
http://stocker.jp/diary/netbeans/
http://urashita.com/archives/1066
https://ja.netbeans.org/
http://news.mynavi.jp/column/ide/150/
https://netbeans.org/kb/docs/java/quickstart_ja.html#setup
http://www.oki-osk.jp/esc/netbeans/netbeans01.html
https://netbeans.org/features/html5/index_ja.html
http://celtislab.net/archives/20130308/netbeans-html5%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%EF%BC%91/
http://news.mynavi.jp/column/wc/005/
http://kobold.wiki.fc2.com/wiki/%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%2FNetbeans%2F%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%2FHTML5%20HelloWorld