初心者がとにかく爆速でTodoリスト制作してみたかったお話

昔、とあるプログラミングスクールに入ってハッカソンに参加した時の記録だよっ！

受講生があほすぎるから、プログラミングスクールの名を汚さないために名前は伏せておくねっ！

※　とにかく、爆速でという条件をつけてしまったが故に本来の勉強時間を取り除いて、知識がないのに制作物ができてしまったというお話

※　かなりアホな受講生です。講師もこんな受講生やだろうな。みんな絶対真似しちゃダメだよ！

## 今までの経験だけどすっ飛ばしてくれて大丈夫です

- HTML
- CSS（SCSS）
- JavaScript（料金シミュレーターを作成）
- PHP　（Wordpressのデバッグと本番の記事の差分チェッカーツール、リンク切れチェッカーツール、etc）
- Linux（lsとかcdとかpwdとか使えるよ！えっへん）
- ちなみに今までのプログラミングはほぼ独学、教わったことがないデス

なのでググり力だけは高まったかなあ

- でも、TodoListはつくったことがない！　だから**初心者**（暴論

## 2021/6/27　通達が来る

ハッカソン第二回では一ヶ月でTodoアプリ制作を作れるかどうかでチーム分けをするとのこと。

初心者が、**Todoアプリを制作できる初心者**になるためには乗り越えていかねばならない道だ

だからこの先も、**データベースを使いこなせる初心者**や、**データサイエンスの知識が豊富な初心者**や**インフラエンジニアとして通用できる初心者**、などさまざまな初心者になるために頑張らねばと思う次第である。

まず言語選定は、慣れているPHPではなく、Pythonにしてみた。

なんとなく、**ハッカーが使っていたりしそうなイメージでなんかかっこいいから**と言う理由から

プログラミング言語を選定するときは、このアプリを制作するには、この言語が適しているという明確な理由づけが必要な気がしたけどきっとTodoアプリだし問題ないだろう。

（これは補足だが、後に大体の人がDjangoを選択しているのを見て、やっぱり独創的な環境を作る上でLaravel環境にしておけばよかったかと後悔したのは秘密である、みんな大好きRuby on Railsは却下）

そして私は、一先ず頭を整理するために眠ることにした。

３時間後

プログラマー（希望者）の昼寝の時間は早い。

目覚めと共に、私の浅い知識からPythonと言えばDjangoだと急に思い立ち、フレームワークはDjangoを使うことにした。そして今流行りのDocker使ったことがなかっため、この流れに私も乗らねばなるまいと思いDockerを使うことにした。

（とあるツイートで**DockerやLinuxのコマンドすら叩けないものはエンジニアの風上にもおけんわ**！と言ったものがあったので、きっとこの選択は正しかったのだろう）

環境構築の際、Vagrantをこよなく愛していた私は、Vagrantで仮想環境構築した上でDocker?という謎のコンテナというよくわからないものをとりあえず入れられるようになっとけと言う思いで頑張ることにした。

Dockerの意味もまともに知らずこんな状況でこの人は大丈夫だろうかと思ったかもしれないが

「**大丈夫DA、問題ない！今回の目的はTodoアプリを制作することに意義がある！**」

という便宜で本来勉強しなければいけないことも三ヶ月は初心者だからという怠惰な気持ちから勉強をすっ飛ばしたのは受講生としては失格だが、一ヶ月と言う期日の中でアプリケーションを完成させるには必要な工程だったと言えよう。

Dockerで仮想環境構築をぐぐりまくり、慣れているVagrantで参考にしたサイトをそれぞれうまくいくまで環境を試す作業。Vagrantは何かエラー出てもぶっ壊せばいいので楽である。後、検索するとき、環境構築の速さも重点において爆速というキーワードを入力したら検索結果が少なくなった、悲しい。

後で気づいたけど、Djangoについての知識が不足していたため、Djangoだけでウェブサーバーが作れるなんて知らなかったああああああああわああああああああ！

まだDjangoを作ったことがない人にアドバイスしておきたい

ちゃんと**公式サイトみましょうね（戒め**

ApacheとかNginxとかで調べまくって泣いた。

