| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <!-- Copyright (c) 2010, Oracle and/or its affiliates. All rights reserved. --> |
| <!-- Use is subject to license terms.--> |
| <head> |
| <title>JavaScriptの編集 - NetBeans IDE 7.0-7.3チュートリアル</title> |
| <meta name="description" |
| content="A document describing improved JavaScript editing features in NetBeans IDE."> |
| <link rel="stylesheet" href="../../../netbeans.css"> |
| |
| <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=UTF-8"></head> |
| |
| <body> |
| <h1>JavaScriptの編集</h1> |
| |
| <p>NetBeans IDEでは、Java、Rubyおよびその他の言語ですでに提供されているサポートに基づいた、改良版のJavaScript編集機能を提供しています。このガイドで、それらの機能の概要を説明します。</p> |
| |
| <div class="indent"> |
| <h3>内容</h3> |
| |
| <p><img alt="このページの内容は、NetBeans IDE 6.9以降に適用されます" class="stamp" src="../../../images_www/articles/71/netbeans-stamp-71-72-73.png" title="このページの内容は、NetBeans IDE 6.9以降に適用されます"></p> |
| |
| <ul class="toc"> |
| <li><a href="#basic">基本的な機能</a></li> |
| <li><a href="#semantic_highlighting">意味解釈の強調表示</a></li> |
| <li><a href="#mark_occurrences">出現箇所のマーク</a> </li> |
| <li><a href="#instant_rename">名前の即時変更</a></li> |
| <li><a href="#refactoring">リファクタリング</a></li> |
| <li><a href="#quickfixes">簡易修正と意味解釈のチェック</a></li> |
| <li><a href="#tasklist">タスク・リスト</a></li> |
| <li><a href="#code_completion">コード補完と型分析</a></li> |
| <li><a href="#goto">宣言へ移動</a></li> |
| <li><a href="#documentation">ドキュメント</a></li> |
| <li><a href="#embedded_completion">埋込み補完</a></li> |
| <li><a href="#embedding">埋込み</a></li> |
| <li><a href="#open_type">型を開く</a></li> |
| <li><a href="#jsdoc_support">JSDocのサポート</a></li> |
| <li><a href="#basic_file_filtering">含めるファイルの基本的なフィルタ</a></li> |
| <li><a href="#seealso">関連項目</a></li> |
| </ul> |
| </div> |
| <h3 class="tutorial">チュートリアルに必要なソフトウェア</h3> |
| |
| <p><b>このチュートリアルを完了するには、次のソフトウェアとリソースが必要です。</b></p> |
| |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">ソフトウェアまたはリソース</th> |
| <th class="tblheader" scope="col">必須バージョン</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE</a></td> |
| <td class="tbltd1">6.9または7.3</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://java.sun.com/javase/downloads/index.jsp">Java Development Kit (JDK)</a></td> |
| <td class="tbltd1">6</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <h2><a name="basic"></a>基本的な機能</h2> |
| |
| <p>この項では、IDEの基本的なJavaScript編集機能について説明します。</p> |
| |
| <h3>新しいファイルの作成</h3> |
| |
| <p>新規ファイル・ウィザードを使用して、任意のプロジェクトに新しいJavaScriptファイルを作成できます。ウィザードを開くには、「新規」>「その他」をクリックします。ウィザードでは、「その他」カテゴリを開き、「JavaScriptファイル」を選択します。新しいJavaScriptファイルがテンプレートから作成されます。</p> |
| |
| <p>JavaScriptファイルを「プロジェクト・エディタ」で表示可能にするには、srcなどの、プロジェクト内の適切なサブフォルダにJavaScriptファイルを作成します。</p> |
| |
| <p>JavaScriptのデフォルトのテンプレートには、ライセンス情報のみが含まれます。テンプレートに内容を追加するには、IDEで「ツール」>「テンプレート」に移動し、JavaScriptテンプレートを開きます。</p> |
| |
| <h3>構文の強調表示</h3> |
| |
| <p>IDEは、メソッドと変数を区別するために、真の<a href="#semantic_highlighting">意味解釈の強調表示</a>を提供します。</p> |
| |
| <h3>コード折りたたみ</h3> |
| |
| <p>メソッドのコードは折りたたみまたは展開できます。エディタ内で、メソッドの横にある<img alt="折りたたみ" src="../../../images_www/articles/72/ide/javascript/collapse_node.png">アイコンをクリックすると、メソッドが折りたたまれます。折りたたまれたメソッドの横にある<img alt="展開" src="../../../images_www/articles/72/ide/javascript/expand_node.png">アイコンをクリックすると、メソッドが展開します。折りたたまれているコードは省略符号ボックスで表されます。<img alt="省略符号ボックス" src="../../../images_www/articles/72/ide/javascript/ellipsis_box.png">省略符号ボックスの上にカーソルを置くと、縮小されたメソッドが表示されます。</p> |
| |
| <p><br><img alt="省略符号の上にカーソルを置くと表示される縮小されたメソッド" border="1" src="../../../images_www/articles/72/ide/javascript/show_collapsed_method.png" title="省略符号の上にカーソルを置くと表示される縮小されたメソッド"> |
| |
| <p>「表示」>「コード折りたたみ」メニューで、すべてのメソッドを折りたたむか、展開することができます。</p> |
| |
| <h3>ナビゲーション</h3> |
| |
| <p>IDEの「ナビゲータ」タブにJavaScriptファイルの構造が表示されます。ナビゲータでは、プロトタイプ・スタイルのクラス定義が認識され、メソッドがあるクラスとして表示されます。</p> |
| |
| <p><br><img alt="JavaScriptファイルの構造を表示する「ナビゲータ」タブ" border="1" src="../../../images_www/articles/72/ide/javascript/js_navigator.png" title="JavaScriptファイルの構造を表示する「ナビゲータ」タブ"> |
| |
| <h3>バックグラウンド・パーサー</h3> |
| |
| <p>パーサーがバックグラウンドで実行され、詳細なエラー・メッセージが表示されます。</p> |
| |
| <p><br><img alt="エラーを表示するバックグラウンド・パーサー" border="1" src="../../../images_www/articles/72/ide/javascript/background_parser.png" title="エラーを表示するバックグラウンド・パーサー"> |
| |
| <h3>括弧の一致</h3> |
| |
| <p>閉じ括弧が自動的に入力されます。'、"、[、(、または{を入力すると、対応する終了記号が挿入されます。終了記号を入力すると、挿入された記号が上書きされます。Backspaceキーで開始記号を除去すると、対応する終了記号が除去されます。</p> |
| |
| <h3>フォーマット</h3> |
| |
| <p>改行キーを押すと次の行の位置に従ってキャレットがインデントされます。<code>}</code>キーを押すと行のインデントがすぐに解除されます。選択範囲またはバッファ全体を再フォーマットすると、ファイル全体が再インデントされます。</p> |
| |
| <h3>JSONのサポート</h3> |
| |
| <p>JSONファイルがJavaScriptとして処理されます。バックグラウンド・パーサーは、関数がないオブジェクト・リテラル式のみが許可されるなど、特殊なJSONモードで実行されます。</p> |
| |
| <h2><a name="semantic_highlighting"></a>意味解釈の強調表示</h2> |
| |
| <p>メソッド宣言は太字で表示され(オブジェクト・リテラル内のプロトタイプ・スタイル・メソッド宣言を含む)、グローバル変数は緑で表示され、使用されていない変数はグレーの下線つきで表示されます。</p> |
| |
| <p><br> <img alt="強調表示されたコード・スニペット" border="1" src="../../../images_www/articles/72/ide/javascript/highlighting.png" title="強調表示されたコード・スニペット"></p> |
| |
| <h2><a name="mark_occurrences"></a>出現箇所のマーク</h2> |
| 記号の上にキャレットを置くと、同じ変数またはコールが使用されている他の箇所が強調表示されます。また、関数のキーワードの上にキャレットを置くと、そのメソッドからの戻りがすべて強調表示されます(return、throw)。これは、キャレットをreturnの上に置いた場合も同じです。 <p><br> <img alt="強調表示されたreturn" border="1" src="../../../images_www/articles/72/ide/javascript/mark_occurences.png" title="強調表示されたreturn"><br> <br> |
| <h2><a name="instant_rename"></a>名前の即時変更</h2> |
| <p>ローカル変数でCtrl-RキーまたはCommand-Rキーを押すと、ファイル全体で記号の名前を同期的に変更できます。 </p> |
| <p><br><img alt="同期的な変数の名前変更" border="1" src="../../../images_www/articles/72/ide/javascript/instant_rename.png" title="ファイル全体での「number」に対する変数のすべてのインスタンスの名前変更"> <br> |
| </p> |
| <h2><a name="refactoring"></a>リファクタリング</h2> |
| <p>製品内で変数または操作の使用状況をすべて検索できます。使用状況を検索したら、製品全体で変数または操作が出現するすべての箇所で名前を変更し、リファクタリングを行うことができます。リファクタリングを行う前に、分割画面のUIで変更箇所を確認できます。</p> |
| <p><strong>変数または操作の使用状況をすべて検索し、名前を変更するには:</strong></p> |
| <ol> |
| <li>エディタで変数または操作の出現箇所を選択します。</li> |
| <li>「編集」>「使用状況を検索」(Alt-F7)を選択します。コメントやアクティブなコードを検索するオプションがあります。「使用状況」ビューが開き、変数または操作が使用されているすべての箇所がツリー表示されます。 |
| <p><br><img alt="選択した変数のすべての使用状況の検索" border="1" src="../../../images_www/articles/72/ide/javascript/find_usages.png" title="変数Abstractのすべての使用状況の検索"></p> |
| <li>エディタ内で再び同じ変数を選択し、「リファクタリング」>「名前変更」(Ctrl-RまたはCommand-R)を選択します。ダイアログ・ボックスが開くので、新しい名前を入力します。</li> |
| <li>「プレビュー」をクリックします。「リファクタリング」ビューが開き、左側に変更箇所がツリー表示され、右側の分割画面に元のファイルとリファクタリング後のファイルが表示されます。 <p><br> <img alt="すべての使用箇所をリファクタリングしたプレビュー" border="1" src="../../../images_www/articles/72/ide/javascript/refactoring_preview.png" title="すべての使用箇所をリファクタリングしたプレビュー"></p> |
| </li> |
| <li>変数または操作の名前を変更しない箇所を選択することもできます。左側のツリー表示で個々の名前変更を選択解除します。 |
| <p><br><img alt="名前変更を個別に選択解除" border="1" src="../../../images_www/articles/72/ide/javascript/unselected_individual_renaming.png" title="名前変更を個別に選択解除"></p> |
| <li>確認後、「リファクタリングを実行」をクリックすると、すべてのファイルがリファクタリングされます。 |
| </ol> |
| <h2><a name="quickfixes"></a>簡易修正と意味解釈のチェック</h2> |
| IDEはJavaScriptコードに多くの意味解釈のチェックを行い、簡易修正を提供します。簡易修正を表示するには、「ソース」>「コードを修正」(Alt-Enter)を選択します。意味解釈チェックには次の処理が含まれます。 |
| <ul><li>パラメータの再代入 </li> |
| <li>匿名関数が値を返さない場合 </li> |
| <li>変数が引数を隠す場合 </li> |
| <li> 副次的効果がないコード(コールなし、代入なし)。 |
| <p><br><img alt="コールまたは代入なしのコード" border="1" src="../../../images_www/articles/72/ide/javascript/nosideeffect.png" title="コールまたは代入なしのコード"> </li> |
| <li>条件での代入(if x=y)。この意味解釈エラーは、==式への変換、二重括弧の追加など、複数の簡易修正で警告をオフにできます。<br> |
| <p><br> <img alt="条件での代入の簡易修正メニュー" border="1" src="../../../images_www/articles/72/ide/javascript/accidental_assignment.png" title="条件での代入の簡易修正メニュー"> </li> |
| <li> 関数から戻る方法の不統一(return式が値を返す場合と返さない場合があるなど)。 <p><br> <img alt="戻る方法の不統一" border="1" src="../../../images_www/articles/72/ide/javascript/inconsistent_return.png" title="戻る方法の不統一"> |
| </li> |
| </ul> |
| <h2><a name="tasklist"></a>タスク・リスト</h2> |
| バックグラウンド・パーサーと警告の簡易修正はタスク・リストに統合されています。ファイル内でのJavaScriptに関連するエラーを表示するには、タスク・リストを開きます(「ウィンドウ」>「タスク・リスト」)。リスト内でタスクをダブルクリックすると、該当する行がエディタに表示されます。 |
| <p><br> <img alt="簡易修正が表示されたタスク・リスト" src="../../../images_www/articles/72/ide/javascript/tasklist.png" title="簡易修正が表示されたタスク・リスト"></p> |
| <h2><a name="code_completion"></a>コード補完と型分析</h2> |
| JavaScriptコード補完では、IDEに組み込まれているJavaScriptコア・クラスを選択してコードに挿入できます。たとえば、次のように記述したとします。 |
| <pre> x = "foo"; y = x; y. </pre> |
| <p>この場合、コード補完によってJavaScript文字列に使用可能なメソッドが表示されます。コード補完は、JavaScriptのすべてのリテラル型に使用できます。型分析とコード補完の機能では、プロトタイプ・スタイル・クラス(通常の関数のみ)とこれらを構築するための新しい演算子も認識されます。</p> |
| <p> NetBeans IDEでは、関数パラメータと戻り値の型(@type、@param)について型パラメータが参照されます。これらの型はコード補完時に、リスト内、ドキュメント内、およびパラメータ・ヒント内(Ctrl-P)に表示されます。戻り値の型は、コード補完ダイアログで関数名の後にコロンで区切って表示されます。 </p> |
| <p><br> <img alt="コード補完" border="1" src="../../../images_www/articles/72/ide/javascript/code_completion.png" title="コード補完"> |
| <p> <tt>@deprecated</tt>でメソッドをマークした場合、ナビゲータと、このメソッドへのコード補完のコールで取消し線が表示されます。付属する非推奨の記述は、コード補完ドキュメントの別のセクションに背景を強調表示して表示されます。 |
| |
| <p> NetBeans IDEで多数の関数の戻り値の型を判別することもできます。この機能はJSQueryのサポートに不可欠です。たとえば、TrueまたはFalseを返すメソッドにはブール型の戻り値があり、リテラルの数値を返すメソッドには数値型の戻り値があります。IDEは型の推測と、コメントによって宣言される型の明示的なトラックの両方を行います。最も重要な意味は、IDEがコールによって型に従うということです。次のようなコードがあるとします。</p> |
| |
| <pre>"foo".big().charCodeAt(50).toExponential(fractionDigits);</pre> |
| |
| <p>NetBeansは、最初に<tt>foo</tt>が文字列であることを認識し、Stringクラスで<tt>big()</tt>メソッドを確認します。この文字列の<tt>charCodeAt(50)</tt>関数は数値型であるため、ここにコード補完を適用すると、数値で利用可能なメソッドのみが表示されます。 |
| <p><strong>注意: </strong>戻り値の型を検索する際、索引も検索します。これには時間がかかる可能性があるため、型分析の間、IDEは時間を見て、1秒か2秒経過した後、型の計算を中断します。これは関数が巨大な場合、コンピュータが遅い場合、または高速なコンピュータでも作業負荷が重い場合に発生します。 |
| <h2><a name="goto"></a>宣言へ移動</h2> |
| Ctrlキーを押してカーソルをコード行の上に置きます。変数名を左クリックします。IDEで変数の型(そしてターゲット関数)を認識できなかった場合は、プロジェクト内にあるその変数の宣言をすべて含むポップアップ・メニューが表示されます。 |
| <p><br> <img alt="変数の宣言に移動するためのポップアップ" border="1" src="../../../images_www/articles/72/ide/javascript/goto.png" title="変数の宣言に移動するためのポップアップ"><br> <br> |
| <h2><a name="documentation"></a>ドキュメント</h2> |
| コード補完では、JavaScriptのコアAPIとDOM APIの両方のAPIドキュメントが表示されます。独自の関数のドキュメントを表示することもできます。Ctrlキーを押しながらコールをポイントしてドキュメントを表示することもできます(ツールチップとして)。 <p><br> <img alt="ドキュメントのツールチップ" border="1" src="../../../images_www/articles/72/ide/javascript/documentation.png" title="ドキュメントのツールチップ"> <br> |
| <h2><a name="embedded_completion"></a>埋込み補完</h2> |
| <tt>Prototype.js$("...")</tt>関数で、HTML内の要素IDのコード補完が機能します。要素IDのコード補完を表示するには、引用符の中でCtrl- スペース・キーを押します。たとえば、<em>variable</em>=$("f<strong>|</strong>")を追加してfの直後にカーソル(<strong>|</strong>)を置いてCtrl- スペース・キーを押すと、ドキュメント内でfから始まるHTML要素IDがすべて表示されます。 |
| <p><br> <img alt="要素IDの補完" border="1" src="../../../images_www/articles/72/ide/javascript/embedded_completion.png" title="要素IDの補完"><br> <br> |
| <h2><a name="embedding"></a>埋込み</h2> |
| JavaScript編集機能は、RHTML、HTMLおよびJSPファイルに埋め込まれたJavaScriptに使用できます。<br><br> |
| <h2><a name="open_type"></a>型を開く</h2> |
| Ctrl-OキーまたはCommand-Oキーを押してファイル間で任意の関数にジャンプできます。 <p><br> <img alt="「型に移動」ダイアログ" src="../../../images_www/articles/72/ide/javascript/find_type.png" title="「型に移動」ダイアログ"><br> <br> |
| <h2><a name="jsdoc_support"></a>JSDocのサポート</h2> |
| <p>メソッドに注釈<tt>@private</tt>を付けると、そのメソッドにはナビゲータでロック・アイコンが表示されます。関数に注釈<tt>@constructor</tt>を付けると、その関数はコンストラクタとして表示され(コード補完で"new"キーワードの後に含められ)、<tt>@class</tt>と<tt>@namespace</tt>を使用して関数を明示的に特定のクラスに割り当てることができます。ただし、型アナライザによってこれらの関数が自動的に割り当てられる場合もあります。<tt>@ignore</tt>とマークされた関数はコード補完に表示されません。ただし、このような関数は索引に含まれ、「<a href="#goto">宣言へ移動</a>」に使用できます。 </p> |
| <br> |
| <h2><a name="basic_file_filtering"></a>含めるファイルの基本的なフィルタ</h2> |
| HTMLのコード補完には、参照されているJavaScriptファイルのコードのみが含まれます。ファイル<tt>foo.js</tt>で関数<tt>foo()</tt>を定義し、ファイル<tt>bar.js</tt>で関数<tt>bar()</tt>を定義しているプロジェクトがあるとします。ファイル<tt>hello.html</tt>に<tt><script src="bar.js"></script></tt>のみが含まれる場合、<tt>hello.html</tt>のコード補完に<tt>bar()</tt>関数のみが表示されます。<br> |
| <p><br> |
| </p> |
| |
| <div class="feedback-box" ><a href="/about/contact_form.html?to=3&subject=Feedback:%20JavaScript%20Editing%20in%20NetBeans%20IDE%206.1">ご意見をお寄せください</a></div> |
| <br style="clear:both;"> |
| <!-- ======================================================================================= --> |
| <h2><a name="seealso"></a>関連項目</h2> |
| <p>NetBeans IDEを使用してJava以外のWeb言語を編集する方法の詳細は、次のリソースを参照してください。 </p> |
| <ul> |
| <li><a href="../../trails/java-ee.html">Java EEおよびJava Webの学習</a>のJavaScript、PythonおよびGroovyの項 </li> |
| <li><a href="../../trails/php.html">PHPアプリケーションの学習</a></li> |
| </ul> |
| <p><a href="../../../community/lists/top.html">nbj2ee@netbeans.orgメーリング・リスト</a>に登録することによって、NetBeans IDE Java EE開発機能に関するご意見やご提案を送信したり、サポートを受けたり、最新の開発情報を入手したりできます。</p> |
| </body> |
| </html> |
