スライドショースライドショースライドショー

サンプルアプリを改造して欲しい機能を追加してみよう


この前の章で、サンプルアプリの作成ができたと思います。サンプルアプリとはいえ、アプリをご自身の手で作り上げたというのは、エンジニアとしての第一歩を踏み出したということです。

では次のステップとして、作成したサンプルアプリを改造して欲しい機能を追加してみましょう。

とはいえ、

いきなり改造と言われてもアイデアやイメージが浮かばない!

といった方もいらっしゃいますよね。この章では、誰でも簡単にできるサンプルアプリの改造方法を解説していきます。

どんな機能を追加するか決めよう

改造をするといっても、大前提として何を追加するかを決める必要があります。あなたが必要だと思う機能をまずは3つ以上考えてみましょう

もし、あまりアイデアが浮かんでこないときは、以下の思考法で考えてみるとあなた独自の面白いアイデアが浮かんできますよ。

好きなもの(詳しいこと)× 既存のアプリ(サイト) = 新しいアイデア

例えば、あなたが作ったサンプルアプリがツイッターのようなもので、あなたが写真を好きだったとします。その2つを組み合わせてみましょう。

すると、あなたのサンプルアプリに写真を埋め込みできるという1つの機能が浮かびます。このようにあなたの好きなことや詳しいことをベースにして、考えることであなたがイメージしやすい機能が浮かんできますよ。

機能を追加するための基本サイクル

ここからは先程考え出した機能を実際に追加していく方法を解説いたします。

機能追加には「プログラマーなら誰でも行っている基本サイクル」を活用していきます。この基本サイクルは初心者でも超一流のエンジニアでも基本は同じで、違うのはサイクルを回す回数だけです。

その基本サイクルとは、

  • 定義
  • 調査
  • 実装
  • 検証
  • 修正

以上の4工程になります。それぞれ詳しく解説していくので、ぜひ活用してください。

1.定義

定義のプロセスでは、作るもの、ここでは追加する機能を定義していきます。

本来この定義は「設計」と呼ばれる重要な工程が必要になるのですが、自分のアプリを趣味で作る段階ではこの設計は省いて考えても大丈夫です。

今の段階では「写真を投稿できるようにしよう」「地図を表示できるようにしよう」「画像スライダーを配置しよう」などさきほど思いついた機能をざっくりまとめるだけでOKです。

定義段階でのポイントは、調査の際に検索出来るよう、言葉にしる事が重要です。

2.調査

調査では、実際に先程定義した機能を実装する方法を調べていきます。調査と言っても難しいことは全く無く、Google等の検索エンジンで検索するだけです。

実は、エンジニアにとって検索力というのは非常に重要な要素です。

一流のエンジニアでも毎日ググって調べ物をしています。もちろん暗記した知識だけで作業することもありますが、細かい書き方や新しい機能の追加の仕方などはすぐにググるのがエンジニアです。

そういう意味では、分からないことがたくさんあっても、いちいち全てを暗記する必要はないので、暗記するのが苦手という方も安心してください。

調査の具体的な方法ですが、これも難しくはありません。検索バーに以下のように打ちこむだけです。

「[言語名] [バージョン番号] [①で定義した機能を言語化したもの]」

例)

「HTML 固定メニュー」(HTMLの場合はバージョンを書かなくて大丈夫です)

このように検索すると、日本語でわかりやすく解説された個人ブログなどの記事がでてきます。多少慣れが必要ですが、慣れれば教材を写す感覚で、記事の指示に従い機能を追加することが出来るようになりますよ。

逆に意図した機能が表示されないときは、定義した検索言語が間違っている可能性が高いです。その際はもう一度定義からやり直してみましょう。

3.実装

実装とは簡単に言うと「組み込むこと」をいいます。

具体的には調べた記事や文献をもとに写経していくことがメインとなります。もちろん、変更を加えなくてはならない箇所がでてくるので、ただ写すだけでなく、できるだけ記事のサンプルコードを解読して理解することを意識してみましょう。

よくわからない場合は、ひとまずわからないところも写してみて、動くかどうか検証してみましょう。

4.検証

意図した処理が実行されたかどうか確認をする工程です。

アプリ開発に限らずプログラミングでは、リリース前に必ず検証を行います。そこで追加した機能が正しく行われているか、バグなど不具合がないかを確認する必要があります。

もしもバグやエラーが発見されたら、速やかに問題の原因を特定し修正します。

5.修正

実装工程で、うまくプログラムが動作し、意図した機能が追加されればいいのですが、実際その可能性は低いでしょう。大概の場合は何かしらのエラーが表示され動作しないことが多いです。そんな時に必要なのが修正です。

上記のように「不具合」が発生した際にまずやるべきことは、どんなエラーが出ているかを確認することです。

エラーが出たときは、必ずエラーメッセージが表示されるので、そのエラーメッセージをコピーしてググってみましょう。すると、あなたと同じエラーに躓いて解決した人たちが書いた記事や、質問掲示板でのやり取りなどが出てきます。そしてその情報を元に解決策を探して実施していくわけです。

しかし、エラーとならず、エラーメッセージが表示されない場合は、先ほどの調べ方が出来ません。そんな時はもう一度実装工程で活用した情報を見直し、写し間違いはないか?変更すべきところはないか?などを精査しましょう。

それでも不具合が解消されない場合は、実装工程で活用した情報の中に理解できてない箇所があります。そういった箇所を検索で調べたり、書籍で調べていくことで理解をしていきます。すると、修正すべきコードの箇所が見えてきますよ。

この章の復習

サンプルアプリに機能を追加するためには、

  • 定義
  • 調査
  • 実装
  • 検証
  • 修正

この4サイクルを回していくことが重要となります。これらの基本サイクルはどんな開発現場でも当たり前のように行われていることなので、意識して使ってみてください。

一緒に読みたい「オリジナルWebアプリ開発」の記事

7.オリジナルWebアプリ開発方法

  1. a. まずはサンプルアプリを開発してみよう
  2. c. 自分の企画したサービスを開発してみよう

次の項目「8.なぜ初心者がWebアプリ開発でつまずくのか?」に進む

LINEで送る
Pocket

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説