Adobe Dreamweaver で HTML、CSS、および JSファイルの構文チェックをおこなう方法について説明します。出力パネルにエラーと警告を表示し、エラーの含まれたコード行に 1 クリックでジャンプします。

初心者でも経験豊富なプログラマーでも、気付かないうちに、または知識不足によりコードにエラーが入り込んでしまう可能性は常にあります。Web ページやその一部が予想どおりに表示されなかった場合、構文エラーや論理的なエラーを探すためにコードをデバッグする必要に迫られます。デバッグは、複雑な実装の場合は特に、大変な労力と時間が必要なプロセスになる場合があります。

Dreamweaver で構文チェックを使用することで、一般的なエラーに対するコードのデバッグがシンプルかつ簡単になります。構文チェックは、潜在的なエラーや、コードの疑わしい使用を特定するコードを解析するプロセスです。Dreamweaver の構文チェックで検出されるものには、HTML 構文エラー、CSS での解析エラー、JavaScript ファイルでの警告などがあります。

見つかったエラーや警告は、ワークスペースの下部にドッキングされた個別のパネル(出力パネル)に表示されます。パネルの各行からエラーが発生したコードの部分にジャンプできるため、簡単にコードを見つけて修正できます。また、エラーが含まれた行の番号が、エラーの場合は赤で、警告の場合は黄色でハイライト表示されます。ハイライト表示された行番号をマウスでポイントすると、エラーまたは警告のプレビューが表示されます。

Dreamweaver では、HTML(.htm および .html)、CSS、および JavaScript ファイルの構文チェックをおこなうことができます。これらのファイルのコードの構文チェックをおこなうには、次の手順を実行します。

  1. HTML、CSS、JS の構成ファイルを編集して、構文チェックのルールを指定します。詳しくは、構文チェックのルールの指定を参照してください。

  2. 構文チェックを有効または無効にします。構文チェックは、ファイルの読み込み時、保存時に実行できます。構文チェックを有効/無効にするには、環境設定/構文チェックオプションを使用します。詳しくは、構文チェックの有効化と環境設定の指定を参照してください。

ファイルに見つかったエラーや警告は、出力パネルに表示されます。詳しくは、構文チェックの結果と出力パネルを参照してください。

構文チェックの有効化と構文チェックルールの指定

編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)をクリックします。 「カテゴリー」リストで「構文チェック」を選択し、「構文チェックを有効にする」を選択します。

構文チェックのルールの指定

HTML、CSS、JS ファイルを構文チェックするには、次の対応する構成ファイルで構文チェックのルールを編集します。

  • HTML:DW.htmlhintrc
  • CSS:DW.csslintrc
  • JS: .eslintrc

これらのファイルにアクセスし編集するには、次の手順を実行します。

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)をクリックします。

  2. 「カテゴリー」リストで「構文チェック」を選択します。

  3. 「ルールセットを編集」セクションで目的のファイルの種類をクリックし、「変更を編集および適用」をクリックします。

    対応する構成ファイルが Dreamweaver で開きます。

  4. 構文チェックのルールを編集し、構成ファイルに追加します。構文チェックのルールについて詳しくは、次のドキュメントを参照してください。

    これらの構成ファイルでは、表示するエラーまたは警告の種類も設定できます。

注意:

以前のバージョンの Dreamweaver CC 19.0 用の構文チェックルール設定ファイルは、JS: DW.jshintrc です。http://jshint.com/docs/options/ を参照してください。

ECMAScript 6 の構文チェック

Dreamweaver では ECMAScript 6 構文をサポートしています。Dreamweaver では、JavaScript linter のデフォルトとして ESLint を備えた、ECMAScript コードの構文チェックもサポートしています。

  1. サイト/サイトの管理をクリックします。

    サイトの管理ダイアログ
    サイトの管理ダイアログから Web サイトを選択します
  2. サイト設定ダイアログウインドウの左のパネルから「詳細設定」を選択します。

  3. 左側パネルの「詳細設定」から「構文チェック」を選択します。

    ECMAScript バージョンの横にあるドロップダウンリストをクリックして、 3、5、6 から選択できますDreamweaver では、選択したバージョンのデフォルトのルールセットが使用されます。

    ECMAScript バージョンを選択します
    ECMAScript バージョンを選択します
  4. ルールセットをカスタマイズするには、ドロップダウンリストから「構成ファイル」を選択して、「構成ファイルを編集」をクリックします。

    JS 構文セットの構成ファイルを編集します
    JS 構文セットの構成ファイルを編集します

    サイト設定で行った変更が保存され、新しいファイル .eslintrc.js がサイトのルートに存在しない場合はサイトのルートに作成されます。

    .eslintrc.js ファイルがサイトのルートで開き、編集できるようになります。詳しくは、ESLint のルールを参照してください。

    .eslintrc.js 構成ファイル
    .eslintrc.js 構成ファイル

    注意:

    • サイト設定ダイアログで定義された ECMAScript バージョンの設定は、サイトルートで使用される .eslintrc.js ファイルよりも優先されます。
    • サイト設定で .eslintrc.js ファイルを使用しない場合、Dreamweaver によってルートディレクトリまでのすべての場所で .eslintrc.js ファイルが検索されます。

    構成ファイルのカスケーディングと階層について詳しくは、ESLint のサイトを参照してください。

構文チェックの結果と出力パネル

構文チェックの結果(エラーと警告)は出力パネルに一覧表示されます。出力パネルは、すべての既定のワークスペース下部でドッキング モードで使用できます。出力パネルが閉じている場合は、次のいずれかの操作で開くことができます。

  • ドキュメントウィンドウのステータスバーで、構文チェックのステータスアイコンをクリックします
  • キーボードショートカット(Shift+F6 キー)を使用します
  • ウィンドウ/結果/出力を使用します
出力パネルと構文チェックアイコン
出力パネルと構文チェックアイコン

ステータスバーの構文チェックアイコンに構文チェックの結果が次のように示されます。

  • 赤 - 現在のドキュメントにエラーおよび警告があることを示します。
  • 黄 - 現在のドキュメントに警告のみがあることを示します。
  • 緑 - 現在のドキュメントにエラーがないことを示します。

注意:

アイコンが赤または黄色の場合、ステータスバーの構文チェックアイコンを使用して、出力パネル(開く/閉じる)を切り替えることもできます。

エラーまたは警告が含まれた行は、それぞれ赤または黄色でハイライト表示されます。出力パネルでメッセージをダブルクリックして、エラーが発生した行にジャンプすることもできます。コードビューでエラーの部組まれた行の番号をマウスでポイントして、エラーまたは警告のプレビューを表示することもできます。

出力パネルには一度に 50 件のメッセージが表示され、エラーの次に警告が一覧表示されます。エラーの修正時には、パネル内の一覧がスクロールして、次のエラーを表示します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー