Django初心者がeラーニングシステムを作り始めて最初に理解したこと

この記事はDjangoを勉強している人や、エンジニアの初学者向けです。


初めまして、clematisといいます。
現在ベンチャー企業のSESとして働いており、Djangoの学習ついでに新入社員向けのeラーニングシステムを作成しています。

今までDjangoのカリキュラムを学習して、王道の「ToDoリスト」と個人的に作りたかった「LoLフルパ限定トロールガチャ」（https://lolgacha.clematis0827.com/)を作成しておりましたが、WEBアプリ開発の理解があいまいなままコードを書いていたので、今回
「好きなものを作りながら理解する」
を目標に学習を始めました。
（今まででちゃんと理解しておけよ）

この記事では最初の数日で理解できたことを書いていきます。

作ろうとしているもの

今回作ってるものは「新入社員向けのeラーニングシステム」です。

イメージとしては、完全にProgateで

・ログイン画面
・コース一覧
・教材閲覧
・課題提出
・自動採点

ができ、答えが一つではない物に関してはDifyを使ってAIに確認してもらうつもりです。

まずは土台として、「ログイン画面」と「コース一覧」を作ります。

最初の躓き

AIが発展している昨今、Djangoでプロジェクトを始めたとき

django-admin startproject

でプロジェクトを作り

python manage.py runserver

でロケット画面を表示させた後、
「…..何したらええねん」
状態になりました。

AIに聞いてもよかったのですが、できるだけ自力でやりたいので自力で思考し、それが合っているかをAIに確認しながら行っています。
（自分自身の力で作成できる人やAIがなかった時代の人たち凄すぎないか）

「eラーニングシステムを作ってそこに肉付けすればいいんじゃね？」
とは思っていたのですが、eラーニングシステム自体が複数の機能の集合体です。
なので、

python manage.py startapp accounts
python manage.py startapp courses
python manage.py startapp learning
python manage.py startapp assignments

という風に、機能ごとにアプリを分けて作成しました。

・accounts：ログイン
・courses：コース一覧
・learning：学習画面
・assignments：課題提出

めんどくさい…
と思いつつも、「少なくともDjangoでWEBアプリケーションを作成するときは、小さく分けて機能ごとに管理すればいいんだな」という気づきはえれました。

今まで理解してこようとしなかったURL

次に気づきを得れたのはURL
「WEBを支える技術」を読むだけ読んで一切理解できていなかった私にとって、ここを自分なりに解釈できたのはでかかったです。（理解できているとは言ってない）

下記のコードを見てみましょう

urlpatterns = [
    path('admin/', admin.site.urls),

    path('',include('accounts.urls')),　
    path('courses/',include('courses.urls')),
]

これを見ても意味が解らなかったのですが、
特に疑問だったのが
「' 'にアクセスして、accounts.urlにアクセスする事実」
です。
実際に学習を進めて理解できたのは
Djangoは「/login/」を「' ' ＋login/」として理解する言語であるということ
だから、

path('', include('accounts.urls'))

を設定し /login/ にアクセスすると'accounts.urls'にアクセスします。
（正直いまいち理解はできてないが、上の例だとcoursesにアクセスするとcourses.urlsにアクセスできるのでまぁ何とか理解してる感）

ログイン画面を表示したい

まぁ文字を返すのは簡単なのですが、仕組みを理解したいということで
先ほどのloginにアクセスしたらaccounts/urls.pyにアクセスできるようにしたので、そのaccounts/urls.pyを編集します。

from django.urls import path
from . import views

urlpatterns=[

    path(
        'login/',
        views.login_view,
        name='login'
    ),

]

んで、このURLにアクセスしたときにlogin_viewにアクセスするようにして、viewsの中にあるlogin_viewを返すようにしたので、accounts/views.pyを編集する。

from django.http import HttpResponse


def login_view(request):

    return HttpResponse("ログイン画面")

ここでとりあえず「ログイン画面」って文字をPythonから返すようにして、動くかだけ見る。（スクショ忘れたので、各々でhttp://127.0.0.1:8000/login/にアクセスしてみて）

HTMLを書くときずっと疑問だったやつ

この後実際にHTMLを書いていくわけですが、まぁ下記を最初にコードを書くわけです。（この時CSSも書いてるよ！）

{% load static %}
<link rel="stylesheet"
href="{% static 'accounts/style.css' %}">

うん、これ何ぞや
HTMLを少しだけ勉強したことある私はCSSを呼び出すとき下記のように書きたい

<link rel="stylesheet" href="style.css">

ただ、Djangoの開発環境じゃこれは許されないらしく、HTML君はひ弱な存在になってしまわれ、DjangoのルールにHTMLも従う必要があるらしい
だからHTMLはDjangoに「このファイルを探したいからURLを作成して」と命令します。それが

{% static 'accounts/style.css' %}

ただ、「static」はHTMLの言葉ではないのでこのままでは認識してくれない
なので、それよりも前に

{% load static %}

を呼んで、HTMLに「DjangoのStatic機能を使用するよ」と命令を出します。
Djangoでいうところのimport機能ですね。

まとめ

この読みにくい文章を、最後まで読んでくれた人は本当にありがとう。

今回の学習で一番大きかったことはDjangoの流れが少しだけ見えたこと、
そしてこうして後からアウトプットすることで、
「やっぱり理解できていないところもあるな」
と再確認できたところです。
今回はログイン画面を実装しただけです。（なんならNoteにはコードの全体像は載せてない。）
次はログイン機能を実装するわけですが、コードを書きながら勉強しながらアウトプットするというのは骨が折れるのを実感しています。

今後ともアウトプットの場としてNoteを活用しつつ、文章力も上げていきたいです。