Python初学者がFlask使ってみた話

# はじめに

はじめまして、名無しと申します。初投稿なので、稚拙な文章かもしれませんが、どうかご容赦ください。

**HTML, CSS(Bootstrap)**: ほぼ未経験（授業でちょっと触ったくらい）  
**Python歴**: 半年ほど  
**Git, GitHub**: 最低限の操作は使えます。

環境についてはGitHubにて公開していますので、環境構築時にご参照いただければと思います。  
（そのため、環境構築編は割愛させていただきます）

リポジトリのリンクはこちらです：  

https://github.com/S4AK4N/Flask.git

## 動機
この作品を作ろうと思ったのはWebの仕組みに興味があったからです。

## 作品名

1行掲示板みたいななにか

## 作品の概要

今回作成したWebアプリケーションは、1行掲示板のようなものです。

## 使用した技術

GitHubのREADMEにも記載していますが、こちらにも記述しておきます。

### 使用技術
- **フロントエンド**: HTML (Jinja2), CSS(Bootstrap)
- **バックエンド**: Python (Flask)
- **動作環境**: Docker【Windows11 Pro,Home(検証済み)共に64bit】

### バージョン等
| 言語・フレームワーク  | バージョン |
| --------------------- | ---------- |
| Python                | 3.12.3     |
| Flask                 | 3.0.3      |
| Werkzeug              | 3.0.0      |
| Jinja2                | 3.1.0, 3.2.0 |
| itsdangerous          | 2.1.2, 2.2.0 |
| click                 | 8.0.0, 9.0.0 |

### ディレクトリ構成
```
├── Dockerfile # Docker環境
├── README.md 
├── __pycache__
│   └── app.cpython-312.pyc
├── app.py # サーバー処理記述
├── docker-compose.yml
├── names.txt　# 入力された名前記述(データーベース代わり)
├── requirements.txt # 本環境の必要ライブラリ等
├── static # 静的ファイル置き場
│   └── css
│       ├── form.css 
│       └── styles.css
├── templates # 各ページ置き場
│   ├── Error.html # エラー発生時遷移するページ
│   ├── cant_delete_name.html # 削除したい名前がなかった時表示するページ
│   ├── delete_name_form.html # 名前削除フォーム
│   ├── form.html # 内容投稿フォーム               
│   ├── form_past.html # 過去に投稿した内容を表示するフォーム
│   ├── form_result.html   # 内容投稿をした際に投稿内容を表示するページ
│   ├── index.html # トップページ
│   ├── layout.html # テンプレート
│   ├── name_registration.html # 名前登録フォーム
│   ├── name_result.html    # 登録(送信)した名前を表示するページ
│   └── success_delete_name.html # 正常に名前が削除できた際に表示するページ
└── text.txt # 投稿内容を格納してる場所
```
以上のようなものです

## 機能紹介

### トップページ

以下のようなトップページから、「行ってみる」ボタンをクリックすると、掲示板投稿フォームに遷移します。  
![トップページ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628177/67634e07-59e5-49f3-0aef-a545e7878a3c.png)


### 掲示板投稿フォーム

フォームにて、登録されている名前を選択し、投稿内容を送信すると、次のようなリザルトページが表示されます。  
![掲示板投稿フォーム](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628177/18f5b00a-cbef-7bdc-161c-fb6dc3533193.png)


### リザルトページ

送信後、投稿内容が確認できるリザルトページが表示されます。  
![リザルトページ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628177/82087320-d69c-1f4b-386b-263c6690c742.png)


### 過去投稿一覧

過去の投稿を一覧で確認することもできます。  
![過去投稿一覧](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628177/c6992c00-5e7d-0816-58eb-d021f213cdac.png)






### 名前の新規登録

新たに名前を登録することもできます。  
![名前登録フォーム](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628177/b41a91fd-bb9c-fbdd-33b7-b76df5836ccc.png)


登録後、確認ページが表示されます。  
![登録完了ページ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628177/5c09a11e-c23e-d9d3-c1eb-d66448700cac.png)


### 名前の削除機能

登録した名前を削除することができます。

#### 削除フォーム
削除したい名前を選択し、削除ボタンをクリックすると登録名を削除できます。

![削除フォーム](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628177/ae7edaad-ee11-3025-e505-0b0ec7078fd4.png)



#### 削除成功時
正常に削除が完了すると、以下の確認画面が表示されます。

![削除完了ページ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628177/712b9b4e-f7e8-979b-35e1-bb1dbc1af62c.png)


#### 削除失敗時
名前が存在しない場合など、削除に失敗したときは以下のエラーメッセージが表示されます。

![削除失敗メッセージ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628177/4d728c9f-be54-c408-b8ba-9aadb5553a11.png)





### 機能は以上です。

# 反省点と作品の問題点,,苦労点,今後の展望

## 反省点

### ① データベースを使用できなかった
　今回の作品ですが、ディレクトリなどを見てわかるように、テキストファイルから直接読み書きしているので、セキュリティや利便性において問題が多いです。  
そのため、時間があればデータベースを使用したものを作成したいと考えています。（Githubの更新に期待してください）

### ② 設計の甘さ
　データベースを連携できなかったのは、そもそも設計段階であまり考えていなかったからだと感じています。  
「なんでもいいからWebを作りたい！」という思いで、いきなりエディターを開いたのが間違いでした。  
もっと抽象的でも良いので、構想を練るべきだったと思います。

### ③ スケジュール管理の甘さ
　実はこの作品には締切があり、その期間中に自分の諸々のタスクを考えると、もう少し早く始めるべきだったと思います。  
未知のチャレンジだったのである程度仕方がない部分もありますが、もっと事前にスケジュールを考え、期間を確保すべきでした。

## 作品の問題点

### 削除の機能性が不十分
　名前削除機能はあるが、唯一な投稿として記録できていない(文字列参照で名前も削除しているだけ)なので投稿を削除できない。

### セキュリティ
　データベースを使用していないため、誰でもテキストファイルにアクセスでき、内容が見えてしまう問題です。  
さらに、テキストファイルを編集すれば簡単に改ざんできてしまいます(笑)




## 今後の展望

### データベース連携
　今回できなかったデータベース連携を実現したいと考えています。  
環境構築に苦戦したため、もっと勉強してノウハウを培いたいです。

### フロントエンド側の体裁をより整える
　ある程度フルスタック開発を行ったものの、フロントエンドの技量が足りなかったと感じています。そのため、見た目が素朴で「面白み」に欠けるものになったと思います。今後、より魅力的なデザインを目指してスキルアップしていきたいです。


---

# 最後に
　ここまでご覧いただきありがとうございます。
今回の作品ではWebに対して体系的に学ぶことができ,かなり理解が深まった良い機会だと思います。
これからも勉強を続け、得た知識や経験をアウトプットとして記事にまとめようと思います。
　そのうち今回作成したもののソースコードも一緒に解説記事書きたいです
# 参考にしたサイト
- [Qiita - Flask入門](https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1)
- [Paizaラーニング - Flask講座](https://paiza.jp/)

- [Dockerを使ったFlaskアプリケーション構築: Step-by-Step Guide](https://qiita.com/RyutoYoda/items/c260d3a1067ff853b18e)