[Work/Class/ES2015で動的Webアプリ]

ES2015で動的Webアプリ / 2017-10-18 (水)

この授業の目的

Processingで行ったWebSocket通信を使って,ウェブブラウザ上で動くJavaScriptの2015年版(ECMAScript2015, 通称ES2015, ES6)とProcessingのJavaScript用ライブラリP5.jsを用いて,動的なWebアプリケーションを作るための基礎を学ぶ.

コンテンツ

  1. ES2015の基本 - 変数とそのスコープ,関数定義,Promiseによるコールバック
  2. ES2015の基本 - クラスの定義とインスタンス化
  3. ES2015の基本 - PromiseとXMLHttpRequestを使ったAjaxとfetch
  4. ES2015準拠でP5.jsのインスタンスモード
  5. P5.jsで日本語文字列を表示する
  6. ES2015でWebSocketの基本 - テキストメッセージの受け渡し

授業の下準備

実行環境としてはGoogle Chromeを使うので,最新版を入れておくこと.また描画部分にはP5.js(ProcessingのJavaScript版)を使うので,Processingの描画の復習をしておくこと.

WebSocketサーバ側は,実験用Webサーバ上でコンパイル実行等を行うため,MSYS2やTerminal.appを使ってUnixの基本操作に慣れておくこと.

サーバ側のプログラムとしては,PythonのTornadoライブラリ,C言語(とC++)のlibwebsocketsライブラリの2つを用いる(基本的には理解しやすいTornadoライブラリを使う).ローカルで実行したい場合Anacondaには最初からTornadoが入っている.

ただしC言語のライブラリlibwebsocketsも使う関係上,基本的にはこちらで用意したサーバでサーバ側プログラムを動かすので,無理に入れておく必要はない.