【独学の学習ステップ解説】Django Webアプリ開発の学習ロードマップ
1. はじめに
こんにちは、ぎーたかです。
今回は、Webアプリ開発の学習ロードマップを解説します。
（Webアプリ…ブラウザ上で機能するサービスのこと。Twitter・YouTubeなどのWeb版がこれに該当。）
筆者は、2020年5月〜プログラミング学習を開始し、独学でWeb系のプログラミングスキルを身につけ、ポートフォリオ作成までやり遂げてきました。
1年ほどWeb開発の勉強をしてきて、学習のイロハがわかってきました。
その知見を生かし、”Web開発未経験からどのようにWeb系エンジニアのスキルを身につけると良いか”を解説します。
”これからWeb系エンジニアを目指したい”という方にとっては、具体的な学習ステップの参考になるかと思いますので、読んでいっていただけると嬉しいです。
また、”プログラミングで稼いてみたい”という方にも、この記事を通して学習ステップを把握してもらえると良いかと思います。
Web開発はクラウドソーシング（ランサーズなど）で比較的簡単なスキルで稼げる分野ですので、学習コストも低く、オススメです。
それでは解説していきましょう！
2. 学習ロードマップ
一部、筆者の実践順とは異なりますが、筆者の経験を踏まえて推奨する学習ステップ順に解説していきます。
Pythonを使ったWebアプリの作り方をマスターしていく前提で解説していきますので、他の言語を使いたい方はPython関係の箇所のみ読み替える必要があります。
■HTML /CSS
まずはHTML/CSSから学びましょう。
Webページを開いたときの見た目を作ってる言語です。
直感的な理解としては、HTMLは”Webページのどこに何のコンテンツ（文や画像など）を置くか”を決める言語、CSSは”各コンテンツの見た目”を決める言語です。
学習としては、ProgateのHTML/CSS編を無料で実施できる分をやっておけば十分です。CSSは奥が深いので、深入りせず最低限の知識だけ身につけ、あとは実際に自己紹介ページでも作ってみながら調べ学習するが吉です。
もし、どうしても書籍を購入しておきたいという方は、”初心者向け”と書いた本ならなんでもいいので1冊買ってみてください。
いろんな本がありますが、正直どんな分野でも初心者が覚えるべきことは誰に言わせても大体同じです。それぞれの本にそれほど大きな差はありません。
ちなみに筆者は、こちらを購入して勉強しました。
プログラミングの本はどれもそうですが、完璧に覚えようとはせず、調べ学習に使いましょう。Web開発の最も基本であるHTML/CSSですら、範囲が広すぎて全部記憶するのは無理です。
読んで覚えようとするのではなく、”あ〜、こんなことできるんだ〜”くらいで留めておき、後で”こんな様なことできたはずじゃなかったっけ？”と思い出して調べられれば120点です。
◎演習①
なんでも良いので、HTML/CSSを使ってWebページを作ってみましょう。
アイデアがない場合は、自分の自己紹介HPを作ってみるのが、題材としてやりやすいと思います。
（4. 推奨スキルで解説するBootstrapの使用にも挑戦してみると良いですね）
■Javascript
Webページに動き（ボタンクリック時のアニメーションなど）をつけることができます。
直感的な理解としては、”ページのコンテンツ”を”どうする”かを決める言語です。
Webアプリを作る上で、機能上は不要なことも多いです。
が、ページに動きがつくと、ぐっと本格的なWebアプリっぽくなります。
学習としては、こちらもProgateのJavaScript編の無料分を、まずはやってみましょう。JavaScriptの文法が少しわかります。
その後、実際にWebページへの動きの付け方を学ぶために、以下のjQueryという便利ツールを使ってみましょう。
■jQuery
jQueryはWebページに動きをつけることに特化して、JavaScriptを使いやすくしたツールです。
素のJavaScriptはページに動きをつける以外にもできることがたくさんあり、ちょっととっつきにくいこともあります。
jQueryの様なツールを使うことで、簡単にWebページに動きをつけられる様になるので、使ってみましょう。
学習としては、ProgateのjQueryの無料分を学んでみましょう。
余力のある方は、CODEPREPのjQuery（①、②、③）をやってみると、コードを書く力がぐっとつきます。
また、書籍が必要ならこちらがオススメです。
ちなみに”プログラミングで稼いでみたい”というモチベーションの方にとっては、この段階で既に稼げる素養は身についています。
「LP制作」などの範囲に限ってですが、一度ランサーズなどのサービスで仕事を探してみるのも良いかもです。
◎演習②
先ほどのHTML/CSSで作ったページに動きをつけてみましょう。
■Python
Webアプリ上での処理（アプリに表示するデータの選定など）に使います。
そうした処理自体は、以下で説明するDjangoというツールの中で書くPythonでのみ機能するのですが、ちょっと小難しいので”処理に使う”とだけ捉えておけばOKです。
Pythonの基本文法だけサクッと押さえていきましょう。
学習は、CODEPREPのPython入門 基本操作編をやっておけば、十分です。
色々知っておくと便利な書き方もありますが、プログラミングの処理の基本「順次・分岐・繰り返し」の書き方がわかっていれば全く問題なしです。
ちょっと話題が逸れますが、Pythonは「2021年、ITエンジニアが学びたいプログラミング言語ランキング」で圧倒的支持率で1位になっています。
こうした世間の評判を踏まえると、Pythonだけは体型的に整理された書籍などで学んでおいても良いかと思いました。
ちなみに、筆者はこちらの書籍を購入して勉強しています。
また、有料ですがPyQというPythonのオンライン学習サービスでは、良質な実践的演習が提供されています。気になった方は、こちらも見てみてください。
■Django
Webアプリ全体の処理を作成するのに使います。
直感的な理解としては、”URLへのアクセス”に対して”適切なページの表示”を決める役割を担ってます。
JavaScriptに対しjQueryがあるように、Pythonに対しWebアプリを作ることに特化したツールがDjangoです。なので使い方さえ理解できれば、誰でも簡単にWebアプリを作成できるのが特徴です。
学習は、まずDjango公式のチュートリアルその１をやってみましょう。
初めは使い方にクセ（というかルール）があるので戸惑うかもです。
このルールについては、公式ページ等のインターネットの情報よりも以下の書籍の方がわかりやすくまとめられているので、入門書として読んでみることをオススメします。
筆者の勉強本を参考までに貼っておきます。
■Ruby on Rails
こちらはDjangoの書籍を購入された方は不要かもしれません。
Djangoと同じく、Webアプリ全体の処理を作成できるツールで、使用言語がRubyとなっているツールです。
基本的なツールとしての機能はDjangoとよく似ており、Ruby on Railsの使い方がおおよそわかるならDjangoも理解できると思います。
わざわざ紹介したのは、Ruby on RailsならProgateのRuby on Rails編で学習できるので、無料分の学習をしておくだけでもDjangoの理解が早まるかなと考えてのことです。
”お〜！そういうことができるんだな！”とか、”こういうツールってこういうルールがあるんだね”くらいに理解してもらえれば十分ですので、Djangoに本格的に取り組む前に一度手をつけてみると良いかと思います。
◎演習③
先ほどのHTML/CSS/JavaScriptで作ったページをDjangoを使って表示させてみましょう。
また、管理画面からデータベースにデータを登録して、ページの一部の表示をデータから行える様にしましょう。
◎演習④
ここまでくれば、あとはツールへの解釈を一つずつものにしていき、実際にWebアプリを作ってみましょう。
アイデアがなければ、以下の過去記事を参考にしながら、実際にポートフォリオ（自作のWebアプリ集）を作っていきましょう。
3. インストールガイド
PythonとDjangoは、開発の中でインストールが必要なので、インストールから始める場合は以下を参考に実施してみてください。
なお、リンクはmac OS向けのページですが、同ページ内からWindows向けのページにも飛べるので、Windowsでの方法はそちらをご確認ください。
・Pythonインストールガイド
・Djangoインストールガイド
4. 推奨スキル①
また、上記の学習ロードマップには入れなかったものの、Web系エンジニアとしてあるといい知識・スキルについて解説します。
■開発者ツール
Web開発効率を上げるのに効果的なツールの1つです。
Webエンジニアを目指すあなたにとっても右腕・秘書・相棒的な存在になることでしょう。
特に初学者の頃は、ページのHTML/CSSの確認・テスト編集ができる特徴に大いに助けられることでしょう。
基本的な使い方は、Progateのチュートリアルを確認すると良いかと思いますので、ぜひ読んでみてください。
■Bootstrap 〜CSSフレームワーク〜
CSSのコーディングを大幅に省略できる優れものです。
CSSのテンプレート集のようなもので、初学者でもWebページを”いい感じ”にできるので、筆者は習得を推奨します。
多様な用途に対応したテンプレートが大体あるので、Bootstrapを使えば自力で書くCSSは格段に少なくできます。
”人が作ったコードをうまく活用する”のも、エンジニアとして重要なスキルなので、基礎的なCSSしか書かないといえど取り入れてみるのをオススメします。
学習としてはCODEPREPのBootstrap（①、②、③）あたりをやってみましょう。
HTML/CSSと同様に”書籍で学びたい”という方もいるかもですが、筆者は不要と感じています。（筆者は買っていません。）
フロントエンド（HTML/CSS/JavaScriptのこと）のフレームワークは、元の言語の基礎さえ身についていればそれなりに使いやすいことが特徴です。
「”こんなことやれたらいいなぁ”と感じた時に、調べ学習して1つずつ学んでいく」くらいのスタイルで進めて問題ないと思うので、まず触ってみてください。
■Vue、React 〜新しいJavaScriptフレームワーク〜
jQueryの同類で、JavaScriptのコーディングを短く簡潔にできるツールです。
違いについては、jQueryはJavaScriptフレームワークとしては長い歴史（2006年〜）を持つ1つであり、VueやReactは対照的にそれぞれ2014年、2015年にリリースされた新しいフレームワークです。
jQueryは歴史が長い分、インターネット上で調べ学習をするのに、豊富な情報があり、簡単です。
一方、Vue/Reactは新しいフレームワークなので、近年のトレンドであるSPA（リロードや、URL遷移なしに画面の表示要素に変更を加えられるページ方式）の作成により適した高機能なフレームワークです。
それなりのWebページを作るにはjQueryで実践するのが学習コストが低いため、今回の記事ではjQueryを紹介していますが、トレンドのツールにキャッチアップしていくのも大切です。また、モバイルアプリの開発にも知識を応用したいならReact一択です。
同じJavaScriptフレームワークといえど、こうした違いがあることは知っておきつつ、いつかは鞍替えできるように学習をオススメします。
■AWS
Webアプリをインターネットに公開するために必要なサービスとして活用します。Webアプリを自分で楽しむためだけに作ってるのなら良いのですが、Webエンジニアを名乗るなら避けては通れない道の1つです。
ただ、脅すつもりはないですが、公開までの道のりは時間はかかりませんがなかなかに蛇の道です。相性が悪い人にとっては、”ちょっと何言ってるかわからない”状態で触ることになります。
初めはEC2というサーバーコンピュータのレンタルサービスだけを使うことになると思います。たった1つのサービスを使って、公開用のシステムを作るのでもかなり理解に時間が必要と思います。
筆者も触り始めた初めの頃は、作業を脳死で辿ることしかできず、辛かったです。
それでも理解することを諦めず、以下の書籍の6章を何度も何度も読んで理解を深め、なんとか理解して自分でサービスの構成を変更したりできる様になりました。
ただ、結局やりたいことは”URLにアクセスした際に、応答を返すように必要なものを組み合わせる”だと忘れなければ、いつかきっと理解できるので頑張ってください！
もしどうしても「自分ではできない！」というお悩みを抱える方がいれば、筆者の以下の記事を読んでみて欲しいです。有料ですが、Djangoアプリをインターネット公開する方法を”完全ハンズオン”で、”仕組みの解説”まで強くサポートする記事になってます。
「AWSを初めて触ってみたい」という方にとっては、AWSでインターネット公開する基本的な型を習得することができるので、実用的でお得な記事になっています。
↓入門編として記事その①を、もう１ステップ進んだ構築スキルを学びたい方向けに記事その②を用意しております。
5. 推奨スキル②
上記の推奨スキル①とは異なり、Webアプリの作成作業には関わらないものの、知っているとWebアプリの開発に役立つより基礎的な知識・スキルについても軽く触れておきます。
■Linux
サービスを公開するために使うサーバーPC用で使われているOSです。
基礎知識として知っておくと良いのは、フォルダ構成・コマンド・vim操作くらいでOKです。サービス公開時には、ほぼ必ずLinuxの操作を行うことになります。
・どこにファイルを置いたらいいか
・どういう役割のファイルを編集しているのか
・ファイルシステムの操作にはどんなコマンドを使うのか
といったことは、知っていないと戸惑うことになりますので、サービス公開前までには以下の記事を通して、理解を深めておくことをオススメします。
vimについては、ドットインストール vim入門くらいをやっておきましょう。
◎フォルダ構成
◎コマンド
■Git ~バージョン管理ツール~
Webアプリファイルのバージョン管理に使います。
バージョン管理とは、以下のキャプチャのイメージで作成過程にあるファイルを古いバージョンも残しつつ、新しいバージョンに更新していく一連の流れを指します。
Webアプリのプロジェクトファイルについて、このバージョン管理を実践するのに適したツールがGitです。
Gitは、GithubなどのGit連携サービスと組み合わせて使うことで、他の人（共同開発メンバーなど）とのコードの共有にも使えます。
実際、仕事でアプリ開発をやる様になると、1日1回は必ずGitを使うといっても過言ではないので、Web系エンジニアへの転職を考えている方などは使える様になっておくと良いかと思います。
使い方にややクセがあるので、以下の参考記事（Djangoマガジン共同運営者のブログです）を読みながら実際に使って習得していくことをオススメします。
■Webサービスを支える仕組み
Webサービスが成り立つ仕組みを超かんたんに１枚の絵で表すと、以下の様な構造になっています。
あらゆるWebサービスが、この流れに沿ってサービスページをユーザーに提供しているので、実際に自作のWebサービスを作って運営する際にも理解しておくと、意図しない動作に対して”改善”・”バグ潰し”を迅速に行える素養になります。
いくつか、この流れに関連して知っておくと良いキーワードを参考記事リンクとともに列挙しておくので、必要に応じて勉強してみてください。
◎Webサービスの仕組みのキーワード
・リクエスト...Webサービスを利用するユーザーからのURLアクセス
・レスポンス...リクエストに対し、ページ表示などを行うサーバー側の処理
・ステータスコード...レスポンスの正常/異常の判定を分類する3桁の数字
⇨ステータスコードからエラーの原因が分かることもある！
・IPアドレス...リクエスト送信先として必要なサービスサーバーの住所
・ドメイン...IPアドレスを覚えやすい情報に変換したもの、google.com等
・ポート番号...受けたリクエストを処理させるプログラムを指定する仕組み
⇨IPアドレス×ポート番号で、処理させるサーバー・プログラムが決まる！
・cookie...ユーザーPC側でサービス利用時のログイン情報を記憶する仕組み
・セッション...ブラウザ/サーバーで一定時間ユーザー操作を記憶する仕組み
⇨Amazonでショッピングカートが保存されるのはセッションのおかげ！
5. 終わりに
いかがでしたか？
最後まで読んでいただきありがとうございます。
今回の記事は、筆者の１年間の苦悩と経験をふんだんに詰め込みました。
今回の内容が必ずしもベストな進め方とは限りませんが、プログラミングを始める前の自分に当てたつもりで書きました。
当時の自分と同じ境遇にいらっしゃる一人でも多くの読者の方のお役に立てれば嬉しいです。
また、”実際にWEBエンジニア就職を目指したい！”という方は、この記事と合わせて以下の記事を読んでみて欲しいです。
実務未経験から個人でDjangoを勉強してエンジニア転職を成功させた実体験について、詳しくまとめられています。この記事と合わせて読むことで、未経験〜就職までのロードマップの見通しを立てられるかと思います！
独学は辛いと思うので、誰か同志を作りましょう。
できる様になるとプログラミングは楽しいので、がんばりましょう〜
それでは、また次の記事をお楽しみに！
よろしければサポートをお願いします🙇♂️ いただいたサポートは、クリエイターの活動資金として使わせていただきます😌 活動を通してえた経験を、また記事として皆さんと共有します👍