アドビヘルプセンター

コードの記述と編集

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

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

Dreamweaverでコードを操作する方法は複数あります。

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

入力を始めると、コードヒントが表示され、コードを選択できるようになります。この機能は、入力ミスを防ぐのに役立ちます。必要に応じてDreamweaverの便利なQuick Docsを使用してCSSのヘルプを参照できます。

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

同じコードを何度もコピー＆ペーストしている場合は、これらの時間節約機能を試してください：

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

Dreamweaverには、コード内のナビゲーションや変更をスムーズに行うための強力な編集ツールセットも用意されています。

Dreamweaverの検索と置換機能を使用して、コード内のタグ、属性、またはテキストを検索します。
コードナビゲーターを使用すると、現在のファイルの内部や外部にある関連コードに移動できます。さらに優れているのは、クイック編集機能を使用して、新しいタブでファイルを開くことなく、関連ファイルのコードを編集できることです。
コードを右クリックして、シンプルで関連性の高いコンテキストメニューを表示し、コードを直接編集できます。
Wrap Tagを使用して、テキストをタグで囲みます。

これらすべてのコード機能の詳細については、続きをお読みください。

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

コード内に挿入ポイントを置きます。

挿入パネルで適切なカテゴリーを選択します。

挿入パネルのボタンをクリックするか、挿入パネルのポップアップメニューから項目を選択します。

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

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

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ファイルを開き、<body></body>内のコード表示で次のEmmet省略記法を入力します：

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

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

省略記法は次のコードに展開されます：

<div>

<ul>

<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）またはCmd+/（Mac）キーボードショートカットを使用してコメントを追加することもできます。

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

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

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

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

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

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

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

メモ

コピー＆ペースト、検索と置換の操作は、マルチカーソルや複数選択では動作しません。

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

要件に応じて、さまざまな方法でマルチカーソルを追加できます。

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

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

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

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

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

メモ

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

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

複数のカーソルがある場合、新しいテキストが追加されます。

複数行のテキストでコンテンツを選択している場合、選択したテキストが入力した新しいテキストに置き換えられます。

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

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

不連続なテキスト行を選択するには、いくつかのテキストを選択してから、Ctrlキー（Windows）またはCmdキー（Mac）を押しながら、さらに選択を続けます。

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

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

選択範囲の前後の行にカーソルを追加するには：

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

連続および不連続なテキスト行を選択するには：

これらのテクニックを組み合わせて、単一の選択内で連続した行と離れた行の両方のテキストを選択できます。

まず不連続なテキスト行を選択してから、Ctrl-Alt（Windows）またはCmd-Alt（Mac）を押しながらドラッグして、既存の複数選択に複数の行を追加します。

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

DreamweaverでCSS、LESS、またはSCSSファイルを扱う際、CSSプロパティや値に関する詳細情報を素早く取得できます。

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

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

単一のインラインエディターまたはドキュメントビューアーを閉じるには、左上の「X」をクリックするか、Quick Docsに焦点が当たっている間にEscapeを押します。

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

コードの分析

Dreamweaverは、HTML、CSS、JavaScriptのリンティング（潜在的なエラーを検出するためのコード解析）をサポートしています。

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

また、Dreamweaver では、エラーの含まれた行の行番号列のクイックエラープレビューを表示することもできます。行番号は赤色で表示されてエラーが含まれていることを示し、その上にカーソルを置くとエラーの簡単な説明が表示されます。

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

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

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

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

多数のHTMLタグから選択できるポップアップが表示されます。

メニューからタグを選択します。

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

コーディングコンテキストメニューでコードを編集

Dreamweaverのコンテキストメニューを使用してコードを素早く編集します。

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

クイック編集

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

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

これらのオプションをクリックすると、編集メニューにアクセスすることなく、テキストの切り取り、コピー、貼り付けを素早く行うことができます。

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

これらのオプションをクリックして、検索メニューにアクセスすることなく、テキストの検索と置換を素早く行います。

新規スニペットの作成

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

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

