Webページが閲覧できる仕組み

私たちがWebサイトを閲覧できるのは、WebブラウザがHTML・CSS・JavaScriptなどのファイルと画像データをWEBサーバから読み込み、指定された通りの内容をユーザーに表示しているから。この、私たちの直接目に見える側はフロントエンド、目には見えない側はバックエンドと呼ばれる。
例えば、フロントエンドで入力された情報をデータベースへ保存・処理したり、そこからデータを呼び出したりなどの処理が、バックエンドで行われている。

静的ファイルとは

前もって書かれたHTMLファイルで構築され、いつ誰が見ても同じ内容が表示されるもの。よって、HTMLファイルを書き換えない限り内容は変わらない。内容がほぼ固定されているサービス紹介ページやLP（ランディングページ）、会社概要・IR情報など企業Webサイトの基本情報は静的ページで作成されている。

動的ファイル

文章や画像がアクセスする毎に変わり、ユーザーに適したHTMLファイルが都度サーバ側で作られるWEBページのことを「動的ページ」と呼ぶ。フロントエンド側、つまりHTMLファイルで表示している文章や画像は見る人やタイミングによって異なり、バックエンド側で呼び出された内容を表示。レイアウト部分は、PHPやJavaScriptといったプログラム言語で表示される。
内容を頻繁に更新したいコラムや新着情報をはじめ、ユーザーに書き込んでもらうクチコミページ、買った商品によって異なる内容が表示されるショッピングカート、検索エンジン、会員専用サイトなどは動的な方法で作成されている。

静的ファイル
→あらかじめWebサーバさんに預けてある普通のファイル（HTMLファイル）
動的ファイル
→Webブラウザさんから「このページをおくれ」なお願いが来たタイミングで、Webサーバさんの中にいるプログラムが大慌てで作ったファイル。(クライアントに渡す前に、プログラムなどでクライアントに合わせた情報を埋め込んだりするため。)

https://wa3.i-3-i.info/diff560web.html

Djangoでは、静的ファイルは「static」フォルダに入れていく！

静的ファイルは、Djangoのページのように、テンプレートをレンダリングして変数に値を埋め込むなどの処理をしないってこと。つまり、配置してあるファイルをそのまま読み込んで使う！こうした静的ファイルは、各アプリケーションの「static」フォルダに配置する。

このstaticフォルダに、CSSフォルダを作ろう！

今回でいうと、practiceフォルダの中に、"static"フォルダを作って、その中に"practice"フォルダ、さらにその中に"css"フォルダを作った。そこに、"style.css"ファイルを作って、以下のコードを書いた。

body {
    font-size: 16pt;
    color: gray;
}
h1 {
    color: red;
    opacity: 0.2; /*要素の不透明度を設定*/
    font-size: 60pt;
    margin-top: -20px;
    margin-bottom: 0px;
    text-align: right;
}
p {
    margin: 10px;
}
a {
    color:blue;
    text-decoration: none;
}

index.htmlを修正

templatesフォルダ内にある、アプリケーションフォルダのindex.htmlを開いて、次のコードを書く。

{% load static %}
<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset='utf-8'>
    <title>{{title}}</title>
    <link rel="stylesheet" type="text/css" href="{% static 'practice/css/style.css' %"}>
</head>
<body>
    <h1> {{title}}</h1>
    <p>{{msg}}</p>
    <p><a href="{% url goto %}">{{goto}}</a></p>
</body>
</html>

一番上の{% load static %}は、テンプレートファイルで静的ファイルを利用する場合に、このテンプレ－トタグの実行が必要。どういうことだ。。ここら辺からよくわからなくなってきた。

テンプレートタグについてもう少し詳しく

views.py側で文字列を指定してHTML作成もできるが、わざわざテンプレートフォルダにhtmlファイルを書くのがDjangoの習慣。それは、views.pyから渡されるオブジェクトをHTMLに反映させ動的にHTMLを生成できるから。
Djangoのテンプレートを利用することで次の機能を使用できる。
・変数に格納された値・文字列の表示
・条件分岐やループなどのロジックの組み込み（タグ）
この、一つ目は、前の記事でやったこと。今回は、二つ目を使っている。

テンプレートタグはたくさんある！

例えば、条件分岐させたりループさせたり。ループについて少しだけ取り上げると、開始タグ{% for … %}と終了タグ{% endfor %}の間に記述されたプログラムをループさせることが可能。

例えば、

【index.html】
{% for article in articles %}
    <article>{{ article }}</article>
    {% endfor %}

【views.py】
def index(request):
    params = {
        "title": "practice/index",
        "msg" : "これは、テンプレートという型に、実際に値を渡して画面表示を完成させています。",
        "goto" : "next",
        "articles" : ["天皇制の在り方について", "地球温暖化について", "Youtuberは面白くないのか？"],
    }
   
    return render(request, "practice/index.html", params)

これは、views.pyではrender関数に渡すパラメータであるparamsに、articlesキーにリストを設定してある。それを、テンプレートファイルにある"forテンプレートタグ"に値を渡すことで、何回も同じコードを書かずともループ処理でarticlesの値を表示させることができる！

では{% load static %}とは何か？

すみません。いろいろ調べてみましたが、結局しっかり理解できませんでした(´;ω;｀)

href="{% static 'practice/css/style.css' %"}>

↑このstaticタグを用いて、静的ファイル(CSS)のURLを取得している。このstaticタグを利用するために、loadタグ（{% load static %}）が必須。という解釈をいたしましたが、そもそも私のテンプレートに対する理解度が乏しいせいか、いまいち腑に落ちていないのが現状です。。

コードを実行するとこうなった。