【初心者向け】Python＋Flaskで初めてのWebアプリ開発

想定読者：PythonでWebアプリ開発をやってみたいけど、どうやっていいかさっぱりわからない。PythonとHTMLで作れる機能や作り方が知りたい。初心者向けに細かい解説などもはさんでやってほしい。

こんにちは。だんにこ（@dannikosu）です。

今回はPythonとFlaskを使って、Webアプリ開発をやってみようと思います。初心者向けなので、なるべく解説を入れつつ進めていきます。これからWebアプリ開発をしたい方用に進めさせてもらいますので、実際に手を動かしながら実践してみてください。

僕は業務内ですが、小規模のシステムを1人で作成経験があります。その時はFlask＋MySQL＋HMTL＋CSS＋Javascriptを使って作成し、勉強や調べ物をしながらなので3か月くらいかかりました。今回はその経験も生かして、解説していきます。 またPython関連の記事は以下になるので、気になる方はチェックしてみてください。

※自宅で学習できる０円のプログラミングスクールという近道
エンジニアの僕がおすすめするオンラインでしかも無料で学習できるプログラミングスクールをまとめてみました。独学に限界を感じ始めている方はオンラインプログラミングスクールおすすめですよ。

Python＋Flaskで初めてのWebアプリ開発

テキストエディタのインストールこれから実際にプログラミングを書いていくのですが、プログラムを作成するツールが必要になります。メモ帳でもいいんですが、文字に色が付いたり見やすいほうがプログラミングがはかどると思います。そこで、テキストエディタをインストールするのをお勧めします。テキストエディタもいろいろな種類があって、どれを選んだらいいか迷うと思います。そこで僕が使っているVisual Studio CodeとSublime Textの2つをご紹介します。

　Visual Studio Code

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

上記のような特徴があります。マイクロソフトが開発しているという面で安心感がありますね。ネームバリューがありますから。あとは無料。やはり無料は最強ですからね。ただのものは使っちゃいましょう。 デメリットは少し慣れるまで操作が難しい点があるかもしれません。でも慣れてしまえばメモ帳よりはるかに動作が早くなりますし使いやすいと思います。慣れるまでが一番の頑張り時なので、一緒に乗り越えましょう。

　Sublime Text

http://www.sublimetext.com/3

Visual Studio Codeに比べて圧倒的に軽い動作が見込めます。あと見た目がシンプルなので、とても使いやすいです。逆を言えば、必要最低限の機能しなかないので、自分でカスタマイズが必要です。あと無料版を使っていると、ライセンス版への誘導ウインドウがたまに出て来ますが、そんなに気にしなくても使用できるレベルです。

僕はSublimeTextを使っています。カスタマイズは少し大変ですが、カスタマイズも終われば、とても扱いやすいテキストエディタです。またこれを機にテキストエディタについても調べてみてください。

初めてのWebアプリ開発

では本題です。これからはWindows10を想定に話を進めていきます。別のOSの方は読み替えてください。まずは初めてのWebアプリということで、PythonとFlaskを使ってWebブラウザに文字列を表示させましょう。

　Flaskインストール

まずはコマンドプロンプトで以下を入力してください。
[crayon-67b509bd0ba89488717657/]
 

　データを保存するフォルダを作成

こちらは任意です。好きなフォルダを作ってもらっても大丈夫です。Cドライブに直接フォルダを作ったほうが必要以外触らないので安全かなと思い、以下のようにしております。フォルダ場所はお任せします。
[crayon-67b509bd0ba94423900536/]
 

　フォルダ、ファイル構成

作ったデータ保存場所に以下のようにproject1フォルダの中にhello.pyを作成してください。
[crayon-67b509bd0ba95179789131/]
 

　アプリの構築

hello.pyの中身です。テキストエディタで開いて、以下のように入力してください。
[crayon-67b509bd0ba97519430917/]
以下はプログラムの解説になります。

 
[crayon-67b509bd0ba98393914142/]
Flaskをインポートしています。Pythonではインストールしたものはインポートしないと使えないので、忘れずにインポートしましょう。

 
[crayon-67b509bd0ba99695318825/]
Flaskクラスのインスタンスを作って、appという変数に代入しています。変数に入れることで後々でプログラムが簡潔になるためです。

 
[crayon-67b509bd0ba9b336917142/]
ルートページの内容を記入していきます。ルートページとは作成するページの一番上位のページです。今回作成するページのaddressはhttp://127.0.0.1:8888/ですが、このページにアクセスしたのがルートページでこの下にどんどんページ内容を追加していきます。

 
[crayon-67b509bd0ba9c808427150/]
ルートページ内に関数を作成しています。単純に文字列を返す関数です。

 
[crayon-67b509bd0ba9d250670596/]

