【更新中】フロントエンジニアがバックエンド、Python、Djangoの勉強を「1」からする

# はじめに
こんにちは、mabuproです。
今まで`React` `Next`をメインに書いてきた私ですが、バックエンドにも興味があり**Django** を勉強しようと思うので、その経過をまとめます。

# 進捗状況

[1日目](#1日目)
[2日目](#2日目)
[3日目](#3日目)
[4日目](#4日目)
[5日目](#5日目)
[6日目](#6日目)
[7日目](#7日目)
[8日目](#8日目)
[9日目](#9日目)


# 勉強の狙い
バックエンドについては、`Express`や`色々なDB`を少し触った程度で、分かっていないことやイメージが固まっていないことが多いので、その部分の知識も埋められたらと思います。

> #### 目標設定
> 1. バックエンドエンジニアに必要な知識を知る
> 2. Pythonを勉強する
> 3. Djangoで何ができるのかを知る
> 4. SQliteなどでDBを使ってみる
> 5. Djangoで小さなアプリを作ってみる
> 6. ReactやNextと連携させる方法を知る
> 7. 知識や得た経験を元に、開発のイメージを付ける

このような感じで、軽い目標設定をしてみます。勉強順は1,2までは同時並行で、それ以外は順番に進めていきます。



## バックエンドやDjangoを使うために必要な知識を知る

### どんな知識が必要なのか調べる
まず分からないことを調べろと言われてもできないので、参考になりそうな記事やサイトをピックアップしてみる。

**バックエンド**

https://qiita.com/masafumi330/items/1b1f7a14e1879c527db4

https://qiita.com/mamimami0709/items/fd6556707e4b924c65ab

https://zenn.dev/nameless_sn/articles/backend-masternote

**Python**

https://www.youtube.com/watch?v=nLRL_NcnK-4

https://repository.kulib.kyoto-u.ac.jp/dspace/bitstream/2433/285599/1/Version2023_10_17_01.pdf

**Django**

https://github.com/HHHMHA/django-roadmap

https://www.linkedin.com/pulse/step-by-step-python-django-roadmap-one-year-along-naem-azam-chowdhury

今までは、画面を作ることに集中していて`Firebase` `Vercel`の裏側や、そもそもインターネットってなんやねん？っていう話も、詳しくは知らないので、この機会に勉強をしてみようと思う。

# 勉強日記

## 〇日目

### バックエンド

#### 読んだ記事・サイト

**気づき・感想**
<br/>

### Python | Django

#### 勉強前

#### 勉強後

#### 進捗

### 勉強BGM
---
## 1日目

### バックエンド

#### 読んだ記事・サイト

https://developer.mozilla.org/ja/docs/Web/HTTP/Overview

**気づき・感想**
**HTTP はステートレスであるがセッションレスではない**
>HTTP はステートレスです。同じコネクション上であっても、連続的に実行される 2 つのリクエスト間に関係性はありません。 これは電子商取引のショッピングバスケットなどのように、ユーザーが一貫した方法で特定のページと対話したいときに直接問題になります。 しかし HTTP の核心がステートレスであっても、 HTTP Cookie によってステートフルなセッションを実現できます。 ヘッダーの拡張性を利用して、ワークフローに HTTP Cookie が追加されれば、それぞれの HTTP リクエストが同じ状況や同じ状態を共有するためにセッションを作成できるようになります。

**Cookie**が現代でよく活用されている理由を知ることができた。

**HTTP が制御できること**
>・キャッシュ
>・オリジン制約の緩和
>・認証
>・プロキシーとトンネリング
>・セッション

**HTTP**ができることとして認識していなかったので、知ることができて良かった。

### Python | Django

https://www.youtube.com/watch?v=nLRL_NcnK-4

#### 勉強前
翻訳を使いながら学習する。どうしてもわからない部分は京大のドキュメントを見る。

#### 勉強後
なし

#### 進捗
なし（ハッカソンTAのため記事を読むのに時間を割いた）

### 勉強BGM

https://www.youtube.com/watch?v=of9f9eUi--8

---
## 2日目

### バックエンド

#### 読んだ記事・サイト

https://eng-blog.iij.ad.jp/archives/18584

**気づき・感想**
図が用意されており、分かりやすい。
キャッシュは以前、QiitaAPIで記事の取得間隔を設定したときに使用したので、何となくスッと入ってきた。
Qiitaの記事を取り扱う時はキャッシュ期間を長くするなど、提供する情報の内容で設定することが必要だと感じた。
<br/>

https://developer.mozilla.org/ja/docs/Web/HTTP/Caching

**気づき・感想**
**age に基づく新鮮さと古さ**
> 格納される HTTP レスポンスには、新鮮 (fresh) と古い (stale) の 2 つの状態があります。新鮮な状態は通常、レスポンスがまだ有効で再利用できることを示し、古い状態はキャッシュされたレスポンスがすでに期限切れであることを意味しています。レスポンスがいつ新鮮で、いつ古くなったかを判断する基準は age です。 HTTP では、 age はレスポンスが生成されてからの経過時間です。これは他にもキャッシュ機構における TTL に似ています。

キャッシュにレスポンスした時間を格納することで、判断できるようになっているのが分かった。

**キャッシュの破棄**
> 現代のウェブ開発では、開発の進捗に応じて JavaScript や CSS のリソースが頻繁に更新されます。また、クライアントが使用する JavaScript や CSS リソースのバージョンがずれていると、表示が崩れてしまいます。そのため、上記の HTML では bundle.js と build.css を max-age でキャッシュすることが難しくなっています。
**主要リソース**
メインリソースはサブリソースと異なり、URLの装飾ができないため、キャッシュ破棄ができません。常に最新の状態にしたいだけな時は、 no-store ではなく、 no-cache が適切でしょう。
さらに、 Last-Modified と ETag を追加することで、クライアントは条件付きのリクエストを送ることができるようになり、HTML に更新がない場合は 304 Not Modified を返すことができるようになります。

これ以外にも、ログイン後の内容はキャッシュを`private`にしたり、よくよく考えたら必要だと思いますが、今まで気にしたことがなかった部分なので、ここは気を付けたい。
引用の部分はもう少し後から気にすることかなとは感じた。


### Python | Django

https://cs50.harvard.edu/python/2022/weeks/

https://cs50.harvard.edu/python/2022/weeks/0/

#### 勉強前

ハーバード大学の公開された動画らしいので、面白そう。15時間ほどあるらしいので、ほどほどに進めていく。最初の部分は復習になると思うので、1.5倍速で見ていく。

#### 勉強後

個人的には関数からはじめていくのが面白いし、良いなと思った。
Reactやってるときに、関数に渡すデフォルトの値を設定できていたが、同じようなことができるみたいだった。
```python
def hello(to="world"):
    print("hello,", to)
```

#### 進捗

https://github.com/mabupro/python-cs50

### 勉強BGM

なし

---

## 3日目

### バックエンド

#### 読んだ記事・サイト

https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies

**気づき・感想**
**Cookie へのアクセス制限**
>Secure 属性がついた Cookie は HTTPS プロトコル上の暗号化されたリクエストでのみサーバーに送信され、安全でない HTTP では決して送信されないため、中間者攻撃者が簡単にアクセスすることはできません。(URL に http: を含む) 安全でないサイトは、 Secure 属性を使用して Cookie を設定することができません。ただし、Secure によって Cookie 内の機密情報へのアクセスをすべて防げると思ってはいけません。例えば、クライアントのハードディスクへアクセスすることで読み取られる可能性があります。

>HttpOnly 属性を持つ Cookie は、 JavaScript の Document.cookie API にはアクセスできません。サーバーに送信されるだけです。例えば、サーバー側のセッションを持続させる Cookie は JavaScript が利用する必要はないので、 HttpOnly 属性をつけるべきです。この予防策は、クロスサイトスクリプティング (XSS) 攻撃を緩和するのに役立ちます。

ここの内容は、まだいまいち実感がないので良く分からない。
<br/>

**SameSite 属性**
>SameSite 属性により、サーバーがサイト間リクエスト (ここでサイトは登録可能なドメインによって定義されます) と一緒に Cookie を送るべきではないことを要求することができます。これは、クロスサイトリクエストフォージェリー攻撃 (CSRF) に対していくらかの防御となります。取ることができる値は Strict, Lax, None の 3 つです。

`CSRF`がDjangoの動画を見た時に出てきたけど、セキュリティの話だったのか。

**JavaScript での Document.cookies を使用したアクセス**

>後述するセキュリティの節に記載したとおり、セキュリティの影響に注意してください。JavaScript で使用できる Cookie は、XSS によって盗まれる可能性があります。

`XSS`の仕組みとかも知らないといけなさそう。

### Python | Django

https://www.youtube.com/watch?v=_b6NgY_pMdw

#### 勉強前

**条件**というタイトルなので、if文の他にあるのかな

#### 勉強後

これをできることが、初心者にPythonが優しい部分だと思うけどどうかな

```python

if 90 <= score <= 100:

```

match関数が面白いし、便利。 _(アンダースコア)がjsだと引数を無視する？というような使い方をしていたので、ごちゃ混ぜにならないように気を付けたい。

```python
name = input("What's your name? ")

# if name == "Harry" or name == "Hermione" or name == "Ron":
#     print("Gryffindor")
# elif name == "Doraco":
#     print("Slyrherin")
# else:
#     print("Who?")

match name:
    case "Harry" | "Hermione" | "Ron":
        print("Gryffindor")
    case "Draco":
        print("Slytherin")
    case _:
        print("Who?")
```



#### 進捗

https://github.com/mabupro/python-cs50

### 勉強BGM

なし

---

## 4日目

### バックエンド

#### 読んだ記事・サイト

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

**気づき・感想**
**アクセス制御シナリオの例**
ここの章は、後でまた見ることになりそう。今はまだ分からないことが多い。
<br/>

### Python | Django

https://www.youtube.com/watch?v=-7xg8pGcP6w

#### 勉強前

for ~ in を使うことは知っているので、復習になりそう。

#### 勉強後

辞書の使い方を少し知ることができた。

```python
tudents = [
    {"name": "Hermione", "house": "Gryffindor","patronus":"Otter"},
    {"name": "Harry", "house": "Gryffindor","patronus":"Stag"},
    {"name": "Ron", "house": "Gryffindor","patronus":"Jack Russell terrier"},
    {"name": "Draco","house":"Slytherin","patronus":"None"}
]

for student in students:
    print(student["name"],student["house"], student["patronus"], sep=", ")
```

#### 進捗

https://github.com/mabupro/python-cs50

### 勉強BGM

なし

---

## 5日目

### バックエンド

#### 読んだ記事・サイト

https://developer.mozilla.org/ja/docs/Web/HTTP/Client_hints

**気づき・感想**

>クライアントヒント (Client hints) は、サーバーがクライアントに積極的にリクエストすることで、端末、ネットワーク、ユーザー、およびユーザーエージェント固有の環境設定に関する情報を取得することができる HTTP リクエストヘッダー フィールド群です。 サーバーは、クライアントが提供することを選んだ情報に基づいて、送信するリソースを決定することができます。

**F12**でこの内容は見たことある気がする。


### Python | Django

https://www.youtube.com/watch?v=LW7g1169v7w

#### 勉強前

例外はjsでtry-catchなどを使っているので、少し通ずる部分もあるのかなと思っている。

#### 勉強後

```python
def main():
    x = get_int()
    print(f"x is {x}")

def get_int():
    while True:
        try:
            return int(input("What's x? "))
        except ValueError:
            pass

main()
```
**pass**というのが**continue**とかの役割を、Tryの中では果たしてる感じかな？


#### 進捗

https://github.com/mabupro/python-cs50

### 勉強BGM

なし

---

## 6日目

### バックエンド

#### 読んだ記事・サイト

https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP

**気づき・感想**
HTTPが進化していく中で、セキュリティが強化されて、不具合があった時の対処が効率化が図られているのを感じた。
<br/>

### Python | Django

https://www.youtube.com/watch?v=MztLZWibctI

#### 勉強前

Pythonはライブラリが豊富なことで有名なので、使い方を知ることができれば良いと思う。

#### 勉強後

fromやimportで使うということを知ることができた。`pip`を使って入れた**cowsay**が面白かったので載せておく。

```python
import cowsay
import sys

if len(sys.argv) == 2:
    cowsay.cow("hello, " + sys.argv[1])

# $ python say.py Mabu
#   ___________
# | hello, Mabu |
#   ===========
#            \
#             \
#               ^__^
#               (oo)\_______
#               (__)\       )\/\
#                   ||----w |
#                   ||     ||
```

https://qiita.com/soicchi/items/45ac8e2006361126b023

途中分からない部分があった部分を解説する記事

#### 進捗

https://github.com/mabupro/python-cs50


### 勉強BGM

なし

---

## 7日目

### バックエンド

#### 読んだ記事・サイト


https://developer.mozilla.org/ja/docs/Web/HTTP/Session

**気づき・感想**
よく聞く内容で、レスポンス(200,300,400)やコネクションの話だった。
HTTP編は一度ここら辺で、次の内容に入ろうと思う。
<br/>

### Python | Django

https://www.youtube.com/watch?v=tIrcxwLqzjQ

#### 勉強前

`React`ではテストとして`Jest`を使用したり、`StoryBook`、`Cypress`などを使用していたが、`Jest`と同じようなことができるのかなと予想している。

#### 勉強後

```python
# $ pip install pytest
# Successfully installed colorama-0.4.6 iniconfig-2.0.0 packaging-24.0 pluggy-1.4.0 pytest-8.1.1

from calculator import square

def test_square():
        assert square(2) == 4
        assert square(3) == 9
        assert square(-2) == 4
        assert square(-3) == 9
        assert square(0) == 0

# $ pytest test_calculator.py
# ======================== test session starts ========================
# platform win32 -- Python 3.12.1, pytest-8.1.1, pluggy-1.4.0
# collected 1 item

# test_calculator.py F                                           [100%]

# ============================= FAILURES ==============================
# ____________________________ test_square ____________________________

#     def test_square():
#             assert square(2) == 4
# >           assert square(3) == 9
# E           assert 6 == 9
# E            +  where 6 = square(3)

# test_calculator.py:50: AssertionError
# ====================== short test summary info ====================== 
# FAILED test_calculator.py::test_square - assert 6 == 9
# ========================= 1 failed in 0.08s ========================= 
```

`pytest`というものを使った。使い方自体は簡単。

#### 進捗

https://github.com/mabupro/python-cs50

### 勉強BGM

https://www.youtube.com/watch?v=n2rVnRwW0h8

---

## 8日目

### バックエンド

#### 読んでいる本

https://www.amazon.co.jp/%E5%AE%9F%E8%A3%85%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%95%E3%83%AB%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AFWeb%E9%96%8B%E7%99%BA-%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E8%A6%96%E9%87%8E%E3%81%A8%E7%9F%A5%E8%AD%98%E3%82%92%E5%BA%83%E3%81%92%E3%82%8B%E3%80%8C%E4%B8%80%E6%B0%97%E9%80%9A%E8%B2%AB%E3%80%8D%E5%9E%8B%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%83%88%E3%83%BC%E3%83%B3-ebook/dp/B0CLMWZFHP/ref=sr_1_2?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=11W0T9QD7NX5F&dib=eyJ2IjoiMSJ9.rvotFTzuKo8pH_ekGpmxlN0IYpXom1YUKJvXhaK6esOjoL8FLBWQlXBn5t9El21jzbqAIZxZz7GyB39eVKim8pvqWonx4rpDbIfdc3CmcUvjAPVaCSim2CegjXNx0h7k.EAPvvLst7EE-Ke1tkzj4wAaaC42PdHab0yL8WYKBCV0&dib_tag=se&keywords=Django+%E3%83%95%E3%83%AB%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF&qid=1710826796&s=books&sprefix=django+%E3%83%95%E3%83%AB%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF%2Cstripbooks%2C311&sr=1-2

大阪に行った時に買ってみた本を少しずつ読んでみたり、実践みたりすることにした。

### Python | Django

https://www.youtube.com/watch?v=KD-Yoel6EVQ

#### 勉強前

C言語の時に苦労した覚えがあるので、こちらも大変かもしれない。

#### 勉強後

https://python.keicode.com/lang/functions-lambda-for.php

`lambda`が出てきてニコニコですが、以前までの内容より少し複雑になってきた感じがします。
復習が必要そうです。

```python
students = []

with open("students.csv") as file:
    for line in file:
        name, house = line.rstrip().split(",")

        # student = {}
        # student["name"] = name
        # student["house"] = house
        # このような書き方を下の書き方でできる。
        # Reactで分割代入のような感じ

        student = {"name":name, "house":house}
        students.append(student)

        
# def get_name(student):
#     return student["name"]
# lambda関数を使うことで、わざわざKey用に関数を宣言しなくても良くなる

# for student in sorted(students, key=get_name):
for student in sorted(students, key=lambda student: student["name"]):
    print(f"{student['name']} is in {student['house']}")
```

#### 進捗

https://github.com/mabupro/python-cs50

### 勉強BGM

なし

---

## 9日目　～

### バックエンド

#### 読んだ記事・サイト

[8日目](#8日目) に挙げた本も読む。

https://knowledge.sakura.ad.jp/7938/

ハッカソンで出会った大学の先生に1週間でやってみてとオススメしてもらったので、やってみる。サーバーの勉強になるみたい。

**気づき・感想**
<br />

### Python | Django

https://www.udemy.com/course/django-todoapp-in-5day/?couponCode=KEEPLEARNING

#### 勉強前

そろそろDjangoについても勉強したいと思います。

#### 勉強後

#### 進捗

### 勉強BGM
---

## Djangoで何ができるのかを知る

今回は、いつもお世話になっている**Udemy**の講座を買ってみた。

https://www.udemy.com/course-dashboard-redirect/?course_id=4760700

Youtubeにある海外の人が解説しているのも見たが、まずは日本語で何となく把握していないと英語を聞いても、**Huh?🙀**と猫が出てきてしまうので一度全体像を知る。

また 「[どんな知識が必要なのか調べる](#どんな知識が必要なのか調べる)」で**Djangoのロードマップ**を記載したが、そもそも`Python`も簡単な部分しか知らないので、勉強することにした。