ぴよ丸水産

週末ファゴッティストによる技術ブログ

【Python】プログラミング初心者がFlaskでPythonをかじってみた話 環境準備編

この記事で結論何が言いたいか。
FlaskはPythonの勉強に最適、プログラミング初学者でもハードル低い! ってことです。

きっかけ

社会人になってかれこれ3年、
めっきりインフラ漬の生活を送っていますが、
やっぱり、プログラム書けるのもかっこいいなぁと、
あこがれたりするんです。
Pythonで書かれているツールのソースみてみようとか言われたときに、
ぱぱっと読めるのもかっこいい。

プログラミングを独学で習得しようと、
1年目の時にJavaの本とか買ったりしたけど、
とっかかり方がよくわからなくて、 読んだふりしてあきらめてました。

転職して、案件につくまで、少し学習時間があったので、
この機会にと思い、 「プログラムでなんか作ってみよう!」と思い立ちました。

どうせなら視覚的に成果がはっきりわかるやつがよくて、
Webアプリを作ってみることにしました。
ちょっと調べてみると、PythonでWebアプリが作れるフレームワークがあるじゃないか!

そのフレームワークこそが、今回のテーマ「Flask」

たまたまスマホのキャリアを乗り換えようと検討していたので、
Flaskで会社ごとに携帯料金をシミュレーションできるアプリを 作ってみました。

いざ、環境準備せん!

使ったものは以下の通り

環境準備の簡単なこと!

1.Python3.7のインストール

パスを 追加するにチェックをいれてインストールすればらくちん

2.仮想環境作成

pythonにはvirtualenvという仮想環境が簡単に作れるモジュールがあるのです。
まずはインストール

>pip install virtualenv 

仮想環境の構築(作業ディレクトリで実施)
hogeは任意の文字列

>python -m venv hoge 

仮想環境有効化

>hoge\Scripts\activate 

3.Flaskのインストール

>pip install flask 

4.さぁコーディングしてみよう

作ったファイルは以下の通り
mobile_charge_simulator
 ├ app.py
 ├ templates
 │ ├ layout.html
 │ └ index.html
 └static
   ├ app.css
   └ app.js

どこに何を書いたかは、ざっくりこんな感じ

No. ファイル名 概要
1 app.py 計算処理(HTMLから入力値受け取って、出力値渡す)
2 templates\layout.html HTMLの大枠、CSSとJSのパスを指定)
3 templates\index.html UI
4 static\app.css UIのデザイン(色とかフォントとか)
5 static\app.js 動的処理

それぞれ細かい内容は、コーディング編に書きます。

アプリの実行は、以下のようにしてました

>SET FLASK_APP=app.py
>flask run

これで、http://127.0.0.1:5000にアクセスすれば作ったものが見れます。
最初はネットに落ちてるHello worldで動作確認をしました。