やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > JavaScript > AMD+ES6(require.js + Babel) on CDN クラス構文を使ってみた

AMD+ES6(require.js + Babel) on CDN クラス構文を使ってみた

JavaScript

Node.js不要。古いブラウザでもここまでモジュール化できる！

成果物

github.com

要点

  • require.jsでモジュール化（JSファイル分割）
  • BabelでES6(ES2015)のコードをトランスパイル（class構文）
  • require.js, Babel, はCDNのURLを設定して入手する（要ネット接続）

コード

構成

  • index.html
  • app.js
  • js/app

ファイル

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Babel + require.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
    <script data-main="app.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
</head>
<body></body>
</html>

app.js

requirejs(['js/app/main.js']);

js/app/main.js

define(function(require, exports, module) {
    var Display = require('js/app/Display');
    let d = new Display();
    console.log('class:', Display);
    console.log('instance:', d);
    d.print()
});
  • Displayはclass (後述)
  • letは{}スコープ修飾子。これまで使っていたvarは関数スコープだが、それより限定できる

js/app/Display.js

define(function() {
    class Display {
        constructor() {
            this.msg = "Babel, require.js, class !!"
        }
        print() {
            alert(this.msg);
        }
    }
    return Display;
});

ES6(ES2015)から使えるclass構文。もう{}やfunction(){}のようなobjectでクラス風にするなんて小細工は不要！

開発環境

2018-04-21時点。

所感

モジュールとクラスでかなり保守性が上がりそう。しばらくはこれをテンプレになるかも。できれば早くimport構文を使いたいのだが。

Node.jsは環境構築と運用で心が折れるので嫌。Electronは興味深いがWeb上で使えないしインストールと学習が必要なので嫌。