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

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

この10週間プログラミング講座では、知識ゼロのプログラミング初心者の方がプログラマーとしてのキャリアをスタートできることを目指す講座です。

第5週目の「「プログラミング理解できない」⇒「少しわかるかも?」に変える勉強法を解説」をまだ読んでいない方は、ぜひ先にこちらをお読みください。

ここまで学習されている方は、未経験のエンジニアとしては既に相当な実力がついています。今週が終われば、転職活動を少しずつ始めても大丈夫なレベルに到達できるので頑張っていきましょう!

今週は、ここまでの知識やスキルを総動員してTODOアプリを作成していきます。今週の講座が終わるころには、以下のことができるようになります。

  • 自力でオリジナルアプリケーションを作るイメージができる
  • データベースの操作に抵抗がなくなる
  • プログラミングが楽しくなってくる

では、見ていきましょう。

目次

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

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

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

現役のプログラマとスタート地点は同じになったことを考えると、右も左もわからなかった5週間前からすると大きな進歩といえますね!

少し話がずれましたが、TODOアプリを最初に作る理由としては以下のような力を身につけられるからです。

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

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

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

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

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

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

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

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

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

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

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

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

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

画像

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

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

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

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

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

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

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

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

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

例: 若手プログラマー保存版!フローチャート徹底解説と作成カンニングペーパー

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

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

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

続いて、TODOアプリは少し探すとわかりますが、様々な言語で作り方の解説記事が見つかるかと思います。

言語別TODOアプリの作り方

これらの記事を参考にして、自分が書いたフローチャートと処理にどんな違いがあるのか、じっくり読んでみましょう。

画像

ポイントは時間をかけてでもじっくりコードを読んで理解することだよ!

そうすると様々な発見に気づくかと思います。

  • 自分が書いたフローチャートには考えられていない部分があった
  • 処理の流れが想定と全然違った
  • そもそも使っている技術が違った

コードを読むのは面倒!と思われるかもしれませんが、プログラミングを学びたての人にとって書くことよりも読むことの方が力になるケースも少なくありません。

数時間かけてでもじっくり読んで、自分が書いたイメージと比べてみてください。

画像

理解ができたらフローチャートに足りなかった部分を足していきましょう!

できるだけ写さずに実装してみる

最後に、処理の流れを把握できたところでTODOアプリを作成していきましょう。

作成にあたっては、できるだけ「言語名 TODOアプリ」で調べて出てきた記事を見ずに作成していきます。

その中で、どうしても自力では解決できない場所が出てくるかと思いますので、そのときだけ記事の中身を確認して実装を進めてみましょう。

画像

まずは自力で作れないか頑張ってみましょう!

発展編:さらにスキルアップを目指せるTODOアプリの機能

ここまででもTODOアプリは十分完成していますが、さらにスキルアップを目指す方は「お気に入り」を追加してみましょう。

お気に入りは、Twitterのいいね!を思い浮かべてもらえるとイメージがつきやすいと思いますが、以下の機能を実現してみてください。

下に行くほど難易度が上がっていきます。

お気に入り機能
  • Level 1
    • 特定のタスクだけをお気に入りすることができる
    • お気に入りはボタンを押して登録・解除ができる
  • Level 2
    • お気に入りしたタスク一覧を表示できる
  • Level 3
    • お気に入りの選択登録、削除・一括削除ができる

全部できなくてもOKなので、「こうやったら実現できそうかな?」という頭の体操として考えてみてください!

画像

さらに自分のオリジナルで考えた機能を実現できれば言うことなしだよ!

まとめ:TODOアプリを使ってプログラミングの基礎を完璧に!

今回は、10週間プログラミング講座の第6週目としてTODOアプリの作成方法について解説してきました。お疲れ様でした。

この週の学習を終えるころには、オリジナルアプリケーションを作るまでには行かずとも、作るための全体像はおよそわかるようになっています。

今週を終えるころには、転職活動を始めても話を聞いてくれる企業もかなり増えていることでしょう。

しかし、より優良企業を目指したい!という思いのある方は、もう少し学習を進めることによってさらに盤石な体制を整えることができます。

オリジナルアプリケーションを作れるようになりたい!フレームワークを使ってもっと効率的にアプリケーション開発がしたい!という方は引き続き学習を進めていきましょう!

【ゼロから作る】本格的なwebアプリの作り方を学ぶ!学習手順と注意ポイント

関連記事

コメント

コメントする

目次