あいさつ
みなさんchatGPT使ってますか？chatGPTに限らず、GPT周りのAI今なんか色々ありますよね。論文漁ってくれたり、画像生成してくれたり、動画も音声もなんか生成系のAI色々ありすぎて混乱。
僕としては、普段のアイディアの壁打ちや、複雑な概念の理解サポート、要点の整理など使ってるのですが、タイトルの通り、フロントのレンダリングエンジンってどんなのがあって、今の流行りとかって聞いたらわかるのか？みたいなのの実体験を今日は書こうと思います。
ちなみに筆者はバックエンド〜インフラに知識が偏っており、フロントはてんでダメです。昔インターンでフロントだけで完結するアプリケーションをリリースして、その時は頑張ってたけど正直商用のコードかと言われたら全然そうじゃないと思う。
動いてるからいいでしょう的なものだったら作れるけど、くらいのステータスです。
なんて聞いてみたか
フロントのレンダリングエンジンをできるだけ多く出してください。
これだけです。笑
できるだけ多く書き出してくださいってのが味噌ですね。これで本当に結構返ってきました。
そのまま学びになったので、返ってきた返答をぺたっと貼り付けます。
フロントエンドのレンダリングエンジンには、ブラウザでHTML、CSS、JavaScriptを処理し、表示するためのエンジンや、サーバーサイドでレンダリングを行うためのエンジンもあります。以下に、できるだけ多くの代表的なレンダリングエンジンを挙げます。
1. ブラウザのレンダリングエンジン
これらは、ウェブブラウザで動作する主要なレンダリングエンジンです。
- Blink（Chrome、Edge、Opera）
- Googleが開発したエンジンで、主にGoogle ChromeやMicrosoft Edge、Operaなどで使用されています。WebKitからフォークして作られました。
- WebKit（Safari）
- Appleが開発しているエンジンで、SafariブラウザやiOSのウェブコンテンツレンダリングに使用されています。もともとはKDEのKHTMLエンジンから派生しています。
- Gecko（Firefox）
- Mozillaが開発しているエンジンで、Firefoxブラウザで使用されています。クロスプラットフォームで動作し、オープンソースです。
- Trident（旧Internet Explorer）
- Microsoftが開発したエンジンで、Internet Explorer（IE）で使用されていました。現在は非推奨です。
- EdgeHTML（旧Microsoft Edge）
- Microsoft Edgeの旧レンダリングエンジンで、IEのTridentエンジンをベースにしていましたが、現在はBlinkエンジンに移行しています。
- Servo（Mozilla実験プロジェクト）
- Mozillaが実験的に開発しているエンジン。Rustで書かれており、並行処理やセキュリティを重視しています。まだ主流のエンジンとしては採用されていません。
2. サーバーサイド・クライアントサイドのテンプレートエンジン（SSRやCSRで使われる）
これらは、WebアプリケーションでHTMLを生成する際に使用されるレンダリングエンジンやテンプレートエンジンです。
- React
- JavaScriptライブラリで、クライアントサイドとサーバーサイドの両方でレンダリングが可能です。Virtual DOMを使った効率的な再レンダリングが特徴です。
- Vue.js
- JavaScriptフレームワークで、コンポーネントベースの開発ができ、クライアントサイドレンダリングとサーバーサイドレンダリング（Nuxt.jsなどを通して）に対応しています。
- Angular
- Googleが開発したフレームワークで、クライアントサイドとサーバーサイドの両方でのレンダリングに対応しています。
- Svelte
- Svelteはコンパイル時にDOM操作コードを生成し、ブラウザの負荷を軽減するフレームワークです。サーバーサイドレンダリング（SapperやSvelteKitを通じて）にも対応しています。
- Next.js
- Reactベースのフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）をサポートしています。
- Nuxt.js
- Vue.jsベースのフレームワークで、サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）をサポートしています。
- Handlebars
- シンプルなテンプレートエンジンで、サーバーサイドとクライアントサイドの両方で利用可能です。特にExpress.jsのビューエンジンとして使われます。
- EJS (Embedded JavaScript)
- JavaScriptベースのテンプレートエンジンで、サーバーサイドレンダリングに使われます。Node.jsのアプリケーションでよく使用されます。
- Pug (旧Jade)
- Node.jsのテンプレートエンジンで、簡潔なシンタックスが特徴です。HTMLを生成するために使用され、Express.jsなどとよく組み合わせられます。
3. 他のフロントエンドフレームワークやライブラリ
これらもクライアントサイドやサーバーサイドでのレンダリングに使用されることがあります。
- Preact
- Reactの軽量版で、APIがほぼ同じですが、ファイルサイズが非常に小さく、パフォーマンスに優れています。
- Ember.js
- 長期間メンテナンスされているJavaScriptフレームワークで、クライアントサイドレンダリングに加えて、サーバーサイドレンダリングもサポートしています。
- Backbone.js
- クライアントサイドのMVCフレームワークで、レンダリングエンジンというよりは構造を提供しますが、クライアントサイドでのHTMLの生成に使われます。
- Mithril.js
- 非常に軽量なJavaScriptフレームワークで、仮想DOMを使って効率的にクライアントサイドレンダリングを行います。
4. サーバーサイドフレームワーク
これらのフレームワークは、HTMLをサーバー側で生成し、ブラウザに送信する役割を果たします。
- Ruby on Rails（ERB, Haml）
- Rubyのフレームワークで、サーバーサイドでHTMLを生成します。デフォルトでERB (Embedded Ruby) を使用しますが、HamlやSlimなども使用可能です。
- Django（テンプレートエンジン）
- Pythonのフレームワークで、Djangoのテンプレートエンジンを使用してサーバーサイドレンダリングを行います。
- ASP.NET（Razor）
- Microsoftのフレームワークで、Razorというテンプレートエンジンを使ってサーバーサイドでHTMLを生成します。
- Laravel（Blade）
- PHPフレームワークで、Bladeというテンプレートエンジンを使用してサーバーサイドでHTMLを生成します。
- Flask（Jinja2）
- Pythonの軽量フレームワークで、Jinja2というテンプレートエンジンを使用してサーバーサイドレンダリングを行います。
5. ゲームや3D描画エンジン
これらは、ブラウザで動作するインタラクティブなコンテンツをレンダリングするために使用されます。
- Three.js
- JavaScriptライブラリで、WebGLを使用してブラウザ内で3Dレンダリングを行います。ゲームやインタラクティブな3Dコンテンツに使用されます。
- Babylon.js
- WebGLベースの3Dレンダリングエンジンで、ゲームやインタラクティブなアプリケーションに使用されます。
まとめ
フロントエンドのレンダリングエンジンには、ブラウザ上で動作するもの、サーバーサイドでHTMLを生成するもの、さらにはゲームやインタラクティブコンテンツに使われるものまで多岐にわたります。それぞれの用途に応じて適切なレンダリングエンジンを選択することが重要です。
分量すごくないですか？笑
ちなみにこういうのも普通にみてて楽しいなと思ったり。
https://2023.stateofjs.com/en-US/libraries/front-end-frameworks/
GPTに話を戻します。
ブラウザのレンダリングエンジンは正直わからないし、普段開発でも触ることがないからここは、なんかこんなのがあるんだくらいの理解にとどめようと思います。
僕が知りたかったのは、どちらかというとクライアントサイドで利用されるテンプレートエンジンのことでした。列挙してみると、
- React
- Vue.js
- Angular
- Svelte
- Next.js
- Nuxt.js
- Handlebars
- EJS (Embedded JavaScript)
- Pug
この辺りですかね。なんかバックエンドのテンプレートエンジンも紹介してくれてるけど、ここでは無視します。
NextとかNuxtとか最近よく聞いてたけど、なるほどベースになってるフレームワークが違うんですね。そんなことも知らなかったというツッコミは受け付けません。
- Next.js
- Reactベースのフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）をサポートしています。
- Nuxt.js
- Vue.jsベースのフレームワークで、サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）をサポートしています。
まぁじゃあわかりました。こんななものがあるということは受け入れた上で、じゃあこれらの流行り廃りを理解するには、テンプレートエンジン界隈全体の流れみたいなのの時系列も知りたいですよね。
聞いてみました。
サーバーサイドのテンプレートエンジンの歴史も知りたい
サーバーサイドテンプレートエンジンの歴史
サーバーサイドおよびクライアントサイドのテンプレートエンジンは、Web開発の歴史の中で重要な役割を果たしてきました。特に、Webアプリケーションの複雑さが増す中で、効率的にHTMLを生成し、データを埋め込むためのテンプレートエンジンは大きく進化しています。ここでは、それらの流行や歴史について詳しく説明します。
1. サーバーサイドテンプレートエンジンの歴史
1990年代〜2000年代前半: Web 1.0の時代
この時代、サーバーサイドのテンプレートエンジンは非常に基本的なものが主流で、HTMLを生成することが中心でした。テンプレートエンジンはサーバー上で動作し、HTMLを動的に生成してクライアントに返すという役割を担っていました。
- CGI (Common Gateway Interface) の初期Webサーバーとのインターフェースを利用して、PerlやPHP、ASPなどのスクリプト言語がサーバーサイドのテンプレートエンジンの元祖的存在となっていました。例えば、PHPは非常に簡単にHTML内にサーバーサイドのコードを埋め込むことができ、そのため普及しました。
代表的なテンプレートエンジン:
- PHP: 直接HTML内にPHPコードを埋め込み、サーバーサイドで動的なコンテンツを生成するシンプルな方法が人気を集めました。
- ASP: Microsoftのサーバーサイドスクリプト技術で、主にWindowsサーバーで利用されました。
- JSP (Java Server Pages): Javaベースのサーバーサイドテンプレートエンジンで、大規模なシステムやエンタープライズ用途で使われました。
2000年代: MVCフレームワークとテンプレートエンジンの進化
この時代、MVC（Model-View-Controller）アーキテクチャが人気を集め、フレームワークの中にテンプレートエンジンが組み込まれ始めました。これにより、ビジネスロジックとビューのコードが分離され、テンプレートエンジンの役割が明確化されました。
代表的なテンプレートエンジン:
- ERB (Embedded Ruby): Ruby on Railsで使われるテンプレートエンジンで、HTML内にRubyコードを埋め込み、サーバーサイドレンダリングを行います。簡潔で読みやすいシンタックスが特徴です。
- Smarty (PHP): PHPで使われるテンプレートエンジンで、ロジックをテンプレートファイルから分離することができ、セパレーション・オブ・コンサーンを推進しました。
- Jinja2 (Python): FlaskなどのPythonフレームワークで使用されるテンプレートエンジンで、構造化されたテンプレートと柔軟なカスタマイズ性が特徴です。
- Twig (PHP): Symfonyフレームワークで利用されるテンプレートエンジンで、非常に柔軟かつ洗練されたシンタックスを提供します。
2010年代: JavaScriptの台頭とサーバーサイド/クライアントサイドの役割の再編
この時代、JavaScriptが急速に台頭し、フロントエンド開発が進化しました。サーバーサイドでのHTML生成だけでなく、クライアントサイドでもテンプレートエンジンを使ってビューの動的生成を行う必要が出てきました。
- Node.jsの登場により、サーバーサイドでもJavaScriptが使われるようになり、JavaScriptベースのテンプレートエンジンが急増しました。また、**SPA（シングルページアプリケーション）**の流行に伴い、クライアントサイドレンダリング（CSR）が一般化し、サーバーサイドとクライアントサイドでのテンプレートの役割が分散されました。
代表的なテンプレートエンジン:
- EJS (Embedded JavaScript): Node.jsで使われるテンプレートエンジンで、JavaScriptコードをHTML内に埋め込むことができます。シンプルで直感的なAPIが特徴です。
- Pug (旧Jade): Node.jsで人気のあるテンプレートエンジンで、非常に短く書けるシンタックスが特徴です。HTMLを生成するための軽量で直感的な文法が支持されています。
- Mustache: ロジックレステンプレートエンジンとして、サーバーサイド・クライアントサイドの両方で利用可能で、JavaScript以外の多くの言語でもサポートされています。
- Handlebars: Mustacheの拡張版で、使いやすく、JavaScriptでのフロントエンドテンプレートエンジンとして多くのプロジェクトで使われました。
2. クライアントサイドテンプレートエンジンの進化
2000年代後半〜2010年代: JavaScriptによるクライアントサイドレンダリング
Ajax技術の進化に伴い、クライアントサイドでの動的なレンダリングが求められるようになり、テンプレートエンジンもフロントエンドで利用されるようになりました。これにより、JavaScriptを使ってページの一部を非同期的に更新できるようになりました。
- クライアントサイドテンプレートエンジンは、サーバーから取得したデータを動的にHTMLに変換し、DOMに挿入するために使われます。これにより、ページ全体を再読み込みせずに一部の内容を更新することが可能になりました。
代表的なクライアントサイドテンプレートエンジン:
- Handlebars: クライアントサイドでデータを使ってHTMLを生成するために使われ、特にシンプルで直感的な記法が好まれました。
- Mustache: こちらもロジックレステンプレートエンジンとしてクライアントサイドでの利用が一般化しました。
2010年代: クライアントサイドレンダリングからフルスタックフレームワークへ
SPA（シングルページアプリケーション）の普及により、ReactやVue.jsなどのフルスタックフレームワークが登場しました。これにより、テンプレートエンジンはコンポーネントベースのUIライブラリに統合される傾向が強まりました。これらのフレームワークは、テンプレートエンジンを超えた柔軟な機能を提供し、データの双方向バインディングや状態管理をサポートします。
代表的なフレームワーク:
- React: 仮想DOMを使ったレンダリングで、パフォーマンスを最適化。クライアントサイドだけでなく、サーバーサイドレンダリング（SSR）もサポートします。
- Vue.js: シンプルで学びやすいAPIが特徴のフレームワークで、コンポーネントベースのテンプレートシステムを提供します。
- Angular: Googleが開発したフレームワークで、クライアントサイドの複雑なWebアプリケーションに特化しており、テンプレートエンジンも統合されています。
2020年代: 静的サイト生成とサーバーサイドレンダリングの融合
近年では、サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）を併用するアプローチが人気です。これにより、初回ロードはサーバーサイドで生成された静的HTMLを使い、その後クライアントサイドでのインタラクティブな動作を実現します。
代表的なフレームワーク:
- Next.js: Reactベースのフレームワークで、SSRやSSGを簡単に実装可能。SEOやパフォーマンスに優れたアプリケーションを開発するのに適しています。
- Nuxt.js: Vue.jsのためのフレームワークで、SSRやSSGを簡単に実装でき、柔軟なアプリケーション開発が可能です。
3. 現在の流行
現在のWeb開発では、サーバーサイドとクライアントサイドの境界は曖昧になりつつあり、どちらのレンダリング手法を選ぶかはユースケースによって異なります。
- コンポーネントベースのアーキテクチャ: ReactやVue.jsのように、テンプレートエンジンを統合したコンポーネントベースのフレームワークが主流です。
- SSR/SSGのトレンド: Next.jsやNuxt.jsのように、サーバーサイドでHTMLを生成してSEO対策をしつつ、クライアントサイドでの高いインタラクティビティを実現するアプローチが一般的です。
結論:
- 1990年代から2000年代にかけては、サーバーサイドのテンプレートエンジンが主流でした。
- 2010年代にはクライアントサイドテンプレートエンジンが登場し、SPAやCSRが流行しました。
- 現在は、コンポーネントベースのフレームワークが主流であり、SSRやSSGを活用したハイブリッドなレンダリング手法が注目されています。
圧倒的分量。GPT先生ありがとうございます。
むかーしは、それこそシンプルな役割しか持っておらず、サーバーサイドで作成した動的なHTMLをクライアントに返すのが役割だったそうです。PHPを書いたことがないのでわからないのですが、簡単にHTMLをスクリプトに埋め込めるから古くから普及している言語なんだそうな。
昔を代表するテンプレートエンジンとしては、
- PHP
- ASP
- JSP
あたりらしいです。PHPしか知らない。
2000年代に入ると、MVCフレームワークが人気になったらしいです。今でもWebアプリ開発を始めようとしたら最初に聞くアーキテクチャ名なんじゃないでしょうか？
この頃に人気なのが
- ERB
- Smarty
- Jinja2
- Twig
らしい。Pythonばかり触ってきたので、正直Jinja2しか知らなかった。
ついにフロントが絡みます。2010年代にJavaScriptが台頭したんですねー。
Node.jsの登場がやっぱでかいんですかね。サーバーサイドでもJavaScriptが使えたり、SPAの流行からクライアントサイドレンダリングが一般化したりとかってのもこの時代っぽいですね。
普通にわかりやすいし面白い。
記事はここまでにしますが、会話はもっとしていこうと思います。