　アプリ起動

作成したアプリをコマンドで立ち上げます。コマンドプロンプト上でデータ保存フォルダに移動して、
[crayon-67b509bd0ba9e362887565/]
もしくは、
[crayon-67b509bd0ba9f592440714/]
を実行してください。すると、

上記画面で止まりますので、その後サイトにアクセスします。

　サイトにアクセス

インターネットブラウザでhttp://127.0.0.1:8888/にアクセス。

　結果

上記画面が表示されたら、正常に動作しています。

ちょっとホームページっぽくする。（テンプレートの使用）

次はHTMLファイルと連動させて、ちょっとホームページっぽくします。

　Jinja2インストール

テンプレートを使用するには、jinja2のインストールが必要です。
[crayon-67b509bd0baa0033389772/]
 

　フォルダ、ファイル構成

アプリファイル（hello.py）と同じところにtemplatesフォルダを作り、その中にhtmlファイルを入れるのが決まり。フォルダ構成を間違えないでください。
[crayon-67b509bd0baa2424766057/]
 

　アプリの構築
[crayon-67b509bd0baa4671010916/]
以下で部分的に解説をします。

 
[crayon-67b509bd0baa5157316303/]
render_templateを追加。

 
[crayon-67b509bd0baa6511844768/]
render_templateを使って、戻り値をhtmlへ変更。

 
[crayon-67b509bd0baa7734786775/]
 

　アプリ起動

作成したアプリを以下のコマンドで立ち上げます。前回と同様ですね。
[crayon-67b509bd0baa9457215228/]
 

　サイトにアクセス

http://127.0.0.1:8888/にアクセス。

　結果

上記画面のように、htmlファイルの中身が表示されれば、成功です。

テンプレートエンジン　Jinja2

　Jinja2使い方

先ほど、Jinja２をインストールしましたが、もう少し踏み込んだ使い方をお伝えします。

上記のものを使用することで、HTML上にPythonで定義した変数を使ったり、HTML上でif文やfor文が使用できます。

　フォルダ、ファイル構成
[crayon-67b509bd0baaa475549900/]
前回と同じです。

　アプリの構築
[crayon-67b509bd0baab790431640/]
以下で部分的に解説をします。

 
[crayon-67b509bd0baac113813266/]
Python上にHTMLで使用する変数を定義します。

 
[crayon-67b509bd0baae720224839/]
render_templateの第２引数以降、html用の変数と紐づけします。例えば、a1=array1はa1がHTMLの変数名で、array1はPython用の変数名です。

 
[crayon-67b509bd0baaf108545266/]
今回のHTMLでは、

こちらの使い方の例を表示しています。

 
[crayon-67b509bd0bab1763026991/]
{{ 変数名 }}の形で使用しています。

 
[crayon-67b509bd0bab2367448538/]
{% for %}
{{ 変数名 }}
{% endfor %}
の形で使用しています。 for文を使うことで、配列に入っている要素すべて表示が可能です。

　アプリ起動

作成したアプリを以下のコマンドで立ち上げる。
[crayon-67b509bd0bab3102885914/]
 

　サイトにアクセス

http://127.0.0.1:8888/にアクセス。

　結果

プログラムで使うif文やfor文をHTMLで使用することで、データを全部表示することができます。PythonファイルとHTMLファイルをよく見比べて、どういう流れでデータが移動しているかを確認してみてください。

HTMLを分割できる（レイアウト）

HTMLの最初と最後は他のページでも被る部分があります。重複をなくすために、同じところを一つにまとめようというのが今回の機能です。

　フォルダ、ファイル構成
[crayon-67b509bd0bab5530189467/]
 

