はじめに

Djangoを1ヶ月ほど勉強しました．なにごとも最初の1ヶ月が大事だと思うので，とりあえずこの時点で思ったことを書きます．

私はこれまでJavaScriptどころかHTML/CSSもほぼ触ったことがないので，勉強していくなかでスムーズに行かないことも多くありました．

そこで今回はHTML未経験の私がDjangoを使ってWebアプリ開発する中で思った，押さえておくべきこと6選を紹介します．

本稿の概要

HTML未経験でDjangoはできるのか
Djangoの難易度は
勉強法とおすすめの参考書について

こんな方向け

Djangoを始めようと思っている人
Pythonで何かしてみたい人
フロントエンドに興味のある人

Djangoとは

Django（ジャンゴ）は、Pythonで実装されたWebアプリケーションフレームワーク。

Djangoを使えば、コンテンツ管理システムやWikiからソーシャルネットワーク、ニュースサイトなど、高品質なWebアプリケーションを簡単に、少ないコードで作成できます。

Djangoは現在とても人気のあるWebアプリ開発のフレームワークとなっています．有名なところだと，YoutubeやInstagramはDjangoを使って作成されているそうです．

私の学習前の状況

Pythonの基礎的なコードは理解している
Django未経験
HTML/CSS,JavaScriptも未経験
もちろんフロントエンドには縁なし

押さえておくべきこと６選

私はDjangoの勉強を始めてまだ1ヶ月ですが，楽しく勉強を継続できており， HTML/CSS等の知識がない方にもオススメしたいと思っています． ただ，慣れるまでは挫折ポイントも多く，簡単なフレームワークではないと思っています．

それでは押さえておくべきこと6選を紹介します．

1. 挫折ポイントが多く，簡単ではない
2. HTMLは勉強していればある程度分かるようになる
3. CSSやJavaScriptはあまり書けなくてもひとまず形になる
4. Pythonは辞書や関数，クラスなどをある程度理解している必要あり
5. 最初は間違いなく参考書から始めるべき
6. 学習する上でChatGPTの恩恵を大きく受ける

1. 挫折ポイントが多く簡単ではない

これはDjangoを勉強している中で，何度も思いました．特に，独学で勉強しようとすると間違いなく躓きます．
Djangoを難しくしている要因の１つとして，ファイルの種類の多さが挙げられます．例えば私が学習開始から3週間で作った家計簿アプリのツリーは以下のようになりました（流し読みしてください）．

.
├── accounts
│   ├── __init__.py
│   ├── __pycache__
│   ├── adapter.py
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── migrations
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── config
│   ├── __init__.py
│   ├── __pycache__
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
├── kake
│   ├── __init__.py
│   ├── __pycache__
│   ├── admin.py
│   ├── apps.py
│   ├── consts.py
│   ├── fixtures
│   │   └── kake
│   ├── forms.py
│   ├── migrations
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── manage.py
├── static
├── templates
└── venv

似たようなファイルが多いとは言え，主要なpyファイルだけでこれだけあります．そしてフォルダの中には各ページのhtmlファイルが入っているため，扱うファイル数としてはかなり多くなっています．

そして実際この中には，最初は特に意識しなくてもいいファイルも存在してるので，かなり混乱してしまうのではないかと思います．

その他の挫折ポイントとしては，MTVの理解が挙げられます．

MTVとは，Model,Template,Viewの頭文字をとったもので，簡単に言うと，Djangoのベースとなる要素のようなものです．

分かる方は，Webアプリフレームワークでよく言われるMVC(Model,View,Controller)のDjango版と考えてください．

DjangoでWebアプリの開発を進めていくうえでは，このMTVに該当するコードを主に扱うことになり，これらの関係性を理解することが開発をスムーズに進めるカギになります．MTVの詳細については以下の記事が参考になります．

このようにDjangoには苦戦するポイントが多くありますが，参考書を用いて勉強をすることでかなり快適になります．

参考書については，5番目に紹介させていただきます．

2. HTMLは勉強していればある程度分かるようになる

