現代的な JavaScript | Netsphere Laboratories

JavaScript / ECMAScriptについて。

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

React / Next.js by Examples 各種サンプルプログラム.

●●今後追加予定:

Next.js App Router. App Router は Pages Router と別モノ。フロントエンドをあらたに作り直すぐらいになる。
- app/ ディレクトリ.
- フォルダが routes を決める。特別な page.{js,jsx} ファイル. 階層が一階深くなる
- 各フォルダ内で, layout.{js,jsx}, template.js などが特別なファイル名になる。サブフォルダのファイルが親セグメントのコンポーネントの内側に表示される;
- サーバ側で実行される getServerSideProps() (リクエスト毎) と getStaticProps() (ビルド時) は単に廃止. Server Actions を使え。コンポーネント内の関数の先頭で 'use server' と書けばサーバで動く。すごい
- pages/_app.js と pages/_document.js は単一の app/layout.js に置き換え.
- pages/_error.js, pages/404.js はそれぞれ error.js, not-found.js に置き換え.
- pages/api/* API Routes は route.js に置き換え. GET(), POST() などの関数を export する。
Auth.js (旧 NextAuth.js) はつくりが微妙。iron-session のほうがまだしも。
Next.js App Router で作り直すんだったら、別に Next.js でなくてもよくなイカ? 近ごろ人気が出てきているのは SvelteKit.

現代の JavaScript

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

古くは, ECMAScript 3^rd 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 は、逆に新機能に追いついていないようで、そろそろ役割を終えた印象。