もう従来のシンタックスには戻れなくなる？D3.jsでES6を使ってみる！

今回はD3.jsでES6を使ってみると…という話題をお伝えします。「一度新しいシンタックスを使い始めたら、もう戻れませんよ！」とまで語られたES6がどのようなものか詳しく見ていきます。

 

 

ES6は、JavaScriptの重要なアップデートであり、D3.jsヴィジュアライゼーションで使える便利な機能を含んでいます。

 

セットアップ

 

まだES6を使っていない場合、BabelでJavaScriptにコンパイルすることですべてのブラウザで使用することができるようになります。

 

端末のほうがしっくりくる、という方はcli toolを使うのがおすすめ。

 

アロー関数

 

.attr("y", d => d.y)
.attr("x", (d, i) => i * 10)

アロー関数を使うと、JavaScriptで無名関数を書くときにより短いシンタックスにすることができます。無名関数をアロー関数に置き換えるだけです。

 

欠点として、アロー関数を使うとJavaScriptのthisがうまく機能しない可能性が挙げられますが、要素を関数の中にレファレンスする場合は通常の無名関数を使ってください。

 

LetとConst

 

let x = 10;
const y = 20;

varを使わずに、ほしい変数の条件を指定することもできます。

 

Letはvarと同じ働きをしますが、ブロックスコープされていますのでifステートメント内で使うとブロック外に適用されません。

 

Constはletと似ていますが、一旦値をアサインするとリアサインできません。

 

インポート

 

import * as scale from "d3-scale"

d3.v4.jsが素晴らしいのはモジュールに分割されていること。D3モジュールはデフォルトオブジェクトをエクスポートしません。

 

このシンタックスでモジュール内のすべてをインポートします。大規模なアプリケーションのコンテキストでD3.jsを使用している場合に役に立ちます。

 

デストラクチャリング

 

const { blue } = colors;

デストラクチャリングはオブジェクトや配列からデータを抽出できる便利な機能です。

 

メソッドの省略

 

{
  sayHello() {
    return "Hello!"
  }
}

 

ES6ではメソッドを省略できるようになっています。

 

キーにアサインされた無名関数を書く代わりに、メソッド名の外側に括弧とブロックステートメントを書きます。

 

テンプレート文字列

 

.attr("transform", `translate(${x}, ${y})`);

テンプレート文字列を使って、変数や式を挿入できます。シングルクオートやダブルクオートではなく、バッククオートを使うよう注意してください。

 

デフォルトパラメータ

 

function(data = "n/a") { }

イコールにデフォルトとして使いたい値をつけることで、パラメータにデフォルト値を設定できます。

 

ES6にはまだまだ紹介したい機能がたくさんありますが、まずはこの記事で紹介した機能を試してみてください。

 

一度新しいシンタックスを使い始めたら、もう戻れませんよ！

 

※本稿はUsing ES6 with D3.jsを翻訳・再編集したものです。