この記事は、ウェブ技術の開発者（Java, PHP, Ruby, Go... 全て含む）のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。

追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。（Noteさん！その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです！）

対象読者は、Java, PH(以下略）などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。

あとホームページ屋さんとかウェブコーダーみたいな人も対象読者ではありません。この記事は、React, Vue, Angularなどでモダンなウェブアプリケーションを開発する可能性が少しでもある人に向けた記事です。JSはさほど重要じゃないしjQueryあれば事足りるわーという人はそれでいいと思います。

また、ウェブアプリケーションでも、Goとかでマイクロサービス開発しか絶対にやる気がないとか、インフラしかいじらないという人も対象ではありません。頑張ってください。

ではその唯一の方法について書きます。

「持ってる全てのHTML/CSS/JSの知識と経験、常識をゼロリセットしろ。もっと分かりやすくいうとウェブ技術を全て例外なく忘れろ。そして公式ドキュメントを全部読んでアンラーンしろ」

たったこれだけです。乱暴な言葉が嫌いな人のために言い換えましょう。

「貴方がお持ちの全てのHTML/CSS/JSの知識と経験、常識をゼロリセットしましょう。もっと分かりやすくいうとウェブ技術を全て例外なく忘れてください。そして公式ドキュメントを全部読んでアンラーン（学びほぐし）しましょう」

これしか方法はありません。これ以外の方法では中途半端な亡霊が貴方に常につきまとうでしょう。古代の知識はただの怨霊です。

この記事では以後「昔の」という言い方で統一します。昔のHTMLや昔のCSSや昔のJavaScriptです。具体的には2015年より前の知識は全て完全に過去の物です。2018年くらいまでは過渡期だったので、これらの知識も、ものによっては有害なので、昔の知識だと思った方がいいでしょう。

納得いかないですか？

昔のウェブ知識をリセットした方がいい理由

今のモダンフロントエンド分からんって人はおそらく2015年以前の知識を持っている人です。先ほども書きましたが2016年や2017年頃の知識も怪しいものです。

React, Vue などはぶっちゃけ誰でもできるライブラリ・フレームワークです。もし、それができないのであれば、貴方の能力やスキルに問題があるのではありません。単に古いフロントエンドの知識、経験、もっと言えば古い常識が邪魔をしているだけです。

この理由は明白です。昔のウェブ技術は、今と全く別物だからです。昔のウェブは石器時代で、現代のウェブは令和の時代です。明確に別の物です。貴方の持ってるその石の斧を断捨離しましょ？

200x年代のHTML/CSS/JSは単なるおもちゃでした。201x年代においても2013年から2017年くらいの間は、激動としか表現できない時代でした。ほんの一年前に言われていたことが次の年には否定されていることが珍しくありませんでしたが、今はそんなことは大分減りました。他のジャンルと同じくらいには安定したでしょう。

・ そもそも今と昔で言語仕様が完全に異なる（いわゆるES5以前とES2015+）
・ 今はTypeScriptが当たり前である（ウェブ開発においてシェアは過半数です）
・ 今はNode.js、つまりコマンドラインやサーバーサイドでJavaScriptが当たり前に動く
・ 大規模ゲームサーバーやTwitterなどでもNode.jsが使われている、つまりJavaScriptは今やサーバー開発の選択肢のひとつである
・ そのため、ウェブ開発はJavaScriptのみでエコシステムが完成した
・ 昔は、ライブラリや開発文化に様々なものを巻き込んで試行錯誤を繰り返していた
・ 今と昔では、ECMAScript（JavaScript）やHTML/CSSなどの仕様策定のルールが根本的に変わった
・ ほぼIEも死に、Chrome（Blink）が独占的になった

などがあります。

昔は、JavaScriptという独自の思想に基づいた、クソトロい不完全な言語をウェブブラウザ上で動かすだけの、チャチなオモチャ扱いでしたし、HTMLもまっとうとは言えず「HTMLでは論理構造をマークアップするはずなのにそれができてない」などとすら解釈されていました。

現代とは大きく異なります。

そのため、現代と昔では、ウェブ開発における重要度が大きく変化しました。

昔のウェブ開発ではバックエンドが主体で、フロントエンドはオマケにすぎませんでしたが、現代においてはフロントエンドの比重は最低でも50%でバックエンドと、完全に対等以上の立場です。

この背景には、iOS/Androidといったモバイルアプリケーションの存在により、バックエンドがウェブを抱え込むべきではなくなったというのもあります。

さらにいえば、Node.jsを使えば、ウェブに限定すれば、フロントエンドとバックエンドを TypeScript で統一できます。

BaaS, mBaaS などといったサービスも当たり前になってきたため、バックエンドのつまらないテンプレートじみたコードを人間の手で書かなくて済むようになりました。本当に必要なコードだけを書けばいい時代なのです。

ウェブ開発においてJavaScriptの重要度は最低でも50%で、場合によってはそれ以上になりました。

言語仕様が根本的に違う

現代フロントエンドで使われるTypeScriptはとてもDX（Developer Experience）が高いです。つまりTypeScriptは開発者体験の素晴らしい言語です。型安全でありつつもスクリプト言語としての取り回しの良さもあります。とても奇跡的にバランスの良い言語のひとつなのです。

もちろんGoやScalaも素晴らしい言語ですので、そういった言語を好きな人はそれらを使えばいいと思いますが、そういった言語と比較しても、好みの違いなどはあったとしても、遜色がありません。

VSCode + TypeScript という最高のDXを、誰でも無料で自由に利用が可能です。

これは昔のJavaScriptシーンではとても考えられないことでした。プロトタイプ指向という奇妙にみえるオブジェクト指向、理解しがたい this だとか、様々な不足だらけの言語仕様……。昔の邪悪帝国MicrosoftとMozillaとGoogleやその他が脚を引っ張り合う時代。

昔のECMAScript（JavaScriptの言語仕様は、欧州のECMAという標準仕様策定機関によって策定されていて、それがECMAScript）は、でたらめで不完全なプログラミング言語でした。

実際にその頃のJavaScript（つまりES5以前）を触ったことがある人は何かしらJavaScriptには不満があったでしょう。RubyやScalaやGoといった他の言語よりも、明確に劣る言語だと認識していたでしょう。それは何も間違っていません。

そのため、言語仕様に不満を持った多くの開発者が、いわゆる AltJS を生み出した時代でもありました。

TypeScriptはそんなAltJSの一種でしたが他とは根本的に違います。現代のTypeScript はECMAScriptの完全上位互換なので、全てのJSのコードはTypeScriptであり、TypeScriptは型定義について拡張されただけのECMAScriptなのです。（一部マイナーな独自仕様は、互換性のために残っているが、それらはまず使われないので安心して欲しい）

ちなみにTypeScriptは、型安全にするためのLinterの一種であり、またIDEの補完機能をより強力にするための仕掛けだと認識しておけば問題ありません。

JavaScript開発シーンにおいてTypeScriptを選ばない理由は何一つありません。

さて、昔のECMAScriptは最低の言語でしたが、ES2015+（つまりECMAScript® 2015 以後の言語）にはそれらは関係ありません。やっかいな事に互換性があるため、ES5以前のクソみたいなコードに遭遇することは未だにありますが。

ES5以前の書き方は不幸を生み出すだけのものなのです。変数定義にvarを用いるなどと言った野蛮な書き方は石器時代に投げ捨てなければいけません。この点はまだ残っている不幸です。

未だにウェブ上の資料にはvarなど古代の残滓が残っていますが、それは会社の方針だったり、古い時代の人間が作ったものだったり、たんに古いドキュメントだったりなど、何かしらのつまらない理由があるだけです。

今から書くコードには一切それら昔の言語仕様は必要ありません。脳内でいい感じに const や let に置き換えるべきですし、おそらく let を使う必要すらありません。const だけで大体は事足ります。

Node.jsが存在していること

現代フロントエンドにおいてNode.jsはとても重大な役割をいくつも担っているため、Node.jsが必須です。

昔はRubyなどで書かれたフレームワーク上でSASSをCSSにコンパイルしたり、JavaScriptやHTMLのアセット処理をしていたこともありましたが、現代ではそれは決して推奨されません。

もし、ほんの少しでも現代フロントエンドを触る機会があるなら、Node.js は必須です。それを触らずに済む可能性はないと考えてください。Rubyなどのフレームワークやライブラリでウェブフロントエンドをいじる機会があったらそれはプロダクトがもつ危険サインであると認識してください。

少なくともウェブフロントエンド開発はJavaScriptだけで完結します。
今あるNode.js中心のエコシステムを無視しないでください。

昔なら、たとえばユニットテストのテストランナーが、ウェブブラウザ上で動いていました。これはコマンドラインツールがなかったからです。昔のウェブエコシステムは異常だったのです。

今は、自動テストなどを含む全ての開発工程はコマンドラインツール（つまりNode.js）で完結します。CI/CDパイプラインで使うのが令和時代における当たり前の開発なのです。

また昔と今ではライブラリの思想も全く異なります。現代においては不要な依存を減らす方向になっていますが、昔はそうでもありませんでした。積極的に無駄な依存を増やす方向性でした。

これは悪名高きlefpad問題やisArray問題です。反論としては、ECMAScriptの処理系が数多くあり、ECMAScriptの最新版をサポートしていない環境も多く、そのため、しょうもない機能であってもモジュール化するという悪しき風習がありました。

現代ではそのような必要性はなくなり、不要な依存性は好まれないようになりました。

以前は流行してたgruntやgulpといったものも不要なものの代名詞です。もし貴方が中途半端にそういった時代の知識を持っていたなら忘れてください。今の時代には無用の長物です。

これはエコシステムの問題だけではなくて、言語仕様が変わったというのも大きな影響を持っています。

2017年くらいまでは激動でしたがその激動の時代の記憶は、考古学や、不幸にも昔のシステムをメンテナンスするときにおいてのみ発揮されるものです。

仕様策定ルールが変わった

現代においてECMAScript（何度も言ってますが、JavaScriptの言語仕様）は毎年6月頃に年次発行されています。毎年言語仕様がアップデートすると大変だと思いますか？ところがそうではありません。

たとえば、ES2015からES2020への差分は、ES5からES2015への差分よりは遙かに小さいものです。

・ ES5 -> ES2015 
・ ES2015, ES2016, ES2017, ES2018, ES2019, ES2020

この2つの期間は大体同じくらいです。違いは一回の仕様変更だったか？5回の仕様変更だったか？です。ES5からES2015は、一回の大きな仕様変更だったから、違いが大きすぎただけです。

ES2015以後は、毎年緩やかに変化していくので、言語仕様のアップデートはたかが知れています。

もちろん、有用なアップデートがなかったわけではありません。

たとえば async/await はES2017で仕様に加わったものですが、現代JSプログラミングでは必須の機能です。他にも細かく使い勝手の向上となる仕様が追加され続けています。

また、今のエコシステムではトランスパイルが当たり前であるため、ウェブブラウザが対応しているかいないかを気にする必要がありません。IEをサポートしていても、最新の言語仕様を使って問題ありません。

そしてそれは、最新仕様のECMAScriptに準じたTypeScriptを使ってよいということです。

HTMLの仕様もそうです。昔はHTML4だとかHTML5だとかと言われていましたがが、今は HTML Living Standard という「常に最新の規格」しか存在しません。

あとぶっちゃけるならChrome（とその中身であるBlink）以外がほとんど死滅したので、ブラウザ互換性問題がほぼ無くなりました。一部IEやSafariという強敵がまだ生き残っているのですが……。

アンラーンするための方法

ここまでは貴方が昔のウェブ技術を忘れた方がいい理由でした。

ここからは、アンラーン（学びほぐし）をするための解説を行います。

アンラーンとは、古い知識を捨て新しい知識にアップグレードする工程です。特に35歳プログラマ定年論に対抗するために必須なものです。アンラーンできない人は、必ずどこかでプログラマとしては行き詰まります。

ただしご安心ください。アンラーンするのにも良い時代になりました。

公式を読め

簡単ですね。丁寧に言うと「公式を読みましょう」です。

ECMAScriptについてはECMA-262を読むのがベストですが、ぶっちゃけ独自の記法で読みづらすぎるので、ほぼ公式に近いMDNを読みましょう。HTMLやCSSの仕様も同様です。

・TypeScript
・ Node.js
・ React
・ Vue

他エコシステムに関しても公式を読みましょう。これが一番の近道です。公式ドキュメントを全部読むのは大変かもしれませんが、急がば回れです。

これはGoやRust、Kotlinなどどんな言語でも同じでしょう。それと全くおなじことをJavaScriptでもやるだけです。自分の目にとまった全ての公式を読むだけです。

そのときに、古い知識があるからといって知ったかぶるのはやめましょう。貴方の古い知識は、ただの呪縛です。

その先にある世界について