プログラミングにおけるフレームワークとは？特徴と使い方、コードの具体例を解説！

2021.03.26 株式会社システムインテグレータ

フレームワークとは「全体の処理の流れがある程度決められている開発ツール」です。Webアプリやスマホアプリを作る際、自分で１から作っていくと非常に時間がかかります。それを解消してくれるのがフレームワークです。

本記事ではフレームワークの概要について、主にWebフレームワークを中心にご紹介した後、イメージをより鮮明にするため、フレームワークがどんな動きをするのかまでお見せします。

フレームワークを使いこなして、爆速でアプリ開発できるようになりましょう！

フレームワークとは

突然ですが、もしも今からブログ機能を持つアプリケーションを１つ作れと言われたら、どうやって作りますか？一度でもアプリを作ったことがあれば開発の流れはつかめていると思いますが、一度も作ったことがない方は恐らく頭が真っ白になるのではないでしょうか？何から手をつければ良いかも分からず、途方にくれるはずです。なぜなら、プログラミングというものは非常に自由で、縦にも横にも広がっている世界だからです。

理論上、プログラミングができればあらゆるシステムやアプリケーションが開発できます。しかし、あまりに自由すぎると逆に何もできなくなるものです。

この問題を解決するのが「フレームワーク」です。

フレームワークは「枠組み」や「骨組み」「構造」といった意味を持つ言葉で、あまりに自由すぎるプログラミングの世界に一定のルールや制限をつけてくれます。フレームワークはインターネット上にいくつも存在しているので、自分が作りたいアプリを作れるフレームワークを選ぶことで、アプリ開発のゴールまで最短距離で導いてくれます。これがフレームワークを使う利点です。

ライブラリとの違い

似たようなシステムにライブラリが存在しますが、フレームワークが枠組みやルールによって開発をスムーズにできるようにするものなのに対し、ライブラリは「システム内の要所要所で使える便利なシステム群」というニュアンスです。

「フレームワークはシステム全体の枠組み」、「ライブラリは小さなシステム」と覚えておくと良いでしょう。

詳しい内容はこちらに記載しています。
ライブラリとは？特徴と使い方、具体例について解説します。

Webフレームワークとは

Webフレームワークとは、Webを使ったシステムやアプリケーションの開発に向いているフレームワークです。

単にフレームワークと言うと、たいていの場合はWebフレームワークを指していることが多く、有名なプログラミング言語には基本的に公式・非公式問わず用意されています(フレームワークはその言語の開発者以外の第三者でも作れます)。

Webフレームワークの最も基本的な部分はHTTP通信の制御です。HTTPを通してWebサーバーに必要なデータをリクエストし、そのレスポンスを取得し返却することがコアとなっています。ですが、それだけでは味気ないので、ほとんどのWebフレームワークには以下の機能がアタッチされています。

モデル(Model)：POSTされたデータをデータベースへ保存する
ビュー(View)：取得したhtmlを画面に表示する
コントローラー(Controller)：HTTPリクエストを受け取り、モデルやビューに命令を出す

また、この3つの枠組みを持ったWebフレームワークのことを「MVCフレームワーク」と言います。

Webフレームワークの種類

基本的にプログラミング言語ごとにフレームワークは存在しますが、ここではPythonのWebフレームワークをご紹介します。

Flask

Flask(フラスク)は最小限の機能でシンプルなWebアプリケーションを開発する場合に優れたWebフレームワークです。

Flask公式で、最小限の機能だけを持ったフレームワークのことを「マイクロフレームワーク」と呼んでいます。

Django

Django(ジャンゴ)はWeb開発におけるあらゆる機能が備わっているWebフレームワークです。そのようなフレームワークのことを「フルスタックフレームワーク」と呼びます。

また、Djangoは完全にではありませんが、MVCフレームワークに近い機能を持っていて、それぞれの機能ごとにコードを分割し、整理整頓されたソースコードを記述できます。

Webフレームワークを使ってみる

より深くWebフレームワークを理解してもらうため、ここではFlaskを使ってどのようにアプリケーションを作っていくのかのデモンストレーションをしていきます。今回はボタンを押したら数値が１ずつ増えていく、シンプルなカウンターを作成します。

FlaskはWebフレームワークですが、ライブラリとしてもインポート可能です。

コードは以下の通りです。

コード(main.py)：

from flask import Flask, render_template, request, redirect, url_for
import os

app = Flask(__name__)

@app.route('/')
def index():
return render_template("index.html", counter=0)

@app.route('/plus', methods=["POST"])
def plus():
counter = int(request.form['counter']) + 1
return render_template("index.html", counter=counter)

app.run(debug=True, host=os.getenv('APP_ADDRESS', 'localhost'), port=8001)

色々書いていますが、重要なのは@app.routeです。@app.route(‘/’)は「http://localhost:8001/」を指定することでその下のindex関数を動作させることができます。同じく’plus’の方は「http://localhost:8001/plus」を指定することでその下の関数を動作させられます。

つまり、URLに応じてどの処理を呼ぶのかをルーティングしています。index()はindex.htmlを開いています。その際にcounterという変数に0を代入して渡しています。plus/はjavascript側から送られてきたcounterに1を足して、index()と同じようにindex.htmlを開きます。

index.htmlはこのようにしました(body部のみ抜粋)。
index.htmlは、main.pyの横にtemplatesディレクトリを作成して保存しましょう。

コード(index.html)：

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8" />
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
</head>

<body>
<form name="f" method="post">
<p>count:</p>
<button type="button" name="btn_plus">+1</button>
<input type="hidden" name="counter" value="">
</form>
<script>
$(document).ready(function(){
$('button[name="btn_plus"]').click(function() {
$('form[name="f"]').attr('action', '/plus');
$('form[name="f"]').submit();
});
});
</script>
</body>

</html>

簡単に説明すると、にはindex()やplus()から渡されるcounter変数が入ります。また、+1ボタンを押すとhttp://localhost:8001/plusでリクエストするようになっています。これで実装は終わりです。このプログラムを実行してhttp:localhost:8001/をリクエストすると、次の画面が表示されます。

プログラミングにおけるフレームワークとは？特徴と使い方、コードの具体例を解説！ 1