まずは、これだけ
フレームワークは、Webアプリを作るための仕組みや作法が揃った土台。
部品を組み合わせて、複雑な画面を管理しやすくします。
よく使う仕組みが最初から揃っている
画面の部品化、データの管理、表示の更新など、Webアプリで何度も必要になる考え方を共通の方法で扱えるようにしたものがフレームワークです。
部品に分ける
ボタンやフォームを再利用できる単位にする。
状態を管理する
入力値やログイン状態などの変化を扱う。
画面を更新する
データの変化に合わせて必要な部分を表示し直す。
素のJavaScriptとの違い
素のJavaScriptは自由度が高く、小さな機能を作るときに手軽です。フレームワークは学ぶルールが増える代わりに、画面や人数が増えたときも作り方を揃えやすくなります。
素のJavaScript
小さな機能、軽いページ、依存を増やしたくない場面に向く。
フレームワーク
複雑な画面、再利用する部品、チーム開発で力を発揮する。
選び方
流行だけでなく、作るものの規模と運用期間で考える。
たとえばボタンを押して文章を表示するだけなら、素のJavaScriptで十分です。一方、商品一覧、カート、検索条件、ログイン状態などが同時に変化する画面では、状態と部品の関係を整理できる仕組みが役立ちます。
代表的な名前と周辺ツール
React、Vue、Svelteなどは画面作りに使われる代表的な選択肢です。Next.jsはReactを土台に、ページ構成やサーバー処理などもまとめて扱いやすくします。
1JavaScript言語の基礎
2Reactなど画面を部品化
3Next.jsなどアプリ全体の仕組み
4ビルドツール開発と配信を補助
5Webアプリ利用者へ届ける
チームで同じ作り方を共有しやすい
画面をどの単位で部品にするか、データが変わったときにどこを更新するかなど、共通の考え方を使えることも大きな利点です。新しいメンバーも、プロジェクト独自の作り方を一から覚える量を減らせます。
ただし、フレームワークを導入すれば自動的に良い設計になるわけではありません。小さなサイトに大きな仕組みを入れると、設定や更新の負担がかえって増えることもあります。
ここまでのまとめ
フレームワークはJavaScriptの代わりではなく、JavaScriptを使った開発の進め方を整える道具です。