プログラミング言語、JavaScriptとは
JavaScript(JS)はブラウザで標準的に動くプログラミング言語。
画面の要素を書き換え、クリックや入力に反応し、サーバーと会話する。その勢いが止まらなくて、近年はNode.jsというサーバーそのものを動かし、構築や自動化処理も担当するようになった。
毎年仕様が更新され、記法も標準APIも少しずつ洗練される。要するにWebの母語が筋トレを続けて怪物級の能力を持ったという感じ。
JavaScriptは静的なページを「対話的」にする。HTMLが骨格、CSSが服飾だとすれば、JavaScriptは魂のようなもので、情報の配置に動きや反応を与える。ブラウザさえあれば実行でき、特別な環境を用意しなくても良い点が初心者にも優しい。
Webアプリからデスクトップアプリ、モバイルアプリまで幅広く活躍している。
この言語は想像以上に自由度が高く、良くも悪くもセンス次第。適当に書けばバグを量産するが、手間をかければ驚くほど滑らかなユーザー体験を提供できる。
こうした汎用性こそがJavaScriptの最大の魅力となっている。
JavaScriptにおけるフレームワークとライブラリ
JavaScriptにおけるライブラリは「道具箱」
このJavaScriptを現場で気持ちよく使うための道具がライブラリだ。
ライブラリは「ピンポイントで効くスパナ」。やりたい処理だけを手元に呼んで、あとは自分の流儀で組み上げる。UIを宣言的に書くReact、配列やオブジェクトの操作を鋭くするLodash、日時の計算をヒュッと済ませるDay.js――どれも気持ちがいい。
学習コスト低めで、必要なときに必要なものだけ覚えれば動く。
反面、道具を寄せ集めただけだと設計の基準が散らばりがちで、チームが大きくなるほど勝手流が増殖する。やり手の職人が少数で切り回すなら最高だが、現場監督がいない大工事には向かない。
JavaScriptにおけるフレームワークは「工事現場そのもの」
そこでフレームワークの登場となる。骨組み、規約、動線、片付けの手順までまとめて提供される。
書いたコードは呼ぶ側から呼ばれる側に立場が変わり、開発アプリはフレームワークの秩序の中で生きることになる。
ルーティング、ビルド、状態管理、ディレクトリ構造、キャッシュ戦略、デプロイの段取り、監視の導線――触れる範囲は広く、真面目に覚えるとそれなりの学習コストは発生する。
だが一度乗ってしまえば、速度と再現性は段違い。
大規模アップグレード時の移行コストが重くなることはあるが、運用まで見据える現場では、その秩序がそのまま価値になる。
JavaScriptにおける人気ライブラリ「React」
Reactは、Metaが生み出した「UIは状態の関数」という思想のライブラリ。
小さな部品を積み木のように組み合わせ、データが変われば画面が自然に更新される。気持ちよくて、つい触っていたくなる。あくまでライブラリなのでルーティングやビルドやデプロイの面倒までは見ない。だから本番運用の道筋を整えるために、Reactはしばしばフレームワークに抱えられる。
その代表がNext.jsである。
フレームワークの歴史とNext.jsの登場
フレームワークの歴史をざっくり眺めると、以下のようになる。
| 2010 | AngularJS登場。(習得コストは高いけど)フレームワークって超便利ということで盛り上がる。 |
| 2013 | React登場。宣言的UI+コンポーネントで開発者を魅了。 |
| 2014 | Vue.js登場。必要十分の心地よさを担保しつつ学習コストの低さで勢力拡大。 |
| 2016 | Angular2:フレームワークとして再設計。企業案件で強い。TypeScript(Javascriptに型を設けてコーディングを爆速化・ミスを減らす)を採用Next.js登場。ReactにSSR/SSGとファイルベースルーティングを付けた実用的なフレームワーク。同年、Nuxt.jsも登場。 |
| 2018–2020 | Next.jsは毎年地味に改革しながら開発の障壁あるあるを片っ端から解決。Vueは設計を近代化。 |
| 2021–2022 | Next.js 13:データ取得がサーバー寄りへシフト。 |
| 2023–2024 | Next.js 14:どんどん爆速化しつつ、自由度も拡張。 |
Angularは「重い」という先入観の裏で地味に高速化し、規約の強さを武器に大規模案件を支える。
Vueは軽やかで学びやすく、中小〜中規模で輝く。Next.jsは「本番運用の面倒くささ」を片っ端から排除し続け、結果として王座にどっかり座った。
Nuxt.js(ナクスト)ってなんだ?
Nuxt.jsってなんだ?偽物か?
Next.jsがReactベースであるのに対し、Nuxt.jsはVueの流儀を継ぐ。
Vueの「HTMLっぽく書ける」テンプレートが肌に合う人、TypeScriptに苦手意識がある人にとっつきやすい。モジュール文化が豊かで、感覚的にそこそこベストなものにたどり着ける。
設計の自由度はNextより低いが、余計なことを考えなくていい。
それはメリットでありデメリットで、自由に設計したい現場には窮屈だが、メンバーの経験値がまばらなチームにはありがたいセーフティネットになる。
Next.jsの使いどころ
Next.jsを使うかどうかの選定は単純だ。
自作の骨組みで尖った要件を攻め、少人数で素早くプロトタイピングするなら、必要なライブラリを拾い集めて自分の設計で走ればいいが、デプロイ、最適化、監視までを視野に入れ、チーム全体で一貫した開発体験を保ちたいなら、フレームワークを利用したほうが総コストは下がる。Webの「王道パターン」に近い要件ほど、Next.jsの舗装がありがたい。
実務的な視点をいえば、フレームワークに乗ると、コードは「呼ばれる側」になる。
ビルドの段取り、ルーティングの決まり、データ取得の場所とタイミング、キャッシュの境界――これらは全員が同じ暗黙知を持っている前提じゃないと崩れる。
人数が増えると自由は呪いになる。Next.jsはその呪いを制限によって先回りで解いてくれる代わりに、「このやり方に合わせてね」という制約を受け入れる必要がある。アップグレード時には痛みが出ることもあるが、痛みが見えるだけまだ優しい。闇雲なカスタムのほうが地獄だ。
最後に。Reactという「部品の美学」とNext.jsという「現場の秩序」は対立せず、相互補完しあう。
コンポーネントでUIを組み立てる喜びを保ちながら、配線・換気・避難経路まで設計済みの現場で仕事を進められる。速度も再現性も現実的なものになる。ちなみにNuxt.jsは、Vue流の書き心地を守りながら似た価値を届けてくれるが。どちらも「どの言語で殴るか」ではなく「どの秩序で安全に速く進むか」という選定だと思う。