ライブラリとフレームワークと拡張言語の違い
どんな記事か
こちらの記事は、ライブラリ、フレームワーク、拡張言語について理解が曖昧だったため、これらの違いについて学んだことをアウトプットするためにまとめた記事です。
こんな方向け
- プログラミング初心者
- フロントエンドの技術に興味のある方
ライブラリとフレームワークと拡張言語の違い
基盤言語（白紙のノート）
ここではJavaScriptを例に本作りに置き換えて整理していきたいと思います。
【例】
JavaScript:
Webサイト上で色んな動きをつけることができるプログラミング言語ですが、今ではWebアプリやバックエンドシステムの開発にも使われているWebサービス開発には欠かせないプログラミング言語です。
本に例えるなら、白紙のノートです。
- 何も書かれていないので、自由に自分の好きなように書くことができます。
- 構成や文章は自分で考えて、表紙も中身も挿絵も書かなければなりません。
ライブラリ (参考書や辞書)
便利な機能を再利用できるように詰め合わせたもので、
「これってどうやるんだっけ？」と思ったら、参考書を見てそのやり方を借りることができます。
つまり、自分の手作業が減り、早く内容を作れるようになります。
【例】
React:
ユーザーインターフェイス（UI）を作るのに特化したツールで、JavaScriptライブラリです。
コンポーネント指向という考え方があります。
ウェブサイトをボタンやメニューなどの小さな部品（コンポーネント）に分けて作ります。
このコンポーネントは他のページでも繰り返し使うことができるので、効率的にウェブサイトを作ることができます。
例えると、物語の「キャラクター作り」に特化した参考書。
何度も登場するキャラクターをコンポーネント化して、キャラクターを簡単に再登場させることができます。
フレームワーク(テンプレートがある本)
フレームワークは、本を作るためのテンプレートや構成ガイドです。
「目次はここに書く」「章ごとに内容を整理する」といった指示が書いてあります。
これに従えば、誰でもわかりやすい本が作れます。
自由度は少し下がりますが、効率が良く、失敗しにくいのが特徴です。
【例】
Next.js:
React の機能を拡張したフレームワークです。
サーバーサイドレンダリング（SSR）[1]と静的サイト生成（SSG）[2]という技術を使って、ウェブサイトの表示速度を高速化したり、検索エンジン対策（SEO）を強化したりできます。
ファイルシステムベースルーティング(特定のディレクトリにJavaScriptコードを配置すると、そのコードのファイル名がそのままURLとして適用され、URLとコードが自動的にひも付きます。)が備わっており、
Reactだけでは実現が難しい機能をもったアプリも開発できるようになります。
本に例えるなら、Next.jsは本を書くときの「理想的な章構成」を教えてくれるテンプレート。
たとえば「序章→目次→本編→あとがき」という流れを推奨してくれます。
pagesディレクトリにファイルを置くだけで自動的にルーティング（Webページ間の移動）が設定されます。
例: 本の目次が自動で作られるイメージ。
「1章：ホーム」 → /
「2章：お問い合わせ」 → /contact
拡張言語 (自動校正機能や追加機能付きノート)
拡張言語は、ノートや参考書に便利な機能が追加されたものです。
文章を書いている途中で「この文法は間違っていますよ」と教えてくれる自動校正機能などが追加され、バグが少なくなり工数が削減できます！
【例】
TypeScript:
オブジェクト指向型言語とも言われ、型定義をすることができます。
何が良いかというと、本来数値を入れるべきところに文字列が入っていると、「この単語は間違っています」と自動的にチェックしてくれるのです。
まとめ
- 基盤言語
白紙のノート（自分で自由に書けるけど、全部手作り） - ライブラリ
参考書や辞書（特定の作業を楽にする情報が詰まっている） - フレームワーク
テンプレートがある本（構成が決まっていて効率よく進められる） - 拡張言語
自動校正機能や追加機能付きノート（間違いを減らし、便利に書ける）
Discussion