フレームワークとは?今更聞けないWebフレームワークを始めから丁寧に

2016年2月26日 (2017年3月1日最終更新)
フレームワークとは?今更聞けないWebフレームワークを始めから丁寧に

フレームワークの基本やメリットやデメリット、よく使われるフレームワークの特徴についてまとめました。

目次
  1. フレームワークとは?
  2. フレームワークとは汎用的な機能群のこと
  3. フレームワークのメリットとデメリット
  4. フレームワークの具体例3つ
  5. Ruby on Rails
  6. React
  7. Bootstrap
  8. あとがき

フレームワークとは?

Web制作などのプログラミングでは、フレームワークを使うことが頻繁にあります。この「フレームワーク」という言葉、よく聞くのですが結局どういう技術のことなのでしょうか?フレームワークの基礎知識や特徴についてみていきましょう。

フレームワークとは汎用的な機能群のこと

フレームワークについては、Wikipediaで下のように説明されています。

プログラミングにおいて、一般的な機能をもつ共通コードをユーザーが選択的に上書きしたり特化させたりすることで、ある特定の機能をもたせようとする抽象概念のことである。(Wikipediaより)
プログラミングの熟練者が見ればわかるのでしょうが、ちょっと辞書的でイメージがわきませんよね。

かみ砕いて言うと、さまざまなシステム開発を効率化してくれる機能群、と表現できます。機能群だけではなく、ソフトウェアの骨組みまでを用意してくれているため、少ないコードで意図する機能やデザインが実現できます。それぞれのフレームワーク特有の書き方を学ぶ必要はあるのですが、プログラミングのビギナーにとって、とてもありがたいものなんです。

フレームワークにもさまざまなものがあります。例えば、WebサイトやWebアプリケーションなどのフロントエンドを実装するためのWebアプリケーションフレームワークや、プログラムのテストに特化したテスティングフレームワークなど。以降では、特に断りのない限りWebアプリケーションフレームワークについて解説していきます。

フレームワークのメリットとデメリット

フレームワークは便利だからといって、盲目的に使うことはあまりオススメしません。それは、フレームワークには良いところだけでなく欠点もあるから。フレームワークの魅力を最大限享受するためにも、フレームワークのメリットとデメリットについて知っておきましょう。

メリット

まずはメリットから。フレームワークの最大のメリットは、何と言っても生産性が向上できることでしょう。フルスタックなフレームワークの場合、すでに必要な機能群が準備されていることになります。フレームワークの書き方がわかっていれば、従来よりも圧倒的に速くプログラムがつくれます。

速いだけではなく、運用管理の工数・コストを減らすことにも効果があります。プログラミングの仕方は千差万別。同じ機能であったとしても、つくる人によってコードは変わってくるもの。これが原因でプログラムの運用管理が大変になることもよくあります。しかしフレームワークを使えばコードの書き方が統一されるため、個々人による違いを大幅に減らせるのです。機能追加や改修もし易くなり、バグが発生するリスクを減らすことにもつながります。

デメリット

次はデメリットです。まずあげられるのは、学習コストです。フレームワークはとても便利なのですが、フレームワーク特有のコードが書けなければいけません。つまり、プログラミング言語の書き方だけでなく、フレームワーク特有の書き方についても勉強が必要なのです。

また、フレームワークではコーディングの量を減らすことができると言いました。これはメリットでもあるのですが、裏を返せばデメリットとも言えます。仕組みがわかっていなくても、その機能を使うことができてしまうから。プログラミングの技術を上げたいのなら、フレームワークを使わない場合の書き方についても学んでおくと良いでしょう。

フレームワークの具体例3つ

さてフレームワークがどんなものか理解できたところで、よく使われるフレームワークを3つご紹介しておきましょう。

Ruby on Rails

image

Web関連のプログラミング言語の中ではめっぽう人気のRuby。Ruby on Railsは、Rubyのためのオープンソースのフレームワークです。「設定より規約」や「同じことを繰り返さない」などの設計思想は、他の言語やフレームワークへも影響しているほど世界的に評価されています。

Ruby on Railsを使っている企業としては、クックパッドWantedly価格.comなどが有名ですね。

React

image

Reactは、Facebookが開発したJavaScriptのフレームワークです。JavaScriptではGoogle製のAngularJSも有名なのですが、最近ではReactの名前を聞くことも多くなってきました。Reactの設計はFluxを用いていて、Webアプリケーションではフロント側の機能を担当します。Facebookで使われていることからもわかるように、規模の大きなアプリケーションに向いているフレームワークと言えます。

Reactは開発元のFacebookInstagramAirbnbなどで利用されています。

Bootstrap

image

Twitter社が公開しているCSSフレームワークです。CSSと聞いてわかるとおり、WebサイトやWebアプリケーションのレイアウトをするための機能が豊富に揃っています。代表的なものとしては、グリッドシステムがあります。Bootstrapでは画面を12分割しています。このグリッドレイアウトを使うことで、CSSのプログラミングに慣れていなくても、自由にページ要素を配置することができるのです。リキッドレイアウトにすることも可能で、スマホ対応などのレスポンシブデザインも簡単に実現できます。

Bootstrapの活用事例としては、ドットインストールQiitaSlideShareあたりが知られています。

あとがき

ご紹介した以外にもさまざまなフレームワークが知られていますが、それぞれ特徴が異なります。制作内容やリソースによっても最適なフレームワークは変わりますので、主要なフレームワークについてはおさえておくといいでしょう。

中西洋平
中西洋平
Web屋さん兼IT記事ライター。ピンとくるウェブサービスやガジェットを探すのが趣味です。どうぞよろしく。

関連記事