TODOアプリケーションは、プログラミング言語の基本を身につける意味で最も優れたアプリケーションの1つです。
現役のプログラマも新しい言語を学ぶときに、まず最初にTODOアプリを作るという人は多いですからね。
僕もLaravelやVue.jsを学んだときは、まず最初にTODOアプリを作ったよ！
エンジニアとしてレベルアップしたい人必見です！
TODOアプリの作成で身につく力
まず、TODOアプリを最初に作る理由を説明しておきます。結論、以下のような力を身につけられるからです。
- 基本的なアプリケーションを自力で作る力
- イチから新しい言語を学ぶ力
基本的なアプリケーションを自力で作る力
まず最初に、TODOアプリを作ることによって、基本的なアプリケーションであれば自力で作るイメージが湧くようになります。
なぜなら、TODOアプリは以下のようなあらゆるアプリケーションを作る上で必須の技術が詰まっているためです。
- form処理（GET・POSTリクエスト）
- セキュリティの知識
- データベースの登録・削除・更新・編集処理
- CookieやSession（ログイン機能を作るなら）
これらの技術は世の中にあるWebサービスの9割9分に使われていると言って過言ではありません。
逆に言えば、これらを使いこなすことができれば、あなたの作りたいような
- 飲食の注文を取るシステム
- 読みたい本の書籍管理システム
- TwitterやinstagramのようなSNS
- ブログの投稿システム
といったサービスを作ることができるようになります。
イチから新しい言語を学ぶ力
また、上記でもお話しましたが、現役プログラマもまず最初に作るアプリケーションはTODOアプリということが多いです。
新しい言語なりフレームワークなり勉強するなら、いきなり作りたいものとか考えて作るよりも、まず最初は思考停止して、
— セヤ🤔webエンジニア (@ceya_net) June 7, 2019
TODOアプリなり、日記アプリなり、掲示板なり、フォームなり、
シンプルに簡単作れるものを、ドキュメント見ながら、実際に手動かして作ってみるのがベストかなぁ
つまり、TODOアプリを自力で作ることができるようになれば、何か新しい言語を学ぶ際にもスムーズに学習を進めることができるというわけです。
今はこれまでに学んできた言語で作るのが精一杯と思われるかもしれません。しかし、プログラミングに慣れてくると新しい言語でもサクッとTODOアプリを作れるようになりますよ。
TODOアプリ作成の具体的な手順
では、TODOアプリを作成していきましょう。
今週の学習目的は「自力でオリジナルアプリケーションを作るイメージができるようになること」です。
したがって、これまでの学習とは少し違いますが、以下の手順でTODOアプリを作成してみてください。
- TODOアプリのフローチャートを紙に書いてみる
- 「言語名 TODOアプリ」で調べて1. の作り方との違いを見比べる
- できるだけ写さずに実装してみる
TODOアプリの全体像を紙に書いてみる
まず、TODOアプリを作る前に一度全体像を把握するためにフローチャートを簡単に書いてみましょう。
フローチャートとは、以下のような処理の流れを簡単に図で表したものです。
細かいフローチャートの形や線はあまり意識しなくても構いません。それよりも、全体の処理の流れを自分の中でイメージできるかが非常に重要です。
Web上で作成するのであれば、Cacooを使うと便利です。フローチャートのテンプレートもあります。
また、紙に書くのであれば、メモ程度に機能の実現方法やURLなどを書き込んでおくのもありかもしれませんね。
「言語名 TODOアプリ」と調べて自分で考えた作り方と見比べる
続いて、TODOアプリは少し探すとわかりますが、様々な言語で作り方の解説記事が見つかるかと思います。
これらの記事を参考にして、自分が書いたフローチャートと処理にどんな違いがあるのか、じっくり読んでみましょう。
ポイントは時間をかけてでもじっくりコードを読んで理解することだよ！
そうすると様々な発見があるかと思います。
コードを読むのは面倒！と思われるかもしれませんが、プログラミングを学びたての人にとって書くことよりも読むことの方が力になるケースも少なくありません。
数時間かけてでもじっくり読んで、自分が書いたイメージと比べてみてください。
理解ができたら、フローチャートに足りなかった部分を足していきましょう！
できるだけ写さずに実装してみる
最後に、処理の流れを把握できたところでTODOアプリを作成していきましょう。
作成にあたっては、できるだけ「言語名 TODOアプリ」で調べて出てきた記事を見ずに作成していきます。
その中で、どうしても自力では解決できない場所が出てくるかと思いますので、そのときだけ記事の中身を確認して実装を進めてみましょう。
まずは自力で作れないか頑張ってみましょう！
発展編：さらにスキルアップを目指せるTODOアプリの機能
ここまででもTODOアプリは十分完成していますが、さらにスキルアップを目指す方は「お気に入り」を追加してみましょう。
お気に入りは、Twitterのいいね！を思い浮かべてもらえるとイメージがつきやすいと思いますが、以下の機能を実現してみてください。下に行くほど難易度が上がっていきます。
- Level 1
└ 特定のタスクだけをお気に入りすることができる
└ お気に入りはボタンを押して登録・解除ができる - Level 2
└ お気に入りしたタスク一覧を表示できる - Level 3
└ お気に入りの選択登録、削除・一括削除ができる
全部できなくてもOKなので、「こうやったら実現できそうかな？」という頭の体操として考えてみてください！
さらに自分のオリジナルで考えた機能を実現できれば言うことなしだよ！
まとめ｜TODOアプリを使ってプログラミングの基礎を完璧に！
この記事では、TODOアプリの作り方を紹介してきました。
繰り返しですが、TODOアプリの開発はエンジニアとしてのスキルアップにもってこいです。
この記事に書かれたことを終えるころには、転職活動を始めても話を聞いてくれる企業もあることでしょう。
しかし、より優良企業を目指したい！という思いのある方は、もう少し学習を進めることによってさらに盤石な体制を整えることができます。TODOアプリは転職時のポートフォリオとしては弱いですし。
やはり、オリジナルアプリケーションを作った上で転職活動に望んだほうが成功確率がぐっと上がります。オリジナルアプリの作り方は以下の記事で紹介しているので、ぜひ読んでみてください。
» 【5ステップ】初めてのオリジナルアプリの作り方！アイデアの出し方も公開
しかし、自分一人でオリジナルアプリを開発するのは大変です。エラー対応からアプリの公開まで、全部自分でやっていく必要があります。
そうなると、思っている以上に時間がかかってしまうものです。もし最短でエンジニアに転職したいのならばプログラミングスクールの利用を検討してみてはいかがでしょうか。
とはいえプログラミングスクールは価格が数十万円もするものが多く、少し手が出せない…と感じますよね。
しかし、良質なスクールほど未経験エンジニアを引き上げてくれる場所はありません。プログラミング学習で挫折するぐらいなら、お金を払ってでもスクールを利用する価値はあります。
中でも一番おすすめのスクールはtech boostです。
tech boostをおすすめする理由は以下のとおりです。
また、tech boostについて簡単にまとめると以下の通りです。
| 入会金 | 219,780円（税込）～ |
| 受講料 | 月額34,760円（税込）～ |
| 対応言語 | PHP、Ruby、JavaScript、Javaなど |
| 学習内容 | 基礎からオリジナルアプリ開発まで |
| 学習形態 | オンライン or 通学（渋谷） |
| 受講対象 | 制限なし |
| 学習期間 | 3～12ヶ月 |
料金は少し高めですが、着実にスキルを身につけられるため、料金に見合ったリターンがあると言えます。
まずは無料相談会で、あなたに合った学習プランを提案してもらうといいでしょう。
詳しくは、以下の記事でも紹介しています。