HTMLとは、Webページの記述言語です。HTMLのルールに従って記述されたテキストファイルをHTMLドキュメントと呼び、これをブラウザが読み込むことで、Webページを表示させることができます。また、HTMLの正式名称は、”HyperText Markup Language” と言います。日本語に直すと、ハイパーテキストをマークアップする言語、という意味です。

HTMLについてですが，専門的に勉強しなくても何とかなるかなというのが正直な感想です．もちろん突き詰めればより複雑なコードを書く必要があるのかもしれませんが，HTMLは基本的に文字を置くところくらいのイメージで大丈夫です．

例えばHTML未経験だった私が作ったhtmlファイルの一部はこんな感じ．

ここで，{% %}で囲まれたコードが含まれていることがわかります．これはDjango特有のコードで，for文やif文など，見覚えのある文法をhtmlファイルでも使うことができます．

htmlファイルでは，"タグ"という，ページにどのような要素を加えるかを指定するものがあり，実際これを多用する必要がありますが，とりあえずは必要になった時に調べるだけで間に合うと思います．

3. CSSやJavaScriptはあまり書けなくてもひとまず形になる

CSSとはCascading Style Sheets（カスケーディングスタイルシート）の略です。

CSSを用いれば、HTMLで記述した文字の色を変更したり、レイアウトを整理したりするだけでなく、コンテンツにマウスカーソルがあった時の背景色の変更などが可能です。さらに音声デバイスや点字デバイスに対応するなど、HTMLではできなかったことができるようになります。

JavaScript（ジャバスクリプト）は、プログラミング言語であり、HyperText Markup Language（HTML）やCascading Style Sheets（CSS）と並ぶ　World Wide Web（WWW）の中核技術の一つである。

HTMLファイルは文字を置いているだけでしたが，これらに肉付けしていくのがCSSやJavaScriptの役割です．これらが機能しないとサイトはお粗末なものになってしまいます．

ですが，このCSSなどの勉強もひとまずは後回しでいいというのが個人的な感想です．その理由として，CSSやJavaScriptにも，BootstrapやSemantic UIなどといった有名なWebフレームワークがあることが挙げられます．

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。

つまり，これらを使えばCSSファイルを書かなくとも簡単にHTMLファイルの形を整えることが可能になります．

ただ，企業などが実際にWebアプリを開発し運営するとなると，CSSもしっかり作る必要があるため，あくまで前提知識がなくても問題なくWebアプリを作成できるくらいに思っておくのがいいと思います．

Bootstrapを使う場合，htmlファイルのclassに，"要素に施したい操作"に該当する単語を打ち込むだけで簡単にページをアレンジできます．

例えば，以下のコードをクラスに記入すると，hello worldというテキストに対して，横方向に4つのパディング，左方向に3つのマージン，幅を15に設定するという意味になります．

hoge.html

<div class="px-4  ml-3 col-15">
    hello world
</div>

配置する場所を簡単に指定できるのだなという言う風に思っておいてください．

他にも，要素そのものを作ることも簡単にできます．

まず，作りたい要素をBootstrapで調べてみる

書いてあるコードをそのままhtmlファイルにコピペしてみる（リンクにはいらすとやの画像を指定）

コピペした内容を反映させるためにはあらかじめBootstrapをダウンロードする，もしくはファイルを読み込む必要があります．

完成したサイトを開いてみる

といった感じで，Bootstrapを使えばhtmlファイルだけでほぼ完結させることができます．

もちろん自作のCSSファイルと併用することも可能なので，テンプレートをBootstrapから享受しつつ，自分好みにカスタマイズすることも可能です．

例として，私がBootstrapと申し訳程度のCSSとJavaScript（色のカスタマイズとか）で書いた家計簿アプリのサイトは以下のようになっています．

ちなみにこの円グラフはmatplotlib（Pythonでグラフ作成時によく使われるライブラリ）で作成したものを画像に変換して表示しており，Pythonっぽさもあります（もちろん費用が変化すれば円グラフも変化します）．

Djangoでは，下記のようなログイン機能を作るための素材もあらかじめ用意されているため，とても便利です．

4. Pythonは辞書や関数，クラスなどをある程度理解している必要あり

Djangoでは辞書や関数，クラスの継承，オーバーライドという概念が頻出しており，Djangoを学ぶ上では必ず付き合っていかなければならないものとなっています．

特にクラスの出番は多く，Djangoがあらかじめ用意してくれたクラス（例えば，ListViewというクラスはリストを扱うページの作成を簡単にしてくれるクラス）を継承して使ったりします．

Pythonに慣れている人であれば特に問題はないですが，Pythonにあまり関わってこなかったという人にとっては少し厄介な存在かと思います．

ただこれはPythonではおなじみの機能であり，学習の難易度もほかの言語と比較すると低いと思っているので，これを機に勉強してみるのもありかなと思います．

5. 最初は間違いなく参考書から始めるべき

前述したように，Djangoは関与するファイルが多く，挫折ポイントが度々訪れます．挫折しないためには，環境構築から各ファイルの解説などを一通りしてくれる，参考書を使うのが一番確実だと思います．

もちろん講座などに参加するのもいいと思いますが，参考書のほうがコスパや時間の面で優位だと考えています．

私が勉強する際に使った参考書として2冊紹介します．

1.Djangoのツボとコツがゼッタイにわかる本[第2版]

この参考書では，本棚アプリを作成するという目標のもと，機能を徐々に付け加えていくという形でWebアプリ開発を進めていきます．

良い点としてはやはり参考書での目標があるという点です．何を目指しているのか分からないと勉強のモチベーション低下につながるので，参考書で勉強を始めようという方にはゴールが設定されているものをお勧めします．

ただ開発を続けていく上で本書が超オススメかというと，正直参考書としては普通でした．本書を終えてから勉強を進めていくうちに，あのコードって別の書き方で書いたほうがよさそうだな，というのが何度かありました．

とはいえ，初学者に対する分かりやすさを重視した結果のような気もしますし，各ファイルの解説やDjango学習での要点をしっかり押さえているので，私にとっては十分満足できるものでした．

2.現場で使える Django の教科書《基礎編》［3.2 LTS 対応版］

この参考書は，目標が設定されていないものとなっているため，これ単体でDjangoを勉強するのは難しそうだなという印象です．

イメージはタイトルの通り教科書といった感じで，Djangoそのものの解説や，ビューやモデルなど構成要素の解説が丁寧にされています．

本書の一番の魅力はこれもタイトルの通り実践を意識したものであるという点で，各章で"ベストプラクティス"として，実践ではこうしたほうが良いよ，という紹介がされており，要所要所で非常に参考になりました．

最初に紹介した参考書は目標を達成すると需要が下がってしまうというのに対して，本書は長く使えるというのが良いところだったと考えています．

他にも多くないとはいえ，Djangoに関する参考書はあるので，ぜひ自分の好みに合った参考書を使ってみてください．

また，一通り慣れてきたら参考書以外の勉強もいいと思います．

私は現在，以下のサイトにお世話になっています．

6. 学習する上でChatGPTの恩恵を大きく受ける

Djangoの欠点としてよく挙げられるのが，日本語の教材が少ないということです（逆に弱点はそれくらいしかないのでは？）．これもまた挫折ポイントの一つとして挙げられます．

私は学習を初めて1ヶ月なのでさすがに英語の記事を読み漁る必要は出ていませんが，後々必要になるだろうなというのは現時点で何となく感じています．

また，これはすべての言語に共通して言えますが，やはりエラー文の理解にはとても神経を使いますし，初めて触れるフレームワークとなると，「またこのエラーか」というのも特にないのでなおさら疲れます．

しかし，なんということでしょう，現代にはChatGPT君がいるではありませんか．

このChatGPTにエラー文を放り込めば，少なくとも私が学習初期に悩んだであろう簡単なエラーについては解説＋対策をすらすら答えてくれます．

また，搭載したい機能のコードの書き方や，なんならサイトのアイディアまでChatGPTに放り投げることもできます．

まぁそうなるといよいよなぜプログラミングを勉強しているのかという話になるのですが．

まとめ

以上HTML未経験からWebアプリ開発をする上で押さえておくべきこと６選でした，誤りなどあればぜひご連絡ください．