| <!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チュートリアル</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およびその他の言語ですでに提供されているサポートに基づいた、改良版のJavaScript編集機能を提供しています。このガイドで、それらの機能の概要を説明します。</p> |
| |
| <div class="indent"> |
| <h3>内容</h3> |
| <img alt="このページの内容は、NetBeans IDE 7.3に適用されます" class="stamp" src="../../../images_www/articles/73/netbeans-stamp.png" title="このページの内容は、NetBeans IDE 7.3に適用されます"> |
| |
| <ul class="toc"> |
| <li><a href="#basic">基本的な機能</a></li> |
| <li><a href="#mark_occurrences">出現箇所のマークと名前の即時変更</a> </li> |
| <li><a href="#code_completion">コード補完と型分析</a></li> |
| <li><a href="#documentation">ドキュメント</a></li> |
| <li><a href="#open_type">型を開く</a></li> |
| <li><a href="#jsdoc_support">JSDocのサポート</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="http://www.netbeans.org/downloads/index.html">NetBeans IDE</a></td> |
| <td class="tbltd1">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または7</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <h2><a name="basic"></a>基本的な機能</h2> |
| |
| <p>この項では、IDEの基本的なJavaScript編集機能について説明します。</p> |
| <div class="indent"> |
| <h3>新しいファイルの作成</h3> |
| <p>新規ファイル・ウィザードを使用して、任意のプロジェクトに新しいJavaScriptファイルを作成できます。メイン・メニューから「ファイル」→「新規ファイル」を選択し、ウィザードのHTML/JavaScriptカテゴリで「JavaScriptファイル」を選択します。HTML/JavaScriptカテゴリがインストール環境で使用可能でない場合は、新規ファイル・ウィザードの「その他」カテゴリで「JavaScriptファイル」を選択できます。JavaScriptファイルを「プロジェクト」ウィンドウで表示可能にするには、<tt>public_html</tt>や<tt>src</tt>などの、プロジェクト内の適切なサブフォルダにJavaScriptファイルを作成します。</p> |
| <p>JavaScriptファイルに使用されるデフォルトのテンプレートには、ライセンス情報のみが含まれます。テンプレートに内容を追加するには、メイン・メニューから「ツール」→「テンプレート」を選択し、「テンプレート・マネージャ」を開きます。HTML/JavaScriptカテゴリで「JavaScriptファイル」テンプレートを選択し、「エディタで開く」をクリックしてJavaScriptテンプレートを編集します。</p> |
| |
| <h3>構文およびセマンティクスのハイライト表示</h3> |
| <p>エディタには、メソッドと変数、およびリテラル・オブジェクトのグローバル変数とプロパティのコード・ハイライト表示があります。</p> |
| <img alt="JavaScriptファイルの構造を表示する「ナビゲータ」タブ" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-highlighting.png" title="JavaScriptファイルの構造を表示する「ナビゲータ」タブ"> |
| |
| <h3>コード折りたたみ</h3> |
| <p>括弧で囲まれたメソッド・コード、コメントおよびコード・ブロックは、折りたたみまたは展開できます。コードを折りたたむまたは展開するには、エディタの左マージンの横にある<img alt="折りたたみ" src="../../../images_www/articles/73/ide/js-editor/collapse_node.png">および<img alt="展開" src="../../../images_www/articles/73/ide/js-editor/expand_node.png">アイコンをクリックします。楕円形のボックスは折りたたまれたコードを示し、楕円形のボックス上にカーソルを置いて折りたたまれたコードを表示できます。メイン・メニューから「表示」→「コード折りたたみ」を選択して、ファイル内のすべての折りたたみをすばやく折りたたみまたは展開できます。</p> |
| <img alt="コード折りたたみ" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/js-codefold.png" title="コード折りたたみ"> |
| <p>説明とともにカスタムの折りたたみを作成し、デフォルトの状態を指定することもできます。</p> |
| <pre class="examplecode">// <editor-fold desc="This is my custom fold"> |
| Your code goes here... |
| // </editor-fold></pre> |
| |
| <h3>ナビゲーション</h3> |
| <p>「ナビゲータ」ウィンドウには、JavaScriptファイルの構造が表示され、コード内の要素を簡単にナビゲートできます。</p> |
| <img alt="JavaScriptファイルの構造を表示する「ナビゲータ」タブ" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-nav.png" title="JavaScriptファイルの構造を表示する「ナビゲータ」タブ"> |
| |
| <h3><a name="goto"></a>宣言へ移動</h3> |
| <p>[Ctrl]を押し、カーソルをコード行の上に移動して変数名をクリックすると、変数宣言に移動します。 </p> |
| |
| <h3>バックグラウンド・パーサー</h3> |
| <p>パーサーはバックグラウンドで稼働し、潜在的な問題を解決するための詳細な警告とヒントを提供します。「オプション」ウィンドウの「ヒント」タブに表示されるJavaScriptヒントを構成できます。</p> |
| <img alt="「オプション」ウィンドウの「JavaScriptのヒント」タブのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-hints.png" title="「オプション」ウィンドウの「JavaScriptのヒント」タブ"> |
| |
| <h3>括弧の一致</h3> |
| <p>閉じ括弧が自動的に入力されます。'、"、[、(、または{を入力すると、対応する終了記号が挿入されます。終了記号を入力すると、挿入された記号が上書きされます。Backspaceキーで開始記号を除去すると、対応する終了記号が除去されます。</p> |
| |
| <h3>フォーマット</h3> |
| <p>「オプション」ウィンドウの「フォーマット」タブで、インデント、スペース、行折返しなどのJavaScriptファイルのオプションを指定できます。</p> |
| <img alt="「オプション」ウィンドウの「フォーマット」タブのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-formatter.png" title="「オプション」ウィンドウの「フォーマット」タブ"> |
| |
| <h3>JSONのサポート</h3> |
| <p>JSONファイルがJavaScriptとして処理されます。バックグラウンド・パーサーは、関数がないオブジェクト・リテラル式のみが許可されるなど、特殊なJSONモードで実行されます。</p> |
| |
| <h3><a name="embedding"></a>埋込み</h2> |
| <p>JavaScript編集機能は、PHP、JSPおよびHTMLファイルに埋め込まれたJavaScriptにも使用できます。</p> |
| </div> |
| |
| <h2><a name="mark_occurrences"></a>出現箇所のマークと名前の即時変更</h2> |
| <p>記号の上にキャレットを置くと、同じ変数またはコールが使用されている他の箇所が強調表示されます。また、関数のキーワードの上にキャレットを置くと、そのメソッドからの戻りがすべて強調表示されます(return、throw)。これは、キャレットをreturnの上に置いた場合も同じです。 <p> |
| <img alt="強調表示されたreturn" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-occur.png" title="強調表示されたreturn"> |
| <p>ローカル変数でCtrl-RキーまたはCommand-Rキーを押すと、ファイル全体で記号の名前を同期的に変更できます。 </p> |
| |
| <h2><a name="code_completion"></a>コード補完と型分析</h2> |
| <p>JavaScriptコード補完では、IDEに組み込まれているJavaScriptコア・クラスを選択してコードに挿入できます。たとえば、次のコードを記述するとします。</p> |
| <pre> x = "foo"; y = x; y. </pre> |
| <p>この場合、コード補完によってJavaScript文字列に使用可能なメソッドが表示されます。コード補完は、JavaScriptのすべてのリテラル型に使用できます。型分析とコード補完の機能では、プロトタイプ・スタイル・クラス(通常の関数のみ)とこれらを構築するための新しい演算子も認識されます。</p> |
| <p> NetBeans IDEでは、関数パラメータと戻り値の型(@type、@param)について型パラメータが参照されます。これらの型はコード補完時に、リスト内、ドキュメント内、およびパラメータ・ヒント内に表示されます。戻り値の型は、コード補完ダイアログで関数名の後にコロンで区切って表示されます。 </p> |
| <img alt="エディタでのコード補完のスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-codecompletion.png" title="エディタでのコード補完"> |
| <p> <tt>@deprecated</tt>でメソッドをマークした場合、「ナビゲータ」ウィンドウに取消し線が表示されます。付属する非推奨の記述は、コード補完ドキュメントの別のセクションに背景を強調表示して表示されます。</p> |
| |
| <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秒経過した後、型の計算を中断します。これは関数が巨大な場合、コンピュータが遅い場合、または高速なコンピュータでも作業負荷が重い場合に発生します。</p> |
| |
| <h2><a name="documentation"></a>ドキュメント</h2> |
| <p>コード補完では、JavaScriptのコアAPIとDOM APIの両方のAPIドキュメントが表示されます。独自の関数のドキュメントを表示することもできます。Ctrlキーを押しながらコールをポイントしてドキュメントを表示することもできます(ツールチップとして)。</p> |
| <img alt="ドキュメントのツールチップのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-doc.png" title="ツールチップのjQueryドキュメント"> |
| <p>jQueryのコード補完ドキュメントもエディタで使用できます。</p> |
| <img alt="ドキュメントのツールチップのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-jquerydoc.png" title="ツールチップのjQueryドキュメント"> |
| |
| <h2><a name="open_type"></a>型を開く</h2> |
| <p>Ctrl-OキーまたはCommand-Oキーを押してファイル間で任意の関数にジャンプできます。 <p> |
| <img alt="「型に移動」ダイアログ" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-gototype.png" title="「型に移動」ダイアログ"> |
| |
| <h2><a name="jsdoc_support"></a>JSDocのサポート</h2> |
| <p>IDEは、バージョン2のJSDoc、ScriptDocおよびExtDocをサポートするようになりました。メソッドに注釈<tt>@private</tt>を付けると、そのメソッドにはナビゲータでロック・アイコンが表示されます。関数に<tt>@constructor</tt>の注釈を付けると、コンストラクタとして表示されます(また、コード補完で"new"キーワードの後に含められます)。</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でのJavaScriptエディタの操作の詳細は、次のリソースを参照してください。 </p> |
| <ul> |
| <li>デモ:<a href="../../docs/web/html5-javascript-screencast.html"> HTML5 - パート3: HTML5アプリケーションでのJavaScriptのテストとデバッグ</a></li> |
| <li><a href="../../docs/webclient/html5-js-support.html">HTML5アプリケーションでのJavaScriptのデバッグとテスト</a></li> |
| <li>NetBeans for PHPブログの<a href="https://blogs.oracle.com/netbeansphp/entry/javascript_code_folding">JavaScript: コードの折りたたみ</a>。</li> |
| <li>NetBeans for PHPブログの<a href="https://blogs.oracle.com/netbeansphp/entry/jquery_support">jQueryサポート</a>。</li> |
| <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> |
