Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@mabupro(まぶ)

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

Last updated at Posted at 2024-03-11

はじめに

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

進捗状況

1日目
2日目
3日目
4日目
5日目
6日目
7日目
8日目
9日目

勉強の狙い

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

目標設定

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

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

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

どんな知識が必要なのか調べる

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

バックエンド

Python

Django

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

勉強日記

〇日目

バックエンド

読んだ記事・サイト

気づき・感想

Python | Django

勉強前

勉強後

進捗

勉強BGM

1日目

バックエンド

読んだ記事・サイト

気づき・感想
HTTP はステートレスであるがセッションレスではない

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

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

HTTP が制御できること

・キャッシュ
・オリジン制約の緩和
・認証
・プロキシーとトンネリング
・セッション

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

Python | Django

勉強前

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

勉強後

なし

進捗

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

勉強BGM

2日目

バックエンド

読んだ記事・サイト

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

気づき・感想
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

勉強前

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

勉強後

個人的には関数からはじめていくのが面白いし、良いなと思った。
Reactやってるときに、関数に渡すデフォルトの値を設定できていたが、同じようなことができるみたいだった。

def hello(to="world"):
    print("hello,", to)

進捗

勉強BGM

なし

3日目

バックエンド

読んだ記事・サイト

気づき・感想
Cookie へのアクセス制限

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

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

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

SameSite 属性

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

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

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

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

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

Python | Django

勉強前

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

勉強後

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


if 90 <= score <= 100:

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

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?")

進捗

勉強BGM

なし

4日目

バックエンド

読んだ記事・サイト

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

Python | Django

勉強前

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

勉強後

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

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=", ")

進捗

勉強BGM

なし

5日目

バックエンド

読んだ記事・サイト

気づき・感想

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

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

Python | Django

勉強前

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

勉強後

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の中では果たしてる感じかな？

進捗

勉強BGM

なし

6日目

バックエンド

読んだ記事・サイト

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

Python | Django

勉強前

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

勉強後

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

import cowsay
import sys

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

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

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

進捗

勉強BGM

なし

7日目

バックエンド

読んだ記事・サイト

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

Python | Django

勉強前

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

勉強後

# $ 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というものを使った。使い方自体は簡単。

進捗

勉強BGM

8日目

バックエンド

読んでいる本

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

Python | Django

勉強前

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

勉強後

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

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']}")

進捗

勉強BGM

なし

9日目　～

バックエンド

読んだ記事・サイト

8日目 に挙げた本も読む。

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

気づき・感想

Python | Django

勉強前

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

勉強後

進捗

勉強BGM

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

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

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

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

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?