WWDC フロントエンジニアの注目ポイント

PR TIMESフロントエンジニアの山田です。

先週はWWDCが開催され、注目された基調講演以外にも開発者向けの発表が数多くあって盛り上がりましたね。
その中でもフロントのエンジニアとして気になるのはこれ。
・What's New in Web Development in WebKit and Safari
https://developer.apple.com/videos/wwdc/2015/?id=501

WebKitに関する発表です。
今後この技術が普及し表現の幅が広がるのを想像して、わくわくしてきます。
今回はそんな中からいくつか紹介してみたいと思います。
（どれも現在実際には動作させることができないので、動いているところを見たい方は動画をご覧ください。）

まずはCSSのレイアウトに関するところ。

・Backdrop Effects

Filter Effects Module Level 2
background-imageなど背景にのみfilterを適用することができます。

-webkit-backdrop-filter:blur(5px);

柔軟なレイアウトに役立ちそうですね。

・Scroll Snap Points

CSS Scroll Snap Points Module Level 1
スクロールしたときにピッタリ止まる位置を決めることができるので、画像ギャラリーなどに使うと効果を発揮しそうです。

#left-snap{
  width: 300px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-scroll-snap-type: mandatory;
  -webkit-scroll-snap-points-x: repeat(300px);
}

<div id="left-snap">
  <img src="photo01.jpg" width="300" height="auto" />
  <img src="photo02.jpg" width="300" height="auto" />
  <img src="photo03.jpg" width="300" height="auto" />
  <img src="photo04.jpg" width="300" height="auto" />
  <img src="photo05.jpg" width="300" height="auto" />
</div>

これだけで、300pxごとにスナップポイントを繰り返すので、画像をちょうど良い位置で見せることができます。

#gallery{
  width: 300px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-scroll-snap-type: mandatory;
  -webkit-scroll-snap-destination: 50% 50%;
}

.photograph{
  -webkit-scroll-snap-coodinate: 50% 50%;
}

<div id="left-snap">
  <img src="photo01.jpg" width="300" height="auto" class="photograph" />
  <img src="photo02.jpg" width="450" height="auto" class="photograph" />
  <img src="photo03.jpg" width="200" height="auto" class="photograph" />
  <img src="photo04.jpg" width="250" height="auto" class="photograph" />
  <img src="photo05.jpg" width="350" height="auto" class="photograph" />
</div>

画像の幅が揃っていない場合でも、こう書くと各画像の中央で止まってくれます。

今までは複雑なJavascriptを書いたり（もしくはライブラリを使ったり）しないと出来なかったような動きなので、CSSでサクッと設定できるようになるのはありがたいですね。はやく導入して欲しい機能です。

次にjavascriptのアップデート。

・string中の変数

var a = 4;
var b = 8;
console.log("The value of " + a + "+" + b + "=" + (a+b) + ".");

「The value of 4 + 8 = 12.」とコンソールに表示されます。
これを下記のように書くことができるようになります。

console.log('The value of ${a} + ${b} = ${a + b}.');

Stingの中に変数を埋め込むことができるんです。
＋が幾つも出てきてこんがらがるなんてことがよくありましたが、スッキリ見通し良くできそうですね。

・連想配列

var name = "Joe";
var category = "Awesome";

function createFoo(name, category) {
  return {name: name, category: category};
};

これもスッキリとこう書くことが可能になります。

function createFoo(name, category) {
  return {name:, category};
};

エンジニア的にはこのスッキリ感が嬉しいところ。

・classの使用

function Polygon(sides){
  this.sides = sides;
}

Polygon.prototype.name = function(){
  return 'polygon';
}

Polygon.prototype.description = function(){
  return 'this '+ this.name() + ' has ' + this.sides + ' sides.';
}

これが以下のようになるんです。

class Polygon {
  constructor(sides){
    this.sides = sides;
  }
  
  name() {
    return 'polygon';
  }
  
  description(){
    return 'this ${this.name()} has ${this.sides} sides.';
  }
}

classが使えるようになっちゃうんですね。

class Rectangle extends Polygon {
  constructor(){
    super(4);
  }
  
  name(){
    return 'rectangle';
  }
  
  static rightAngle(){
    return 90;
  }
}

var bar = new Rectangle();
console.log(bar.sides());// 'This rectangle has 4 sides.'
console.log(Rectangle.rightAngle());// '90'

extendsしたりもできます。
思わず、かつてはAS3でこんな感じの書き方をしてたなあということを思い出しました。

最後にcssの新機能をご紹介します。

・@support

たとえばjavascriptでcssのinitial-letterをサポートしているかどうか判別する場合はこう書きます。

var browsers = ['moz', 'khtml', 'webkit', 'o', 'ms'];
var options = ("initialLetter," + browsers.join("initialLetter,") + "InitialLetter").split(",");

var test = document.createElement("div");
for(var n = 0; n < options.length; n++){
  if(test.style[options[n]] === ""){
    console.log('${options[n]} is supported.');
    break;
  }
}

これがcssだけで済んじゃいます。

@supports(-webkit-initial-letter: 3){
  section.main:first-child:first-letter {
    -webkit-initial-letter: 3;
  }
}

・要素のまとめ

.default .def,
.default .bracket,
.default .operator,
.default .variable{
  color: red;
}

これがスッキリと。

.default:matches(.def, .bracket, .operator, .variable){
  color:red;
}

また、動画の中でも紹介されていますが、新iPhone（iPhone6plus？）での導入も噂されるForce Touchが取得できたりもするようです。

これ以外にも予定されているCSSやjavascriptの新機能は数多くあり、非常に楽しみですね。