初めてTodoアプリを作成する際に意識したい本気のスキルアップ学習手順

プログラミング勉強方法

TODOアプリケーションは、プログラミング言語の基本を身につける意味で最も優れたアプリケーションの1つです。

現役のプログラマも新しい言語を学ぶときに、まず最初にTODOアプリを作るという人は多いですからね。

たかひろ
たかひろ

僕もLaravelやVue.jsを学んだときは、まず最初にTODOアプリを作ったよ!

エンジニアとしてレベルアップしたい人必見です!

TODOアプリの作成で身につく力

まず、TODOアプリを最初に作る理由を説明しておきます。結論、以下のような力を身につけられるからです。

  • 基本的なアプリケーションを自力で作る力
  • イチから新しい言語を学ぶ力

基本的なアプリケーションを自力で作る力

まず最初に、TODOアプリを作ることによって、基本的なアプリケーションであれば自力で作るイメージが湧くようになります。

なぜなら、TODOアプリは以下のようなあらゆるアプリケーションを作る上で必須の技術が詰まっているためです。

TODOアプリ作成で使う技術
  • form処理(GET・POSTリクエスト)
  • セキュリティの知識
  • データベースの登録・削除・更新・編集処理
  • CookieやSession(ログイン機能を作るなら)

これらの技術は世の中にあるWebサービスの9割9分に使われていると言って過言ではありません。

逆に言えば、これらを使いこなすことができれば、あなたの作りたいような

  • 飲食の注文を取るシステム
  • 読みたい本の書籍管理システム
  • TwitterやinstagramのようなSNS
  • ブログの投稿システム

といったサービスを作ることができるようになります。

イチから新しい言語を学ぶ力

また、上記でもお話しましたが、現役プログラマもまず最初に作るアプリケーションはTODOアプリということが多いです。

つまり、TODOアプリを自力で作ることができるようになれば、何か新しい言語を学ぶ際にもスムーズに学習を進めることができるというわけです。

今はこれまでに学んできた言語で作るのが精一杯と思われるかもしれません。しかし、プログラミングに慣れてくると新しい言語でもサクッとTODOアプリを作れるようになりますよ。

 

TODOアプリ作成の具体的な手順

では、TODOアプリを作成していきましょう。

今週の学習目的は「自力でオリジナルアプリケーションを作るイメージができるようになること」です。

したがって、これまでの学習とは少し違いますが、以下の手順でTODOアプリを作成してみてください。

TODOアプリの作成手順
  1. TODOアプリのフローチャートを紙に書いてみる
  2. 「言語名 TODOアプリ」で調べて1. の作り方との違いを見比べる
  3. できるだけ写さずに実装してみる

TODOアプリの全体像を紙に書いてみる

まず、TODOアプリを作る前に一度全体像を把握するためにフローチャートを簡単に書いてみましょう。

フローチャートとは、以下のような処理の流れを簡単に図で表したものです。

細かいフローチャートの形や線はあまり意識しなくても構いません。それよりも、全体の処理の流れを自分の中でイメージできるかが非常に重要です。

Web上で作成するのであれば、Cacooを使うと便利です。フローチャートのテンプレートもあります。

また、紙に書くのであれば、メモ程度に機能の実現方法やURLなどを書き込んでおくのもありかもしれませんね。

「言語名 TODOアプリ」と調べて自分で考えた作り方と見比べる

続いて、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ヶ月

料金は少し高めですが、着実にスキルを身につけられるため、料金に見合ったリターンがあると言えます。

まずは無料相談会で、あなたに合った学習プランを提案してもらうといいでしょう。

タイトルとURLをコピーしました