第一部 JavaScript、その起源

1995年 NetScape社のブレダン・アイク氏が開発
- ポケモン赤・緑とタメ
- 最初はLiveScriptって名前だった

「Javaっていう言語が超ナウいらしいぞ」

1995年にJavaによるブラウザWebRunnerが、HotJavaという名で世界に公開
NetscapeがJavaのサポートを表明

今、Javaが熱い!!

「せや!名前もらったろ!」

改名 LiveScript -> JavaScript

第二部スクリプト戦国時代

ライセンスの乱

1996年　MicrosoftがIE3.0を発表「JavaScript使わせてやー」
- NetScape社「だが断る」
- Microsoft「ほな勝手に作るわ」 => JScript誕生
- 各ブラウザベンダが独自言語を実装する戦国時代へ
- Webエンジニアは血の涙を流す

想像図

「JavaScriptってどうよ?」

インターネットの普及により個人サイト増加
- 無駄にアニメーション
- ブラウザのセキュリティへの考慮の不足
- 「セキュリティ上まずいからJavaScript無効にしてね」という風潮

-> 「JavaScriptいらね」

(今は亡き)cgiとかFlashとかが幅を利かせる

暗黒時代

1997年　戦乱に疲弊した各社が和平(仕様の標準化)に動き始める

NetscapeがECMAに標準仕様の策定を依頼
-> 記念すべきECMA-262初版が策定

「やっと平和が訪れるのか?」

ところがどっこい夢でした

ECMA-262 第4版戦争

標準化仕様を巡って各社の対立
第4版推進派: Adobe Mozilla(旧Netscape社)
否定派: Microsoft Yahoo

標準化が暗礁に乗り上げる -> 暗黒時代に突入

第三部ルネッサンスそして標準化へ...

JavaScript復活

2005年 Google Map が世に発表される
- 非同期通信(Ajax)をふんだんに利用
- 業界に衝撃が走る
prototype.jsやjQueryの登場
- Webでの表現がよりリッチに
2008年 Google Chrome(V8エンジン搭載)誕生
- 「JavaScriptは遅い」なんて言わせない! Cとかに比べたら遅いけど

-> 「JavaScriptってできる子じゃん！」

まさに「ルネッサーンス!」

ついでにとん挫していた標準化も進み始める

第四部　新時代の幕開け

Node.jsの登場

2009年サーバサイドのJavaScriptが爆誕
- ポケモンHG・SSとタメ
- 付随するツール(npm とか)も発展

みんな喜べ! JavaScriptをモジュールにできるぞ!

-> 「ブラウザのJavaScriptもモジュールにしてぇなぁ」

ビルドツール

browserify

webpack

ビルドを手動でやるとかだりぃわ

Gulp vs Grunt

今ではGruntはだいぶマイナー
Gulpも開発が滞り気味

「そんなん使わんでもコマンド組み合わせたらいけるっしょ」の精神

第五部　もはやJavaScriptではない

ECMAScript2015(通称ES6)の策定

新しい仕様が盛り込まれ、だいぶ開発者にやさしくなる
しかし、ブラウザ側の対応が追い付かない(主にIE)

「ブラウザはES5でしか動かないけど、ES6で書きたいよ～」

「力(ES6)が欲しいか?」

「力が欲しいなら」

「くれてやる!」

Babelの衝撃

ES6で書いたコードをES5に変換
書くのはあくまでJavaScript
- メリット: ブラウザの実装が追い付けば変換せずにそのまま使える
- デメリット: 所詮JavaScript 文法的にはガバガバ

「いや、もっといい感じに書きたいんだわ」

AltJSの登場

AltJS = 実行前にJavaScriptに変換する言語基本的にこのままでは実行できない

TypeScript
- Microsoftが開発
- 静的型宣言が特徴　バグを早期発見できる
- 中規模以上、メンテナンスとかを考慮するときに強い
- 現状ではAltJSの最有力
CoffeeScript
- とにかくコードの量を減らしてスッキリさせたい
- 小規模向き
- Ruby on Railsはデフォで対応
- ES6に仕様が逆輸入されてから下火
Dart
- Googleが開発　見た目がGo言語チック
- 「各ブラウザにDartVM(Dartの実行環境)搭載や!」 -> 「ダメでした...」
- ちょっと時代が追い付いてない印象

フレームワークも続々登場

人気があるのはAngular, Vue.jsあたり

おわりに

今後のJavaScript

黎明期ほど手軽ではない
- 簡単なJavaScriptはすぐにブラウザで実行できるけど、真面目にやりだすと環境の準備が怠い
- webpackなどのビルドツールも使えるようにする必要がある
- (AltJS使うなら)実質2言語学習が必要
- (フレームワークを使うなら)それに加えてさらにフレームワークの作法も習得が必要
- そもそもJavaScriptに求められることがめっちゃ増えてる
とはいえ、現状ブラウザで実行できるのはこいつだけなのでやらざるを得ない
技術の移り変わりがとくに激しい
- 「イケるやん」と思った技術もすぐに廃れる 1年前は絶好調だったGulpががが...
- 勉強のしがいはあるかもね

参考資料

おまけ1 CoffeeScriptのサンプル

sample.coffee

class Animal
  constructor: (@name) ->

  move: (meters) ->
    alert @name + " moved #{meters}m."

class Snake extends Animal
  move: ->
    alert "Slithering..."
    super 5

class Horse extends Animal
  move: ->
    alert "Galloping..."
    super 45

sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"

sam.move()
tom.move()

おまけ2 TypeScriptで書いてみた

sample.ts

abstract class Animal {

  private name: string;

  constructor(name: string) {
      this.name = name;
  }

  move(meters: number): void {
      alert(this.name + " moved " + String(meters));
  }
}

class Snake extends Animal {
  move(): void {
      alert("Slithering...");
      super.move(5);
  }
}

class Horse extends Animal {
  move(): void {
      alert("Galloping...");
      super.move(45);
  }
}

const sam = new Snake("Sammy the Python");
const tom = new Horse("Tommy the Palomino");

sam.move();
tom.move();

おまけ3 これがES5に変換されると

ﾌｧｯ!?

sample.js

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Animal = (function () {
    function Animal(name) {
        this.name = name;
    }
    Animal.prototype.move = function (meters) {
        alert(this.name + " moved " + String(meters));
    };
    return Animal;
}());
var Snake = (function (_super) {
    __extends(Snake, _super);
    function Snake() {
        return _super.apply(this, arguments) || this;
    }
    Snake.prototype.move = function () {
        alert("Slithering...");
        _super.prototype.move.call(this, 5);
    };
    return Snake;
}(Animal));
var Horse = (function (_super) {
    __extends(Horse, _super);
    function Horse() {
        return _super.apply(this, arguments) || this;
    }
    Horse.prototype.move = function () {
        alert("Galloping...");
        _super.prototype.move.call(this, 45);
    };
    return Horse;
}(Animal));
var sam = new Snake("Sammy the Python");
var tom = new Horse("Tommy the Palomino");
sam.move();
tom.move();

JavaScriptの歴史をざっくりまとめたよ!