マニュアルキャンセル

コードの記述と編集

検索

最終更新日 : 2021年4月28日

Dreamweaver

アプリを開く

コードビューで作業して Dreamweaver のコーディング機能を最大限に活用する方法を説明します。

Dreamweaver では、複数の方法でコードを操作できます。

新規ドキュメントダイアログを使用して新しいコードファイルを開き、コードの入力を開始することができます。

入力を始めると、コードヒントが表示され、コードを選択できるようになります。この機能は、入力ミスを防ぐのに役立ちます。必要なときは、Dreamweaver の便利なクイックドキュメントを使用して、CSS に関するヘルプを表示してください。

挿入パネルを使用してコードを挿入したり、Emmet 省略コードなどのコーディングショートカットを使用したりすることもできます。

同じコードを何度もコピー、ペーストする場合は、時間を節約できる次の機能を試してください。

スニペットパネルは、事前フォーマットされたコードスニペットをすばやく作成し、コードに挿入できる非常に貴重な機能です。
マルチカーソルでは、複数行のコードを一度に作成および編集できます。

Dreamweaver は、強力な一連の編集ツールも備えており、コード内の移動やコードの変更を容易におこなうことができます。

コード内のタグ、属性、テキストを検索するには、Dreamweaver の検索および置換機能を使用します。
コードナビゲーターを使用すると、現在のファイルの内部や外部にある関連コードに移動できます。また、クイック編集機能を使用すると、ファイルを新しいタブで開かずに関連ファイル内のコードを編集できます。
コードを右クリックすると、関連するシンプルなコンテキストメニューが表示され、そのコードを直接編集することができます。
折り返しタグは、タグのテキストを折り返す場合に使用します。

これらのコード機能のすべてについて詳細をご確認ください。

挿入パネルを使用したコードの挿入

コード内に挿入ポイントを置きます。
挿入パネルで適切なカテゴリーを選択します。
挿入パネル内のボタンをクリックするか、挿入パネル内のポップアップメニューからアイテムを選択します。

アイコンをクリックすると、直ちにコードがページに表示されるか、コードを完成するためにさらに情報を求めるダイアログボックスが表示されます。

挿入パネルで使用できるボタンの数と種類は、現在のドキュメントタイプによって異なります。また、コードビューとデザインビューのどちらを使用しているかによっても異なります。

Dreamweaver での Emmet ツールキットの使用

Emmet は、HTML および CSS コードの高速なコーディングおよび生成を可能にするプラグインです。

Dreamweaver のコードビューまたはコードインスペクターで Emmet 省略記法を使用して Tab キーを押すと、これらの省略コードが HTML マークアップまたは CSS に展開されます。

HTML 省略コードは、HTML および PHP ページに展開されます。CSS 省略コードは CSS、LESS、SASS、SCSS ページ、または HTML ページのスタイルタグ内に展開されます。

コードビューで Emmet 省略コードを使用する方法が分かる例を次にいくつか示します。詳細およびリファレンスについては、Emmet ドキュメントを参照してください。

注意：

現在、Dreamweaver では Emmet 1.2.2 省略コードをサポートしています。

例 1：Emmet を使用した HTML コードの挿入

3 つのエレメントを持つリストの HTML コードを簡単に追加するには HTML ファイルを開き、コードビューで次の Emmet 省略コードを <body></body> で囲んで入力します。

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

カーソルが Emmet 省略コードの直後に置かれていることを確認し、Tab キーを押して省略コードを展開します。または、省略コード全体を選択してから Enter を押すこともできます。

省略記法が次のようなコードに展開されます。

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
    <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
    <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
    <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>

例 2：Emmet を使用した CSS コードの挿入

ベンダー接頭辞のある境界線の半径の CSS コードを挿入するには、CSS ファイルを開き、次の Emmet 省略コードをクラス内に入力します。

-bdrs

Tab キーを押すと、省略コードが次のようなコードに展開されます。

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

コードのコメントの操作

