検索結果0件」

    【PG】「ライブラリ」と「フレームワーク」の違い【道具と道具箱】

    【PG】「ライブラリ」と「フレームワーク」の違い【道具と道具箱】

    こんにちは、シンヤです!
    先日、以下のツイートをしました。

    そういえばブログを書いていて気付いたのですが、「ライブラリ」と「フレームワーク」の違いってわかりづらいですよね
    話の流れで上記を整理していたのですが、改めてブログとして別記事を書いて、上記の違いを説明した記事を書いてみようと思います😀

    こちらのツイートについて、深掘りして解説していこうと思います。


    「道具」と「道具箱」みたいな関係

    プログラミングの概念を理解するために、「ライブラリ」「フレームワーク」の違いをまず解説いたします。

    • ライブラリ
      • Webの画面を作るための道具の一つ
    • フレームワーク
      • ライブラリを使い、すぐにWebアプリが作れるように整理された道具箱

    というのが、イメージしやすいかと思います😊
    このブログに使われている、「React.js」「Gatsby.js」の関係性を整理すると・・・

    • React.js:ライブラリ
    • Gatsby.js:フレームワーク

    つまり「Gatsby.js」は、「React.js」というライブラリを使い、Webアプリ作りがすぐ行えるように作られた、フレームワークということになります😀

    このライブラリとフレームワークの違いにも、明確なメリットデメリットがあります。

    ライブラリ
    メリット デメリット
    別の言語で動いている、既存のシステムにも組み込むことができる(例えば、Rails + React.js など)。 Webの画面を作るだけなので、SSRやその他必要な機能は、自分で作らないといけない。
    フレームワーク
    メリット デメリット
    予め必要な機能が揃っているので、すぐにWebアプリ作りを行うことができる。 決められた通りにしか動かないので、既存のシステムに組み込むことはできない。

    上記を加味して、それぞれのメリットを一言で表すと・・・

    • ライブラリ
      • どのシステムにも組み込めるので、柔軟な使い方ができる
    • フレームワーク
      • 必要最小限な設定を変えるだけで、すぐにWebアプリを作ることができる

    という感じになります。
    Gatsby.jsのようなフレームワークの場合、SSRやその他Webアプリを作るために必要な機能が、予め組み込まれています。

    ライブラリを使ってWebアプリを作る場合、Webアプリ作りに必要な機能は、別途実装しないといけません😅


    ライブラリとフレームワークの紹介

    ここからは小話として、代表的な「ライブラリ」「フレームワーク」をご紹介いたします。

    ライブラリ

    React.js Vue.js
    Facebook製。
    「JSX」という特殊な記法でコードを書いていく。
    コードの書き方が生のJavaScriptに近いので、他の技術に転用がしやすい。
    個人開発。
    HTMLに近い書き方でコードを書いていく。
    学習コストが低いので、初学者の方でもすぐWebアプリ作りができる。

    フレームワーク

    React.js製

    Next.js Gatsby.js
    リリース当初からSSRをサポートしており、ページ毎のmetaタグを簡単に変えられたり、カスタマイズをすればブログを作ることも可能。 SPAでブログが作れることが特徴で、WordPressのようにプラグインによるカスタマイズや、テーマ機能でデザインを変えることも可能。

    Vue.js製

    Nuxt.js VuePress
    Webアプリ作りに特化。
    Vue.jsの簡単さはそのままに、SSRやmetaタグの簡単な変更もサポートしている。
    ブログ作りに特化。
    複雑な設定の変更をしなくても、Markdownを書くだけでブログ記事を作ることができる。

    まとめ

    • ライブラリは「道具」フレームワークは「道具箱」
    • ライブラリやフレームワークには、それぞれ特徴がある

    以上になります。
    ではでは、またね〜🤗

    • 【PG】「ライブラリ」と「フレームワーク」の違い【道具と道具箱】