この記事では「Flaskを使ったWebアプリ(Todoアプリ)の作り方」を分かりやすく紹介していきます。Flaskの日本語情報は少ないので、この記事が間違いなく役立つはずです!この記事を読めば、Python初心者でもFlaskを使ったWebアプリを作成できるようになりますよ。動画版:Flask入門コース本記事で紹介するFlask入門は、YouTubeで動画をアップしています。テキストだと動きが分かりづらいので、初心者であれば動画を使って学習するのがオススメです。独学に役立つLINE配信Python独学のコツや役に立つ情報を配信するLINEアカウントを作りました!いまなら学習に役立つ限定音声コンテンツ73本や、YouTubeで使えるソースコードをプレゼントしています。Webアプリを作るための準備をするまずは、Flaskアプリを作成するための準備をしていきましょう。やることは以下のとおりです。必要なライブラリのインストール一つずつ解説していきます。今回はデスクトップにflask-todo-appという名前でフォルダを作成しましょう。フォルダの作成が完了したら、VSCodeを起動してflask-todo-appを開きます。ここで、エディター内のターミナルを開いて現在地を確認しておきましょう。cd僕はMacを使っていますので、以下のようになります。/Users/hayato/Desktop/flask-todo-appこれでフォルダ作成の準備が完了しました。次に仮想環境を作成していきます。先ほど起動したエディタ内のターミナルで、以下のコマンドを実行しましょう。envもしvirtualenvが入っていなければ、以下のコマンドでインストールします。envを実行してみてください。無事にvirtualenvを実行できたら、フォルダが作成できたか確認します。dirコマンドを実行した結果、envというフォルダを確認できれば大丈夫です。envこれで仮想環境を作成できました。必要なライブラリのインストール今回のWebアプリ開発では、以下のライブラリが必要です。データベース操作に使います。上記のライブラリをインストールしていきましょう!と言いたいところですが...、まずは仮想環境を有効化する必要があります。以下のコマンドをターミナルに入力して、仮想環境を有効化しましょう。env\Scripts\activate仮想環境を有効化できると、ターミナルの見た目が少し変わります。それでは下記コマンドをターミナルに入力して、ライブラリをインストールしましょう。ライブラリ」と表示されます。version...」という警告が出てきたら、指示されているとおりにpipをアップグレードしてあげましょう。pip上記を実行したところ、僕はpipのバージョンが20.1→20.2.3に変更されました。Worldを表示するアプリを作成してみましょう。app.pyの編集app.pyというファイルを作成して、以下のコードを書いてみます。app.run(debug=True)ここまで書いたら、以下のコマンドでPythonファイルを実行します。app.pyまた、Pythonを実行するときは、Pythonのインタプリタが、先ほど作成した仮想環境になっているか確認しましょう。envになっていない場合には、赤枠をクリックすれば下のような画面になります。そこからenvのPythonを選んであげましょう。実際にPythonファイルを実行すると、以下のような出力になるはずです。※途中で出ているWARNINGは、「開発モードになっているから、本番では注意してね!」って意味です。今は気にしなくて大丈夫ですよ。正常に起動できたら、ブラウザでlocalhost:5000にアクセスしましょう。Worldと書かれた画面が出てくるはずです。Worldアプリが完成しました。10行のコードでアプリを作成できるので、Flask恐るべしですね、、、。Worldが表示されているページのHTMLを見てみると、以下のようになっています。Worldが書かれている状態ですね。World'と書いていたので、当たり前といえば当たり前です。それでは、以下のようにコードを変更すると、どうなるでしょうか。Worldを<h1>タグで囲ってあげました。これを保存して、ブラウザをもう一度確認してみたいと思います。Worldが見出しになって表示されるようになりました。HTMLを確認しても、<h1>タグで囲まれていることが分かります。「returnの後にHTMLを書くと、ページを作成できる」ということが分かりました。Pythonはバックスラッシュを使えば文字列の改行ができますので、returnの後にひたすら文字列を書いてページ作成することが可能です。render_templateを使って、HTMLを表示するHTMLタグを含んだ文字列を書いてあげれば、物理的にはページ作成できることが分かりました。Pythonファイルに、HTMLの文字列を書き連ねるのは得策ではありません。フロント部分はHTMLファイルに書き、PythonではHTMLファイルを表示するバックエンドの処理だけ書いてあげるのが望ましい形です。いうわけで、まずはHTMLファイルを作成してあげましょう。新しくtemplatesというフォルダを作成して、その中にindex.htmlを作成します。フォルダを作成していきましょう。VSCodeで以下の部分をクリックすれば、フォルダを作成できます。作成したフォルダを右クリックして、新しいファイルを作成しましょう。index.htmlの中身には、以下を書いてあげます。※return後に書いていたことを、HTMLファイルで書き直しただけです。World</h1></body></html>ここまで書けたら、後はPythonで表示するロジックを書くわけですが、そのためにはrender_templateを使ってあげます。Pythonファイルの中身を、以下のように書き換えてあげましょう。app.run(debug=True)render_templateをインポートして、少し変更を加えました。これで、もう一度Pythonファイルを実行してみましょう。※すでに実行済みなら、保存してブラウザ更新で大丈夫ですそうすると以下のように、HTMLファイルを表示する形に変更できているかと思います。分かりづらければ、HTMLファイルの中身を少し変更してみましょう。</body></html>変更を保存して、ブラウザを更新してみます。上のように、変更がしっかりと反映されていることが分かりますね。これで、HTMLを表示する部分が完成しました。アプリ作成らしくなってきましたね。you」と書かれたページを追加で準備したいとき、どんなHTMLを書くでしょうか。思いつくのは、以下のようなHTMLを記述することですよね。you」が表示されるページを作成できます。これって、少し冗長になってしまいますよね。いうのも、先ほど書いていたコードと見比べてみると明らかです。you」を表示するコードを見比べてみました。すると、1行違うだけで、ほぼ同じコードであることが分かります。言い方を換えると、<h1>タグ以外は同じ構造を持つということです。このような場合に、Flaskでは基盤になるHTMLを準備して、そのファイルを他のHTMLに継承させることができます。Pythonで言えば、Classに似ていますよね。基底クラスを準備して、そのクラスを継承するイメージです。いうわけで、さっそく基盤になるテンプレートを準備していきましょう。base.htmlを作成して、いまindex.htmlに記述していた内容を書き写したいと思います。要するに、以下のような状況になっています。この状態から、以下のようにコードを書き換えます。%}</body></html>変更した点は、以下のとおりです。World</h1>を削除したこうすることで、基盤になるHTMLファイルを作成することができました。あとは、何も書かれていないindex.htmlを編集していくだけです。以下の5行を書いてみましょう。app.pyを実行し)て表示を確認してみます。すると、このように「extended!!!」が表示されているはずです。ページのHTMLを見てみると、base.htmlで書いていた内容を、しっかりと反映できていることが分かります。今後、色々なHTMLファイルを追加していきます。そのときも同様に、base.htmlを拡張してあげれば、少ないコードでページを追加できるってわけですね。データベースの準備Todoアプリに書いたタスクを保存しておくために、データベースを準備していきましょう。今回作成するTodoアプリでは、以下のようなデータを持っておきたいと思います。基本的に、今回に限らず必要になります。タスクに名付けるタイトルです。タスクの詳細部分を書いていきます。タスクには期限も設けておきましょう。他に追加できる、もしくは変更できる点があると思います。その辺りはご自身で好きにアレンジを加えてみてください。データベースには色々な種類がありますが、今回はSQLiteを使っていきます。※SQLiteについては、今回のスコープ外とさせてください。ネット上に、参考になる記事がたくさんあります。それでは、データベースの準備をしていきましょう。app.pyに以下のコードを追加します。app.run(debug=True)コードを増やした部分だけピックアップすると、以下のとおりです。SQLAlchemy(app)このflask-sqlalchemyは、Flaskと一緒にインストールしておいたライブラリです。flask-sqlalchemyを使うと、Pythonオブジェクトのようにデータベースを扱うことができます。実際に、データベースの項目定義をおこなっていきましょう。以下のコードを、app.pyに追加します。nullable=False)どこに追加すれば良いのか分からない方向けに!コードの全体像は、以下のようになります。app.run(debug=True)上記のとおりです。追加した部分を、少し深掘りします。SQLAlchemy(app)上記を書くことで、todo.dbという名前のデータベースを設定しています。データベースの作成をしたときには、todo.dbという名前になるってことですね。そのあとで、SQLAlchemy()内にappを入れて、dbを生成します。nullable=False)データベースで使う項目は、Pythonのクラスオブジェクトで定義できます。それぞれの項目は、以下のように設定しました。整数値で設定しています。主キーに設定しました。30字以内の文字列で設定しています。空にするのはNGです。100字以内の文字列で設定しています。こちらは空でもOKです。日付型で設定しています。