コメントとは、コードの説明や関連情報などを記述するために HTML コード内に挿入する説明テキストのことです。コメントのテキストはコードビューでのみ表示され、ブラウザーには表示されません。

コードへのコメントの追加

コメントを追加するには、最初にコメントテキストを入力します。次に、カーソルを挿入ポイントに置き、ツールバーの挿入アイコンをクリックして、コメントの適用サブメニューを開きます。

テキストを選択し、そのテキストをコメントにすることもできます。選択したテキストは、コメントブロック内で折り返されます。

コメントを追加するときは、各種のシンタックスオプションを使用できます。適切なシンタックスを選択すると、Dreamweaver は自動的にタグを挿入します。ユーザーは、コメントテキストを入力するだけでかまいません。

キーボードショートカットの Ctrl+/（Windows）または Command+/（Mac）を使用して、コメントを追加することもできます。

テキストを選択せずにキーボードショートカットを使用した場合は、現在の行にコメントが適用されます。テキストを選択してキーボードショートカットを使用した場合は、選択したテキストにコメントが適用されます。

コードからのコメントの削除

コードのコメントを削除するには、コードを選択して、ツールバーのコメントの削除アイコンをクリックします。キーボードショートカットの Ctrl+/（Windows）または Command+/（Mac）を使用して、コメントを削除することもできます。

コードのコメントの切り替え

コードビューでコメントの表示と非表示を切り替えるには、コメントまたは行を選択して、Ctrl+/（Windows）または Command+/（Mac）を押します。

マルチカーソルの使用による複数の場所でのテキストの追加または変更

Dreamweaver のマルチカーソル機能を使用すると、複数の場所にカーソルを追加するか、または複数のコードセクションを選択して、同時に編集をおこなうことができます。

注意：

マルチカーソルや複数選択を使用した場合、コピー＆ペースト操作、検索および置換操作が機能しません。

マルチカーソルまたは複数選択の追加

マルチカーソルは、要件に応じて、様々な方法で追加できます。

既存のテキストを置き換えずに複数の場所で同じテキストを追加する場合は、マルチカーソルを追加します。

既存のテキストを置き換える場合は、複数選択を実行します。連続するテキスト行、連続しないテキスト行、またはその両方を選択し、それらのテキスト行にカーソルを追加します。

連続する行の同じ列でマルチカーソルまたは複数選択を追加するには：

Alt キーを押しながらクリックして垂直方向にドラッグします。垂直方向にドラッグすると、ドラッグされた各行にカーソルが追加されます。

連続するテキスト行を選択するには、Alt キーを押しながら斜め方向にドラッグします。斜め方向にドラッグすると、その選択範囲内にあるテキストが長方形のブロックで選択されます。

注意：

カーソルをすばやく追加、または複数の行を選択に含めるには、キーボードショートカットの Shift + Alt + Up または Shift + Alt + Down を使用します。

複数の場所でカーソルを追加（またはテキストを選択）したら、入力を開始します。

マルチカーソルの場合は、新しいテキストが追加されます。

複数のテキスト行の内容を選択した場合は、選択したテキストが入力した新しいテキストに置き換えられます。

行をまたぐ異なる列に複数のカーソルを追加するには：

連続しないテキスト行にカーソルを追加するには、Ctrl キーを押しながら、カーソルを配置する行を個々にクリックします。

連続しないテキスト行を選択するには、どれかテキストを選択した後、Ctrl キー（Windows）または Command キー（Mac OS）を押しながら、さらにテキストの選択を続けます。

各行の先頭または末尾にカーソルを追加するには：

複数のテキスト行を選択し、左向き矢印キーまたは右向き矢印キーを押します。

前の行または後の行にカーソルを追加して、それらの行を一度に選択するには：

Shift + Alt + Up キーまたは Shift + Alt + Down キーを押してから、右向き矢印キーを押します。

連続するテキスト行と連続しないテキスト行を選択するには：

次の方法を組み合わせて、単一の選択範囲内にある連続するテキスト行と別個のテキスト行を両方選択できます。