コードビューまたはコードインスペクターでコードを記述および編集する際に、選択したブロックまたはコード行のインデントレベルを変更して、1つのタブ分だけ右または左にシフトできます。

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

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

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

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

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

Alt+クリック（Windows）またはCommand+Option+クリック（Macintosh）ページの任意の場所。コードナビゲーターには、クリックした領域に影響するコードへのリンクが表示されます。

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

メモ

コードナビゲーターインジケーターをクリックしてコードナビゲーターを開くこともできます。このインジケーターは、マウスが2秒間アイドル状態になったときに、ページの挿入ポイント付近に表示されます。

コードナビゲーターでコードに移動

興味のあるページの領域からコードナビゲーターを開きます。

ナビゲーション先のコードをクリックします。

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

メモ

コードナビゲーター上で CSS ルールへのリンクをマウスでポイントすると、そのルールのプロパティがツールヒントで表示されます。これらのツールチップは、同じ名前を共有する多くのルールを区別したい場合に便利です。

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

コードナビゲーターを開きます。

右下隅の「インジケーターを無効にする」をオンにします。

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

コードナビゲーターインジケーターを再度有効にするには、Alt+クリック（Windows）またはCommand+Option+クリック（Macintosh）でコードナビゲーターを開き、「インジケーターを無効にする」オプションの選択を解除します。

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 外部化ダイアログで、必要に応じてデフォルトの選択を編集します。

DreamweaverにJavaScriptを外部ファイルに移動させ、現在のドキュメントでそのファイルを参照させたい場合は、「JavaScriptのみ外部化」を選択します。このオプションを選択すると、onclick や onload などのイベントハンドラーがドキュメントに残り、ビヘイビアーパネルにビヘイビアーが表示されます。
Dreamweaver で 1) JavaScript を外部ファイルに移動して現在のドキュメントで参照し、2) HTML からイベントハンドラーを削除して JavaScript を使用して実行時に挿入する場合は、「JavaScript を外部化して控えめに添付」を選択します。このオプションを選択すると、ビヘイビアーパネルでビヘイビアーを編集することができなくなります。
「編集」列で、実行したくない編集の選択を解除するか、Dreamweaver がデフォルトで選択しなかった編集を選択します。
デフォルトでは、Dreamweaver は以下の編集をリストに表示しますが、選択しません：
- document.write() または document.writeln() の呼び出しを含むドキュメントの head にあるスクリプトブロック。
- document.write() を使用することが知られている EOLAS 処理コードに関連する関数シグネチャを含む、ドキュメントの head にあるスクリプトブロック。
- ドキュメントの本文内のスクリプトブロック（ただし、Spry ウィジェットまたは Spry データセットコンストラクターのみを含むブロックは除く）。
Dreamweaver は、ID を持たない要素に自動的に ID を割り当てます。これらの ID が気に入らない場合は、ID テキストボックスを編集して変更することができます。

「OK」をクリックします。

サマリーダイアログには抽出の概要が表示されます。処理内容を確認し、「OK」をクリックします。

ページを保存します。

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

クイック編集

多くのパネルやアイコンでコーディング環境を煩雑にする代わりに、Dreamweaver のクイック編集モードでは、コンテキスト固有のコードとツールをインラインで配置し、必要なコードセクションにすばやくアクセスできます。

クイック編集モードに入るには：

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

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

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

複数のルールが一致する場合は、右側のリストを使用して移動します（または Alt-Up/Down を使用）。

インラインエディターから直接 CSS ルールを作成するには、「新しいルール」をクリックするか、Ctrl-Alt-N（Windows）または Cmd-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でリネームするには、以下の手順を実行します：

変更が必要なコードをハイライトするか、テキストカーソルを配置します。

選択したテキストを右クリックし、リファクタリング > リネームを選択します。リネームするには、Windows OSではCtrl + Alt + R、macOSではCommand + option + Rのキーボードショートカットを使用することもできます。

