仕事が忙しくアドベントカレンダーシーズンに乗り遅れてしまいました。数年ぶりに平穏な 12 月を過ごしております。

> と思ったら[JavaScript その 2 Advent Calendar 2015 - Qiita](http://qiita.com/advent-calendar/2015/javascript2)の 7 日目が開いていたので急遽参加 w

ところで、[Javascript のスタイルガイドでは割と有名な Airbnb](https://github.com/airbnb/javascript)の日本語訳をしているのですが、最近本家のスタイルガイドが ES6 対応していたので、日本語訳の方もアップデートしました。

[Javascript\-style\-guide](http://mitsuruog.github.io/javascript-style-guide/)

スタイルガイドを ES6 にアップデートする過程で、私なりに ES6 でより良いコードを書くために気づいた点、注意する点などピックアップして紹介したいと思います。  
この記事は、ES6 でより良いコードを書きたい人向けの ES6 入門です。



## ES6 での良いコードとは？

ES6 については大きな変更があるアップデートであるため、仕様についての日本語の記事を目にする機会が多いかと思います。

私が ES6 で最初につまづいたポイントは、**「今まで ES5 で書いていたコードを、ES6 に置き換えた場合にどう書けば、より良いコードとなるのか？」** という素朴な疑問でした。  
今まで ES5 で書いていた人の中で、ES6 で実際に書くコードについて、具体的なイメージできてない人も多いのではないか？という思いがこの記事を書こうと思ったきっかけです。

結論としては、Airbnb のスタイルガイドを読めばヒントが隠されているかもしれないということですが、今回はスタイルガイドを ES6 にアップデートする過程で、私なりに ES6 でより良いコードを書くために気づいた点、注意する点などピックアップして紹介したいと思います。  
（知ってて同然かなと思う部分は割愛してたりしています。）

## スタイルガイドから見た ES6 良いコードを書くために知っておくべきこと

### 変数宣言は const が基本

ES6 からは変数宣言には`const`と`let`が利用できます。これからは`var`をやめ、基本的にはすべて`const`を使っていきます。

途中で一度定義した変数の中身を変更したい場合は、`let`を使いますが、これはあくまで例外的な扱いにしておいた方が、メンテナンスしやすいコードになります。

`const`と`let`を使うもう一つのメリットとして、Javascript 特有の変数の巻き上げというトリッキーな問題が緩和されます。

ES5 以前は変数宣言はブロックスコープの先頭に巻き上げられるため、宣言する前でその変数を利用した場合、エラーにならず`undefined`となっていましたが、`const`と`let`を使うことで`ReferenceError`が発生するようになりました。

```js
// ES5)
console.log(hoge); // => undefined
var hoge = 'hoge';

// ES6)
console.log(hoge); // => throws a ReferenceError
const hoge = 'hoge';
```

### アロー関数(Arrow Functions)と注意点

ES6 のアロー関数は記述の簡潔さと、実行時のコンテキスト(いわゆる`this`)を束縛してくれるため、Promise などの非同期処理を書く場合は、積極的に利用するべきです。

```js
// ES5)
function Person() {
  var self = this;
  self.age = 0;
  setInterval(function growUp() {
    console.log(self.age++); // => 1
  }, 1000);
}
var p = new Person();

// ES6)
function Person() {
  this.age = 0;
  setInterval(() => {
    console.log(this.age++); // => 1
  }, 1000);
}
var p = new Person();
```

ところが、アロー関数を利用するべきではないケースが存在します。ライブラリなどを利用している場合で、途中`this`を書き換えているケースです。  
このような場合、アロー関数が`this`を束縛してしまうため、コードが動作しなくなります。

このように利用する際のハマりポイントを知っておく必要がありますが、`var that = this;`や`.bind()`を書く機会がぐっと減りそうです。

### ES6 時代のデフォルトパラメータの書き方

ES5 時代のデフォルトパラメータは`||`演算子を利用したものでした。  
この記法は、時に判別しにくいバグを生み出す要因でしたので、ES6 ではデフォルトパラメータを利用しましょう。

```js
// ES5)
function say(name) {
  // nameが「false, 0」の場合、`mitsurog`となって本当にいいのか！？
  name = name || 'mitsurog';
  // say Hello
}

// ES6)
function say(name = 'mitsurog') {
  // say Hello
}
```

### コードを簡潔に書くために構造化代入(Destructuring)を効果的に使おう

ES6 からはオブジェクトと配列に構造化代入が導入されました。

普段のコードの中で、オブジェクトの詰め替えを行っているケースは意外に多く、中間参照変数が多い場合、名前付けに悩むケース(`tmp~`にするかうーんみたいな)が多々あります。

私自身あまり注目していなかった仕様の 1 つだったのですが、中間参照変数を減らすという意味で、今後は考えを改めで積極的に使って行きたいと思う仕様です。

```js
// ES5)
function getFullName(user) {
  var firstName = user.firstName;
  var lastName = user.lastName;
  return firstName + ' ' + lastName;
}

// ES6)
function getFullName({firstName, lastName}) {
  return `${firstName} ${lastName}`;
}

// 呼び出し側
console.log(getFullName({
  firstName: 'taro',
  lastName: 'yamada',
})); // => taro yamada
```

## 番外編

その他、ES6 で書く場合に考えていることなど。

### Template strings には愛しか感じないので使おう

ES6 で Template strings が導入されました。文字列補完機能・複数行文字列対応と至れり尽せりでもう愛しか感じません。さようなら`underscore.js`。

```js
const name = "mitsuruog";
console.log(`Hello ${name}`); // => Hello mitsuruog

// [注意]複数行の場合、先頭の空白もそのまま出力されます。
console.log(`
  Hello
  ${name}
`);
// =>
//   Hello
//   mitsuruog
```

### 末尾の余計なカンマは付ける？付けない？

最後に「末尾の余計なカンマ(Additional trailing comma)」は付けるか付けないかという話題です。  
以前はレガシーブラウザで問題があるとの理由で避けられて来ましたが、ES6 版ではむしろ付ける方を推奨していました。

理由は、git の diff が綺麗になるからと、どうせ Babel などでトランスパイル処理されるので、末尾の余計なカンマはトランスパイラでよしなに処理されるでしょ w ということです。  
トランスパイラ導入が前提の話でちょっと驚いています。時代の流れですね。

```js
// ES5)
var name = {
  firstName: 'taro',
  lastName: 'yamada'
}

// ES6)
const name = {
  firstName: 'taro',
  lastName: 'yamada',
}
```

### クラスとシングルトンとモジュールの見分け方についての問題提起

ES6 で導入された Class 構文ですが、やはりシングルトンとして利用したいという議論があるのは歴史の流れでしょうか。。。

[javascript - Converting Singleton JS objects to use ES6 classes - Stack Overflow](http://stackoverflow.com/questions/26205565/converting-singleton-js-objects-to-use-es6-classes)

singleton パターンを使おうとか、そもそも class にする必要はないとか、なかなか興味深いです。

とはいえ、利用者側としては提供されたモジュールがシングルトンでの利用を期待しているなど、コードを見ないと分からないわけで、スタイルガイド的に何かルールかあるかと思いきや。。。  
スタイルガイドでは、クラスもシングルトンもパスカルケースなので見分けがつきませんね。  
このあたり皆さんどうしているのでしょうか？

## 最後に

つらつらと ES6 でより良く書くための話をしました。コードスタイルの話なので、あくまで参考にしてください的な話です。

とはいえ、最近の Javascript は Babel などトランスパイラ前提なので、ますます敷居た高くなってきましたね。

スタイルガイドから考えるES6でより良いコードを書きたい人向けのES6入門

D3.js を使ってタイムチャートを作成してみました。  
初めて実践投入したこともあり、いろいろ苦労した点などあるので、振り返ってまとめてみます。  
D3.js まだまだ奥が深いので、私が紹介する以外にもっといい方法があると思います。あくまで自分用のメモだと思ってください。

> 利用している D3.js は v3 系です。



## サンプル

Codepen にサンプル作りました。

[TimeChart](https://codepen.io/mitsuruog/pen/bzqgKG/)

## 苦労したこと

1.  一定期間の時間軸を作成したい
2.  時間軸のラベルを一定間隔にしたい
3.  時間軸のラベルフォーマットしたい
4.  軸のメモリ線(？)を消したい
5.  画面サイズに応じて軸ラベルを回転させたい
6.  カテゴライズされた軸を作りたい
7.  カテゴライズされた軸のラベルを別なものにしたい
8.  ラベルの文字が長い場合に改行したい
9.  軸の domain 範囲を超えたデータがある場合に表示させない
10. window がリサイズしたら Chart を再描画したい
11. 描画した SVG オブジェクトを全てクリアしたい

### 一定期間の時間軸を作成したい

`d3.time.scale`の`domain`に開始日時と終了日時を設定する。

```js
var xScale = d3.time
  .scale()
  .domain([
    new Date("2015-07-01 0:00:00"), // 開始日時
    new Date("2015-07-02 0:00:00"), // 終了日時
  ])
  .range([0, width]); // 実際の出力サイズ
```

### 時間軸のラベルを一定間隔にしたい

`d3.svg.axis()`の`ticks`に間隔を指定する。

```js
var xAxis = d3.svg.axis().scale(xScale).orient("top").ticks(d3.time.minute, 60); // 60分間隔
```

細かな単位の指定などはこちら
(Intervals を指定すればいいと思われる。)

[Time Intervals · mbostock/d3 Wiki](https://github.com/mbostock/d3/wiki/Time-Intervals)

### 時間軸のラベルフォーマットしたい

`tickFormat` を使おう。

```js
var xAxis = d3.svg
  .axis()
  .scale(x)
  .orient("bottom")
  .tickFormat(d3.time.format("%H:00"));
```

フォーマット書式はこちら

[Time Formatting · mbostock/d3 Wiki](https://github.com/mbostock/d3/wiki/Time-Formatting)

よく使いそうなもの

```txt
%Y - year
%m - month[01,12]
%d - zero-padded day[01,31]
%H - hour[00-23]
%M - minute[00,59]
%S - second as a decimal number [00,61].
```

[javascript - how to format time on xAxis use d3.js - Stack Overflow](http://stackoverflow.com/questions/15471224/how-to-format-time-on-xaxis-use-d3-js)

### 軸のメモリ線(？)を消したい

`innerTickSize`, `outerTickSize`, `tickPadding`あたりを使う。

```js
var xAxis = d3.svg
  .axis()
  .scale(xScale)
  .orient("top")
  .innerTickSize(0)
  .outerTickSize(0)
  .tickPadding(10);
```

ここの記事がわかりやすかったので、これを見れば十分。

[D3.js の折れ線グラフにグリッド線を追加する | Qaramell Blog](http://blog.qaramell.com/?p=12911)

### 画面サイズに応じて軸ラベルを回転させたい

ラベルを描画する際に、画面サイズに応じて`rotate`させる。

```js
svg
  .append("g")
  .call(xAxis)
  .selectAll("text")
  .attr("transform", function () {
    if (w < 1000 && w > 689) {
      return "translate(20, -5) rotate(-45)";
    } else if (w <= 689) {
      return "translate(20, -15) rotate(-90)";
    } else {
      return null;
    }
  });
```

### カテゴライズされた軸を作りたい

例えば、システム的な Id ではなくで、なんらかの文字列のラベルなど。

`d3.scale.ordinal`を使って`domain`にラベルとしたい値の配列を渡す。

```js
var labels = [
  { id: 1, name: "ばなな" },
  { id: 2, name: "りんご" },
  { id: 3, name: "ぶどう" },
];
var yScale = d3.scale
  .ordinal()
  .domain(
    labels.map(function (d) {
      return d.name;
    })
  )
  .rangeRoundBands([0, height], 0.5); // 0.5はラベルの間隔
```

### カテゴライズされた軸のラベルを別なものにしたい

`d3.svg.axis`にて`tickFormat`を使って別の値に変換する。

```js
var mapper = ["ばなな", "りんご", "ぶどう"];
var xAxis = d3.svg
  .axis()
  .scale(xScale)
  .orient("top")
  .tickFormat(function (d, i) {
    // d, i をうまく使ってマッピングリストから値を取得するように設計する
    return mapper[i];
  });
```

[javascript - Give d3 ordinal axis labels different from scale names - Stack Overflow](http://stackoverflow.com/questions/19994328/give-d3-ordinal-axis-labels-different-from-scale-names)

### ラベルの文字が長い場合に改行したい

ラベルのテキストを抽出して、親のエレメントを指定して`<p>`タグなどで置き換える。
(もっとスマートなやり方はないのか)

```js
var mapper = ["ばなな", "りんご", "ぶどう"];
svg
  .append("g")
  .call(yAxis)
  .selectAll("text")
  .each(function (d, i) {
    var el = d3.select(this);
    var parent = d3.select(this.parentNode);
    parent
      .append("foreignObject")
      .attr() // テキストラベルラッパーの設定 ex)表示位置など
      .append("xhtml:p")
      .attr() // テキストラベルの属性 ex)classなど
      .html(function (d, i) {
        return mapper[i]; // 設定するラベルを返却
      });
    el.remove(); // 元のtextを消す
  });
```

あとは css でスタイリングしていきます。

```css
.y-axis-label {
  word-wrap: break-word;
  text-align: center;
}
```

[nvd3.js - How to do wordwrap for chart labels using d3.js - Stack Overflow](http://stackoverflow.com/questions/16039693/how-to-do-wordwrap-for-chart-labels-using-d3-js)

### 軸の domain 範囲を超えたデータがある場合に表示させない

`.clamp(true)`を使おう。これで domain 範囲を超えるデータは自動的にカットされて表示される。

```js
var xAxis = d3.svg.axis().scale(xScale).orient("top").clamp(true);
```

### window がリサイズしたら Chart を再描画したい

`resize`イベントを使おう。そのままだとイベント発火回数が多いので、`throttle`(間引き)の仕組みを使う。

```js
var timer = false;
window.addEventListener("resize", function () {
  if (timer !== false) {
    clearTimeout(timer);
  }
  timer = setTimeout(function () {
    redraw(); // 何かの再描画関数
  }, 200); // リサイズ終わってから200msec経過して再描画する
});
```

### 描画した SVG オブジェクトを全てクリアしたい

```js
d3.select("svg").selectAll("*").remove();
```

[d3.js - how do I remove all children elements from a node and them apply them again with different color and size? - Stack Overflow](http://stackoverflow.com/questions/14422198/how-do-i-remove-all-children-elements-from-a-node-and-them-apply-them-again-with)

### 雑感

D3.js でタイムチャートで作ってみましたが、1 点ものの作品を作っている感が非常に強いです。  
再利用とか部品化など考えると D3 が提供している API との境界でそこまでコストを掛けてするべきか、正直悩みました。

学習コストは結構高い方の部類に入りますので、その辺り本腰を入れて学習するか一度天秤に掛けた方がいいと思います。  
ただ、一度覚えると比較的自由に扱えるようになると思います。  
要件的にに満たすのであれば、既存のライブラリを利用した方が楽でいいですね。

このあたりが有名どこでしょうか。簡単なチャートであれば積極的に使っていきたいです。

- [C3.js | D3-based reusable chart library](http://c3js.org/)
- [Epoch by Fastly](http://fastly.github.io/epoch/)
- [Angular-charts](http://chinmaymk.github.io/angular-charts/#)

D3.js じゃないけど、気になってるやつ

- [Chart.js | Documentation](http://www.chartjs.org/docs/#radar-chart)

D3.jsでタイムチャートを作ってみたので、苦労した点など振り返ってみる

フロントエンドの世界では、日々新しいフレームワークやライブラリが生まれています。
初めてそういった新しいものを習得する場合に、なるべくなら近道したいと思うのが人の気持ちだと思います。  
まず大変なのが、Hello World から実際のプロダクトやプロトタイプで利用する場合で、これは初めてで何もわからない土地を一人で散策するような感覚にも似ています。

今日、紹介するのは私が進化の早いフロントエンドの世界で、より早く未開の土地に慣れるために**スタイルガイド**を有効活用しているという話です。



ちなみにこの記事は[Frontrend Advent Calendar 2014 - Qiita](http://qiita.com/advent-calendar/2014/frontrend)の 6 日目の記事です。

- 5 日目[はじめての CSS 設計 - Qiita(@moschann)](http://qiita.com/moschann/items/c7cbf62056d77cbc1d66)
- 7 日目[CSS のプリプロセスとポストプロセス、そして Rework と PostCSS(@morishitter)](http://morishitter.hatenablog.com/entry/2014/12/07/000205)

## 良いスタイルガイドとは

巷にはスタイルガイド(コーディング規約)と銘打ったものがあふれています。
そのため有効に活用できるスタイルガイドを自身で見極めなければなりません。  
頼りにするスタイルガイドが大雑把で必要なことが書いてなかったり、1000 ページもあってすぐ必要な場所が探せないようでは使えません。

私がスタイルガイドを見たときに良さそうだなと思うのは次のような場合です。

- 目次をみて言語やフレームワークの機能を網羅しているか
- `Bad`と`Recommended`の両方のスタイルが提示されているか
- そのスタイルに至った理由や背景が書かれているか
- スタイルの提示だけではなく、具体的なユースケースが提示されているか

このようなことを頭の片隅に置きながら、自分にあったスタイルガイドを探すといいと思います。

## なぜスタイルガイド？

私がスタイルガイドを読む理由はいくつかあるので紹介しますね。

### 良いコードを書くために悩む時間を短縮

例えば、Javascript でのオブジェクトや配列の定義の仕方については、通常`{}`と`[]`が使われると思いますが、Javascript の言語自体あまり普段やらない人にとってはそれすらわからないと思います。

```js
// bad
var item = new Object();

// good
var item = {};

// bad
var items = new Array();

// good
var items = [];
```

> [mitsuruog/Javacript-style-guide | オブジェクト](http://mitsuruog.github.io/javacript-style-guide/#objects)より

スタイルガイドを読むことで基本的な部分では悩まなくなります。基本的なことで悩まないということは、本当にやるべきところで悩むことに集中するために大切なことです。

様々な書き方存在する中で良いコードを書くために悩む時間を少なくしたいですね。  
(とはいえ、悩むのですが。。。)

### 地雷源を早期に把握

良いスタイルガイドには、先人達がその言語やフレームワークにて発見した地雷源が記載されています。

例えば、AngularJS で controller などを作成する際に、複数の書き方ができるのですが、スタイルガイドを読むことで悩むことなく自分が書くべきコードを見つけることができました。

> 世の中のサンプルは avoid で実装されていることが多いです。それを疑わないままそのまま覚えてしまうことは危険です。

```js
/* avoid */
angular
  .module("app")
  .controller("Dashboard", [
    "$location",
    "$routeParams",
    "common",
    "dataservice",
    function Dashboard($location, $routeParams, common, dataservice) {},
  ]);

/* recommended */
angular.module("app").controller("Dashboard", Dashboard);

Dashboard.$inject = ["$location", "$routeParams", "common", "dataservice"];

function Dashboard($location, $routeParams, common, dataservice) {}
```

> [johnpapa/angularjs-styleguide | Manually Identify Dependencies](https://github.com/johnpapa/angularjs-styleguide#style-y091)より

また、DI の部分を以下のように省略して書いてしまうとソースコードを Minify したときにエラーになるという地雷も発見することができました。

```
/* avoid - not minification-safe*/
angular
    .module('app')
    .controller('Dashboard', Dashboard);

function Dashboard(common, dataservice) {
}

/* recommended - minification-safe*/
angular
    .module('app')
    .controller('Dashboard', Dashboard);

Dashboard.$inject = ['common', 'dataservice'];

function Dashboard(common, dataservice) {
}
```

> [johnpapa/angularjs-styleguide | UnSafe from Minification](https://github.com/johnpapa/angularjs-styleguide#style-y090)より

これらの先人たちの地と涙を汗の結晶である**地雷源情報**を参考にしない手はありませんね。

### コードリーディング時間の短縮

チームで作業する場合に、同じスタイルガイドを参照することで統一感のあるコードを書くことができます。

これは OSS でも同じことで同じスタイルガイドに習うことで他人のコードも読みやすく、また自分のコードも読んでもらいやすくなります。

例えば、Nodejs では API 呼び出しの最後の引数に function を渡すことで、API 呼び出し後に callback を実行させることが慣例となっています。(引数が 1 つの場合はそれが callback になることが多いです。)

express のサーバー作成のコードを例として提示します。

```js
// Setup server
var app = require("express")();
var server = require("http").createServer(app);

// Start server
// [MEMO]3番目のfunctionがcallback
server.listen(port, ip, function () {
  console.log("Express server listening on %d", port);
});
```

> どこかでこんな内容のガイド見たのですが、忘れてしまいました。知っているかたいましたら教えてください。

自分が作成した node 製モジュールの API で、最初の引数を callback にしてしまった場合はどうでしょうか。
他人が読む場合とてもストレスを感じると思います。

**Go に入れば Go に従えで**はないですが、そのコミュニテイ内でのルールは守ったほうがいいですよね。

## スタイルガイドの紹介

私がよく参照するスタイルガイドを紹介します。これからフロントエンド習得しようと思う方は参照してみてください。  
(よく利用しているフレームワークに偏りあるので、全ては網羅していませんが。。。)

### Javascript

airbnb のスタイルガイドを私が翻訳したものです。(本家はこちら[airbnb/javascript](https://github.com/airbnb/javascript))  
有名なスタイルガイドは他にもいくつかあるのですが、内容とボリュームがちょうどいいと思います。

- [mitsuruog/Javacript-style-guide](http://mitsuruog.github.io/javacript-style-guide/)

もうちょっと手が動く様になるとこちらも読むといいです。

- [JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/ja/)

### Backbone

スタイルガイドというかパターン集ですね。最近の Backbone は[Marionette.js](http://marionettejs.com/)を併用することが多いので、これはもうあまり出番がないかも。。。

- [rstacruz/Backbone patterns](http://ricostacruz.com/backbone-patterns/)

### AngularJS

AngularJS はこれを読んでおけばいいです。

- [johnpapa/angularjs-styleguide](https://github.com/johnpapa/angularjs-styleguide)

### CSS

基本ですね。

- [idiomatic-css/translations/ja-JP](https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP)

本格的に勉強したい場合はまずこちらを読むといいです。

- [SMACSS E-book 日本語](http://shop.smacss.com/products/smacss-e-book)

### HTML

結構マークアップで悩む事が多いので、参考になります。

- [hail2u/html-best-practices](https://github.com/hail2u/html-best-practices)

## まとめ

進化の早いフロントエンドの世界ですが、私が進化に追いつくためにスタイルガイドを有効活用しているという話をしました。  
特に最近は特定のフレームワークや言語のスタイルガイドが付属するようなトレンドになってきたような気がしています。  
(ここで言うスタイルガイドは、従来のスタイルガイドとは違うジャンルの新しいタイプのものなのかもしれませんね。)

他の習得方法として、書籍を読む方法もいいと思いますが、スタイルガイドで特性などを把握してから本を読み進んだほうが、途中で挫折しないような気がしています。  
スタイルガイドは面倒な前置きなどないので、忙しいエンジニアは普段使いするには向いていると思いますし。
(書籍の内容は StackOverflow で参照できる内容もおおくありますし。。。)

良いスタイルガイドを知ることは、自分の組織やプロダクトでどのようなスタイルガイドを作成すればいいか、重要なヒントが隠されていると思います。

進化の早いフロントエンドの世界についていくために、スタイルガイドを有効活用しているという話

> How to internationalize the smart in OpenUI5/SAPUI5

エンタープライズ利用を想定した「[OpenUI5](http://sap.github.io/openui5/)」には、企業システムで有用な多くの UI コンポーネントを持っています。  
しかし、OpenUI5 の価値は豊富な UI だけではありません。OpenUI5 の本当の価値は、エンタープライズ利用を想定した HTML5 ベースのアプリケーションを作成するために、必要な機能を含んだオールインワンかつハイスペックな UI フレームワークということです。  
今回は、その中でも OpenUI5 が持つ強力な国際化機能について説明します。



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/a1180_010361.jpg)

## 目次

本記事で利用するデモはこちらで参照出来ます。  
Demo here :).  
[http://mitsuruog.github.io/sapui5-showroom/app/#/locale](http://mitsuruog.github.io/sapui5-showroom/app/#/locale)

## 1. OpenUI5 での国際化

OpenUI5 にて国際化するための手順は「リソースモデルファイルの作成」「リソースモデルをロード」「コントロールへデータバインド」の 3 つです。
順に説明していきます。

### リソースモデルファイルの作成

まず、国際化用の「**リソースモデル(ResourceModel)**」を作成し、その中に国際化したいメッセージを定義していきます。ファイルはこちらを参考にしてください。

```
title = ロケール
text = 吾輩は猫である。名前はまだ無い。
changeLocale = ロケール変更:
button = これはボタンのテキスト
```

このリソースモデルは Java の「java.util.Properties」クラスと同等のもので、中に「key/value」ペアで値を設定していきます。ファイルの拡張子は「\*.properties」です。
（マルチバイトの場合であってもファイルが UTF-8 で作成されていれば、Unicode エスケープする必要はないようです。）

Web ルート直下に「i18n」フォルダを作成して、ファイルを配置するのが慣例のようです。まず、最低限ロケールなしの場合に利用される「**messageBundle.properties**」を作成します。各ロケールごとのファイル名の例は以下の通りです。

- messageBundle_en.properties
- messageBundle_ja.properties
- messageBundle_zh_CN.properties
- messageBundle_zh-Hans-CN.properties

ロケールの言語コードについての詳細はこちらを参照してください。

[Identifying the Language Code / Locale](https://openui5.hana.ondemand.com/#docs/guide/91f21f176f4d1014b6dd926db0e91070.html)

[言語の対応付け - Windows app development](http://msdn.microsoft.com/ja-jp/library/windows/apps/jj673578.aspx)

### リソースモデルをロード

次に、リソースモデルをアプリケーションにロードしていきます。こちらのコードを参考にしてください。

Locale.controller.coffee

```js

sap.ui.controller "com.mitsuruog.sapui5.showroom.view.Locale",

  onInit: ->
    i18nModel = new sap.ui.model.resource.ResourceModel
      bundleUrl : "i18n/messageBundle.properties"

    @getView().setModel i18nModel, "i18n"
```

ロードする場所は、「Component.js」の`init()`か、国際化対象 View の Controller の`init()`がいいと思います。`i18n`という名前付き Model としてロードして、後のコントロールへのデータバインドの際に利用します。

### コントロールへデータバインド

最後にコントロールの国際化したプロパティへメッセージをデータバインドしていきます。こちらのコードを参照してください。

Locale.view.coffee

```js
sap.ui.jsview "com.mitsuruog.sapui5.showroom.view.Locale",

  getControllerName: -> "com.mitsuruog.sapui5.showroom.view.Locale"

  createContent: (oController) ->
    @page = new sap.m.Page
      title: "{i18n>title}"
      subHeader:
        new sap.m.Bar
          contentRight: [
            new sap.m.Text
              text: "{i18n>changeLocale}"
          ]
      content: [
        new sap.m.Text
          text: "{i18n>text}"
      ]
      footer:
        new sap.m.Bar
          contentRight: [
            new sap.m.Button
              type: "Accept"
              text: "{i18n>button}"
          ]

    @page
```

こちらが国際化した結果画面の例です。日本語と英語で画面の項目名などが変化していることが分かると思います。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/Hello_SAPUI52_Fotor_Collage.png)

より詳細な内容は公式ページを参照してください。

[Step 4: Internationalization](https://openui5.hana.ondemand.com/#docs/guide/b6d1a9511f994b3a86e2f34a32e40a34.html)

[Translating SAPUI5 Applications](https://openui5.hana.ondemand.com/#docs/guide/91f217c46f4d1014b6dd926db0e91070.html)

## 2. ロケール判定の優先度

次に、OpenUI5 へのロケール指定の方法とロケール判定に優先度について説明します。こちらが一覧です。上から優先度が高い設定です。

- プログラムからの直接設定
- URL パラメータからの指定
- アプリケーション Config での指定
- window.navigator.userAgent での指定(Android のみ)
- window.navigator.language での指定
- window.navigator.userLanguage での指定(IE のみ)
- window.navigator.browserLanguage での指定(IE のみ)
- デフォルトのロケールは「**en**」

かなり細かい指定ですが、大きく分けると以下の 5 つになるかと思います。

- プログラムからの直接設定
- URL パラメータからの指定
- アプリケーション Config での指定
- 端末固有設定(window.navigator.language など)
- デフォルト「**en**」

この中で、プログラマブルに設定する可能性がある「プログラムからの直接設定」「URL パラメータからの指定」「アプリケーション Config での指定」について順に説明します。

### プログラムからの直接設定

プログラム上で OpenUI5 のロケール情報を参照する場合は、`sap.ui.getCore().getConfiguration().getLanguage()`を利用します。
ロケールの変更を行う場合は、`sap.ui.getCore().getConfiguration().setLanguage(local)`を利用します。引数の`local`にはロケールを文字列で設定してください。`null`を設定することはできません。

### URL パラメータからの指定

URL パラメータに`sap-language`を設定することでアプリケーション呼び出し時に特定のロケールを指定することができます。
こちらがその例です。

[http://mitsuruog.github.io/sapui5-showroom/app/?sap-language=en](http://mitsuruog.github.io/sapui5-showroom/app/?sap-language=en)

URL ハッシュが付く場合はこちらです。

[http://mitsuruog.github.io/sapui5-showroom/app/?sap-language=de#/locale](http://mitsuruog.github.io/sapui5-showroom/app/?sap-language=de#/locale)

### アプリケーション Config での指定

アプリケーション Config でロケールを設定することも出来ます。こちらは`sap.ui.core.Configuration`を利用するもので、詳細については割愛します。後日機会があれば別途取り上げたいと思います。

興味がある方はこちらの公式ドキュメントを参照してください。

[JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.core.Configuration](https://openui5.hana.ondemand.com/docs/api/symbols/sap.ui.core.Configuration.html)

## 3. まとめ

OpenUI5 での国際化の方法について説明しました。OpenUI5 はグローバルでの利用を想定した強力な国際化の機能を持っています。

このような国際化の仕組みは、OpenUI5 がエンタープライズ利用を想定したものであり、それを提供する SAP 社がグローバルカンパニーであるであるからこと出来たと考えています。  
簡単に国際化することができることも、OpenUI5 の魅力の一つですね。

[SAPUI5/OpenUI5]スマートに国際化する方法

SAPUI5/OpenUI5 関連の小ネタです。
複数のプロパティをデータバインドする方法についてです。



XMLView の場合、複数プロパティは以下のように割と簡単に実現できるのですが、JSView の場合はどうすればいいのでしょうか？

```html
<text text="{Width} x {Depth} x {Height} {DimUnit}"></text>
```

答えはこちらです。

```js
new sap.m.Text({
  text: {
    parts: [
      { path: "Width" },
      { path: "Depth" },
      { path: "Height" },
      { path: "DimUnit" },
    ],
    formatter: function (width, depth, height, dimUnit) {
      return width + " x " + depth + " x " + height + " " + dimUnit;
    },
  },
});
```

通常の formatter を使ったデータバインドは`path`と`formatter`プロパティをセットすればいいのですが、複数プロパティの場合は`path`を`parts`の中に含めればできます。

最近、公式のサンプルを見る限り View は XMLView を使って書くべきみたいな流れになっていて、JSView のサンプルが減ってきていますね。。。

こちらに載っていた情報です。

[javascript - SAPUI5: How to directly bind two data properties into one control property using OData model? - Stack Overflow](http://stackoverflow.com/questions/22320475/sapui5-how-to-directly-bind-two-data-properties-into-one-control-property-using)

[SAPUI5/OpenUI5]複数のプロパティをバインドする

SAPUI5/OpenUI5 を使った場合、SAP のバックエンドのデータと、様々なオープンデータや Web サービスを組み合わせてクライアントマッシュアップさせたくなります。  
（今回は OpenUI5 を使いました。）

まず定番は GoogleMap でしょうか・・・  
普通に Page に Map を表示するサンプルは探せばあるのですが、ダイアログで Map を表示するサンプルが無かったので作ってみました。



サンプルはこちらです。

「Open Map」ボタンを押すと東京駅を中心としたマップが表示されます。

> サンプル jsbin で作成していたのですが、消えてしまいました。（残念）

## 目次

## 1.説明

基本的には、OpenUI5 の index.html に GoogleMap の API を利用するために Javascript を読み込むだけで準備は OK です。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="sap.m.DialogでGoogleMap" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8" />

    <title>SAPUI5/OpenUI5 Google map Sample</title>

    <script
      id="sap-ui-bootstrap"
      src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-libs="sap.m"
      data-sap-ui-theme="sap_bluecrystal"
    ></script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  </head>

  <body class="sapUiBody" id="content" />
</html>
```

次に、ダイアログを作成します。

```js
@dialog = new sap.m.Dialog
  title: "Google Map"
  content: [
    new sap.ui.core.HTML
      content: "<div id='mapConteiner'></div>"
  ]

  #ダイアログ閉じる処理
  beginButton: sap.m.Button
    text: "close"
    press: (evt)->
      evt.getSource().getParent().close()

  afterOpen: (evt)->
    #座標の作成
    latlng = new google.maps.LatLng 35.681382, 139.766084
    #マップの設定
    options =
      zoom: 15
      center: latlng
      mapTypeId: google.maps.MapTypeId.ROADMAP
    #MAP初期化
    map = new google.maps.Map document.getElementById("mapConteiner"), options

    #マーカーをマップにプロット
    marker = new google.maps.Marker
      position: latlng
      map: map

button = new sap.m.Button
  text: "Open Map"
  press: [(evt) ->
    @dialog.open()
   , @]

button.placeAt "content"
```

以下、ダイアログを作成する際に初期設定でなにを行っているかの説明です。

- content
  - GoogleMap を表示させるコンテナを作成します。ここでは`sap.ui.core.HTML`を使って直接`<div>`タグを出力しています。
- beginButton
  - 閉じるボタンの処理です。
- afterOpen
  - ダイアログが表示された後に Map を初期化して、座標をプロットしています。

Map 初期化のタイミングですが、Map コンテナの DOM が生成される前に初期化するとエラーになるので注意が必要です。
ちょっとしたら、Map コンテナの afterRendering イベントでも初期化できるかもしれません（未検証）。そっちの方が作りとしては奇麗な気がします。

## 2.最後に

今後、企業の社員にタブレットなどのモバイル端末を配布して、外での業務活動に活かすケースはますます増えると思います。  
GoogleMap との連携はよくありそうなシーンなのですが、他の Web サービスや既存の社内システムの情報などをマッシュアップすることで、変化の激しい時代に適応した、モバイルを有効活用したまったく新しい企業システムが誕生するのかと思うと、少しわくわくします。

以下、参考情報です。

### OpenUI5API

- [JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.Dialog](https://sapui5.netweaver.ondemand.com/sdk/docs/api/symbols/sap.m.Dialog.htm)
- [JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.core.HTML](https://sapui5.hana.ondemand.com/sdk/docs/api/symbols/sap.ui.core.HTML.html)

### GoogleMap 関連

GoogleMap の使い方についてはこちらが丁寧です。  
（AjaxTower さん、毎度ありがとうございます！）

- [Google Maps 入門(Google Maps JavaScript API V3)](http://www.ajaxtower.jp/googlemaps/)

GoogleMap の API のスタートガイド（公式）

- [スタート ガイド - Google Maps JavaScript API v3 — Google Developers](https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja)

### SAPUI5/OpenUI5 と GoogleMap のサンプル

- [【第 1 回】SAPUI5 と SAP NetWeaver Gateway によるマッシュアップ開発入門（序章） - SAP 技術ブログ | SAP ソリューションの REALTECH Japan（リアルテックジャパン）](http://solution.realtech.jp/blog/2013/10/sapui5sap-netweaver-gateway.html)
- [SAPUI5 Gateway and Google Maps | Experiences with SAP Gateway](http://mysapgw.wordpress.com/2012/05/19/sapui5-gateway-and-google-maps/)  
  （コードは中のリンク「google code」に入ってます。）
- [SAPUI5 with Google Maps | SCN](http://scn.sap.com/people/konstantin.anikeev/blog/2013/02/11/sapui5-with-google-maps)

[SAPUI5/OpenUI5]GoogleMapと組み合わせる

小ネタです。

SAPUI5/OpenUI5 では UI コントロールのイベント（press、tap、select など）が発火した場合、Controller にあるイベントハンドラを実行するような処理をよく書きます。  
この時にイベントハンドラに、自分がセットしたパラメータを渡したいケースがたびたびあるのですが、やっと方法が分かったのでメモしておきます。



## 目次

## 1.イベントインターフェースについて

まず、SAPUI5 でのイベントインターフェースについて説明します。  
SAPUI5 では View の中にボタンなどの UI コントロールを配置していくのですが、この時に UI コントロールから発生するどのイベントを処理するか定義することが出来ます。

公式ドキュメントを参照すると、必ず次の 3 パターンの I/F があるはずです。

1.  fnListenerFunction
2.  [fnListenerFunction, oListenerObject]
3.  [oData, fnListenerFunction, oListenerObject]

1 のパターンは View などにてイベントとイベントハンドラを同時に書く方法です。2 はイベントハンドラを Controller へ移譲する場合、3 が今回やりたいイベントハンドラにパラメータを渡す方法です。「oData」となっている部分にパラメータオブジェクトを設定してください。

I/F のパラメータの詳細については次の通りです。

- fnListenerFunction
  - イベントハンドラで実行される function です。イベントによって若干差異があるかもしれませんが、イベントハンドラの I/F は次のようになっていることが多いです。
- oListenerObject
  - イベントハンドラ実行時のコンテキストを指定します。イベントハンドラ内の this が指し示すオブジェクトを指定します。
- oData
  - イベントハンドラに渡すパラメータです。オブジェクトを設定してください。

## 2.イベントハンドラにパラメータを渡す

では実際にサンプルを動かしてみます。  
「Action」ボタンを押した場合に表示されるメッセージダイアログに「Hello :)」というメッセージを渡すようにしています。

サンプルはこちらです。

> サンプル jsbin で作成していたのですが、消えてしまいました。（残念）

Button の press イベント発火時の第 1 引数にオブジェクトを渡しています。分かると簡単です。この例では press イベントの中にイベントハンドラを記述していますが、Controller に処理を委譲する場合は次のようにしてください。

```js
press: [ message: "Hello :)", oController.doPress, oController]
```

```
button = new sap.m.Button
  text: "Action!!"
  press: [message: "Hello :)", (evt, param) ->
    jQuery.sap.require "sap.m.MessageToast"
    sap.m.MessageToast.show param.message
  ]

button.placeAt "content"
```

```html
<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="[add your bin description]" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8" />
    <title>SAPUI5/OpenUI5 Sample</title>
    <script
      id="sap-ui-bootstrap"
      src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-libs="sap.m"
      data-sap-ui-theme="sap_bluecrystal"
    ></script>
  </head>
  <body class="sapUiBody" id="content" />
</html>
```

## 3.最後に

基本的なことなのですが、探すのにとても時間が掛かりました。公式ドキュメントの量が非常に多いので、欲しい情報を探すのに毎度苦労します。:(

ちなみに、この内容はこちらのやり取りを参考にしています。

[SAPUI5: How do I pass values to an eventhandler | SCN](https://archive.sap.com/discussions/thread/3442827)

[SAPUI5/OpenUI5]イベントハンドラにパラメータを渡す

Backbone.js や AngularJS に代表される JavascriptMV＊系で構築された SPA（Single page application）は、Struts などで構築された従来の Web アプリケーションと異なり、1 つの HTML5 の中に複数画面（View）を持ち、画面遷移時に Javascript にて View を切り替えるため、通常はブラウザのリフレッシュを伴いません。

その際に問題となるのが、画面遷移時にリフレッシュを伴わないため、URL が変らないことです。

URL が変わらないということは、すべての画面の URL が同じになるということで、ブックマークから特定の画面を開くことができなくなります。

そこで SPA では通常、URL の後ろに「ハッシュ」と呼ばれる開く対象となる URL を付け加え、Javascript にてハッシュと一致する View を表示するようにコントロールする「router」「routing」と呼ばれる手法を行うことが一般的です。

今回は、SAPUI5/OpenUI5 での routing の基本的なことについて紹介します。



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/a1510_000018.jpg)

## 目次

## 1.ルーティングテーブルの定義とルーターの初期化

ルーティングするためには、URL の「ハッシュ」とそれと対応して表示する View を定義する必要があります。ここでは便宜上「ルーティングテーブル」と言います。

まず、「Conpoment.js」内の「metadata」にルーティングテーブルを定義します。

```
#! Component.js

sap.ui.core.UIComponent.extend "com.mitsuruog.sapui5.Component",

  metadata:
    routing:
      config:
        viewType: "JS"
        viewPath: "view"
        targetControl: "navConteiner"
        targetAggregation: "pages"
        clearTarget: false
      routes: [{
        pattern: ""
        name: "First"
        view: "First"
        targetAggregation: "pages"
      }, {
        pattern: "second"
        name: "Second"
        view: "Second"
        targetAggregation: "pages"
      },

      # ...省略

```

ちなみに「config」はすべての routing 共通の設定で、「routes」内には、それぞれのハッシュと対応する View 定義、カスタムする振る舞いなどが定義出来ます。

細かい設定等はこちらです。簡単に紹介します。

[Configuration Parameters for Navigation](https://sapui5.hana.ondemand.com/sdk/#docs/guide/902313063d6f45aeaa3388cc4c13c34e.html)

- pattern
  - パターンマッチするハッシュを文字列で指定します。ルーティングテーブルの中で最も大事な設定です
- name（必須）
  - ルーテリングテーブルの中で一意な名前を設定します
- view
  - pattern にマッチした場合に表示する View 名です
- viewType
  - View のタイプです。HTML、JS、JSON、XML があります
- viewPath
  - View のリソースがあるところまでのパスです。例えば、「view/someView」の場所に View が存在する場合は、「view」を指定します
- targetParent
  - 後述する targetControl の親要素を ID で指定します
- targetControl
  - view を表示するコンテナを ID で指定します
- targetAggregation
  - targetControl で指定したコンテナのどのプロパティに View を設定するか指定します。次のように指定することが多いです
- subroutes
  - ネストしたルーティングを実現する場合に routes と同じように設定します。（まだ詳しく検証してないです。
- clearTarget
  - View を追加する前に View をクリアする必要がある場合、true を設定します。
- callback
  - pattern にマッチした場合に実行される Callback を指定します。

どのルーティング定義にもマッチしないものに対して NotFound ページを表示する場合は、pattern に「`:all*:`」を設定してください。

ルーティングテーブルを定義した後に、同じ「Conpoment.js」にて router のライフサイクルを定義します。「init」で初期化して、「destory」時に破棄します。

この辺りのコードはお作法だと思ってコピペしましょう。

```
#! Component.js

  # ...省略

  init: ->
    jQuery.sap.require "sap.ui.core.routing.History"
    jQuery.sap.require "sap.m.routing.RouteMatchedHandler"

    sap.ui.core.UIComponent.prototype.init.apply @

    router = @getRouter()
    this.routerHandler = new sap.m.routing.RouteMatchedHandler router
    router.initialize()

  destory: ->
    if @routerHandler
      @routerHandler.destroy()
    sap.ui.core.UIComponent.prototype.destory.apply @

  # ...省略
```

## 2.ルーティング

それでは実際にルーティングしてみましょう。

サンプルの例では、次のように呼び出す URL にハッシュを追加することで、望みの画面を表示させることが可能です。

- [http://mitsuruog.github.io/sapui5-showroom/app/routing/#/second](http://mitsuruog.github.io/sapui5-showroom/app/routing/#/second)
- [http://mitsuruog.github.io/sapui5-showroom/app/routing/#/third/1/tab2](http://mitsuruog.github.io/sapui5-showroom/app/routing/#/third/1/tab2)

では、プログラムから View を切り替え時にハッシュも変更するためにはどうすればよいでしょうか？

プログラムから View を切り替え時にハッシュも変更するためには、先ほど定義した router を取得してハッシュを切り替える命令を出す必要があります。ハッシュパラメータを渡す場合は、第 2 引数に key-value 形式でハッシュパラメータのオブジェクトを渡します。

```
#! ButtonのPress処理などController.jsにて書いている想定。

nextPage: ->

  router = sap.ui.core.UIComponent.getRouterFor @

  #パラメータを伴わない場合
  router.navTo "Second"

  #パラメータを伴う場合
  router.navTo "Second",
    someParam: "hoge"
```

## 3.ルーティングマッチと View でのパラメータ取得

URL のハッシュ値を変えることで View を切り替えることができましたが、ハッシュに含まれるパラメータをそれぞれの View にて取得するためにはどうすれば良いでしょうか。

View にてハッシュに設定されたパラメータを取得するためには、ルーティングマッチした際に発火するイベントにフックする必要があります。

```js
#! routing先のController.jsにて書いている想定。

sap.ui.controller "view.Third",

  onInit: ->
    @router = sap.ui.core.UIComponent.getRouterFor @
    @router.attachRoutePatternMatched @_handleRouteMatched, @

  _handleRouteMatched: (oEvt) ->

    #viewNameが一致しないものはFilterする
    unless "Third" is oEvt.getParameter "name"
      return

    #Hashパラメータを取得
    #以下のようなURLを想定
    #/some/{id}
    #/some/:id:
    hashParams = oEvt.getParameter "arguments"
    id = hashParams.id

```

ルーティング時に渡したパラメータは getParameter にて取得します。すべてのパタメータをオブジェクトとして取得する場合は、getParameters を使います。

（getParameter の引数に arguments が使われている辺り、中の実装がどうなっているか予想できます w）

## 4.最後に

SAPUI5/OpenUI5 でのルーティングについて基本的なことを書きました。

ちなみに SAPUI5/OpenUI5 では、最近までは EventBus を使った Navigation を使うことが一般的でした。（たぶん、1.20 になってから変わったと思います。）

EventBus では、ブックマークからの特定画面を起動することが難しかったので、個人的には待ちに待った機能でした。

1.20 になってから他にも大きな変更点がある SAPUI5/OpenUI5 ですので、機会があればまた紹介していきます。

## X.デモやソースコードはこちらです。

### デモ

SAPUI5/OpenUI5 routing Sample

[http://mitsuruog.github.io/sapui5-showroom/app/routing/](http://mitsuruog.github.io/sapui5-showroom/app/routing/)

### ソースコード

sapui5-showroom/app/routing at master · mitsuruog/sapui5-showroom

[https://github.com/mitsuruog/sapui5-showroom/tree/master/app/routing](https://github.com/mitsuruog/sapui5-showroom/tree/master/app/routing)

### 参考リンク

- [(SAP/Open) UI5 with Routing Tutorial - YouTube](https://www.youtube.com/watch?v=YZqtx2KJ2To)
- [(SAP/Open) UI5 with dynamic Routing Tutorial - YouTube](https://www.youtube.com/watch?v=hMEkV1ECf2c)
- [Navigation](https://sapui5.hana.ondemand.com/sdk/#docs/guide/3d18f20bd2294228acb6910d8e8a5fb5.html)
- [Step 3: Navigation and Routing](https://sapui5.hana.ondemand.com/sdk/#docs/guide/688f36bd758e4ce2b4e682eef4dc794e.html)

Tag: javascript