ES5とES6でアドタグを作ってみた - DACエンジニアブログ：アドテクゑびす界

はじめに

アドテク問題（広告表示編）のQ7を元にネイティブ広告を表示するアドタグをES5とES6で作ってみました。

処理の流れ

大きな処理の流れは以下の通り

広告要素取得処理サーバからタイトル/説明文/画像URLの取得を行う
フォーマット処理取得した要素を表示するページに最適化した形にフォーマットする
広告表示処理フォーマットした広告を表示する

ES5


(function(){
  var URL = 'http://ad-tech-study.com/display/q7';
  var DOM_FORMAT = '

    


[__VERSION__ ]__TITLE__

'; function create(url,id) { var xhr = new XMLHttpRequest(); // xhr.withCredentials = true;
 xhr.onreadystatechange = function (){
    switch(xhr.readyState){
        case 4: if(200 === xhr.status) {
            var adJson = JSON.parse(xhr.responseText);
            adJson.id = id; format(adJson);
        } else {
             console.log('no ad');
        }
        break;
        } 
    };
    xhr.open('GET', url); xhr.send(); } 

function format(json){
var html = DOM_FORMAT.replace(/__CLICKURL__/g, json.click_url);
html = html.replace(/__IMAGEURL__/g, json.image_url); 
html = html.replace(/__TITLE__/g, json.title); 
html = html.replace(/__VERSION__/g, 'ES5'); 
var ad = document.createElement('div'); 
ad.innerHTML = html; display(json.id,ad); 
} 

function display(id,ad){ 
var dom = document.getElementById(id);
dom.appendChild(ad); 
}

window.ES5 = window.ES5 = { 
    init : function(id){ 
        create(URL,id); 
        } 
    }; 
})

();

ES6

まず、ES6で書くために必要なモジュール群をnpmでインストールします。

package.json


{
  "name": "es2015",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "node_modules/mocha/bin/mocha --require babel-register test/*.test.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/takuhou/ES2015-sample.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/takuhou/ES2015-sample/issues"
  },
  "homepage": "https://github.com/takuhou/ES2015-sample#readme",
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-power-assert": "^1.0.0",
    "babel-register": "^6.14.0",
    "eslint": "^3.5.0",
    "eslint-config-airbnb": "^11.1.0",
    "eslint-plugin-import": "^1.15.0",
    "eslint-plugin-jsx-a11y": "^2.2.2",
    "eslint-plugin-react": "^6.3.0",
    "mocha": "^3.0.2",
    "power-assert": "^1.4.1",
    "webpack": "^1.13.2"
  }
}

簡単に説明すると、アドタグはES6で書きますが、動かないブラウザがあるので、ES5にトランスパイルを行うために、babelを使います。テスト書く用のmochaとLinterはeslintでルールはairbnbのものを使います。後は、モジュールをコンパイルするためにwebpackを使います。

ES5では、1つのファイルにすべての処理を書きましたが、 ES6ではClassの概念が存在するため、それを使って4つのモジュール分割します。

index.js
adunit.js
utils.js
settings.js

それぞれのモジュールの依存は、


import AdUnit from './adunit';

こんな感じでimportを使うことで、解決することができます。

Class内では、他の言語と同じようにconstructorを指定することができ、このアドタグでは、instance作成時の引数に広告をレンダリングするdomのidを指定しています。

index.js


import AdUnit from './adunit';
(() => {
  window.ES6 = window.ES6 || {
    init: (id) => {
      const adUnit = new AdUnit(id);
      adUnit.create();
    },
  };
})();

adunit.js


export default class AdUnit {
  constructor(id) {
    this.target = document.getElementById(id);
  }
・・・
}

モジュールが完成したら、テストを書きます。今回は一旦、settingsのテストだけ書いてます。 testフォルダの下にテストコードを追加し、テストを実行する場合は、


$ npm test

を実行します。

package.jsonにnpm testコマンド時の挙動を記述しており、


・・・
"test": "node_modules/mocha/bin/mocha --require babel-register test/*.test.js"
・・・

テストフレームワークとしてmochaを使い、テストもES6で書いているので、 babel-registerをrequireに渡すことで、テストコードをES5にトランスパイルしてから実行されるようになるらしいです。

最後に、webpackを使いモジュール化したら完成です。


$ node_modules/webpack/bin/webpack.js

distフォルダの配下に、es6.min.jsというのが生成されます。

サンプル

DACホームページサンプル ※スマホorスマホUAで見てください。

広告が2つ表示され、上の方がES6、下の方がES5で書いたアドタグが使われています。

今回使用したコードは以下にまとめてあります。 ES2015-sample