Dreamweaver のコーディング環境

Dreamweaver でコードを操作する場合は、開発者ワークスペースを使用できます。このワークスペースには初期設定でコードビューが表示され、画面の左側にはファイルパネルとスニペットパネルだけがドッキングされています。

追加の機能が必要な場合は、「ウィンドウ」をクリックして、適切なパネルを選択します。

Dreamweaver では、複数の方法でコードを操作できます。次のビューを使用できます。

• コードビュー：追加のパネルやウィンドウを使用せずにコードだけを操作できる最小限のシンプルなレイアウトです。詳しくは、ドキュメントウィンドウでのコードの表示を参照してください。
• 分割ビュー：このビューでは、コードビューとライブビューまたはデザインビューの両方が表示されるので、コーディング中におこなった変更を確認できます。詳しくは、ドキュメントウィンドウでのコーディングとページ編集の同時進行 - 分割ビューを参照してください。

ワークスペースの上部にあるコード、分割およびデザイン／ライブの切り替えボタンをクリックして、ビューを切り替えることができます。

コードインスペクターを使用して、フローティングウィンドウに HTML を表示することもできます。コードインスペクターでは、ビューを半分に分割しなくても、Web サイトのデザインとコードを同時に確認できます。詳しくは、コードインスペクターによる別ウィンドウでのコードの表示を参照してください。

ドキュメントウィンドウでのコードの表示 - コードビュー

ドキュメントウィンドウでのコーディングとページ編集の同時進行 - 分割ビュー

コードインスペクターによる別ウィンドウでのコードの表示

コードインスペクターを使用すると、コードビューで実行できるのと同じ作業を独立したコーディングウィンドウでおこなうことができます。

Dreamweaver でのコーディングの効率化

Dreamweaver のコードビューには、デザイナーがコードビューでの開発に移行するために役立つコーディング対応の機能が用意されています。経験豊富なプログラマーは、自動インデント、コードカラーリング、サイズ変更可能なフォントなどのビジュアルエイドを活用して、エラーを削減し、読みやすさを向上することができます。

Dreamweaver に用意されているいくつかの機能を次に示します。

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

Dreamweaver のコードヒント（またはコード補完）機能を使用すると、入力時にタグ、属性、CSS スタイルをポップアップメニューから選択できます。このコードの自動補完機能によって、コードを迅速に記述し、エラーを減らすことができます。

HTML でこの機能がどのように役立つかを次の例に示します。 

Dreamweaver で「<」と入力すると、使用可能なすべての HTML タグを含むポップアップメニューが表示されます。タグの入力を続けると、使用可能な HTML オプションが自動更新され、適切なタグを選択できます。Enter キーを押すと、タグが自動的に挿入されます。次に、そのタグの使用可能なすべてのプロパティを含む 2 つ目のポップアップメニューが表示されます。

コードヒントのサポートは、CSS、JavaScript および PHP（PHP バージョン 5.6 および 7.1）でも使用できます。 

詳しくは、コードヒントとコード補完機能を参照してください。

PHP 5.6 および 7.1 バージョンのサポート

Dreamweaver は PHP バージョン 5.6 および 7.1 をサポートします。 

（サイトごとに）サイト設定ダイアログボックスを使用するか、（Dreamweaver サイト外で保存されたすべての PHP ファイルについて）アプリケーションの環境設定を使用して PHP バージョン 5.6 または 7.1 を使ってサイトの PHP ファイルをコンパイルすることができます。Dreamweaver により、選択した PHP 各国語バージョンのコードヒントと構文チェックが設定されます。

Dreamweaver の新規サイトの場合、デフォルトの PHP コンパイラーは、編集／環境設定／PHP で指定したバージョンに設定されます。

Dreamweaver での PHP のサポートについて詳しくは、 を参照してください。

• PHP 環境設定の指定
• PHP コードヒント

PHP バージョン 5.6 および 7.1 の一般的な情報については、次のリソースを参照してください。

• PHP 5.6.x から PHP 7.0.x への移行：http://php.net/manual/en/migration70.php
• PHP 7.0.x から PHP 7.1 への移行：http://php.net/manual/en/migration71.php
• PHP 7.1 の詳細情報：http://php.net/releases/7_1_0.php

JavaScript オブジェクトのコードヒント

Dreamweaver は、JavaScript のオブジェクトのコードヒントをサポートしています。Dreamweaver には、配列、日付、数値、文字列などの基本的な JavaScript オブジェクトのコードヒントが用意されています。 

また、Dreamweaver では、ユーザーが作成した JavaScript 関数を記録し、独自の関数名を使用してコードヒントを提供します。

詳しくは、コードヒントとコード補完機能を参照してください。

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

Dreamweaver では、コードのリファクタリングがサポートされています。コードのリファクタリングは、外部ビヘイビアーを変更せずに既存のコンピューターコードを再構築するプロセスです。コードは読みやすくなり、理解しやすくなります。関数が小さくなり、適切な置換が行われるため、コードのデバッグにかかる時間が短縮されます。JavaScript のリファクタリングでは、スコープを認識した状態で関数と変数の名前を変更できます。

詳しくは、コードの記述と編集を参照してください。

様々なファイルの種類のコードカラーリング

Dreamweaver では、次に対するコードのカラーリングがサポートされています：HTML、JS、CSS、PHP、XML、LESS、Sass、SCSS、SVG、Bash、C、C#、C++、clojure、CoffeeScript、Dart、Diff、EJS、Embedded Ruby、Groovy、Handlebars、Haskell、Haxe、Java、JSON、Lua、Markdown、Markdown（GitHub）、Perl、Properties、Python、RDF Turtle、Ruby、Scala、SQL、Stylus、Text、VB、VBScript、XML、YAML。