　アプリ構築
[crayon-67b509bd0bab6701095697/]
今回のPythonファイルに関しては特に変わったことはしていないので、説明は割愛します。

 
[crayon-67b509bd0bab7315527993/]
以下で説明します。

 
[crayon-67b509bd0bab8051798955/]
ここでレイアウトファイルを指定します。

 
[crayon-67b509bd0baba735006767/]
これでHTML本体の内容を挟みます。

 
[crayon-67b509bd0babb496693100/]
以下で解説です。

 
[crayon-67b509bd0babc451530556/]
上記の通り、layout.htmlでは実際にhello.htmlが入る部分を

 
[crayon-67b509bd0babd324100458/]
これで囲みます。

　アプリ起動

作成したアプリを以下のコマンドで立ち上げる。
[crayon-67b509bd0babe156454523/]
 

　サイトにアクセス

http://127.0.0.1:8888/にアクセス。

　結果

HTMLページ追加、画面移動

HTML上でほかのページに移動できるようにしましょう。

　フォルダ、ファイル構成
[crayon-67b509bd0bac0303506115/]
 

　アプリ構築
[crayon-67b509bd0bac1588032352/]
以下で解説です。

 
[crayon-67b509bd0bac2511983009/]
1ページ目になります。いわゆるルートページ。アドレスはhttp://127.0.0.1:8888/です。

 
[crayon-67b509bd0bada166986888/]
2ページ目です。アドレスはhttp://127.0.0.1:8888/page2です。

 
[crayon-67b509bd0badb974410739/]
[crayon-67b509bd0badc191291381/]
page1とpage2はlayout.htmlを使って作成しています。ページ移動できるようにそれぞれのページにボタンを追加しています。

※layout.htmlは以前と同じです。

　アプリ起動

作成したアプリを以下のコマンドで立ち上げる。
[crayon-67b509bd0bade897053642/]
 

　サイトにアクセス

http://127.0.0.1:8888/にアクセス。

　結果

page1

page2

ログイン機能

ログイン機能を追加するために、flask-httpauthをインストールする必要があります。

　flask-httpauthをインストール
[crayon-67b509bd0badf738622943/]
 

　フォルダ、ファイル構成
[crayon-67b509bd0bae2258682026/]
 

　アプリ構築
[crayon-67b509bd0bae3293359146/]
以下で解説です。

 
[crayon-67b509bd0bae4399726044/]
import文でflask_httpauthを追加します。

 
[crayon-67b509bd0bae6003002879/]
authインスタンスを作成します。パスワード認証関連のインスタンスです。

 
[crayon-67b509bd0bae7017365302/]
ユーザーリストとパスワードリストを作成。簡単なデータベースを作成するイメージです。

 
[crayon-67b509bd0bae8234762614/]
パスワードを確認する関数。パスワードを受け取った時に、入力されたユーザーネームがユーザーリストに入っていれば、ユーザーネームを返すという流れです。もし入力されたユーザーがユーザーリストに入っていなければ、何も入っていないNoneを返します。

 
[crayon-67b509bd0bae9428170595/]
パスワードを確認したいページに@auth.login_requiredを追加します。今回はメインページに追加しています。

 
[crayon-67b509bd0baeb462771776/]
ログインエラー時のページ部分です。

 
[crayon-67b509bd0baec353022021/]
ログアウト時のページ部分です。

※layout.htmlは以前と同じです。

 
[crayon-67b509bd0baf6660307473/]
[crayon-67b509bd0baf7327463399/]
[crayon-67b509bd0baf8930392815/]
同じくlayout.htmlを使用して、それぞれのページを作成しています。

　アプリ起動

作成したアプリを以下のコマンドで立ち上げる。
[crayon-67b509bd0baf9571809164/]
 

　サイトにアクセス

http://127.0.0.1:8888/にアクセス。

　結果

ログイン画面

ログイン成功ページ

ログイン失敗ページ

ログアウトページ

まとめ：千里の道も一歩から

初めてのWebアプリ開発どうでしたか。うまく動作しましたか？動作しない場合はよく見比べてみてください。また動作しても、なんでこのプログラムでこのWebページが表示されるのかとかもっと疑問を持ったり、興味を持つことが上達の近道だと思っています。少しずつプログラムというものに興味を持って自分のペースで無理せず進めてみてください。

それでは、また。

※自宅で学習できる０円のプログラミングスクールという近道
エンジニアの僕がおすすめするオンラインでしかも無料で学習できるプログラミングスクールをまとめてみました。独学に限界を感じ始めている方はオンラインプログラミングスクールおすすめですよ。