現代的な JavaScript

JavaScript / ECMAScriptについて。

Webアプリケーションでは,基本的にサーバでページを生成するが,JavaScriptをうまく活用すると,サーバへのアクセスを減らしつつ,利用者にとっての操作性を上げることができる。

現代の JavaScript

再入門JavaScript: 字句構造, リテラル
JavaScriptの文法、オブジェクト指向言語としての機能などを解説。
再入門JavaScript: 式と文
制御構造、変数のスコープなど。
再入門JavaScript: 数値 (Number)
不思議な真偽値
null, undefined だけではない。
再入門JavaScript: For文とイテレータ
型やクラスが何か判別
型とクラスをめぐるいろいろ。
関数の引数 - 可変長, キーワード引数
現代 JavaScript で導入された, 可変長引数, キーワード引数。
JavaScriptのオブジェクトシステム
オブジェクト、いわゆるクラス。
非同期処理 - Promise, async / await
Promise は非同期に特化した仕組み。

JavaScript バージョン

JavaScript は, ES5 (2009年; ISO/IEC 16262:2011) までと, ECMAScript 2015 (ES6; 2015年) 以降とでまったく異なります。

古くは, ECMAScript 3rd edition (1999年12月; 次の 4th は結局まとまらなかった) の頃は, ほとんどオモチャレベルだった。それが ES2015 以降、本物のプログラミング言語へと進化を続けています。

各エディションの仕様書はここにある; Standard ECMA-262

Webブラウザやサーバ環境, transcompiler での実装状況は、次のページで分かる; ECMAScript 2016+ compatibility table

Konqueror 4.14, IE 11 は, ECMAScript 2015 (ES6) をまるっきり実装できていない。トランスコンパイラ Babel での変換も、確実にカバーされるわけではない。しかしもはや、これらのWebブラウザはターゲットにしなくてもよい。

2020年4月現在, ECMAScript 2017 (ES8) ぐらいまでは、問題なくどこでも使える. Babel は、逆に新機能に追いついていないようで、そろそろ役割を終えた印象。

React / Node.js by Examples

Front-end に React, バックエンドに Express (Node.js上のフレームワーク) を使ったサンプル. ソースコードはこちら; netsphere / react-by-examples · GitLab

第1回: Create React App テンプレート, JSX

第2回: React without Redux - 入力データを表示につなげる

第3回: ルーティング, 入力フォーム

第4回: Express + Sequelize による APIサーバ

Express は, Ruby Sinatra に似た, Node.js 上で動くWebアプリケーションワークフレーム. Sequelize は ActiveRecord (Ruby on Rails) の JavaScript 版.

第5回: 多対多relationship, DBマイグレイション, Unicode文字列の扱い

Frontend: react-paginate パッケージを導入。rc-pagination パッケージは class 指定が決め打ちで、使えない。

Backend: 引き続き, Express v4, Sequelize v6, SQLite3 の構成.

Relation (関係) と relationship (リレイションシップ) は別の概念。前者は実装としてはテーブルのこと。

多対多を作るときは, 間に中間テーブルを作る。Articles_Tags テーブルを作った。

第6回: ユーザログイン, 認証, Koa2, Bookshelf.js

Backend: フレームワークを Koa2 に切り替え。Express の後継と目されていた Node.js minimalist web framework.

Express に似ていて、かつ Express v4 よりも高速。ただ、Koa v1 と Koa2 は完全に別物で、Web上の Koa v1 用の解説は役に立たない。こういう互換性の軽視は, 乗り換えが厳しい。

Bookshelf.js は Node.js のための JavaScript ORM の一つ。Knex SQL builder 上に構築されている。TypeScript ではない plain JavaScript. Sequelize より単純に優れている。

Frontend: React Router v5 の <Route> を拡張して、ログイン中でなければリダイレクトするようにした。この方法が未ログインでのすり抜けを防げるので、よいだろう。[2021.11]

第7回: Next.js

Next.js by Vercel - The React Framework

React のツラみは react-router-dom から来ている部分も大きい。v4 での多くの破壊的変更で, 例えば, <Route /> がネストできなくなった (v6 で復活予定). v3 までの解説が役に立たない。<Redirect />render() で書かなければならないので、無駄なコードが増える。

バックエンドについても, Express にしても Koa2 にしても minimalist すぎてツラい。

Next.js は, バックエンドまで JavaScript で書く前提で、こういうツラみを乗り越えられる。もちろん、効果はそれだけではない。

  • Hybrid: Pre-render pages at build time (SSG) or request time (SSR).
  • TypeScript support.
  • File-system Routing.
  • Zero Config: No config needed. Automatic compilation and bundling.

かなりよい。

認証 (OpenID Connect) ●●todo:

そのほか

JavaScript (ES5水準) でのクラスと継承
'class' を使わずにクラスを作り、プロトタイプチェインで継承を実現。
JavaScript で HTML (DOM) を操作