フレームワークとは？言葉の意味からWeb制作に有効なものまで紹介

Web制作を学んでいると「フレームワーク」という言葉をよく耳にしますよね。

フレームワークの知識はWebサイトを作るうえでも、ステップアップしてアプリ開発に携わる中でも重要です。

当記事ではフレームワークについての種類や使い所、メリット・デメリットについてまとめています。

言葉の意味としては「枠組み」。Webサイトを作るうえでの骨格のようなイメージを持って利用することが多いです。

フレームワークとは？

「フレームワーク」とは、「枠組み」という意味の言葉です。

「フレームワーク」とは、Web制作や開発を効率化するために、よく使う構造やコードをあらかじめまとめた"ひな型"のようなものです。

フレームワークをサイト上で読み込み、決まった書き方をすることで、ボタンやナビメニューなどの要素を利用することが出来ます。

「Webサイト」という「家」を作るときの骨組み、枠組みといったイメージでいるとわかりやすいと思います。

フレームワークの種類

一言にフレームワークと言っても、言語ごとに沢山の種類があります。

また、フロントエンドフレームワークと、バックエンドフレームワークの二種類に大別され、Web制作のコーディング、デザインではフロントエンドフレームワークを主に扱います。

フロントエンドフレームワークで、CSSを扱っているもの、javascriptを扱っているものだけでも多数の種類があります。

フレームワーク？ライブラリ？CMS？

フレームワークとはまた違って、ライブラリというものがあります。ライブラリは「図書館」ですね。

サイトに必要な機能を部分的によそからもってくるイメージです。枠組みであるフレームワークとはまた違った使い方をされます。

有名なライブラリには以下のようなものがあります。

• jQuery
• Lodash
• Swiper

CMS(コンテンツマネジメントシステム)といったものもあります。

こちらはフレームワークとは違い、コードを書かずにサイトを作れたり、画像、レイアウトなどを一元管理するシステムです。

• WordPress
• microCMS

などがあります。

種類	役割	代表例
フレームワーク	サイト全体の構造やルールを提供	Bootstrap Tailwind React
ライブラリ	特定の機能を追加する部品	jQuery Swiper Lodash
CMS	コードを書かずにサイトを管理	WordPress microCMS

Web制作によく使われるフレームワーク

Web制作で実際に役立つフレームワークを紹介します。

実際に私自身も利用してサイトを作らせてもらったことがあります。

CSSのフレームワーク

• Bootstrap：クラシックで実績が多い
• TailwindCSS：最近人気のユーティリティファースト型
• Bulma：軽量、シンプル
• Materialize：Googleが提唱している「マテリアルデザイン」を準拠
• Skeleton：とても軽い
• Foundation：カスタマイズ性が高い・大規模プロジェクトにも対応

javascriptのフレームワーク

• React(顕密にはライブラリ)：需要が非常に高い
• Vue.js：学習コストが低い

フレームワークを使うメリット・デメリット

フレームワークを導入することには、たくさんのメリットがありますが、デメリットも存在します。

要素が決まっているため、大きくはみ出したデザインや少し崩れたデザインなどの再現がフレームワークだけでは難しくカスタマイズが必要になる場合があります。

また、同じルールで運用するため、似たようなデザインになってしまうことも多々。

下の画像のようなテンプレート集が多数あるのも特徴のBootstrapですが、使用したデザインはわかりやすいかもしれませんね。

個人的に感じる覚えるメリット・デメリット

独学でWeb制作を覚えた私から、フレームワークを覚えるメリットはいくつもあると思います。

• わかりやすい技術の証明になる
• 他のアプリやサイトを触りやすくなる
• クラス名の付け方、スタイルの当て方等の一般的なルールがわかる

Web制作ではできることが言語化しづらいです。

サイトを作れますと言ってもどんな？何ができる？と人に実際にコードを見てもらうまでハッキリとは分かりづらいです。

「フレームワークが使えます」と言えると、自分の技術を具体的に示せるようになります。

コードを見せなくてもスキルの目安になるため、ポートフォリオや案件獲得にも役立ちます。

また、人のサイトを調整、修正する際に既存フレームワークを使っているサイトの場合すぐに取り掛かることが出来ます。

決まったルールに従って直せばいいので人の作ったコードを触るとき、人に管理を任せるときなどに大きなメリットを感じますね。

また、独学で進めてきているとオリジナルなクラスの付け方だったり、マイルールで崩れたり…なんてこともよくありました。

一般的にどのようなクラス名をつけているのか、どんなルールがあるのかを知ることで人に見せられるきれいなサイトづくりにつながります。

実際に取り組んでみて感じたデメリットは

• 覚えるまで大変

これが大きいです。学習コストが高いというものですね。

ルールが決まっているということはルールを覚える必要があるのです。

まとめ

Web制作に関わる人間としてから見たフレームワークについてまとめてきました。

勉強し始めの頃はなんのことかもわからずにいましたが、知れば知るほど便利なものがあると実感します。

コーディングを独学で勉強してくるとフレームワークなんてなくてもWebサイトは作れてしまうので必要ないと感じてしまいますが

• 他の開発環境に飛び込むとき
• 一般的なコーディングルールを知りたいとき
• 技術力をアピールしたいとき

などに有効です。

ただ、しっかりと学習するには時間がかかってしまうので

• 必要に迫られたとき
• フレームワークの技術が必要な現場に飛び込みたいとき

に覚えればよいと思います。

主にWeb制作で使われるフレームワークは以下2点

• Bootstrap
• TailwindCSS

さらなるステップアップを狙う場合に覚えたいフレームワークは以下

• React
• Vue

他にも、たくさんのフレームワークがありますがあれもこれもと手を出していると学習コストが掛かりすぎてしまうため、ある程度絞って学んでいきたいですね。

2024年版ですがWebフレームワーク、ライブラリでよく使われているものです。上位ほどよく使われています。

参考|https://survey.stackoverflow.co/2024/

最後までご覧いただき、ありがとうございました。