blob: a741bb25177cb309b2931c708c681314a5b3f0b9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
---
title: スクラッチパッド
slug: Tools/Scratchpad
tags:
- Tools
- Web Development
- 'Web Development:Tools'
- 'l10n:priority'
translation_of: Archive/Tools/Scratchpad
---
<p>{{ToolsSidebar}}</p>
<p>スクラッチパッドは、JavaScript の実験環境を提供します。ウェブページと対話するコードの記述、実行、結果の確認ができます。</p>
<p>一度に 1 行のコードを実行するよう設計されている <a href="/ja/docs/Tools/Web_Console" title="Using the Web Console">Web コンソール </a>とは異なり、スクラッチパッドはより大きな JavaScript コードのかたまりを編集でき、そして出力結果の用途に応じたさまざまな方法でコードを実行することができます。</p>
<p>{{EmbedYouTube("Pt7DZACyClM")}}</p>
<h2 id="Usage" name="Usage">使用方法</h2>
<h3 id="Opening_Scratchpad_in_its_own_window" name="Opening_Scratchpad_in_its_own_window">個別のウィンドウでスクラッチパッドを開く</h3>
<p>個別のウィンドウでスクラッチパッドを開く方法がいくつかあります:</p>
<ul>
<li><kbd>Shift</kbd> + <kbd>F4</kbd> を押下するか、Web 開発メニュー (macOS や Linux ではツールメニューのサブメニューとして存在します) でスクラッチパッドを選択します。</li>
<li>メインツールバーまたはハンバーガーメニュー (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">) の中にあるレンチのアイコン (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">) をクリックして、"スクラッチパッド" を選択します。</li>
</ul>
<p>個別のウィンドウでスクラッチパッドが開きます。</p>
<h3 id="Opening_Scratchpad_in_the_Toolbox" name="Opening_Scratchpad_in_the_Toolbox">ツールボックス内にスクラッチパッドを開く</h3>
<div class="blockIndicator geckoVersionNote">Firefox 47 の新機能</div>
<p>Firefox 47 より、<a href="/ja/docs/Tools/Tools_Toolbox">ツールボックス</a> の内部にスクラッチパッドを開くことができます。始めに、<a href="/ja/docs/Tools/Tools_Toolbox#Settings_2">オプション </a>ページで "標準の Firefox 開発ツール" の "スクラッチパッド" にチェックを入れなければなりません。</p>
<p>以上でスクラッチパッドが、ページインスペクターや Web コンソールなど他のツールと並んで、ツールボックス内で使用できます。これは、<a href="/ja/docs/Tools/Web_Console/Split_console">コンソールの常時表示</a> で特に役立ちます。スクラッチパッドを持続的なマルチランエディターとして、またコンソールをページと対話するツールとして使用できます。</p>
<h3 id="Editing" name="Editing">編集</h3>
<p>スクラッチパッドのウィンドウは以下のような外見です (macOS では画面上部にメニューバーが表示されます):</p>
<p><img alt="A screenshot of the Scratchpad" src="https://mdn.mozillademos.org/files/5983/scratchpad.png"></p>
<p>ファイルメニューでは JavaScript コードの保存や読み込みを行うことができますので、後でコードを再利用することができます。</p>
<h4 id="Code_completion" name="Code_completion">コード補完</h4>
<p>スクラッチパッドに <a href="http://ternjs.net/">tern コード解析エンジン</a> を統合して、オートコンプリートの候補やカレントシンボルに関する情報を表示するポップアップを提供するために使用しています。<kbd>Ctrl</kbd> + <kbd>Space</kbd> を押下すると、オートコンプリート候補を表示します。</p>
<p>例えば、<kbd>d</kbd> と入力して <kbd>Ctrl</kbd> + <kbd>Space</kbd> を押下してみましょう。以下のように、オートコンプリートボックスを表示します:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7933/scratchpad-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">各候補の隣にあるアイコンは、型を示します。またハイライト中の候補について、詳細情報をポップアップで表示します。<kbd>↑</kbd> および <kbd>↓</kbd> キーで候補を行き来でき、<kbd>Enter</kbd> または <kbd>Tab</kbd> でハイライト中の候補を選択します。</p>
<h4 id="Inline_documentation" name="Inline_documentation">インラインドキュメント</h4>
<p>識別子にカーソルがあるときに <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd> を押下すると、インラインドキュメントをポップアップ表示します。例えば <code>document</code>.<code>addEventListener</code> と入力して <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd> を押下すると、関数の構文や簡単な説明といった概要を記載したポップアップを表示します:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7935/scratchpad-symbolinfo.png" style="display: block; margin-left: auto; margin-right: auto;">"[docs]" は、そのシンボルに関する MDN のドキュメントへのリンクです。</p>
<h3 id="Executing" name="Executing">実行</h3>
<p class="note">コードを記述したら、実行したいコードを選択してください。何も選択しない場合は、ウィンドウ内のコードすべてを実行します。そして、コードの実行方法を上部のボタン、実行メニュー、またはコンテキストメニューで選択してください。コードは現在選択しているタブのスコープで実行します。関数の外部で宣言した変数は、そのタブのグローバルオブジェクトに追加されます。</p>
<p>実行方法は 4 種類あります。</p>
<h4 id="Run" name="Run">実行</h4>
<p>実行を選択すると、選択したコードが実行されます。これは結果を確認する必要性がない、ページのコンテンツを操作する関数や他のコードを実行するものです。</p>
<h4 id="Inspect" name="Inspect">調査</h4>
<p>調査は、コードを実行オプションのように実行します。ただし、実行後に戻り値の検証を行うことができるオブジェクトインスペクターが開きます。</p>
<p>例えば、以下のコードを入力します:</p>
<pre class="brush: js">window
</pre>
<p>そして調査を選択すると、以下のようなオブジェクトインスペクターが表示されます:</p>
<p><img alt="Inspecting an object in the Scratchpad" src="https://mdn.mozillademos.org/files/5985/scratchpad-inspect.png"></p>
<h4 id="Display" name="Display">表示</h4>
<p>表示は選択されたコードを実行して、その結果をスクラッチパッドのエディター内にコメントとして挿入しますので、<a href="http://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">REPL</a> として使用できます。</p>
<h4 id="Reload_And_Run" name="Reload_And_Run">再読み込みして実行</h4>
<p>再読み込みして実行は、実行メニューからのみ使用できます。始めにページを再読み込みして、ページの "load" イベントが発生したときのコードを実行します。これは、クリーンな環境でコードを実行するのに役立ちます。</p>
<h2 id="Running_Scratchpad_in_the_browser_context" name="Running_Scratchpad_in_the_browser_context">ブラウザーコンテキストでスクラッチパッドを実行する</h2>
<p>スクラッチパッドは特定のウェブページだけでなく、ブラウザー全体のコンテキストでも実行できます。これは Firefox 自体での作業やアドオンの開発で役立ちます。これを行うには、<a href="/ja/docs/Tools/Tools_Toolbox#Settings_2">開発ツールのオプション</a> で "ブラウザーとアドオンのデバッガーを有効" にチェックを入れてください。すると、実行環境メニューにブラウザーという選択肢が加わります。これを選択すると、いくつかのグローバルオブジェクトを調査するとわかるとおり、スコープがページのコンテンツではなくブラウザー全体になります:</p>
<pre class="brush: js">window
/*
[object ChromeWindow]
*/
gBrowser
/*
[object XULElement]
*/</pre>
<p>スニペットファイルの先頭行に<br>
<code>// -sp-context: browser</code><br>
と記入した場合は、スクラッチパッドの実行コンテキストがブラウザーに設定されます。</p>
<h2 id="Keyboard_shortcuts" name="Keyboard_shortcuts">キーボードショートカット</h2>
<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "scratchpad")}}</p>
<h3 id="Source_editor_shortcuts" name="Source_editor_shortcuts">ソースエディタのショートカット</h3>
<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "source-editor")}}</p>
|
