FlaskでSNSもどきを作った

##記事の概要
Flaskでwebアプリケーションを制作した記録です。
赤ちゃん専用SNSというコンセプトでつくりました。
制作期間は1週間強で、たまに気になったところをちょくちょく直しています。
作った背景から、作成手順、機能、工夫したところ、課題
その他思ったこと、今後についてをまとめました。
##作ったサイト
赤ちゃん専用SNS baboo
##背景
#####どういう人間か
地方大学の4年生です。現時点で就活終わってません（やばい）。
学部は工学部ですが情報系ではありません。
#####動機
端的に言えば面接対策と好奇心です。

2021年の2月から競技プログラミング（AtCoder）を始めて面白かったので、就職をIT系にしようと思いました。
しかし、面接で競技プログラミングの話はあまり刺さらず、どちらかという「何か作ったことある？」と聞かれることが多かったです。そのたびに「ないです(泣)」と答えて落とされていたのがしんどかったので、何か作ろうと思ったことがきっかけです。（面接で落とされた理由はそれだけではないと思いますが、理由が分かるところから改善いくしかないと思いました。）

そこで、Webアプリを作ることにしました（前から、頭の中にあるアイデアをWebアプリという形で表現できたら面白いだろうなと思っていたので）。
まず、最初の練習がてら参考にしていた本のコードを理解し、カンニングしながら同じものを作りました。その後、Flaskチュートリアルを行いました。チュートリアルが終わった時点で何か自分で作ってみようと思い立ち、今回のWebアプリ制作に至りました。

赤ちゃん専用SNSみたいなゲテモノを作ろうと思ったの理由は、就活に疲れたので何も考えず「ばぶばぶ」言ってたいなと思ったからです。

##目的
・Flaskを用いたWebアプリケーションの開発経験を積む
・Flaskチュートリアルの復習と応用
・Webアプリの基本的な構成、動作を知る
・今自分に何ができて、何ができないかを把握する
・手を動かして今後のアイデアをひねり出す

##スペック

言語

Flask1.1.2

Python3.7.7

データベース

SQLite + Flask-SQLAlchemy

CSSフレームワーク

Bootstrap4.5

開発環境

Windows10 Home

Ubuntu20.04 LTS(WLS2)

PyCharm2020.2.3

バージョン管理

Git 2.25.1

本番環境

Heroku

##主な機能
テキストを投稿することができます。
####・アカウント作成、ログイン
アカウントを作成、ログインすることでテキストを投稿することができます。
また投稿したテキストを取り消すことができます。
さらにアカウントを消すこともできます。アカウントを消去すると、投稿したテキスト、フォロー関係がすべて消えます。消去していたアカウントをフォローしていた場合、フォローは解消されます。
####・アカウント名とパスワードの変更
アカウント名とパスワードの変更ができます。
####・フォロー
フォローをすることでタイムラインにフォローをした人の投稿が、投稿時間の遅い順に表示されます。
また、フォローを解除することができます。
さらに、フォロワーを見ることができます。
##開発手順
1.要件定義
2.環境選定
3.データベース設計
4.ルーティングとGUI
5.コーディング
6.Herokuデプロイ

####1.要件定義
今回作成するアプリに必要な機能は
・ログイン
・テキスト投稿
・フォロー
の為、それらの情報が保存できるデータベースが必要でした。

また、ユーザーがアカウント、投稿、フォローをそれぞれ登録、消去できるようにしようと思いました。

####2.環境選定
参考にしていた本がFlaskを使用してたこと、競技プログラミングでPythonに慣れていたこともあり、Flaskを使うことにしました。
データベースはFlaskチュートリアルで行っていた方法を参考にしました。

####3.データベース設計
テーブルとカラムは
アカウント情報
・id
・name
・password
投稿データ
・id
・user_id
・name
・text
フォロー関係
・id
・follower_id
・follow_id
としました。
最初はフォロー関係を名前で記録していましたが、
検索の効率を考えるとidで保存したほうがいいと思ったので
コードを書いている途中で変えました。
そのおかげで、書いたコードと整合性を取るのが大変でした。

