Front-end に React, バックエンドに Express (Node.js上のフレームワーク) を使ったサンプル. ソースコードはこちら; netsphere / react-by-examples · GitLab
まずは簡単に, React をそのまま使う。
第1回: Create React App テンプレート, JSX Hello World.
第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 (リレイションシップ) は別の概念。前者は実装としてはテーブルのこと。
多対多を作るときは, 間に中間テーブルを作る。Articles_Tags テーブルを作った。
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 より単純に優れている。 Bookshelf.js は廃れた。Objection.js に書き換えた。
認証は Passport.js を使った。
Frontend: React Router v5 の <Route> を拡張して、ログイン中でなければリダイレクトするようにした。この方法が未ログインでのすり抜けを防げるので、よいだろう。[2021.11]
Next.js は, サーバまで込みのアプリケィションフレームワーク。グルっと時代が回ってきて, Rails - ORM ぐらいのものになった。
Next.js by Vercel - The React Framework
11_nextjs-blog-bookshelf/React のツラみは react-router-dom から来ている部分も大きい。v4 での多くの破壊的変更で, 例えば, <Route /> がネストできなくなった (v6 で復活予定). v3 までの解説が役に立たない。<Redirect /> を render() で書かなければならないので、無駄なコードが増える。
バックエンドについても, Express にしても Koa2 にしても minimalist すぎてツラい。
Next.js は, バックエンドまで JavaScript で書く前提で、こういうツラみを乗り越えられる。もちろん、効果はそれだけではない。
かなりよい。
12_nextjs-with-passport/認証サンプル。Passport.js を使った。データベースを使っておらず、永続化しない。