React、Vue、Django、Laravel、Spring など、Web開発の現場で使われる代表的なフレームワークは、名前は聞くけれど違いまではよく分からないという方も多いのではないでしょうか。そこで今回は、フレームワークにまつわる知識を10問のクイズにまとめました。設計思想や開発元、使われる言語や仕組みなど、さまざまな角度から出題します。初心者の方は基礎の確認に、経験者の方は知識の整理に、ぜひ気軽に挑戦してみてください。
Q1 : 仮想DOMを使わず、ビルド時にコンパイルして効率的なJavaScriptを生成するアプローチで知られるフレームワークはどれ？ Vue React Angular Svelte
Svelteは、ブラウザで実行するライブラリではなくビルド時のコンパイラとして動作するフレームワークです。コンポーネントを直接DOMを更新する効率的なJavaScriptに変換するため、仮想DOMによる差分計算を必要としません。その結果、ランタイムのサイズが小さくなり動作も軽快になります。ReactとVueは仮想DOMを用いており、AngularはIncremental DOMなど独自の仕組みを採用しています。
Q2 : PythonのフレームワークFastAPIが、型ヒントをもとに自動生成してくれるAPIドキュメントの仕様はどれ？ GraphQL WSDL OpenAPI（Swagger UI） RAML
FastAPIはPythonの型ヒントとPydanticを活用し、ルート定義からOpenAPI仕様のスキーマを自動生成します。さらにSwagger UIやReDocによる対話的なAPIドキュメントが標準で提供され、ブラウザ上から直接APIを試せます。開発者が別途ドキュメントを書く手間が減り、コードとドキュメントの乖離も防げます。非同期処理（async/await）に対応し高速な点も特徴です。
Q3 : Reactのフックのうち、再レンダリングを引き起こすコンポーネントの状態を持たせるために使うものはどれ？ useEffect useState useRef useMemo
useStateは関数コンポーネント内で状態を保持するための基本的なフックで、状態を更新すると再レンダリングが発生します。useEffectは副作用（データ取得や購読など）の処理、useRefは再レンダリングを起こさずに値やDOM要素の参照を保持する用途、useMemoは計算結果のメモ化に使います。フックはReact 16.8で導入され、クラスを使わずに状態管理ができるようになりました。
Q4 : Reactをベースにしたフレームワーク「Next.js」を開発・主導している企業はどれ？ Meta Google Netlify Vercel
Next.jsはVercel社（旧ZEIT）が開発を主導しているReactベースのフレームワークです。サーバーサイドレンダリング、静的サイト生成、ファイルベースのルーティング、App Routerなどの機能を備えています。ReactそのものはMeta（旧Facebook）が開発しており、Next.jsとは開発元が異なります。GoogleはAngularの開発元、NetlifyはVercelと同様のホスティング事業者です。
Q5 : Googleが主導して開発しているフレームワーク「Angular」が標準で採用しているプログラミング言語はどれ？ TypeScript Dart Kotlin Ruby
Angular（2以降）はTypeScriptで書かれており、アプリケーションの開発でもTypeScriptの利用が標準となっています。静的型付けによって大規模開発でも保守しやすく、エディタの補完も強力に働きます。Dartは同じGoogle発のFlutterで使われる言語であり、混同しやすい点に注意が必要です。初代のAngularJSはJavaScriptで書かれていましたが、Angular 2で全面的に作り直されています。
Q6 : Ruby on Railsが重視している設計思想として知られているのはどれ？ 規約より設定 設定より規約（Convention over Configuration） 継承より委譲 型より値
Ruby on Railsは「設定より規約（Convention over Configuration）」を設計思想に掲げています。これは、ファイル名やテーブル名などに標準的な命名規則を定めておき、その規約に従う限り開発者が細かな設定を書かなくても動作するという考え方です。たとえばUserというモデルは自動的にusersテーブルと対応づけられます。これにより設定ファイルの記述量が減り、開発の速度と一貫性が高まります。
Q7 : Vue.jsを最初に開発した人物は誰？ Jordan Walke Misko Hevery Evan You Ryan Dahl
Vue.jsは元Google社員のEvan You（エヴァン・ユー）氏によって開発され、2014年に公開されました。同氏はGoogle在籍中にAngularJSを使った経験から、必要な機能だけを軽量に使えるフレームワークを目指してVueを作りました。なお、Jordan WalkeはReact、Misko HeveryはAngularJS、Ryan DahlはNode.jsの生みの親として知られており、それぞれ別のプロジェクトの作者です。
Q8 : Djangoが自らのアーキテクチャパターンとして呼んでいる名称はどれ？ MVP MVVM MVA MTV（Model-Template-View）
DjangoはWebアプリケーションの構造を「MTV（Model-Template-View）」と呼んでいます。一般的なMVCと対比すると、DjangoのModelはMVCのModel、Templateは見た目を担うViewに相当し、DjangoのViewはリクエストを処理してデータを取得しテンプレートに渡すControllerに近い役割を持ちます。名称は違いますが、関心の分離という考え方自体はMVCと同じです。
Q9 : PHPのフレームワークLaravelに標準で組み込まれているORMの名前はどれ？ Eloquent Doctrine Hibernate ActiveRecord
LaravelにはEloquent ORMが標準で組み込まれています。EloquentはActiveRecordパターンを採用しており、データベースの各テーブルに対応するモデルクラスを通して、レコードの検索・登録・更新・削除を直感的なメソッドで行えます。Doctrineは主にSymfonyで使われるPHPのORM、HibernateはJava向けのORM、ActiveRecordはRuby on Railsで使われるORMです。
Q10 : Java向けのSpring Frameworkの中核をなす仕組みとして正しいものはどれ？ Ajax通信ライブラリ ORMエンジン IoC/DIコンテナ JITコンパイラ
Spring Frameworkの中核はIoC（制御の反転）コンテナで、DI（依存性の注入）によってオブジェクトの生成と依存関係の解決をフレームワーク側に任せます。これによりクラス同士の結合度が下がり、テストや差し替えが容易になります。Spring BootやSpring MVC、Spring Data、Spring Securityなどの関連プロジェクトも、このコンテナの上に成り立っています。
まとめ
いかがでしたか？ 今回はフレームワーククイズをお送りしました。
今回はフレームワーククイズを出題しました。
ぜひ、ほかのクイズにも挑戦してみてください！