[Docker初心者がVagrant、Docker、Django、Python 、PostgreSQLで環境構築](https://qiita.com/naomi_hashimoto/items/9c5992e3c40792b2f57e)

qiitaに記事を載せました。アカウントが違うのは昔のアカウントだからですっ！

## 二日目

挫けたこと

MACシャットダウンからの再起動で電源つかないまま真っ黒画面と睨めっこ。

泣きたくなった

**macのない世界なんてもう生きていけないのに**・・・とか思った。

色々試して復旧してその作業に疲れたため中断。

どうやって対処したか忘れてしまった。

## 三日目

二日目の雪辱を晴らすため、No such file directoryとか、DBを書き換えたらエラーが出る系のエラーと戦い、ようやくDjangoの初期画面がみれた。

初期画面が出てくると安心するかもしれないが、まだ安心してはいけない・・・戦いの火蓋は切られたばかりだ。

この時にやっと、「**え、Djangoって読み方デイジャンゴじゃないの**」って気づいてショックを受けた。

英語のナイフになぜKがついてるか意味わからんぐらいにDjangoも意味わからない。

まぁ、誰かと会話して「デイジャンゴってさー」とか言い出さなくてよかった。

**本当によかった。**

## 四日目

家に帰ってHello World画面が作れたのでそろそろ忘れそうなので

記事に書いてみた。

この説明をここで書いても重複するので詳しくはURLをみてください。

(仮想環境構築はなるべく自分でトライした方がいいと思うので出来た人がみるといいかも）

https://qiita.com/dev_naomi/items/9c5992e3c40792b2f57e

ちなみにHello worldの出し方は書いてない（キリっ！

## 五日目

仕事帰宅後、「**アプリ制作だーわーい、楽しみだーいヽ(*´∀｀)ノ**」と思ったのにも関わらず

その数分後、私はいつの間にか夢の世界へと飛びだった。

そしてその時の記憶が全くないので、私は多分相当仕事で疲れていたんだろうと思う。

## 六日目

経験則から、新しい言語やフレームワークを覚えるときは動画より本を読んだ方が早いので

「**Python　Django３超入門**」という本を購入。

時間は有限だ。

限りなく有限だ。

残念ながら、どう足掻いても、人は24時間という限られた時間を超えて生活することはできないのだ。

つ・ま・り

**爆速でtodoアプリを作るためには、どういう仕組みかについては後で、作る過程だけ見ればいいのだ。**

**だから私はアプリを制作するところまで読み飛ばしたので知識は身についてないも同然だろう！**

（※威張ることではない）

さて、この時期どういうアプリがいいのかということでフローチャートを立ててみた。

これは効率よく作るためで必要である。（とさも自分が言っていたかのようにいってみたがこれはとある講師の言葉である）

まず前提条件としての書き出しからである。

誰かの役に立つアプリを作る上で欠かせない機能

- タスクは**三つまで**しか作らせない（タスクが多いと体を壊すと思って心配してのことだよ
- タスクを完了するとき、「**本当に完了していいんですか？**」というダイアログを3回ぐらい出す（だってほら、間違えて削除してしまったら辛いじゃないですか。）
- タスク名は**十文字**までとする（簡単な名前の方がわかりやすいと思う）
- 削除するとき、「**今が辛いと思っているんじゃないですか？**」「**クヨクヨすんなよ**」とかダイアログにイエスを言わせて、励まされながら削除する（前向きになってほしいからだよ！
- サブタスクはタスクを増やしてかわいそうだから除外する（決して面倒だからじゃないよ！
- 進行度は、進められていない時、心が辛くなると思うから、やさしい気持ちで入れてあげない（決して面倒だからry
- 完了と削除の違いがわからないけど、そういう気分で作りました

フローチャート

ルートURLに新規追加ボタンとテキストエリアを置いておく

追加したらテーブルが出てくる。時間も表示される。

タスク名を記入して追加するボタンを押す

タスク名が記入されていないと、「**まだ我輩には名前がないのである**」と優しくエラーを吐き出す

タスク名が十一文字超えていた場合、追加しようとすると「タスク名が許容値をオーバーしております」と優しくエラーを吐き出す。（JsvaSctipyで文字をカウントしてあげても良かったが今回は自分で気づいてほしいのでしてあげない❤︎）

既にタスクが３つある状態だと、「**あなたの体を心配しているので追加できません、他のタスクを完了してからになさってくださいね**」という優しい気遣いができる優秀なエラーを出す

タスクを完了するときは、完了ボタンを押して「本当に完了していいんですか？」と**3回尋ねて**から完了してあげる。

タスクを削除するときは、削除ボタンを押して、「今向き合っている課題から逃げているんじゃないですか？」yes

「今が辛いと思っているんじゃないですか？」yes「クヨクヨすんなよ！」yesようやく削除

あれただの嫌がらry

どんなTodoアプリを制作するかなんて決まっていなかったからよしとする

この制作過程のおかげでバリデーションについて学べたなぁ・・・（遠い目

## 七日目

今日こそ作り上げなければいけないと思ったのだが

本をちらっと読んだだけで

**一日でDjangoを理解できるはずもなく・・・**

**それが出来ていたら私はもっと別の道に進んでいたと思う**

とりあえず手を動かせばなるまい。

先の本を見ながら、アプリケーションを作るということについて学べた。

（関係ないとこ（クエリ文字列の生成とか）たくさん読み飛ばしたけど、えへへ）

**がしかし、詰まった〜！**

どこで詰まったかというとテーブル作成のあたりである。

moduls.pyを更新するあたり。

models.pyを更新しても、データーベースの更新が適用されないのである。

もっと詳しくいうとテーブルのカラム名をtitle から addにしたのが反映されなかった

更新されないならテーブル消しちゃえと

マイグレートで変更検知してテーブル更新してくれると思い込み

ググってDB内のアプリのテーブルを削除したのだ。

・・・・これがいけなかった。

マイグレーションは変更感知して適用されるのにもかかわらず

テーブル削除してしまうと、アプリ側のデータとしてはテーブル削除したなんてつゆ知らず、テーブルが残っていると勝手に思われているという謎の現象（謎が謎を呼ぶ）が起こってしまった

DjangoはSQLステートメントをかかなくてもテーブルとか楽に作ってくれる設計で**、まさかユーザーがDBにアクセスしてテーブル削除するとは思うまい・・・**

そういうわけでもう作り直すの嫌だった私は、そもそも変更検知できないのが問題なので、マイグレーション初期化でググった。

マイグレートの時のオプションを追加すれば初期化できて解決した。

やはりググり力は世界を救うのだろうか。（いや**主に私を**）

こんな感じで検索につかれた私は寝ることにした。

## 八日目

ようやく原型が完成した。

その時の動作はTwitterに公開している

そしてリツイートしてくれたRareTECHさんすみません

**多分コードはどうなんだろうレベルで心配だ。**

きちんと勉強して作ったというより、djangoに関しては、持ち前の知識とググり力でとりあえず動けばいいかって軽いノリで作ってしまってすみません・・・

そして八日目なので、**もはや爆速ですらない。**

タイトル詐欺にならないように爆速で作りたかった人のお話になっているから問題ないか。

ここでぱぱっとデザイン整えて提出でもよかったのだが、

それじゃあ、この間書いたフローチャート通りに実装できない！

**みんなのためになるアプリを制作したい！**

**そんな思いで始めたTodoアプリ制作をここで終わらせるわけにはいかない！**

ここは妥協するわけにはいかないと、バリデーションに力を注いだのだが

半日ほど時間がかかってしまい、JavaScriptもっと勉強しないとなぁと思った。

そしてバリデーションの実装したまではいいが、そこで冷静になり、GitHubに公開するということは、RareTECH受講生の作品が世に知られてしまうと思い、RareTECHの評判落ちたら嫌なので泣く泣く諦めることにした

バリデーションはせっかく考えたので、テーブルのデザインが崩れないような設計として文字数10文字までとし(謎仕様）タスクは増えすぎるとページネーションを考えないといけない気がするので三つまでとした。

**（自分都合の良い仕様）**

タスクの機能は色々追加できそうだが、今回は決して面倒だったからとかじゃなくて、**あえて、シンプルイズザベスト**の思考で簡易的なものにした。

## まとめ

感想としては、開発環境はコピペで手抜きしてしまったのは置いておいて、本から使った学習方法で約１.５日でDjangoからウェブアプリ作れるということがわかり、速習したいなら本を読むのが確実だと感じた

動画もいいと思うが、動画は本みたく読み飛ばせないため、こういうものが作りたいから、ここは飛ばして読むということができるなら本が確実かと思った。

しかし、読み飛ばすということは、勉強が身につかないと今回感じたため、残りの時間はGItの使い方や、djangoの仕様についてや授業の予習復習などに当てていこうと思った。

自分でアプリを作るのは楽しいと思うので、今後も時間がある時に作っていければと思う。

後にハッカソンではこんなアプリができましたとさ。

SLACKのチャットを読み込みができるアプリ。

↴スラックの内容をいい感じに引っ張ってくる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304752/5b3f9c78-403c-0d0f-13e1-ba1dc1009008.png)

↴ログイン画面かっこよくしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304752/2d08d236-1778-5f3f-53de-b61e41efe394.png)

ああああああああああああああああああああああああああああああああ！！！！！

だめだああああああああああああああああああああああああ！！！！！

（うるさい）


どこのプログラミングスクールに所属しているか一発でわかってしまうぞ笑