画面にマルチカーソルビューが表示され、変数のすべてのオカレンスを変更することができます。マルチカーソル機能の向上により、現在の選択の次のオカレンスが選択されます。現在の名前を置き換える一意の変数または関数名を入力し直します。

変数に抽出

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

関数に抽出

「関数に抽出」は、パラメーター内の関数の呼び出しで式を置換するために使用します。新しいパラメータのデフォルト値は、関数本文内で初期化するか、関数呼び出しを通じて渡すことができます。

関数に抽出を使用してリファクタリングするには、以下の手順を実行します：

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

右クリックして、リファクタリング > 関数に抽出を選択します。Windows OSではCtrl + Alt + M、Mac OSではCmd + Alt + Mも使用できます。

画面に表示されるポップアップメニューから、関数を抽出する宛先範囲を選択します。

出力は、選択された宛先スコープによって異なります。例えば、宛先範囲はコンストラクタ、選択したクラス、またはグローバル関数とすることができます。

関数への抽出の特徴は：

選択内容または抽出された範囲で利用可能な識別子に基づいて、渡すパラメータを特定します。
選択範囲で値が変更された識別子に基づいて、関数から返すパラメータを特定します。
一意の名前を持つ関数も作成します。

以下のスクリーンショットは、選択されたそれぞれの宛先範囲に基づく出力を表示しています。

Try Catch で囲む

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

コードを選択またはカーソルを配置し、右クリックしてリファクタリング > Try Catchで囲むを選択します。カーソルを位置に配置した場合は周囲のステートメントを検索し、配置しなかった場合はコードがステートメントで構成されているかどうかを確認します。ステートメントがある場合、コードをTry Catchブロックでラップします。

Condition で囲む

Wrap in Conditionを使用して、コード内の式を特定の条件でのみコンパイルするようにします。

コード内の式を選択し、右クリックしてRefactor > Wrap in Conditionを選択します。

Arrow Function へ変換

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

関数内にカーソルを置き、右クリックしてRefactor > Convert to Arrow Functionを選択します。

メモ

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

Getters/Setters を作成

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

オブジェクト式のメンバーにカーソルを置き、右クリックしてRefactor > Create 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 がリモートパスのプレビューを表示できない場合、「Unable to load image」メッセージが表示されます。

次の画像タイプをプレビューできます：

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);
Olive、Teal、redなどの事前定義済みのカラー名。

上記のカラー形式については、すべてのドキュメントタイプでカラープレビューを利用できます。

値を右クリックし、Quick Editを選択してカラーピッカーを開き、別の色を選択します。

メモ

画像と色のプレビューを無効にするには、View > Code View Options > Asset Previewオプションのチェックを外します。

コードの印刷

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

コードビューでページを開きます。

ファイル／コードの印刷を選択します。

印刷オプションを指定し、OK（Windows）または印刷（Macintosh）をクリックします。

Dreamweaver で美しい web サイトを構築
強力なオールインワンツールで動的な web サイトをデザイン、コーディング、管理できます。

アプリを開く

コードカラーリングのカスタマイズ

コードヒントとコード補完機能

学ぶ

アプリ内のステップバイステップのビデオチュートリアルと実践的なガイダンスで学習できます。

コミュニティ

ディスカッションに参加し、回答を見つけ、専門家から学び、知識を共有することができます。

アドビホーム

お気に入りの Creative Cloud アプリ、サービス、ファイル管理などにアクセスできます。

コードの記述と編集

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

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

コードのコメントの操作

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

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

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

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

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

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

コードの分析

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

コーディングコンテキストメニューでコードを編集

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

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

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

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

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

コードナビゲーターでコードに移動

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

JavaScriptまたはVBScript関数に移動

JavaScript の抽出

クイック編集

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

JavaScript のリファクタリング

名前の変更

変数に抽出

関数に抽出

Try Catch で囲む

Condition で囲む

Arrow Function へ変換

Getters/Setters を作成

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

テキストの検索と置換

コード表示での画像と色のプレビュー

イメージプレビュー

カラープレビュー

コードの印刷

学ぶ

コミュニティ

アドビホーム

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