【Django】Webアプリ入門 Part0 見通しを立てる編【React】

はじめに

この記事シリーズでは、Python、JavaScript歴1年の大初心者がどうにか頑張ってWebアプリを作ろうとする過程を克明に描き出したいと思います。
なるべく公式ドキュメントやいろいろなサイトを調べて間違いのないようにしますが、これは違うんじゃない？と思ったら是非コメントをください！！
ほかのプログラマ・エンジニアの方の生の声をいただくことは初心者にとっては貴重な学習の機会になります！！

なぜこの記事を書くのか

主な理由は二つあります。

一つ目はアウトプットすることで自分の理解を深めたいからです。
Webアプリケーションを作ること自体が一つのアウトプットなのですが、どうしても規模が大きいために、こっちの技術を学んでいる間に前やったあっちの技術を忘れちゃった...ということが結構ありました。
そのたびに復習するのもめんどくさいので、投稿することでこまめに知識を定着させていきたいと思います。

二つ目は技術者の皆様との関わりを持ちたいからです。
#エンジニアと繋がりたい　ということです。
自分は現在(2020年)大学一年生なのですが、学生のプログラミング仲間はいても、コードを書いて生計を立てています！という人とのつながりはありません。
将来の職業の選択肢としてIT系の仕事に興味があるので、この投稿を通じてプログラマ・エンジニアの方と意見交換を行い、開発現場の雰囲気やノウハウについて少しでも学ぼうと思います。

この記事シリーズの展望

まず、どんなWebアプリを作るのか、Webアプリを作るうえでどのような道具を使っていくのかについてPart 0 で述べます。
次に、Django , React の順でそれらを単独で扱う方法を機能を実装しながら学んでいき、
それからDjangoでWebAPIを作成してReactアプリとデータをやり取りさせる方法に触れ、
最後にデプロイするところまで投稿していきたいと思います。
なお、HTML、CSS、JavaScript、Pythonの基礎文法(変数代入、分岐やループなど)は前提として進めます。

本編１ どんなWebアプリを作るのか

家計簿アプリを作りたいと思います。
自分の話になりますが、今年から一人暮らしを始めてお金を自分で管理しはじめました。
月にどれくらい使うかは決めているのですが、衝動買いや外食をしてしまって月末がカツカツになってしまいます。
自分以外にもそういった大学生や新社会人は多くいると思います。そこでその層をターゲットにした家計簿アプリを作りたいと思いました。
家計簿をWeb上で使えるようにすると、ネットサーフィンをしていて「そういえば家計簿つけなきゃ」と思ったらすぐに開けて便利だと思います。
ほしい機能として、家計の記入・編集はもちろんのこと、月単位で家計のグラフを見ることができたらいいなと思います。
そういった機能を持つアプリを作るために、必要となるものは何でしょうか？次の節で見てみましょう。
(そういうのはあるのかなと思って検索してみたところ、ZaimというWebアプリがあるそうです。でも作ります。もうちょっと簡素にして差別化を図ろうと思います。)

本編２　どのような道具を使っていくのか

なにかを作る際にどのような道具を使うか、ということについて考えるのはとても重要です。
料理で例えましょう。あなたは今とてもチャーハンを作りたいと思っています。
その際、まな板の上にご飯、ネギ、卵などをのせて炒めるという方法は明らかに不適切です。
フライパンを使えばチャーハンはできますが、中華鍋を使っても作ることはできます。
中華鍋で高火力で炒めると、パラパラチャーハンを作ることができます。フライパンで作るより高品質なものを作れる可能性があります。
かといって中華鍋を選べば間違いないかというと、中華鍋は値段が高く、使いこなすには時間がかかります。
さらに、ネットで見れる多くのレシピではフライパンを使ってチャーハンを作っているほか、中華鍋よりフライパンのほうがほかの料理を作ろうと思ったときに適用できます。
このように道具を分析してみた結果、あなたが家で自分のためにチャーハンを作るだけならフライパンがあれば事足り、
中華料理屋を開いて一旗あげたいのであれば中華鍋を買う価値は十分にあるということが分かりました。

これを一般化すると、すべての道具には適材適所、一長一短があり、あらゆるものの制作に適した一つの道具というものはないといえます。
それだけに、制作の道具に何を使うかによって、そのもののクオリティや今後の制作物の幅というものが大きく変わってきます。
これはITの世界でも一緒であり、その道具選びのことを技術選定といいます。
(Question : なぜ道具選定ではなく技術選定というのでしょうか？言語やデータベース、開発環境、本番環境は技術っていうより道具って感じがします。　何か意見があればコメントをください！)

自分の場合に当てはめると、家計簿アプリをつくる際に何を使うかを考えればいいということですね！
とりあえず「Webアプリケーション　ツール」で検索したところ、フレームワーク(それだけあれば一定の複雑な機能を有するプログラムが簡単に書けるもの)として、React、Vue.Js、Ruby on Rails、Flaskなどが出てきました。
Web系のフレームワークを三つに分けると、フロントエンドのフレームワークとバックエンドのフレームワーク、さらにフルスタックのフレームワークに分かれます。
フロントエンドはWebアプリケーションのなかでユーザが直接目にするボタンや画像の表示部分のことを指し、
バックエンドはユーザの見えないところでデータベースやサーバとの連携をとる部分のことを指します。
フルスタックのフレームワークはそれらの機能をそのフレームワークだけで扱えるというものです。
フレームワークをこれらの基準に従って分類すると次のようになります。右に言語も書いておきました。

• フロントエンドのフレームワーク　React.js(JS)　Vue.js(JS)　Angular.js(JS)
• バックエンドのフレームワーク　Eve(Python) Sails(JS) Ruby Grape(Ruby)
• フルスタックのフレームワーク　Django(Python)　Flask(Python)　Ruby on Rails(Ruby)　Laravel(PHP)

これらの中から選んでみたいと思います。
まず、自分はまだ経験が浅いので、知っているプログラミング言語を使えるものに絞りたいと思います。
PythonとJavaScriptしか使えないのでRuby on Railsなどは除外しました。
Pythonは学校でやっているし、AIに強いことからもっと使いたい言語なので、Pythonを使えるDjango、Flask、Eveのどれかを使おうと思ったのですが、Eveと検索してヒット数が格段に少ないことからこれは除外しました。
DjangoとFlaskについては、Djangoは機能が豊富でFlaskはシンプルです。
将来は本格的な開発をしたいと思っているので、経験のために骨がありそうなDjangoを採用することにしました。

これさえあればWebアプリはできるらしいですが、Webアプリのターゲット層は若者です。
「このUI、ダサくね？」と思われたら利用してもらえないと思ったので、フロントエンド専門のフレームワークも取り入れることにしました。
Angular.jsは機能が豊富らしいですが、補助的に使いたいので除外しました。
React.jsとVue.jsなのですが、React.jsのほうが公式ドキュメントが理論的だといわれています。
そっちのほうが自分は好きなのでReact.jsを取り入れることにしました。

(補足　フルスタックという言葉は結構文脈に依存するそうです。）

まとめ

これで方針は決まりました。DjangoとReact.jsを用いてWeb家計簿アプリを作ります。
次回からしばらくはDjangoについて投稿していこうと思います。
今回は実際のコードなどはありませんでしたが、ここまで読んでいただきありがとうございました。感想やご意見があればどんどんコメントしてください！
これからもなるべく高頻度で投稿していきたいと思うのでよければフォローしてください！