JavaScript / ECMAScriptについて。
Webアプリケーションでは,基本的にサーバでページを生成するが,JavaScriptをうまく活用すると,サーバへのアクセスを減らしつつ,利用者にとっての操作性を上げることができる。
null
, undefined
だけではない。
Promise
は非同期に特化した仕組み。
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 は、逆に新機能に追いついていないようで、そろそろ役割を終えた印象。
Front-end に React, バックエンドに Express (Node.js上のフレームワーク) を使ったサンプル. ソースコードはこちら; netsphere / react-by-examples · GitLab
第1回: Create React App テンプレート, JSX
第2回: React without Redux - 入力データを表示につなげる
Express は, Ruby Sinatra に似た, Node.js 上で動くWebアプリケーションワークフレーム. Sequelize は ActiveRecord (Ruby on Rails) の JavaScript 版.
Frontend: react-paginate パッケージを導入。rc-pagination パッケージは class 指定が決め打ちで、使えない。
Backend: 引き続き, Express v4, Sequelize v6, SQLite3 の構成.
Relation (関係) と relationship (リレイションシップ) は別の概念。前者は実装としてはテーブルのこと。
多対多を作るときは, 間に中間テーブルを作る。 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 の Next.js by Vercel - The React Framework
React のツラみは react-router-dom から来ている部分も大きい。v4 での多くの破壊的変更で, 例えば, バックエンドについても, Express にしても Koa2 にしても minimalist すぎてツラい。
Next.js は, バックエンドまで JavaScript で書く前提で、こういうツラみを乗り越えられる。もちろん、効果はそれだけではない。
かなりよい。
React / Node.js by Examples
第4回: Express + Sequelize による APIサーバ
第5回: 多対多relationship, DBマイグレイション, Unicode文字列の扱い
Articles_Tags
テーブルを作った。
第6回: ユーザログイン, 認証, Koa2, Bookshelf.js
<Route>
を拡張して、ログイン中でなければリダイレクトするようにした。この方法が未ログインでのすり抜けを防げるので、よいだろう。[2021.11]
第7回: Next.js
<Route />
がネストできなくなった (v6 で復活予定). v3 までの解説が役に立たない。<Redirect />
を render()
で書かなければならないので、無駄なコードが増える。
認証 (OpenID Connect) ●●todo:
class
' を使わずにクラスを作り、プロトタイプチェインで継承を実現。