Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flaskを利用したWebアプリ開発に必要な知識と開発の進め方について
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Takagi Yuto
March 15, 2025
Technology
71
0
Share
Flaskを利用したWebアプリ開発に必要な知識と開発の進め方について
Flaskでのアプリ開発におけるviewsやtemplates等のディレクトリ構成とそれらの役割や、Webアプリへのアクセスにおける種類と脆弱性, 開発フローをまとめました。
Takagi Yuto
March 15, 2025
More Decks by Takagi Yuto
See All by Takagi Yuto
学科紹介 | 髙木悠人
yut0takagi
0
31
Corgi-ITサービス開発プラットフォームの概要
yut0takagi
0
12
プログラミング学習プラットフォーム | ビジネス要件報告案1
yut0takagi
0
75
交差点交通最適化ソリューション | データサイエンス実験B
yut0takagi
0
38
センシングデータ解析8班 走行データ分析
yut0takagi
0
35
自己紹介 | 1on1forEngineer
yut0takagi
0
41
Other Decks in Technology
See All in Technology
AWS Transform CustomでIaCコードを自由自在に変換しよう
duelist2020jp
0
240
雑談は、センサーだった
bitkey
PRO
2
190
拝啓、あの夏の僕へ〜あなたも知っているApp Runnerの世界〜
news_it_enj
0
200
小さいVue.jsを30分で作る
hal_spidernight
0
130
「SaaSの次の時代」に重要性を増すステークホルダーマネジメントの要諦 ~解像度を圧倒的に高めPdMの価値を最大化させる方法~
kakehashi
PRO
3
3.6k
エージェント時代の UIとAPI、CLI戦略
coincheck_recruit
0
120
大学職員のための生成AI最前線 :最前線を、AIガバナンスとして読み直すためのTips
gmoriki
2
3.3k
Angular Architecture Revisited Modernizing Angular Architectural Patterns
rainerhahnekamp
0
120
ブラウザの投機的読み込みと投機ルールAPIを理解し、Webサービスのパフォーマンスを最適化する
shuta13
3
270
AI時代に越境し、 組織を変えるQAスキルの正体 / QA Skills for Transforming an Organization
mii3king
5
3.5k
AI와 협업하는 조직으로의 여정
arawn
0
580
[Scram Fest Niigata2026]Quality as Code〜AIにQAの思考を再現させる試み〜
masamiyajiri
1
190
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
New Earth Scene 8
popppiees
3
2.2k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
52k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.4k
Exploring anti-patterns in Rails
aemeredith
3
340
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Amusing Abliteration
ianozsvald
1
160
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
10k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
170
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
110
Transcript
Flaskアプリの概要
アジェンダ 1. ディレクトリ構成 2. Webアプリの仕組みについて 3. 開発の流れ
ディレクトリ構成
ディレクトリ構成について 【基本的なディレクトリ構成】 wsgi.py application_ver2 ├── __init__.py ├── __pycache__ ├── config
├── forms ├── models ├── static ├── templates └── views 【開発で触れるディレクトリ】 1. Templates 2. Views 3. Forms 4. models
Viewsについて 【役割】 URLと表⽰されるHTMLを紐づける役割 【書き⽅について】(例: https://localhost:5000/homeの場合)
Templatesについて 【役割】 HTMLファイルを格納する役割 【レイアウトの使⽤について】 1. 共通部分とメイン部分で分けて定義する。 2. 共通部分については、基本的に触れない 3. 共通部分はLayoutに格納
4. 学⽣,塾関連,学校関連,全体共通で分別して格納
Formsについて 【役割】 サイトで⼊⼒箇所がある場合に、その形式をPythonのclassで定義する。 【書き⽅について】(例: ログインフォームの場合) 1. ⼊⼒箇所は、emailとpasswordの2つ 2. EmailはStingField(⽂字列)でDataRequired(⼊⼒必須),Emailとして認識します 3.
PasswordはPasswordField(⼊⼒すると**に変化)で、⼊⼒必須と認識します。
Modelsについて 【役割】 ユーザデータ(ログイン要件以外)や組織データをデータベースとしてどのように保存するかをクラスで定義する。 【書き⽅について】 ※Modelsを変更すると、データベース形式が崩れるので、影響範囲が⼤きいです。 そのため、変更は基本的に⾏わないでください。 各機能で新規に定義する場合には、連絡ください。
Webアプリの仕組み
Webアプリの仕組みについて サーバー リクエスト レスポンス こんなデータがほしい︕ (/homeにアクセス等) どうぞ︕(HTMLファイル等)
リクエストの種類について サーバー リクエスト(GET) ホームページにアクセスしたい リクエスト(POST) ログイン認証をしたい (アクセスと同時にユーザーデータを送信する)
開発の流れ
開発の流れ 1. Viewsで関数を定義し、HTMLファイルと接続する 基本的に、各機能におけるドメインは、あらかじめ決めて設定してあります。 2. Views関数内の処理を記述する GETとPOSTで別々に記述する TRY,EXCEPT等の例外処理をすべてに適⽤することで、セキュリティ脆弱性に関わるエラーを防⽌ 3. HTMLファイルを記述し、css等が反映されているか確認する
Block contentsとendblock内に記述する