最初に連続しないテキスト行を選択し、Ctrl+Alt（Windows）または Command+Alt（Mac）を押しながらドラッグして、既存の複数選択に一連の行を追加します。

クイックドキュメントの使用による Dreamweaver 内の CSS に関するヘルプの表示

Dreamweaver で CSS、LESS または SCSS ファイルを操作しているときは、CSS のプロパティまたは値に関する詳細な情報をすばやく取得できます。

プロパティまたは値の中にカーソルを置き、Ctrl+K を押すと、Dreamweaver は、Web Platform Docs プロジェクトからドキュメントを開きます。

同時に複数のインラインエディターとドキュメントビューアを開くことができます。

1 つのインラインエディターまたはドキュメントビューアを閉じるには、左上の「X」をクリックするか、またはクイックドキュメントがフォーカスされているときに Esc を押します。

すべてのインラインエディターおよびドキュメントを閉じるには、カーソルをメインの外側のコードエディター内に移動し、Escape キーを押します。

コードの解析

Dreamweaver では、HTML、CSS および JavaScript の構文チェック（コードを分析してエラーの有無を確認）がサポートされています。

構文チェックで検出されたエラーや警告は出力パネルに一覧表示されます。詳しくは、構文チェックコードを参照してください。

また、Dreamweaver では、エラーの含まれた行の行番号列のクイックエラープレビューを表示することもできます。行番号はエラーを含むことを示すため赤で表示され、そこにマウスを移動すると、エラーに関する簡単な説明が表示されます。

注意： 行内の最初のエラーのみが表示されます。行に警告のみが含まれる場合、警告の説明が表示されます。行に警告とエラーがあると、エラーの説明のみが表示されます。

折り返しタグを使用したコードのテキストの折り返し

コードビューで折り返しタグを使用すると、特定のテキスト行をタグで折り返すことができます。デザインビューまたはライブビューでこの機能を使用すると、オブジェクトをタグで折り返すことができます。

コードビューでテキストを選択するか、またはデザインビューでオブジェクトを選択し、キーボードで Ctrl+T を押します。

ポップアップが表示され、多数の HTML タグから必要なタグを選択できます。
メニューからタグを選択します。

コードビューで作業している場合、選択したテキストはタグで折り返されます。デザインビューまたはライブビューで作業している場合、選択したオブジェクトはタグで折り返されます。

コーディングコンテキストメニューを使用したコード編集

Dreamweaver のコンテキストメニューを使用すると、コードをすばやく編集できます。

コンテキストメニューにアクセスするには、Windows の場合は右クリックし、Mac の場合は Command を押しながらクリックします。使用できるオプションを次に示します。

クイック編集

このオプションをクリックすると、クイック編集モードになります。このモードでは、コンテキスト固有のコードとツールがインラインに表示され、必要なコードセクションにすばやく移動できます。詳しくは、クイック編集を参照してください。

切り取り、コピー、貼り付け

編集メニューにアクセスせずにすばやくテキストを切り取り、コピー、貼り付けするには、これらのオプションをクリックします。

検索と置換、次を検索、前を検索

検索メニューにアクセスせずにすばやくテキストを検索および置換するには、これらのオプションをクリックします。

新規スニペットの作成

保存して後で再利用できるコードスニペットを作成するには、このオプションを使用します。コードを選択して「新規スニペットの作成」をクリックすると、選択したコードがスニペットになります。詳しくは、コードスニペットの操作を参照してください。

コードブロックのインデント

コードビューまたはコードインスペクター内でコードを記述および編集する際には、選択したコードブロックまたはコード行のインデントレベルを、1 タブずつ右または左へ移動することによって変更できます。

選択したコードブロックのインデント

Tab を押すか、または
Ctrl+] を押すか、または
編集／コードのインデントを選択します。

選択したコードブロックのインデントの解除

