Python

【入門初心者向け】PythonのフレームワークでWebアプリを開発する方法を徹底解説!

Webアプリ開発
ウマたん
ウマたん
本記事では、PythonのWebアプリケーションフレームワークを用いてWebアプリを開発していく方法を徹底解説していきます。実際にDjangoでの実装とFlaskでの実装をおこなっていったあと、勉強法についても見ていきましょう!

こんにちは!

消費財メーカーでデータ分析&デジタルマーケのお仕事をしているウマたん(@statistics1012)です。

Pythonというとデータ分析のイメージが強いですが、Pythonでは簡単にWebアプリケーションを開発することができます。

この記事では、そんなPythonで開発するWebアプリについてまとめていきたいと思います!

PythonでのWebアプリ開発に必要なこと

stories pc

PythonにはいくつかのWebアプリケーションフレームワークがありますが、ここではFlaskとDjangoの2つを使ってWebアプリを開発していきたいと思います!

ほかのPythonのWebアプリケーションフレームワークについては知りたい方は以下の記事をチェックしてみてください!

それではPythonでのWebアプリ開発に必要なことについて簡単にまとめておきましょう!

Webアプリケーションフレームワークの理解

当たり前ですが、この記事で学んでいくWebアプリケーションフレームワークの理解は間違いなく必要です。

また、その前手にPythonのそもそものある程度の理解が必要です。

もしPythonはほとんど触ったことがない・・・という方は是非以下の記事を見てみてください!

Python 勉強
【入門】初心者が3か月でPythonを習得できるようになる勉強法!当ブログ【スタビジ】の本記事では、Pythonを効率よく独学で習得する勉強法を具体的なコード付き実装例と合わせてまとめていきます。Pythonはできることが幅広いので自分のやりたいことを明確にして勉強法を選ぶことが大事です。Pythonをマスターして価値を生み出していきましょう!...

Pythonの0からの勉強法が学べます。

Pythonの基本を理解した上で是非FlaskとDjangoについて学んでいきましょう!

FlaskとDjangoの違いについてまずは簡単に知りたい方は以下の記事をご覧ください!

Flask Django
Flask vs Django!PythonのWebアプリケーションフレームワークを徹底比較!当サイト【スタビジ】の本記事では、PythonのWebアプリケーションフレームワークである「Flask」と「Django」の違いを徹底的に比較していきます!なんとなーく分かっているようで分からない2つのフレームワークの違いをこの機会にしっかりおさえておきましょう!...

データベース・Web・フロントエンドなどの知識

基本的にはPythonの構文が分かってFlaskやDjangoの特殊な記法について理解できればWebアプリを開発することは可能です。

ただ、データベースやWebの基本的な知識やHTMLやCSS・Javascriptなどのフロントエンド周りの知識も必要です。

どんなWebアプリを作りたいかという目標

また、なんとなくWebアプリを開発してみたいという心持ちでは続かないので、ぜひ何か自分で作りたいWebアプリのイメージを持っておきましょう。

そして、その上でそのWebアプリが実現する顧客体験や動線設計やデータの持ち方などもドキュメントに落としておくと開発がしやすいです。

本格的に業務で実装する際はもちろん要件定義やデータベース設計など必ずドキュメントにしておかないといけませんが、趣味レベルで開発する際もある程度のイメージはドキュメントに落としておきましょう!

PythonでのWebアプリ開発:Django編

Django

まずは、Djangoを用いてWebアプリを開発していきましょう!

Djangoとは

Djangoは2005年に開発されたDjangoのWebアプリケーションフレームワークで、デフォルトでWeb開発に必要な機能が一通り入っています。

Djangoは元々ニュースサイト管理のためにアメリカで開発されたフレームワークで、名前はギタリストから取ったそうです。

大規模サービス開発に向いていて2000企業ほどの企業に利用されています。

UGC型のインスタグラムやピンタレストなどに主に利用されています。

