Web制作するにあたってフレームワークは欠かせません
Web制作をするにあたってフレームワークを活用している方は多いと思います。デザインをする上で時間がかかってしまうのは否めませんが、フレームワークを使えば時間は短縮できます。知らない人はもしかしたら損をしているかもしれませんよ？今からでもフレームワークを学びましょう。
フレームワークってなに？
そもそもフレームワークってなに？という人は少なからずいると思います。フレームは枠、ワークは働き、枠で働くってどういうこと、という人のために簡単に説明していきましょう。Web制作にあたってはプログラミングを一から組み挙げる、というイメージのままでいる人もいるかもしれませんが、フレームワークとはプログラミングの手間を省き、効率的にページを制作できる技術のことを言うんです。
引用元：フレームワークとは？今更聞けないWebフレームワークを始めから丁寧にCode部 https://blog.codecamp.jp/web_framework
かみ砕いて言うと、さまざまなシステム開発を効率化してくれる機能群、と表現できます。機能群だけではなく、ソフトウェアの骨組みまでを用意してくれているため、少ないコードで意図する機能やデザインが実現できます。それぞれのフレームワーク特有の書き方を学ぶ必要はあるのですが、プログラミングのビギナーにとって、とてもありがたいものなんです。フレームワークにもさまざまなものがあります。例えば、WebサイトやWebアプリケーションなどのフロントエンドを実装するためのWebアプリケーションフレームワークや、プログラムのテストに特化したテスティングフレームワークなど。
引用元：フレームワークとは？今更聞けないWebフレームワークを始めから丁寧にCode部 https://blog.codecamp.jp/web_framework
フレームワークを使うメリットは？
一人だけでWebページを制作するならともかく、大抵のページは誰かと協働で製作しますよね。その際に誰かが主導になってプログラミングを一から組み立て、それに他の人が追随する、となるとプログラミングを覚える手間がかかります。そのため、フレームワークを導入すれば、一気にこうした手間は省かれ、統一した方針の下でページを作ることができるのです。
引用元：2.2 アプリケーションフレームワークによる開発 http://software.fujitsu.com/jp/manual/manualfiles/m130015/b1wd3157/02z200/b3157-00-02-02-00.html
Webアプリケーション開発は一人で行なう場合もありますが、ほとんどの場合は複数人で開発を行なうことの方が多いでしょう。その場合に各々の開発者がWebアプリケーションのライブラリを別々に実装することは、セキュリティ面などでWebアプケーション自体の品質を均一に保つことが難しくなり、またバグを発生させる確率も多くなるため、あまりよい方法とは言えません。 その点、Webアプリケーションフレームワークを導入すれば、開発者はWebアプリケーションフレームワークのクラス・ライブラリを通してWebアプリケーションを開発することになり、ある程度のコーディングルールが課されるため、品質の均一化、コード自体の保守性、拡張性を確保することができるようになります。
引用元：[ThinkIT] 第1回：Webアプリケーションフレームワークとは (2/4) https://thinkit.co.jp/cert/tech/9/1/2.htm
どんなフレームワークがあるの？
ふーん、それは便利そうだね。でもフレームワークを一から立ち上げるのも面倒だし、きっと専用のソフトみたいなものがあるんだろう？と思ったあなたは鋭いです。近年ではフレームワークアプリケーションが多数出ており、Webページの制作の効率化に一役買っているのです。
引用元：HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) – ＠IT http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html
Bootstrapは最近よく聞くCSSの「フレームワーク」といわれるものです。CSSの「フレームワーク」とはCSSの「枠組み・スタイルなど」をある程度最初から定義している、ライブラリファイルのようなものです。 もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」のみになりました。2014年3月19日の記事公開時現在の最新バージョンは3.1.1です。
引用元：HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) – ＠IT http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html
Foundation
先程のBootstrapはTwitterが制作したフレームワークでしたが、こちらの「Foundation」はMIT、マサチューセッツ工科大学が制作したフレームワークです。
引用元：レスポンシブ対応のCSSフレームワーク25選｜ferret [フェレット] https://ferret-plus.com/2783
http://foundation.zurb.com/Bootstrapと並ぶ人気の高いCSSフレームワークです。充実した機能が魅力的で、他では少し難しいレイアウトも可能という柔軟性の高さを持っています。機能面を重視したいという場合に重宝するフレームワークです。
引用元：レスポンシブ対応のCSSフレームワーク25選｜ferret [フェレット] https://ferret-plus.com/2783
HTML5 Boilerplate
引用元：HTML5のサイトが素早く作れるフレームワーク「HTML5 Boilerplate」をちゃんと触ってみた – WEBCRE8.jp http://webcre8.jp/use/howto-framework-html5boilerplate.html
Internet Explorerに完全対応しているため企業などでもしばしば使われている「HTML5 Boilerplate」も人気のあるフレームワークの一つです。
何も考えずにサイトトップのダウンロードボタンをダウンロードするだけでも全然良いと思います。そうした場合と、その横のGet a custom buildボタンを押して必要なパーツを指定した場合とで、ダウンロードファイルの内容が変わります。HTMLファイルだけでなく、アナリティクスコードやアイコンその他Normalize.css等の補助的CSSjQueryやModernizrパフォーマンスを高める設定ファイルといった各種ファイルのひな形がダウンロードできます。
引用元：HTML5のサイトが素早く作れるフレームワーク「HTML5 Boilerplate」をちゃんと触ってみた – WEBCRE8.jp http://webcre8.jp/use/howto-framework-html5boilerplate.html