From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- files/ja/tools/scratchpad/index.html | 117 ----------------------------------- 1 file changed, 117 deletions(-) delete mode 100644 files/ja/tools/scratchpad/index.html (limited to 'files/ja/tools/scratchpad/index.html') diff --git a/files/ja/tools/scratchpad/index.html b/files/ja/tools/scratchpad/index.html deleted file mode 100644 index a741bb2517..0000000000 --- a/files/ja/tools/scratchpad/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: スクラッチパッド -slug: Tools/Scratchpad -tags: - - Tools - - Web Development - - 'Web Development:Tools' - - 'l10n:priority' -translation_of: Archive/Tools/Scratchpad ---- -

{{ToolsSidebar}}

- -

スクラッチパッドは、JavaScript の実験環境を提供します。ウェブページと対話するコードの記述、実行、結果の確認ができます。

- -

一度に 1 行のコードを実行するよう設計されている Web コンソール とは異なり、スクラッチパッドはより大きな JavaScript コードのかたまりを編集でき、そして出力結果の用途に応じたさまざまな方法でコードを実行することができます。

- -

{{EmbedYouTube("Pt7DZACyClM")}}

- -

使用方法

- -

個別のウィンドウでスクラッチパッドを開く

- -

個別のウィンドウでスクラッチパッドを開く方法がいくつかあります:

- - - -

個別のウィンドウでスクラッチパッドが開きます。

- -

ツールボックス内にスクラッチパッドを開く

- -
Firefox 47 の新機能
- -

Firefox 47 より、ツールボックス の内部にスクラッチパッドを開くことができます。始めに、オプション ページで "標準の Firefox 開発ツール" の "スクラッチパッド" にチェックを入れなければなりません。

- -

以上でスクラッチパッドが、ページインスペクターや Web コンソールなど他のツールと並んで、ツールボックス内で使用できます。これは、コンソールの常時表示 で特に役立ちます。スクラッチパッドを持続的なマルチランエディターとして、またコンソールをページと対話するツールとして使用できます。

- -

編集

- -

スクラッチパッドのウィンドウは以下のような外見です (macOS では画面上部にメニューバーが表示されます):

- -

A screenshot of the Scratchpad

- -

ファイルメニューでは JavaScript コードの保存や読み込みを行うことができますので、後でコードを再利用することができます。

- -

コード補完

- -

スクラッチパッドに tern コード解析エンジン を統合して、オートコンプリートの候補やカレントシンボルに関する情報を表示するポップアップを提供するために使用しています。Ctrl + Space を押下すると、オートコンプリート候補を表示します。

- -

例えば、d と入力して Ctrl + Space を押下してみましょう。以下のように、オートコンプリートボックスを表示します:

- -

各候補の隣にあるアイコンは、型を示します。またハイライト中の候補について、詳細情報をポップアップで表示します。↑ および ↓ キーで候補を行き来でき、Enter または Tab でハイライト中の候補を選択します。

- -

インラインドキュメント

- -

識別子にカーソルがあるときに Ctrl + Shift + Space を押下すると、インラインドキュメントをポップアップ表示します。例えば document.addEventListener と入力して Ctrl + Shift + Space を押下すると、関数の構文や簡単な説明といった概要を記載したポップアップを表示します:

- -

"[docs]" は、そのシンボルに関する MDN のドキュメントへのリンクです。

- -

実行

- -

コードを記述したら、実行したいコードを選択してください。何も選択しない場合は、ウィンドウ内のコードすべてを実行します。そして、コードの実行方法を上部のボタン、実行メニュー、またはコンテキストメニューで選択してください。コードは現在選択しているタブのスコープで実行します。関数の外部で宣言した変数は、そのタブのグローバルオブジェクトに追加されます。

- -

実行方法は 4 種類あります。

- -

実行

- -

実行を選択すると、選択したコードが実行されます。これは結果を確認する必要性がない、ページのコンテンツを操作する関数や他のコードを実行するものです。

- -

調査

- -

調査は、コードを実行オプションのように実行します。ただし、実行後に戻り値の検証を行うことができるオブジェクトインスペクターが開きます。

- -

例えば、以下のコードを入力します:

- -
window
-
- -

そして調査を選択すると、以下のようなオブジェクトインスペクターが表示されます:

- -

Inspecting an object in the Scratchpad

- -

表示

- -

表示は選択されたコードを実行して、その結果をスクラッチパッドのエディター内にコメントとして挿入しますので、REPL として使用できます。

- -

再読み込みして実行

- -

再読み込みして実行は、実行メニューからのみ使用できます。始めにページを再読み込みして、ページの "load" イベントが発生したときのコードを実行します。これは、クリーンな環境でコードを実行するのに役立ちます。

- -

ブラウザーコンテキストでスクラッチパッドを実行する

- -

スクラッチパッドは特定のウェブページだけでなく、ブラウザー全体のコンテキストでも実行できます。これは Firefox 自体での作業やアドオンの開発で役立ちます。これを行うには、開発ツールのオプション で "ブラウザーとアドオンのデバッガーを有効" にチェックを入れてください。すると、実行環境メニューにブラウザーという選択肢が加わります。これを選択すると、いくつかのグローバルオブジェクトを調査するとわかるとおり、スコープがページのコンテンツではなくブラウザー全体になります:

- -
window
-/*
-[object ChromeWindow]
-*/
-
-gBrowser
-/*
-[object XULElement]
-*/
- -

スニペットファイルの先頭行に
- // -sp-context: browser
- と記入した場合は、スクラッチパッドの実行コンテキストがブラウザーに設定されます。

- -

キーボードショートカット

- -

{{Page ("ja/docs/tools/Keyboard_shortcuts", "scratchpad")}}

- -

ソースエディタのショートカット

- -

{{Page ("ja/docs/tools/Keyboard_shortcuts", "source-editor")}}

-- cgit v1.2.3-54-g00ecf