Django利用企業(引用元:https://stackshare.io/Django)

Djangoのドキュメントは以下です。

Python×DjangoでWebアプリを開発

それではDjangoでWebアプリ開発をしてみましょう!

ここでは、本当に基本の「Hello world」と表示されるWebサイトを作っていきます。

OS:MAC
開発エディター:Visual studio code

仮想環境作成

仮想環境を作らなくても問題ないですが、ライブラリのバージョンを管理するため仮想環境を作っていきます。

まずは、好きな名前のフォルダを作成しフォルダのディレクトリに遷移しましょう!

そして以下のコマンドをVisual studio code上のターミナルに記載して仮想環境を作っていきます。

これでmyvenvという仮想環境を作ることが出来ました。

仮想環境は開発するアプリケーションによってPythonのライブラリのバージョンを管理するために作ります。

続いて仮想環境に入っていきます。

以下のコマンドで仮想環境に入ることが出来ます。

必要なライブラリをインストール

仮想環境に入ったら、requirements.txtというファイルを作成し必要なライブラリをインストールしていきます。

これは、ライブラリを一括でインストールするためのファイルです。

厳密にはrequirements.txtである必要はありませんが、慣習でrequirements.txtが使われることが多くなっています。

必要最低限のライブラリを記載しておきましょう

Django==3.1.5
django-heroku==0.3.1
gunicorn==20.0.4

以下のように記述することで、記載したライブラリをインストールすることができました。

ちなみに以下のように記述することで現在の環境のライブラリを一括でrequirements.txtに記述して保存することができます。

普段使っている環境から新しい環境に同様のライブラリを適用される場合はこのように記述するとよいでしょう。

プロジェクトの作成

さて、ここから実際にDjangoでWebアプリ実装をおこなっていきます!

まずDjangoのプロジェクトを作成していきます。

mysiteという名称で作っていきましょう!

これにより以下のようにMysiteディレクトリが出来ます。

Django

続いて、settings.py以下の部分を以下のように変更しておきましょう!

【変更前】

【変更後】

続いて、この後作るアプリケーション名をsettings.pyのINSTALLED_APPSに記載しましょう!

今回はappという名前のアプリを作成していく予定なので、以下のように記述します。

続いてデータベースのセットアップを行っていきます。

これによりデータベースが作成されます。

db.sqlite3という名前でデータベースファイルが作成されているかと思います。

さて、それでは以下のようにサーバーを起動させてみましょう!

 

Starting development server at http://127.0.0.1:8000/

ターミナルに出力されたURLを開き以下のように表示されたらひとまず成功です。

Django チュートリアル

サーバーの起動はCtrl+Cで停止で止めることが可能です。

Appを作成

プロジェクトが立ち上がったのが確認できたのでアプリケーションを作成していきましょう!

ロボたん
ロボたん
プロジェクトとアプリケーションの違いは以下って??

プロジェクトとアプリケーションの違いは以下です。

プロジェクトとアプリの違いは何でしょうか? アプリとは、ウェブログシステム、公的記録のデータベース、小規模な投票アプリなど、何かを行う Web アプリケーションです。プロジェクトは、特定のウェブサイトの構成とアプリのコレクションです。プロジェクトには複数のアプリを含めることができます。 アプリは複数のプロジェクトに存在できます。
(引用元:Django公式サイト

複数のアプリケーションを束ねる存在がプロジェクトであるイメージです。

以下のコマンドでアプリケーションを作成していきます。

appという名前で作成しておきましょう!

appのディレクトリが出来ているはずです。

urls.pyを変更

Mysiteのurls.pyを開いて一部設定を変更します。

【変更前】

【変更後】

この部分の意味はトップドメインに遷移した場合はappフォルダのurls.pyファイルを参照してねという意味です。

さて続いて、その参照元となっているapp/urls.pyを作成していきましょう。

app/urls.pyはデフォルトでは作成されていないので、自分で作ります。

views.pyを修正

views.pyはappのファイルの中でユーザーのコールに対してどのテンプレートを出すかなど司令塔の役割をします。

サッカーで言うミッドフィルダーみたいな役割のファイルです。

ここには、以下のように記述します。

Djangoには簡単に表示をしてくれるテンプレートが用意されており、今回はその中からTemplateViewを使います。

ここでは、後ほど作成するapp/index.htmlを呼んでいます。

templatesフォルダにhtmlファイルを作成

templatesフォルダを作成し、そのさらに配下にappというフォルダを作成しましょう!

そしてその下にindex.htmlというファイルを作成します。

すなわちディレクトリ構造は以下のようになっています。

app/templates/app/index.html

この時アプリケーション名appと一致させたディレクトリ名にしましょう!

ロボたん
ロボたん
なんでこんな階層になるのー??
ウマたん
ウマたん
これはテンプレートのミスマッチをなくすためなんだ!

Django は、名前がマッチした最初のテンプレートを使用するので、もし 異なる アプリケーションの中に同じ名前のテンプレートがあった場合、Django はそれらを区別することができません。そのため、Django に正しいテンプレートを教えてあげる必要がありますが、一番簡単な方法は、それらに 名前空間を与える ことです。アプリケーションと同じ名前をつけた もう一つの ディレクトリの中にテンプレートを置いたのは、そういうわけなのです。
(引用元:Django公式サイト

index.htmlには表示したいhtmlを記載してあげましょう!

これで本当に基本的なアプリケーションが作成できました。

改めて

をしてみましょう!

Hello worldがしっかり表示されたら成功です。

ここまで出来れば、後はアプリケーションに肉付けをしていくだけです。

管理ユーザーを作成して管理画面に入る

一旦Ctrl + Cでサーバーを止めてあげましょう。

最後に管理ユーザーを作成して管理画面に入ってみましょう!

Djangoでは、管理画面がデフォルトで用意されていてユーザーの管理やデータの管理をすることができ非常に便利です。

ターミナル上で以下のように記載して管理ユーザーを作成します。

するとユーザー名・メールアドレス・パスワードを要求されるのでそれぞれ入力しましょう!

メールアドレスは入力しなくても大丈夫です。

入力が完了し、Superuser created successfully.と表示されたら管理ユーザーの作成成功です!

もう一度改めて、

でサーバーを起動してあげましょう!

URLのディレクトリにadminと追加してあげることで管理者用の画面に入ることが出来ます。

http://127.0.0.1:8000/admin/

ログイン画面に先ほど作成したユーザー名とパスワードを記入してあげれば完了です!

Django管理画面

ログインに成功すると管理画面が出てきます。

Django管理画面

ここからユーザーの管理などを行えますよ!

以下の記事でより詳しくDangoの実装についてまとめています。

Django heroku
PythonのDjangoを使ってWebアプリを実装しHerokuでデプロイしていくステップ こんにちは! 消費財メーカーでデータ分析・デジタルマーケティングをやっているウマたん(@statistics1012)です...

こちらの記事では、Herokuというサービスを使って他の人も見れるようにデプロイしていますよー!

PythonでのWebアプリ開発:Flask編

Flask

続いて、Flaskについて見てみましょう!

Flaskとは

Flaskは2010年にリリースされたPythonのWebアプリケーションフレームワークで、軽量で実装できる機能が必要最低限に収まっていことが特徴です。

ちなみに開発者のArminはエイプリルフールのジョークとして世にリリースしたそう。

だけど反響が大きくてこれだけ有名になってしまったんだそう。

FlaskではJinja2というテンプレートエンジンを用いていて特殊な記法を用いることで簡易的にWebアプリケーションを開発することが可能。

ちなみに簡易的なフレームワークとはいえ、様々な企業が実際に利用しています。

有名どころだと、あのネットフリックスもFlaskを用いてWebアプリケーションを開発しています。

Flask利用企業

(引用元:https://stackshare.io/flask

他にも800以上の企業に利用されています。

Python×FlaskでWebアプリ開発をしてみよう!

先程Djangoでは簡単なHello worldを出力するWebアプリを作りましたが、Flaskでは、もう少し複雑な処理させてみたいと思います。

ここでは、

数値を入力したら有意差を算出してくれるWebアプリケーションを作成していきます。

データのやり取りや有意差計算を行うのはPythonになりますが、表示する画面を作るのはHTML・CSS・Javascriptになります。

Ajaxで非同期にデータをサーバーサイドに渡しPythonで有意差計算をしてクライアントサイドに戻し表示するという流れになります。

そして、有意差計算のための数値を入れる画面をHTML・CSS・Javascriptを使って作ります。

Pythonでのロジック実装

PythonのFlaskを使ってロジックを作っていきます。

以下がコードになります。

順番にコードを見ていきましょう!

こちらはFlaskを定義する部分。おまじないみたいなモノです。

最終的にここで定義したncをrunしてWebアプリケーションを走らせていきます。

続いて@nc.routeでルートを指定します。Webサイトで言うURLにあたります。

ここでsig.htmlという画面表示部分をレンダリングしています。

sig.htmlについては後で見ていきましょう!

この部分では、画面上で入力してもらった数値を動的にAjaxでPOST形式でサーバーサイドに送信しています。

今回はAとBのパターンの有意差はカイ二乗検定を行って算出しています。

WebマーケティングでありがちなメールのABテストなどを行えます。

画面を表示する部分を作成する

ロジック部分が出来上がったので、続いてWebアプリケーションの表示部分を作っていきます!

コードは以下です。

ここでは、簡単に見やすいUIを作成することの出来るBootstrapというフレームワークを使っています。

HTMLやCSSの細かい知識がなくても比較的簡単に綺麗な画面を作成することができますが、ある程度の知識は必要です。

BootstrapはTwitter社が作成したフレームワークです。

Flaskのルールとして、HTMLファイルはPythonファイルと同じディレクトリ内に「templates」という名前のファイルを作成し、その中に格納しておかなくてはいけませんので注意しましょう。

CSSファイルやJSファイルは「static」ファイルに入れる必要があるのですが、今回はHTMLの中で全て完結させたので問題ありません。

デプロイはHerokuを使っておこないました。

heroku
herokuを使ってPythonのflaskで作ったアプリケーションをデプロイする方法と注意点!当サイト【スタビジ】の本記事では、PythonのWebフレームワークであるFlaskを使って作成したWebアプリケーションをインターネット上に公開するためにHerokuというサービスを使ってデプロイしていきます。Herokuを使えば簡単にWebアプリケーションを公開することが可能なんです。...

→有意差アプリケーション

※少し読み込みに時間がかかる場合があります

こちらのFlaskの実装に関しては以下の記事でより詳しく解説しているのでぜひチェックしてみてください!

macとsurface
PythonのFlaskで簡単なWebアプリケーションを作ってみよう!当サイト【スタビジ】の本記事では、Pythonの軽量WebアプリケーションフレームワークであるFlaskを使って簡単なWebアプリケーションを作成していきたいと思います。Pythonを開発言語としても使えるようになると、幅が広がりますよー!...

PythonでのWebアプリ開発のおすすめ勉強法

pc python

ここまででPythonでのWebアプリ開発についてDjangoとFlaskでの実装をまとめてきました。

最後にWebアプリ開発をより学んでいくためには、HTMLやCSS・Javascriptなどのフロントエンドの基礎を学び、Pythonの基礎を学び、基礎固めをしたあとにDjangoやFlaskなどの実装を学んでいく流れがスムーズです。

フロントエンドを学ぶ

まずは、フロントエンドを学んでいきますが、プログラミング学習においてコスパよく学ぶのであればUdemyが圧倒的におすすめです!

Udemy コース

Udemyは世界中の専門家が様々なコースをアップロードしている世界最大の教育プラットフォームです。

良質なコンテンツが格安で提供されているので非常におすすめなんです!

HTMLやCSS・Javascriptなどの基本的な知識であれば以下の講座がおすすめです。

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

Udemy フロントエンド
【オススメ度】
【講師】Webエンジニア兼経営者
【時間】9時間
【レベル】初級

講師はWebエンジニア・UXデザイナーでありながら経営者であり、様々な書籍執筆や講演をこなす谷口さん。

HTML/CSS/Javascriptについて分かりやすく学べるので非常におすすめです!

\30日間返金無料/

Pythonのできることから開発の触りまで学ぶ

手前味噌ですが、まずPythonについて理解してみるのにオススメなコースを僕自身が出しています!

【実践】ビジネスケースとつなげてPythonで出来ること5つを学べる3日間集中コース

Udemy python
【オススメ度】
【講師】僕!
【時間】3.5時間
【レベル】初級~中級

Pythonで出来ることのうち以下の5つを網羅して学んでいきます。

・データ集計・加工・描画
・機械学習を使ったモデル構築
・Webスクレイピング
・APIの利用
・Webアプリケーション開発

データ集計・加工・描画と機械学習モデル構築に関してはKaggleというデータ分析コンペティションのWalmartの小売データを扱いながら学んでいきます。

WebスクレイピングとAPI利用とWebアプリケーション開発に関しては、楽天の在庫情報を取得してSlackに自動で通知するWebアプリケーションを作成して学んでいきます。

Pythonで何ができるのか知りたい!という方には一番はじめにまず受けていただきたいコースです!

Twitterアカウント(@statistics1012)にメンションいただければ最低価格の1200円になる講師クーポンを発行いたします!

\30日間返金無料/

Djangoを学ぶ

Djangoを学ぶのであれば以下の講座が圧倒的に分かりやすくておすすめです。

【徹底的に解説!】Djangoの基礎をマスターして、3つのアプリを作ろう!

Udemy Django
【オススメ度】
【講師】CODOR代表取締役CEO
【時間】19時間
【レベル】初級~中級

基本的な部分から分かりやすく解説してくれるUdemyの中でもオススメの講座です。

To do アプリや社内SNSアプリを作っていきます。

また、VPSサーバーを借りて実際に作成したアプリケーションをデプロイしていく過程も学ぶことが出来るので非常に勉強になるコースです。

\30日間返金無料/

Flaskを学ぶ

またFlaskであれば以下の講座がおすすめです。

【画像判定AIアプリ開発・パート1】Tensorflow・Python・Flaskで作る画像判定AIアプリ開発入門

Udemy コース AIFlask
【オススメ度】
【講師】起業家AIエンジニア
【時間】3.5時間
【レベル】中級

Flaskを使って画像分類のWebアプリケーションを作っていきます。

名物講師の井上さんのコースです。

さらに最終的にはXcodeでiOS化も行っていくという盛りだくさんのコース

ディープラーニングとFlaskでの開発を同時に学べるお得な内容になっていますよー!

レベルは少々高いですが実用的なおすすめのコースに仕上がっています!

\30日間返金無料/

 

Udemyのおすすめプログラミングコースは以下の記事でより詳しくまとめています。

Udemy プログラミング
Udemyのおすすめプログラミングコース17選!【言語別に厳選】当サイト【スタビジ】の本記事では、世界最大の教育プラットフォーム「Udemy」のコースを大量に受講している僕が言語別のプログラミングオススメコースを紹介していきます!Udemyはプログラミングを学ぶのにうってつけのサービスです。たくさんのコースの中から厳選して紹介していきますよ!...

PythonでのWebアプリ開発まとめ

ここまででPythonでのWebアプリ開発についてDjangoやFlaskでの実装から勉強法までをまとめてきました。

PythonでWebアプリ開発ができるようになると世界が広がります。

ぜひここでまとめてきた内容を振り返ってPythonでのWebアプリ開発をおこなってみましょう!

以下の記事でPythonの勉強法についてまとめていますのでぜひ参考にしてみてください。

Python 勉強
【入門】初心者が3か月でPythonを習得できるようになる勉強法!当ブログ【スタビジ】の本記事では、Pythonを効率よく独学で習得する勉強法を具体的なコード付き実装例と合わせてまとめていきます。Pythonはできることが幅広いので自分のやりたいことを明確にして勉強法を選ぶことが大事です。Pythonをマスターして価値を生み出していきましょう!...

またWebアプリ開発以外のPythonでできることについては以下にまとめています。

Pythonでできること7つをコード例をまじえてまとめておく!当サイト【スタビジ】本記事では、Pythonでできることを7つまとめていきます!!Pythonで何ができるのか分からない状況から深い理解にもっていきますよー!実際にPythonでの実装例や勉強方法も取り上げているのでぜひご自分の環境で手を動かして実装してみてくださいね!...

そしてやはりPythonの強みである機械学習実装に関しては以下の記事でまとめていますのでぜひチェックしてみてください!

機械学習
【入門】機械学習のアルゴリズム・手法をPythonとRの実装と一緒に5分で解説!当サイト【スタビジ】の本記事では、入門者向けに機械学習についてカンタンにまとめていきます。最終的にはどのように機械学習を学んでいけばよいかも見ていきます。細かい手法の実装もPython/Rを用いておこなっていくので適宜参考にしてみてください。...
Pythonを初学者が最短で習得する勉強法

Pythonを使うと様々なことができます。しかしどんなことをやりたいかという明確な目的がないと勉強は捗りません。

Pythonを習得するためのロードマップをまとめましたのでぜひチェックしてみてくださいね!