プログラミングの学び方講座vol.4こんにちは、フリーランスエンジニア兼テックライターのしろ(@siro3460)です。皆さんは、アプリ開発をしたことがありますか?「プログラミングの基礎は学んだけど、アプリ開発にはまだ挑戦したことがない・・・」という方もいるのではないでしょうか。プログラミング学習の流れでアプリ開発を始めてしまうと・・・途中で手が止まってしまう人が結構多いです。アプリ開発をするときは、いきなりコーディングに移る前に、簡単でもいいのでアプリ設計をすることがおすすめです!そこで今回は、「アプリ開発をスムーズに進めるためのアプリ設計」について解説します。※こちらの記事は、連載記事です。前回の記事を見てない方は以下からどうぞ。まとめアプリ設計をしてから実装することがおすすめな2つの理由はじめに、アプリ設計をしてから実装した方が良い理由について解説します。理由1:開発の終わりが見えなくなってしまう1つ目の理由は、開発の終わりが見えなくなってしまうからです。プログラミング学習の意味もかねて、時間度外視でとにかくまずは作ってみることももちろん大事です。現時点のスキルを確認することもできますし、作ることを優先すればプログラミングに集中できるので、楽しいかもしれません。何も設計せずに作り始めてしまうと、ゴールが見えなくなってしまいます。作っていくうちに機能を追加したくなったり、デザインに凝りすぎて時間がかかりすぎてしまったり、いつまでたっても開発が終わらなくなってしまうのです。ある程度自分で設計してからつくりはじめることで、完成を目指すことができます。最初から完璧を目指して機能をどんどん増やすことよりも、シンプルでもいいので自分で設計して完成させることが大事です。理由2:工数の見積もりができず現場で苦労してしまう2つ目の理由は、工数の見積もりができず現場で苦労してしまうからです。設計をせずに開発を始めてしまった場合は、どのぐらい時間がかかるか見積もることができないですよね。どこまで開発を進めるか、作るアプリの全貌が見えていないため、時間を見積ることができません。「作り終わった後に結果論として、〇〇時間かかった」という場合でも、機能を考える時間を含めた時間になってしまいますよね。そのため、正確にどのぐらい開発に時間がかかっているのか、把握することが難しいです。機能を一覧化し、画面イメージや詳細な処理を設計しておくことで、初めてかかる時間を正確に残すことができるのです。今後エンジニア・プログラマーとして仕事していく上では、「機能を実装するための工数を見積もるスキル」がめちゃくちゃ重要です。マネジメントする人が、メンバーのスキルを完璧に理解しているとは限りません。どのぐらい時間がかかりそうかメンバーと相談して、全体のスケジュールを確認しながら期日を決めていくのです。そのため、自分で正確に見積りするスキルがないと、自分で自分の首を絞めてしまうことになりかねません。・立てた予測とかかった時間を比較して、自分の実力を見極めていく経験これらをアプリ開発を通して鍛えていくことで、新しい技術や環境で開発をするときでも、柔軟に対応できるようになるのです。アプリ設計って具体的に何をすればいいの?では、アプリ開発では何を設計して進めていけばいいのでしょうか。結論から言うと、最低限以下を考えて作っていくことがおすすめです。今回はわかりやすく解説するために、簡単な「タスク管理アプリ」をもとに解説していきますね。ステップ1:アプリの概要を考えるまず、簡単にアプリの概要を企画していきます。仕事でアプリ開発するときはクライアントから要望をヒアリングしていきますが、自分で作る場合でも、簡単に概要をまとめてみましょう。データ検索できるWebアプリ・登録したタスクは、登録フォームのすぐ下にあるデータ一覧から確認ができるこのように、まずはざっくりとでいいので概要を考えていきます。ステップ2:機能一覧を作るアプリの概要ができたら、機能一覧を考えていきましょう。データ検索があるアプリなので、機能一覧は次のように考えてみました。・タスクのデータ一覧表示機能ここまでできたら、次に画面を考えていきます。ステップ3:画面イメージを作る画面イメージを考えるときは、次の流れで考えていくことがおすすめです。・機能単位で画面をイメージする・同じ画面で実現できる機能があれば併用するまずは、機能単位で画面を考えていきます。今回は、以下のように考えてみました。・タスク検索・データ一覧画面ただ、登録画面と更新・削除画面は似ていますよね。このように、別々の画面で作らなくても、ボタンの表示/非表示のみで対応できる場合があります。画面を考えるときは、画面単位で併用できる画面がないか考えていくことも重要です。ここまで考えることが難しい場合は、作りながらでも最初は構いません。慣れてきたら、画面のイメージがそろったタイミングで考えてみてください。ステップ4:画面遷移イメージを作るここまでできたら実装に移る・・・前に、画面遷移イメージを固めておくことがおすすめです。具体的には、画面のボタン・リンクなどをクリックしたときに表示する、画面の動きを図にしていきます。次のように画面を線でつないで表現します。どのボタンを押したときに、何の画面が表示されるかイメージが湧きましたよね。このように、アプリを操作をイメージしつつ画面遷移を考えていきます。ステップ5:詳細な処理を考えるここまでできたら、画面ごとの詳細な処理を考えていきます。今回は、データ登録・更新・削除の機能について、詳細な処理を考えていきますね。データ更新」の流れが基本なので、そのあたりを含めて次のように設計していきます。「削除後はデータを戻すことができません。データを削除しても良いでしょうか。失敗した場合は、エラーメッセージを表示このように、実装するときに何を作っていけばいいかわかるようなレベルで、具体的に作る処理を設計していきます。ここまで設計ができれば、あとは作っていくだけです。実装後にかかった時間」をメモすることがおすすめです。テキストでも、Excelでも何でも構いません。自分で見やすいようなものでOKなので、メモする癖をつけましょう。事前に予想していた見積りと比較することで、見積り精度をどんどん上げていくことができます。メモしておくことで客観的に自分の経験が浅い部分が見えてきます。この例ではデータ登録処理に45分かかっているので、DBまわりの知識が浅いかもしれません。SQLについて基礎を復習したり、本を買って学習を進めることで早く実装できるようになります。このように、自分を客観的に分析し、何を学ぶべきか見極めていくことも重要です。振り返りできるようにするためにも、メモしておくと良いかもしれませんね。まとめ今回は、アプリ開発をスムーズに進めるための設計方法についてお話ししました。慣れないうちは苦戦するかもしれませんが、設計してからアプリが作れるスキルはとても重要です。いう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。「フクザツなことをカンタンに」がモットーのテクニカルライター。IT企業で約5年のエンジニア経験を経て、フリーランスとして独立。フリーランス2年目で、テクニカルライターをメインに活動中。現在は、数社のメディアで記事を執筆しつつ、完全オンラインで学べるテクニカルライターレッスンを開催している。2019.07.23こんにちは、プログラマーのとだこうきです。本記事では、プログラミングに関する質問の仕方を説明していきます。2019.04.14こんにちは、フリーランスエンジニア兼テックライターのしろ(@siro3460)です。2019.08.14「プログラミングを勉強したいな。USイメージキャラクター『Freena』フリーランスの羅針盤となるメディアサイト『東京フリーランス』。フリーランスの皆さんに役立つコンテンツを配信しています。