繰り返しタスクでのマルチカーソル

一度に複数のコード行を記述すると、ブレットリストの作成、一連の文字列の更新、複数の編集の同時実行などの作業を迅速におこなえます。

この機能を使用すると、同じコード行を何度も記述する必要がないので、生産性が大幅に向上します。マルチカーソルによって、この処理がまとめておこなわれます。

コードの編集時には、次の操作を実行できます。

• マルチカーソルを追加して、複数の場所に新しいコンテンツを追加する
• 複数の場所でテキストを選択して、同じ編集をドキュメントの様々な部分に適用する

詳しくは、マルチカーソルまたは複数選択の追加を参照してください。

関連するコードファイルを迅速に編集可能

コードをすばやく変更するには、特定のコードスニペットにカーソルを置き、コンテキストメニューを使用するか、Ctrl+E キー（Windows）または Command+E キー（Mac）を押して、クイック編集にアクセスします。

Dreamweaver では、コンテキスト固有のコードオプションとツールがインラインに表示されます。

使用事例

次の例で考えてみましょう。

HTML ファイルの編集時に、ライブビューで表示が不適切な部分が見つかりました。コードビューに切り替えたところ、問題を修正するには、別の関連ファイル（CSS ファイルなど）の編集が必要であることがわかりました。 

タブを切り替える代わりに、関連するコードを右クリックして「クイック編集」をクリックするか、キーボードショートカットを使用すると、関連する CSS ファイルのコードの該当セクションが HTML ファイル内で開きます。

これで、タブから離れたり、タブを切り替えたりすることなく CSS コードを編集できます。変更内容は CSS ファイルで自動的に更新されます。

詳しくは、クイック編集を参照してください。

コンテキスト内 CSS ドキュメント

クイックドキュメントには、CSS プロパティのドキュメントが表示されます。このドキュメントはコードビュー内で直接確認できます。

CSS プロパティについて確認するために、Dreamweaver の外部の Web ページに移動する必要はありません。クイックドキュメントを表示するには、Ctrl+K キー（Windows）または Command+K キー（Mac）を押します。

詳しくは、 クイックドキュメントの使用による Dreamweaver 内の CSS に関するヘルプの表示を参照してください。

Emmet の組み込みのサポート

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

Emmet プラグインは Dreamweaver に組み込まれており、プラグインをインストールしなくても Emmet 省略記法を使用できます。

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

HTML 省略コードは、HTML および PHP ページに展開されます。

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

Emmet の使用法について詳しくは、Dreamweaver での Emmet ツールキットの使用を参照してください。

コードの折りたたみ

Dreamweaver では、コードセクションを折りたためるので、現在編集中のセクションにより簡単に集中できます。 

コードは、タグや大括弧に基づいて折りたたむことも、選択項目に基づいて折りたたむこともできます。 

詳しくは、コードの折りたたみと展開を参照してください。

コード検証

Dreamweaver には、コード内のエラーをデバッグするための強力な構文チェック機能が用意されています。 

この機能は、コードを解析して、潜在的なエラーやコードの疑わしい使用を検出します。Dreamweaver の構文チェックで検出されるものには、HTML 構文エラー、CSS での解析エラー、JavaScript ファイルでの警告などがあります。

Dreamweaver のコードの構文チェックについて詳しくは、構文チェックコードを参照してください。

PHP の操作時に無効なコードがドキュメントに含まれている場合、Dreamweaver はそのコードをデザインビュー（開いている場合）に表示し、コードビューではコードを強調表示します（設定済みの環境設定によって異なります）。

いずれかのビューでコードを選択すると、そのコードが無効である理由と、その修正方法が、プロパティインスペクターに表示されます。

CSS プリプロセッサーのサポート

Dreamweaver では、コードカラーリング、コードヒント、コンパイルの機能をすべて備えた一般的な CSS プリプロセッサー（Sass、LESS、SCSS など）がサポートされるようになりました。 

CSS プリプロセッサーのサポートによって、複雑なスタイルシートを使用する大規模なサイトの操作時に時間を節約できます。

Dreamweaver の CSS プリプロセッサーのサポートについて詳しくは、Dreamweaver での CSS プリプロセッサーの使用を参照してください。

コードスニペットの保存と再利用

スニペットパネル内で、よく使用されるコードブロックをコードスニペットとして保存します。保存したコードブロックは、複数のページに挿入できます。

スニペットパネルに保存したスニペットはサイト固有のものではないので、サイト間で再利用できます。

同期設定を使用して、異なるデバイス間、および異なるバージョンの Dreamweaver 間でスニペットを使用することもできます。

詳しくは、スニペットでコードを再利用するを参照してください。

ブラウザーでのリアルタイムプレビュー

コードの変更をブラウザーですばやくリアルタイムにプレビューできます。ブラウザーを手動で更新する必要はありません。Dreamweaver をブラウザーに接続できるようになったので、ページをリロードしなくてもすぐに変更がブラウザーに表示されます。

詳しくは、ブラウザーでのリアルタイムプレビューを参照してください。

キーボードショートカットをカスタマイズする

Dreamweaver では、好みのキーボードショートカットを使用できます。特定のキーボードショートカットによる操作（例えば、Shift+Enter で改行を挿入、Ctrl+G でコード内の特定の位置に移動）に慣れている場合は、キーボードショートカットエディターを使用してそのショートカットを Dreamweaver に追加することができます。

操作方法については、キーボードショートカットをカスタマイズするを参照してください。

初期設定でファイルをコードビューで開く

HTML が通常記述されていないタイプのファイル（JavaScript ファイルなど）を開くと、このファイルはデザインビューではなくコードビュー（またはコードインスペクター）に表示されます。コードビューでどのファイルタイプを開くかを指定することができます。