JavaScript —Djangoドキュメント

提供:Dev Guides
< DjangoDjango/docs/3.2.x/internals/contributing/writing-code/javascript
移動先:案内検索

JavaScript

DjangoコアのほとんどはPythonですが、adminおよびgis contribアプリにはJavaScriptコードが含まれています。

Djangoに含めるJavaScriptコードを作成するときは、これらのコーディング標準に従ってください。

コードスタイル

  • .editorconfigファイルに記載されているインデントスタイルに準拠してください。 インデントと空白の問題を回避するために、 EditorConfig をサポートするテキストエディターを使用することをお勧めします。 ほとんどのJavaScriptファイルはインデントに4つのスペースを使用しますが、いくつかの例外があります。
  • 変数に名前を付けるときは、underscore_caseの代わりにcamelCaseを使用してください。 JavaScriptファイルが異なれば、使用するコードスタイルも異なる場合があります。 各ファイルのコードスタイルに準拠するようにしてください。
  • ESLint コードリンターを使用して、コードにバグやスタイルエラーがないか確認します。 JavaScriptテストを実行すると、ESLintが実行されます。 また、テキストエディタにESLintプラグインをインストールすることをお勧めします。
  • 可能であれば、後でJavaScriptでページ構造が変更されても機能するコードを記述してください。 たとえば、クリックハンドラーをバインドするときは、$(selector).click(func)の代わりに$('body').on('click', selector, func)を使用します。 これにより、プロジェクトはJavaScriptを使用してDjangoのデフォルトの動作を簡単に拡張できます。


JavaScriptパッチ

Djangoの管理システムはjQueryフレームワークを活用して、管理インターフェースの機能を向上させます。 併せて、管理JavaScriptのパフォーマンスと、全体的な管理メディアファイルサイズの最小化に重点が置かれています。


JavaScriptテスト

DjangoのJavaScriptテストは、ブラウザーまたはコマンドラインから実行できます。 テストは、最上位のjs_testsディレクトリにあります。

テストを書く

DjangoのJavaScriptテストは QUnit を使用します。 テストモジュールの例を次に示します。

QUnit.module('magicTricks', {
    beforeEach: function() {
        const $ = django.jQuery;
        $('#qunit-fixture').append('<button class="button"></button>');
    }
});

QUnit.test('removeOnClick removes button on click', function(assert) {
    const $ = django.jQuery;
    removeOnClick('.button');
    assert.equal($('.button').length, 1);
    $('.button').click();
    assert.equal($('.button').length, 0);
});

QUnit.test('copyOnClick adds button on click', function(assert) {
    const $ = django.jQuery;
    copyOnClick('.button');
    assert.equal($('.button').length, 1);
    $('.button').click();
    assert.equal($('.button').length, 2);
});

QUnit でサポートされているアサーションのタイプについては、QUnitのドキュメントを参照してください。


テストの実行

JavaScriptテストは、Webブラウザまたはコマンドラインから実行できます。

Webブラウザからのテスト

Webブラウザーからテストを実行するには、ブラウザーでjs_tests/tests.htmlを開きます。

テストの実行時にコードカバレッジを測定するには、HTTP経由でそのファイルを表示する必要があります。 コードカバレッジを表示するには:


コマンドラインからのテスト

コマンドラインからテストを実行するには、 Node.js がインストールされている必要があります。

Node.jsをインストールした後、Djangoチェックアウトのルートから以下を実行してJavaScriptテストの依存関係をインストールします。

次に、次のコマンドでテストを実行します。