####4.ルーティングとGUI
データベースの仕様が決まったところで、
ルーティングとそれに関するHTMLファイルの関連をノートに書きました。
もっといい方法がある気がしましたが、分からなかったのでアナログに行いました。
コードを書き始めた後にルーディングの不備に気づき、四苦八苦しました。
また、URLの付け方よくわかりませんでした。

####5.コーディング
#####5.1 データベース作成
Flask-SQLAlchemyでデータベースを関連付けて作成。
最初、データベースが作成できず原因を探りましたがわからず、
結局リセットして小さく作って、成功したら付け足していくことで何とかなりました。
#####5.2 ルーティングとGUI作成
ルーティングをしながらその都度GUIの画面を作成
URLに値が入っていないと関数が引数をとれないことに気が付かず、3時間くらい悩んでました。
#####5.3 HTTP通信
データベースへの入力や削除、更新部分にはPOST、
データベースからの出力にはGETを用いました。
#####5.4 CSSフレームワーク実装
わからなかったので名前だけ知っているBootstrapを採用しました。
デザインまでこだわると今の自分にはオーバーワークになると考えたので、
フロントエンドは最小限の労力を意識しました。
####6.Herokuデプロイ
Flaskの日本語チュートリアルでHerokuを使用してやり方がわかっていたので
Herokuを使用しました。
エラーがでて意外と時間がかかりました。

##課題点
今後の方針を決める上でも参考になると思うので
とりあえず一区切りついたところで思ったことをまとめました。
###1.セキュリティ対策がよくわからない
対策の前に、そもそも何に対して警戒していいのかわかりません。
###2.デザインがわからない
これには2通りの意味があり、
1つ目はデザインの感覚がないことです。どの色とどの色を合わせるとか、こう並べると美しいみたいなやつです。
2つ目は思い通りに実装する技術です。例えば、「バブる!」ボタンの位置が微妙です。Twitterのように右下に配置したかったのですがやり方がわかりませんでした。
###3.設計の仕方がわからない
Flaskのルーディングと必要なHTMLファイルだけ書き出して、コーディングし始めました。
必要なルーティングが抜けていたり、逆に要らなかったりしたことに気づき、何度もあたふたしていました。
慣れもあると思いますが、洗練していきたいです。
###4.エラー処理が上手くできていない
となんとなく感じていますが、よくわかっていません。
###5.JavaScriptを使えていない
1年くらい前にProgateの演習をやっていたので少し記憶はありますがあんまり覚えていません。
JavaScriptを使えると表現の幅が広がる気がします。
###6.ページングを実装したい
投稿やユーザーが増えたときに必要です。参考にした本に書いてあった気がします。
###7.URLの付け方がよくわからない
URLは何となくで作りました。前に何もわからず「Webを支える技術」を手に取ったときに
URLに名付け方についての章があったような気がするので参照したいです。

正直、もっとあるのですがきりがないのでここまでにします。
地道に潰していくしかないですね。

##感想
ひとつひとつのことは難しくないが、とにかく知らなければならないこと、考えなければならないことが多いと感じました。
それと同時に、自分でもWebアプリを作れることがわかり嬉しかったです。伝わらないかもしれませんが、自分の生活がテックによって拡張していく感じが楽しいです。
今後は、セキュリティの勉強をしようと思います。具体的には「体系的に学ぶ 安全なWebアプリケーションの作り方」を読み、PHPで書いてあるところをFlaskに書き換えてみようと思っています。
それが終わったら、作りたいものがあるので、それのための練習としてインスタのような写真を上げるサイトと地図を表示するサイトを作りたいと思っています。

##参考
参考にした本
Pythonではじめる Webサービス&スマホアプリの書きかた・作りかた
Flaskの日本語チュートリアルです。
[Flaskチュートリアル]
(https://study-flask.readthedocs.io/ja/latest/index.html#)
これを書くにあたって参考にしました。
[PHP+MySQLでポートフォリオ作成]
(https://qiita.com/RINYU_DRVO/items/6607a0aa7ca3294f8e47)

##追記
HerokuでSQLiteを使うとデータベースが消える可能性があるらしいです。
実際、消えてました。対策は調査中。