プログラミング

フレームワークとライブラリの違い【JavaScriptで解説】

こんにちは、もっちー(@mochi_bbb2)です。 WEBマーケティング会社でエンジニアとして働いてます。

 

今回はフレームワークに関する記事です。

仕事では『cakePHP』というPHPのフレームワークを使っています。

プログラミングの情報を調べていると、

  • ライブラリ
  • フレームワーク

という言葉がありますね。

2つの違いについて理解はしているのですが、すらすら説明しようとすると難しいので、調べてまとめてみました。

JavaScriptを例にしながら、ざっくりと記事にしたいと思います。

JavaScriptについて

JavaScriptとは、『Webページに複雑な機能をできるようにする』プログラミング言語です。

Webページの表示内容は、

  • HTML
  • CSS
  • JavaScript

で構成されていて、

『HTML』はマークアップ言語で、これを使って Web コンテンツに構造と意味を与えます。例えば段落や見出しや表を定義したり、ページに画像や動画を入れたりします。

『CSS』は HTML コンテンツに適用するスタイリング規則の言語です。例えば背景とフォントの色を設定したり、複数カラムにコンテンツをレイアウトしたりします。

『JavaScript』は動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるスクリプト言語です。

(公式サイトより引用)

ライブラリとは

ライブラリとは、『いろいろな機能をまとめて使えるようにしたもの』です

『jQuery』などが有名ですね。

素のJavaScriptで書くよりも、jQueryを使うことで、短くシンプルな書き方にすることができます。

例えば、”こんにちは”の文字色を変えたいときに、

<p id = "hello" style = "color:red;">こんにちは!<p>

 

JavaScriptだと

const hello = document.getElementById(hello);

hello.style.color = blue;

 

jQueryだと

$('#hello').css('color','blue');

のように1行で書くことが出来ます。

 

複雑な処理になるほど、シンプルに書けることの恩恵を感じやすくなります。

フレームワークとは

フレームワークは、『プロが用意してくれた Webアプリケーションの基本的な仕組み』です。

これをベースに開発することで、質の高いアプリケーションを作ることが出来ます。また、複数人で開発するときの保守もしやすくなります。

Javascriptの場合、

  • Vue.js
  • React
  • Angular

などがあります。

フレームワークとライブラリの違い

どちらもJavaScriptでの開発を効率よくしてくれることは間違い有りません。

これらの違いは、

フレームワーク

ルールに従って、プログラムを書いていく。そのプログラムを、フレームワークが呼び出して実行する。

ライブラリ

使いたい機能を探して、プログラムが動くように技術者がコードを書く。

だと思っています。

  • プログラムを書く技術者
  • フレームワークorライブラリ

どちらが全体に指示を出しているか、と考えると分かりやすいかもしれません。