(旧)ESNext 構文

Topics

(2023/12/24) この文書の原文は削除されました。以後は「ブロック開発の基本原理」以下を参照ください。便宜上、しばらく訳文を掲載しますが、内容は更新されず、一部古くなっていますので注意してお読みください。

JavaScript 言語は変化し続けており JavaScript コードを書く場合に使用される構文も固定されておらず、時間と共に変化します。Ecma International は JavaScript 言語仕様を制定する組織で、仕様は ECMAScript と呼ばれます。新しい JavaScript 仕様は毎年発行され、2015年に発行された 6番目の版は ES6 と参照されます。このドキュメントではより適切に最新の仕様を ESNext と参照します。ビルドステップはこの最新の JavaScript 構文をブラウザーが理解できるバージョンに変換します。

以下に Gutenberg プロジェクトで使用されるいくつかの一般的な ESNext 構文パターンを示します。

分割代入

分割代入 構文を使用すると配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入できます。

オブジェクト const obj = { foo: "bar" } に対して

次の1ステップで新しい変数 foo を作成し値を割り当てることができます: const { foo } = obj;

左側の中括弧は JavaScript にオブジェクト obj のプロパティ foo を調べ、その値を同じ名前の新しい変数に割り当てるよう指示します。

Top ↑

アロー関数

アロー関数は、関数の定義の短縮構文を提供します。関数の定義は JavaScript で多用するタスクですのでこれを短くすることは極めて有用です。

次のような関数を定義するとします。

const f = function ( param ) {
    console.log( param );
};

アロー関数を使用すると次のように定義できます。

const g = ( param ) => {
    console.log( param );
};

関数が単一行であれば中括弧を省略し、さらに短くすることができます。

const g2 = ( param ) => console.log( param );

console.log を使用した上の例では戻り値についてあまり気にしていません。しかしアロー関数をこのように使用すればどのような戻り値であれセットできます。

たとえば以下の save 関数は

save: ( { attributes } ) => {
    return <div className="theurl">{ attributes.url }</div>;
};

次のように短くできます。

save: ( { attributes } ) => <div className="theurl">{ attributes.url }</div>;

さらにコードを短くする方法がありますが、やりすぎると読みづらくなります。

Top ↑

インポート

インポート文 を使用するとエクスポートされたファイルから変数や関数をインポートできます。インポートの分割を使用できます。たとえば

import { TextControl } from '@wordpress/components';

これは @wordpress/components パッケージの中でエクスポートされた TextControl 変数を見ます。

パッケージやファイルは default エクスポートをセットできます。中括弧を使わなくてもインポートされます。たとえば

const edit = ( { attributes, setAttributes } ) => {
    return (
        <div>
            <TextControl
                label="URL"
                value={ attributes.url }
                onChange={ ... }
            />
        </div>
    );
};

export default edit;

インポートするには以下のようにします。

import edit from './edit';

registerBlockType( 'mkaz/qrcode-block', {
    title: 'QRCode Block',
    icon: 'visibility',
    category: 'widgets',
    attributes: {
        url: {
            type: 'string',
            source: 'text',
            selector: '.theurl',
        },
    },
    edit,
    save: ( { attributes } ) => {
        return <div> ... </div>;
    },
} );

注意: 上で見たように edit: edit は edit と短くできます。JavaScript は自動的にプロパティ edit に edit の値を割り当てます。これは分割の別の形式です。

Top ↑

まとめ

ESNext 構文と一般的な短縮形に親しむことで、コード例を読んでも何を実行しているのか理解できるようになるでしょう。

役に立つ追加リソースを挙げます。

最終更新日: