Web開発に入門しづらい問題: Python+Django+bootstrap+datepicker

プログラマー入門者が、DjangoのWebフォームで日付入力欄のカレンダーPOPUPを出せなくて困っていた

構成:

Python + Django + bootstrap + datepicker

技術要素:

Django Webフォームにカレンダーpopupを表示するには

1. (HTML) datepickerを付けたいinputタグを判別するためclassを付ける

(Django Python) Django Formで自動表示しているタグにclassを付けるにはPythonでwidgetを調整する

2. (JS) JSで対象classに対して datepicker() を実行して有効化する

(Django Template) 適切な位置にJSコードを埋め込むためblockのoverrideでJSコードのブロックを書く

(jQuery) $('.class-name').datepicker() の意味を理解して、対象エレメントでdatepickerを有効化する

3. 必要なJSのライブラリをHTMLに読み込む

(Django Template) 適切な位置にJSの読み込みを埋め込む

今回はbootstrap-datepickerのjsを読み込む

日本語で表示したかったらbootstrap-datepickerのlocaleのjsも読み込む

4. カレンダーのレイアウトはCSSで行っているのでそれもHTMLに読み込む

(Django Template) 適切な位置にCSSの読み込みを埋め込む

今回はbootstrap-datepickerのcssを読み込む

切り分けの難しさ:

これが全部揃わないと表示されない、ということが分かっていない

確認は全部ブラウザ上でページのソースを見ればできる、ということも分からない

技術要素を知らないと、切り分けが出来ない

登場する技術要素が多すぎて、どこで何をしたら何が起こるのか把握できず、試行錯誤で追い詰められない

学び方（清水川の場合）

どの技術要素がdatepickerのカレンダー表示を実現しているのか、というのを理解する

最終的にやりたいことに使われる技術要素をそれぞれ順番に練習する

1. HTML+CSS だけでデザイン的な練習をする

2. HTML+Bootstrap (CSS) でBootstrapの使い方を練習する

3. HTML+jQuery (JS) + CSS で日付入力widgetの表示を練習する

4. HTML + Bootstrap (JS&CSS) で日付入力の練習

5. Djangoで生成されるFormのHTMLにclassを指定する、といったForm表示のカスタマイズ練習

6. Djangoで生成されるHTMLのheadタグ内にタグを追加する、といったblock要素変更のカスタマイズ練習