Subscribed unsubscribe Subscribe Subscribe

oinume journal

Scratchpad of what I learned

YAPC::Asia 2015に行ってきた(1日目)

1日目感想

遅刻してしまいLarry Wallの話が聞けなかったのが一番悔やまれるところだったけど、他の聞きたいトークは全部聞けたし、前夜祭で初めて話したnekogataさんのトークがすごく良くて、さらにその後懇親会でも話せたのですごく嬉しかった。YAPCは毎年何かしら新しい人との出会いがあって、今年で最後になってしまうというのが本当に悲しい。

あとDMM英会話を最近始めた成果なのか、Electronの発表をしていた人の英語は80%ぐらい聞き取ることができた。たぶんすごく丁寧に喋っていた気がするんだけど、今までは英語のトークはほとんど内容が理解できてなかったので少しは成長したのかなぁと思う。

Effective ES6

@teppeis さん発表。Web+DB Pressの特集でもあったES6の話。JavaScriptがやっとやっと、、、まともな言語になってきた!という印象。これで様々なバッドノウハウベストプラクティスが不要になるのは本当に喜ぶべきことだと思う。

あと、JavaScriptってハッシュにメソッド足していくのとかはPerlに似ているなぁとずっと思ってた。

JavaScriptの落とし穴

  • Prototype inheritance
    • クラスベースの継承じゃない
  • new, this
    • new忘れるとつらい
  • variable scope (function scope)

  • Effective

  • Best practice
  • 開眼JavaScript

ECMAScript 6

  • 2015/6/17にリリースされた
  • こんな風にクラスが書ける
classs Person {
  constructor(name) {
  }
  greet() {
  }
}

ES6のサポート状況

  • Safari9
  • IE11はサポートしてない

Transpiler and polyfill

  • ES6のソースをES5 or ES3に変換する
  • ES6 Polyfill
    • ES6の機能をJavaScript(ES5)で実装したもの

Babel

  • 最も互換性が高いTranspiler(71%)
  • polyfill library搭載 (core-js)
  • REPL
  • JS Fiddle もBabel対応したらしい

ES6 Features

  • 新しい文法
  • 新しく追加されたビルトインクラス
  • 既存のクラスの拡張

Arrow function

var add = (a, b) => {
  return a + b;
};

[ 1, 2, 3 ].filter(n => n % 2 === 0).map(n => n * n);

Class

  • public, privateみたいなものはない

Module

  • CommonJS Module
    • browserify/webpackを使う必要がある
    • 静的に解析するのが難しい
export var foo = "foo";
export function bar() {}
export class Baz {
}

import {foo, bar, Baz} from "./module";
console.log(foo);

use strict

block scope

  • function scope
  • weird hoisting
  • let or const
    • もうvarは使わなくていい
function foo() {
  let num = 1;
  if (true) {
    let num = 2;
  }
  console.log(num);
}

Default parameters

function add (a = 1, b = 2) {
}

Rest parameters

Destructuring assignment

function draw(x, y, {width = 320, height = 160} = {}) {
}

size(0, 0);
size(0, 0, { width: 1 });

Template literal

var name = 'Bob';
var str = `Hello, I'm ${mame}.`;

Other features

  • Iterator
  • Spread Operator
  • Generator
  • Tail call optimization

New build-in claeses

Promise

new Promise((resolve, reject) => {
}

Hash/Set

  • WeakMap/SeakSet
  • TypedArray
  • Symbol

既存のクラスの拡張

  • Object
  • String

ESLint

結論

  • ES6 is awesome

HTTP/2時代のウェブサイト設計

@kazuho さん。立ち見だったのでメモが取れなかったんだけど、すごく良い発表だった。h2oの最適化が素晴らしい。Nginxじゃなくてh2o使おうかなと思うぐらい。なお、Nginxの開発者の人とも情報交換をしていて、h2oの実装を参考にNginxにもHTTP2の処理が入っていくのではないかとのこと。年内ぐらいには正式にHTTP2に対応したNginxが出てくるといいなぁ。

はじめに

  • 2秒遅くなるとクリック率が4%下がる
  • 4年間でデータの量は倍ぐらい増えてる
  • bandwidthも大きくなってるからいいのでは?
    • webpageのロード時間はbandwidth速くなっても変わらない
  • ページロードはレイテンシが小さいほうがいい

Perlで学ぼう!文系プログラマのための、知識ゼロからのデータ構造と計算量

Shinpei Maruyama (nekogata.com)さん。自分も文系なのでこの手の話はすごくよく分かる。プログラミング初心者にもわかりやすい内容で自分もいい復習になりました。

メモリ

int main(int argc, char* argv[]) {
  int a = 1;
  int b = 2;
  int c;
  c = a + b;
  printf("%d", c);
}


### オーダー法
* データの数がn個のとき、n回計算をしないといけないとき、O(n)という
* O(n)
    * データが増えた時、計算量も同じ量で増える
* O(log n)
    * データが多い時にデータが増えても計算量はそんなに増えない


## [Electron: Building desktop apps with web technologies](http://yapcasia.org/2015/talk/show/7d66b640-0a6b-11e5-b1a0-67dc7d574c3a)
Ben Ogleさん。すごく英語が聞き取りやすかった。かなりゆっくり喋ってくれたのかな?Electron自体はよくしらないけどAtomは普段から使っているので大体知っている内容だった。awesome-electornのリポジトリ見ると、かなりたくさんのアプリがElectronでできてるんだなぁと思ってその勢いの凄さにびっくりした。だってちゃんとAtomがリリースされてからまだ半年も経ってないし。

* Work on Atom
* Engineer at GitHub
* AtomのクールなところはWebテクノロジーを使ってできているところ

### Electron
* JavaScript, HTML, and CSS
* io.js
* Chromium
* OS

### どんなものができるか
* GitHub Atom
* MS Visual Studio Code
* Facebook Nuclide
* Jibo (Electron based robots)
* Fireball
* Slack client

https://github.com/sindresorhus/awesome-electron

### KittyDetect
* 猫の顔があるかを認識するアプリ
* 2時間で作った

### 質疑応答
* AtomもCoffeeScriptやめてES6に書き直している途中らしい
* OAuthで戻ってくるのってどうすればいいの?
    * protocol handler使う