Shift+Tab を押すか、または
Ctrl+[ を押すか、または
編集／コードのインデント解除を選択します。

コードナビゲーターを開く

ページ内の任意の場所を、Alt キーを押しながらクリック（Windows）または Command + Option を押しながらクリック（Mac OS）します。クリックした領域に影響を及ぼすコードへのリンクが、コードナビゲーターに表示されます。

コードナビゲーター以外の場所をクリックして、コードナビゲーターを閉じます。

注意：

コードナビゲーターは、コードナビゲーターインジケーターをクリックして開くこともできます。このインジケーターは、マウスを 2 秒間操作しないでおくと挿入ポイントの近くに表示されます。

コードナビゲーターによるコードへのナビゲーション

ページ内の調べる対象の領域から、コードナビゲーターを開きます。
ナビゲーション先のコードをクリックします。

コードナビゲーターでは、関連するコードソースがファイル別にグループ化され、アルファベット順に一覧表示されます。例えば、3 つの外部ファイルに含まれる CSS ルールがドキュメントの選択範囲に影響する場合、コードナビゲーターには、それら 3 つのファイルに加え、選択範囲に適用される CSS ルールも一覧表示されます。選択範囲に関連した CSS に対しては、コードナビゲーターは「現在」モードの CSS スタイルパネルに似た機能を提供します。

注意：

コードナビゲーター上で CSS ルールへのリンクをマウスでポイントすると、そのルールのプロパティがツールヒントで表示されます。このツールヒントは、同じ名前を持つルールが多数ある場合、それらを区別するのに役立ちます。

コードナビゲーターインジケーターの無効化

コードナビゲーターを開きます。
右下隅の「インジケーターを無効にする」をオンにします。
コードナビゲーター以外の場所をクリックして、コードナビゲーターを閉じます。

コードナビゲーターインジケーターをもう一度有効にするには、Alt キーを押しながらクリック（Windows）または Command + Option キーを押しながらクリック（Mac OS）してコードナビゲーターを開き、「インジケーターを無効にする」をオフにします。

JavaScript または VBScript の関数へのジャンプ

コードビューでもコードインスペクターでも、コードに含まれる JavaScript または VBScript のすべての関数のリストを表示し、任意の関数にジャンプすることができます。

コードビュー（表示／コード）またはコードインスペクター（ウィンドウ／コードインスペクター）でドキュメントを表示します。
次のいずれかの操作を実行します。
- コードビュー内の任意の位置で右クリック（Windows）または Control キーを押しながらクリック（Mac OS）し、コンテキストメニューから関数サブメニューを選択します。
注意：

デザインビューでは、この関数のサブメニューが表示されません。

コード内で使用されているすべての JavaScript 関数または VBScript 関数がサブメニューに表示されます。

注意：

関数をアルファベット順に表示するには、コードビュー内で Ctrl キーを押しながら右クリック（Windows）または Option + Control キーを押しながらクリック（Mac OS）し、関数サブメニューを選択します。
- コードインスペクターで、ツールバーの「コードのナビゲーション」ボタン（{ }）をクリックします。
関数名を選択し、コード内のその関数にジャンプします。

JavaScript の抽出

JavaScript エクストラクタ（JSE）を使用すると、Dreamweaver ドキュメントから JavaScript をすべて（またはほとんど）取り除いて外部ファイルに書き出し、その外部ファイルとドキュメントをリンクさせることができます。また、onclick や onmouseover などのイベントハンドラーをコードから取り除き、それらのハンドラーに関連付けられた JavaScript を完全分離してドキュメントに添付することもできます。

JavaScript エクストラクタの使用にあたっては、次の制限事項に注意してください。

ドキュメント本文内のスクリプトタグは（Spry Widget を除き）JSE では抽出されません。これは、本文内のスクリプトを外部化すると予期しない結果を生じる場合があるためです。Dreamweaver の初期設定では、そうしたスクリプトはJavaScript を外部化するダイアログボックスに一覧表示されますが抽出対象として選択されません（必要に応じて手動で選択することはできます）。
.dwt（Dreamweaver テンプレート）ファイルの編集可能領域、テンプレートインスタンスの編集不可能領域、および Dreamweaver ライブラリ項目に含まれる JavaScript は、JSE では抽出されません。
「JavaScript を外部化し、unobtrusive に添付（完全分離）」オプションを使用して JavaScript を抽出すると、以後はビヘイビアーパネルで Dreamweaver ビヘイビアーを編集できなくなります。完全分離して添付されたビヘイビアーを Dreamweaver で調べてビヘイビアーパネルに表示することはできません。
ページを閉じた後に変更内容を取り消すことはできません。ただし、変更の取り消しは同じ編集セッションが継続している間は可能です。操作を取り消すには、編集／取り消し JavaScript を外部化するを選択します。
複雑なページに対しては正常に機能しないことがあります。本文およびグローバル変数内で document.write() を使用しているページから JavaScript を抽出する場合は注意が必要です。

Dreamweaver の JavaScript サポートについて Dreamweaver エンジニアリングチームが説明する概要ビデオは、www.adobe.com/go/dw10javascript を参照してください。

JavaScript エクストラクタは次のようにして使用します。

JavaScript が含まれているページを開きます。
ツール／JavaScript を外部化をクリックします。
JavaScript を外部化するダイアログボックスで、選択の初期状態を必要に応じて変更します。
- 「JavaScript の外部化のみ」を選択すると、JavaScript が外部ファイルに移動し、現在のファイルからその外部ファイルへの参照が作成されます。このオプションでは、onclick や onload などのイベントハンドラーがドキュメント内に残り、ビヘイビアーがビヘイビアーパネルに表示されたままになります。
- 「JavaScript を外部化し、unobtrusive に添付（完全分離）」を選択すると、1）JavaScript が外部ファイルに移動し、現在のファイルからその外部ファイルへの参照が作成され、さらに、2）HTML からイベントハンドラーが取り除かれます。イベントハンドラーは JavaScript によって実行時に挿入されるようになります。このオプションを使用した後、ビヘイビアーパネルでビヘイビアーを編集することはできなくなります。
- 「編集」列で、編集対象から除外する項目があればオフにし、初期状態で選択されなかった項目を編集対象とする場合はそれらをオンにします。
  初期状態では、次の編集内容は一覧に表示されますが選択されません。
  
  ドキュメントヘッド内の、document.write() または document.writeln() の呼び出しを含んだスクリプトブロック
  
  ドキュメントヘッド内の、EOLAS 処理コードに関連する関数シグネチャを含んだスクリプトブロック（EOLAS 処理のコードでは document.write() が使用されます）
  
  ドキュメント本文内のスクリプトブロック（Spry Widget または Spry データセットコンストラクターだけを含んだブロックを除く）
- ID が付けられていないエレメントに対しては、Dreamweaver により自動的に ID が割り当てられます。別の ID を使用する場合は「ID」テキストボックスで変更できます。
「OK」をクリックします。

抽出操作の概要を示すダイアログボックスが表示されます。処理内容を確認し、「OK」をクリックします。
ページを保存します。

SpryDOMUtils.js ファイルと、抽出された JavaScript を含んだファイルが作成されます。SpryDOMUtils.js ファイルはサイトの SpryAssets フォルダーに格納され、もう 1 つのファイルは、JavaScript 抽出元のページと同じレベルに格納されます。元のページを Web サーバーにアップロードする際は、これらの依存ファイルも合わせてアップロードする必要があります。

クイック編集

Dreamweaver のクイック編集モードは、コンテキスト固有のコードとツールがインラインに配置されるので、必要なコードセクションにすばやく移動できます。多数のパネルとアイコンでコーディング環境が乱雑になることはありません。

クイック編集モードにするには、次のようにします。

コードスニペットを右クリックし、表示されるコンテキストメニューから「クイック編集」を選択する
Ctrl+E（Windows）または Command+E（Mac）を押す

HTML ファイルでのクイック編集モードの使用

HTML ファイルで、クラスまたは ID 属性（名前または値）内部、またはタグ名にカーソルを置きます。クイック編集では、プロジェクト内の CSS、SCSS および LESS ルールのうち、一致するものがすべて表示されます。この場合、HTML ファイルのコンテキストを離れることなく、これらのルールを直接インラインで編集できます。

複数のルールと一致した場合は、右側のリストを使用して（または Alt キーを押しながら上向き矢印／下向き矢印キーを押して）ルール間を移動します。

インラインエディターから CSS ルールを直接作成するには、新しいルールをクリックするか、または Ctrl+Alt+N（Windows）もしくは Command+Opt+N（Mac）を押します。

JavaScript ファイルでのクイック編集モードの使用

JavaScript ファイルでは、関数名にカーソルを置きます。クイック編集では、関数の本文が表示されます（require() ステートメントで参照されている他のファイルに関数の本文が存在する場合でも）。

CSS、SCSS または LESS ファイルでのクイック編集モードの使用

カーソルをカラーの値の内部に置いてクイック編集を起動すると、カラーピッカーにアクセスして、CSS コードで使用されるカラーをすばやく変更できます。

CSS、LESS または SCSS ファイルで、カーソルを cubic-bezier() または steps() トランジションタイミング関数に置くと、クイック編集にグラフィカルトランジションカーブエディターが表示されます。

定義済みタイミング関数のイーズ、イーズイン、イーズアウト、イーズインアウト、ステップ開始、ステップ終了も有効な開始点になります。

コードのリファクタリング

コードのリファクタリングは、外部のビヘイビアーを変更せずに既存のコンピューターコードを再構築して、コードを読みやすくし、コードの保守、理解、デバッグを容易にするプロセスです。これは、コード内に重複したコード、長いメソッド、または大きなクラスがある場合に使用されます。関数が小さくなり、適切な置換が行われるため、コードのデバッグにかかる時間が短縮されます。

JavaScript のリファクタリングでは、関数の名前を変更し、変数のスコープを設定して、定義されているコードブロック内から関数を呼び出すことができます。

注意：

コードのリファクタリングが .js ファイルでのみ利用可能になりました。

JavaScript のリファクタリング

HTML、PHP、JavaScript のドキュメントタイプでコードをリファクタリングすることができます。Dreamweaver でコード領域を右クリックすると、「リファクタリング」オプションがドロップダウンメニューに表示されます。「リファクタリング」は次のオプションで構成されます。

名前の変更
変数に抽出
関数に抽出
Try Catch で囲む
Condition で囲む
Arrow Function へ変換
Getters/Setters を作成

各リファクタリングオプションの機能を理解するには、以下のセクションを参照してください。

名前の変更

「名前の変更」は、JavaScript コード内の変数名または関数名のすべてのオカレンスを変更するために使用されます。リファクタリングのためにクリックとドラッグによって変数を選択する必要はありません。

JavaScript で名前を変更するには、次の手順を実行します。

変更が必要なコードをハイライト表示するか、コードにテキストカーソルを配置します。
選択したテキストを右クリックし、リファクタリング／名前の変更を選択します。キーボードショートカットの Ctrl + Alt + R（Windows OS）または Command + Option + R（Mac OS）を使用して、名前を変更することもできます。
画面にマルチカーソルビューが表示され、変数のすべてのオカレンスを変更することができます。マルチカーソル機能の向上により、現在の選択の次のオカレンスが選択されます。一意の変数名または関数名を再入力して、現在の名前を置き換えます。

変更前：名前の変更

変更後：名前の変更

変数に抽出

「変数に抽出」は、JavaScript 内の式を変数、ローカル変数または定数に置き換えるために使用します。まず、式を選択して右クリックします。次に、リファクタリング／変数に抽出を選択します。Ctrl + Alt + V（Windows OS）または Command + Alt + V（Mac OS）を使用することもできます。

関数に抽出

「関数に抽出」は、パラメーター内の関数の呼び出しで式を置換するために使用します。新しいパラメーターの初期設定値は、関数本体の中で初期化することも、関数呼び出しで渡すこともできます。

「関数に抽出」を使用してリファクタリングするには、次の手順を実行します。

JavaScript 内で任意の式または式のセットを選択します。

式の選択
右クリックし、リファクタリング／関数に抽出を選択します。Ctrl+Alt+M（Windows OS）または Command+Alt+M（Mac OS）を使用することもできます。
画面に表示されるポップアップメニューから、関数を抽出する宛先スコープを選択します。

スコープの種類
出力は、選択された宛先スコープによって異なります。例えば、宛先スコープとして、コンストラクター、選択されたクラス、またはグローバル関数を指定できます。

「関数に抽出」の特性は次のとおりです。
- 選択範囲または抽出されたスコープで使用可能な識別子に基づいて、渡すパラメーターを識別します。
- 選択範囲内で値が変更される識別子に基づいて、関数から返されるリターンパラメーターを識別します。
- また、一意の名前を持つ関数を作成します。
次のスクリーンショットは、選択したそれぞれの宛先スコープに基づく出力を示しています。
コンストラクター

クラス

グローバル

Try Catch で囲む

「Try Catch で囲む」は、プログラムをコンパイルした後にエラーとして表示されるコードブロック内の例外に対して使用します。この機能は、コードブロックを Try Catch ブロックで囲みます。このコードブロックは、プログラムの実行中に例外としてマークされます。

コードを選択するか、またはコードにカーソルを配置し、右クリックして、リファクタリング／Try Catch で囲むを選択します。カーソルをある位置に置くと、周囲のステートメントが検索されます。見つからない場合は、コードがステートメントで構成されているかどうかがチェックされます。ステートメントがある場合は、そのコードが Try Catch ブロックで囲まれます。

Condition で囲む

「Condition で囲む」は、特定の条件でのみコンパイルするコード内の式に対して使用します。

コード内の式を選択し、右クリックして、リファクタリング／Condition で囲むを選択します。

Arrow Function へ変換

Arrow Function は、this、arguments、super、new.target などの独自の関数式を持たない式です。これらの関数式は、非メソッド式用であり、コンストラクターとして使用することはできません。

関数内にカーソルを置き、右クリックして、リファクタリング／Arrow Function へ変換を選択します。

注意：

選択されたステートメントに 1 つのパラメーターがある場合、パラメーター構造は param => {statements} と表示されます。
選択されたステートメントに 0 個または param (param1, param2) のように 2 個以上のパラメーターがある場合、パラメーター構造は param (param1, param2) => {statements} と表示されます。

Getters/Setters を作成

JavaScript では、Setter を使用して、指定されたプロパティで変更が必要な関数を実行できます。Setter は、多くの場合、特定のタイプの擬似プロパティを作成するために Getter と一緒に使用されます。実際の値を持つプロパティに対して Setter を作成することはできません。

オブジェクト式のメンバーにカーソルを置き、右クリックして、リファクタリング／Getters/Setters を作成を選択します。

トラブルシューティングのヒント

次の表に、コードの誤った選択のために、画面に表示されるエラーメッセージに対応するトラブルシューティングのヒントを示します。

関数名	エラーメッセージ	トラブルシューティングのヒント
名前の変更	指定された位置に式がありません	変数名または関数名の上またはその前にカーソルを置きます。
変数に抽出	選択内容で式が形成されません	コードをリファクタリングする前に、コード内の式を選択します。
関数に抽出	選択したブロックは、ステートメントセットまたは式を表す必要があります	ステートメントまたは式のセットを含むブロックを選択します。
Try Catch で囲む	有効なコードを選択して、Try-catch ブロックで囲みます	リファクタリングの Try Catch オプションを適用する前に、コードを選択します。
Condition で囲む	有効なコードを選択して、Condition ブロックで囲みます	リファクタリングの「Condition で囲む」オプションを適用する前に、式を選択します。
Arrow Function へ変換	関数式の中にカーソルを置きます。	このリファクタリングオプションを適用する前に、関数式の中にカーソルを置きます。
Getters/Setters を作成	オブジェクト式のメンバーにカーソルを置きます	リファクタリングの「Getters/Setters を作成」オプションを適用する前に、カーソルをオブジェクト式のメンバーに配置します。

テキストの検索と置換

Dreamweaver の検索および置換機能を使用して、サイトまたはフォルダー内であらゆる種類のテキスト、コードまたはホワイトスペースを検索できます。

マークアップ全体を検索することも、デザインビューに表示されたテキストまたはコードのみに検索範囲を絞ることもできます。

また、強力なパターン照合アルゴリズム（正規表現）を使用した高度な検索や置換が可能です。

検索したテキストは、指定したテキスト、コードまたはホワイトスペースで置換することができます。

詳しくは、テキストの検索と置換を参照してください。

コードビューでの画像とカラーのプレビュー

画像およびカラーに関連するコードを挿入した後、コードビュー内で直接これらをプレビューできます。

イメージプレビュー

コードビューで、画像 URL の上にマウスを移動し、画像のプレビューを表示します。次の形式で参照される画像をプレビューできます。

url();
data-uri()
img タグの Src 属性値

Dreamweaver では、リモートでホストされた画像のプレビューも表示できます。

Dreamweaver でリモートパスのプレビューを表示できない場合は、「画像を読み込めません」というメッセージが表示されます。

プレビューできる画像のタイプを次に示します。

JPEG
jpg
PNG
GIF
SVG

カラープレビュー

コードビューでカラー値の上にマウスを合わせ、カラーをプレビューします。サポートされるフォーマットを次に示します。

3 および 6 桁の 16 進数カラー値：#ff0000;
RGB：rgb(0, 0, 0);
RGBA：rgba(0, 255, 228,0.5);
HSL：hsl(120, 100%, 50%);
HSLA：hsla(120, 60%, 70%, 0.3);
オリーブ、青緑、赤などのあらかじめ定義された色の名前。

カラープレビューは、上記のカラーフォーマットのすべてのドキュメントタイプで使用できます。

値を右クリックして「クイック編集」を選択すると、カラーピッカーが開き、別のカラーを選択できます。

注意：

画像と色のプレビューを無効にするには、 表示／コードビューオプション／アセットプレビューを選択して、オプションのチェックを外します。

コードの印刷

コードを印刷して、オフラインで編集、アーカイブ、配布できます。

コードビューでページを開きます。
ファイル／コードの印刷を選択します。
印刷のオプションを指定し、「OK」（Windows）または「プリント」（Mac OS）をクリックします。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る

コードの記述と編集

挿入パネルを使用したコードの挿入

Dreamweaver での Emmet ツールキットの使用

コードのコメントの操作

コードへのコメントの追加

コードからのコメントの削除

コードのコメントの切り替え

マルチカーソルの使用による複数の場所でのテキストの追加または変更

マルチカーソルまたは複数選択の追加

クイックドキュメントの使用による Dreamweaver 内の CSS に関するヘルプの表示

コードの解析

折り返しタグを使用したコードのテキストの折り返し

コーディングコンテキストメニューを使用したコード編集

コードブロックのインデント

選択したコードブロックのインデント

選択したコードブロックのインデントの解除

関連コードへのナビゲーション

コードナビゲーターを開く

コードナビゲーターによるコードへのナビゲーション

コードナビゲーターインジケーターの無効化

JavaScript または VBScript の関数へのジャンプ

JavaScript の抽出

クイック編集

コードのリファクタリング

JavaScript のリファクタリング

名前の変更

変数に抽出

関数に抽出

Try Catch で囲む

Condition で囲む

Arrow Function へ変換

Getters/Setters を作成

トラブルシューティングのヒント

テキストの検索と置換

コードビューでの画像とカラーのプレビュー

イメージプレビュー

カラープレビュー

コードの印刷

ヘルプをすばやく簡単に入手