プログラマーになるには。 アプリをゼロから構築する 8 つのステップ

ステップ1：アイデアを選ぶ

さて、自分自身を理解できたとしたら、次は構築するアイデアを選ぶ番です。 5811>

そうです…ゲームを構築しようと考えている場合でも、今は次の CounterStrike を構築しようと考えるのではなく、悪名高い Flappy Bird のようなシンプルなゲームを構築する方法を考えるべきなのです。 Flappy Birdを見下さないでほしいんだ──あれは世界中の人々に自分の中のマゾヒストを発見させるセンセーションだったんだ。 5811>

では、あなたの興味に基づいて、何か素晴らしいことをするシンプルなアプリのアイデアを思いついてください。

ここで、インスピレーションを得るのに役立つポインタをいくつか紹介します。

• 料理が好きなら、人々が自作のレシピを紹介するアプリを作ることを考えることができるかもしれません。
• League of Legendsにハマっているなら、RiotのAPIを調べて、ゲーム情報を&表示できるサイトを作ってみるのもいいでしょう。
• カードゲームが好きなら、簡単なものを作ってみる（ブラックジャックなど）
• ダイエット中なら、摂取カロリーを記録するアプリを作ってみる

などなど、いろいろあります。 さらにインスピレーションが必要な場合は、プロジェクトのアイデアのリストをご覧ください。

方向性が決まったら、目的、そして該当する場合は、このアプリの最も重要なターゲットユーザーを一文で書き出してください。 ステップ 2: コア機能の定義

アプリができるべきことについて考え、それらをリストアップします。 多くのことをリストアップしてしまう場合は、よく見て、このアプリが本当に動作するために Facebook ログインが必要かどうか自問自答してください。

素晴らしい仕様の夢のプロジェクトがあるのは素晴らしいことですが、今のポイントは、多くのクールな機能を備えた完全なものを構築することではありません。 どんなアプリも完全なものはなく、すべてはシンプルなものから始まることを心に留めておいてください。 そこに行かないでください。 鉄の意志を持っているか、チャレンジが本当に好きでない限り、最初のプロジェクトがあまりにも難しいと、挫折して落胆することになります。 あなたは初心者です……今のポイントは、楽しむことです。 楽しく学ぶことが最も効率的な方法です。

そこで、作成した機能のリストを見て、それが長すぎる場合は、アプリがなくても動作する機能性を消し始めます。 アプリが行うことになっていることを何でも実行できるようにするものに焦点を当て、他のすべては別のプロジェクトに残すことができます。

Reddit クローン用のコア機能のサンプル リストについてはこちらをご覧ください。

• ユーザーはアカウントを作成できる
• ユーザーは失ったパスワードを回復できる
• ユーザーはパスワードを変更できる
• ユーザーは新しいリンクを投稿できる
• ユーザーはコメントすることができる リンク
• users can upvote/downvote links
• users have a profile showing their history/activity

上記に挙げた機能は、最初に焦点を当てるべきコアな機能である。 その他の機能として、

• ユーザーはソーシャル メディアに共有できる
• ユーザーはコメントを削除できる
• ユーザーはコメントを編集できる
• ユーザーは自分のアカウントを削除できる

は二の次で、バージョン 1 で残しておくことが可能です。x-only work on these after you can actually launch version 1.0

Step 3: Sketch Your App

CC License

Not is fast than a pen & paper.これは、アプリをスケッチすることです。 今では、アプリで何をすべきかについてかなり固い考えを持っているはずですので、アプリの UI (ユーザー インターフェイス) のワイヤーフレームをスケッチしてください。 ボタンをどこに配置するか、そのボタンの目的は何か、などです。

メモを書き留め、アプリがどのように動くべきかを具体化する。 まだブレインストーミングの段階なので、ある程度納得がいくまでいろいろと変えてみましょう。

忘れないでください、物事をシンプルに保つことです。 ステップ 2 でリストを短縮した場合、そこにリストされたスケッチ機能のみに固執して、調子に乗らないようにします。

全体として、これは最終的な外観ではなく、むしろ、アプリをより強固に把握するためのステップにすぎません。 アプリがどのように見えるか、すべての要素が何をすべきか、ユーザーがアプリとどのように対話できるかについて、良いアイデアがあります。 今度は、アプリの UI フローを把握する番です。 つまり、ユーザーがアプリを最初から最後までどのように使うべきかということです。 ユーザーが取るべきステップと、遭遇する可能性のあるシナリオをすべて図にします。

(CC License)

フローチャートには、ユーザーが取ることのできるすべてのアクションを含めます。 たとえば、アプリでユーザーがログインする必要がある場合、ユーザーはどのようにアカウントを作成するのでしょうか。 ユーザーがパスワードを忘れた場合はどうなりますか。 間違ったパスワードを入力した場合はどうするか。 各インターフェースでユーザーができること（新しいリスト項目の追加 > 保存、編集 > 保存/削除）は何でしょうか？ などなど。 5811>

繰り返しになりますが、アプリはかなりシンプルであるべきなので、図はあまり大きくならないはずです。

ステップ 5: データベースの設計

わかりました! すべての可能なシナリオを計画した後、どのような種類のデータを保持する必要があるかを判断するために、それを見てみましょう。 たとえば、アプリでユーザーがアカウントを作成する必要がある場合、ユーザー名、ユーザー ID、ユーザーの電子メール、パスワード、ユーザーの電子メールが確認されたかどうか、アカウントが作成されたとき、およびユーザーがアプリにログインしたときなどのデータを追跡する必要があります。

Twitterクローンを構築する場合、ツイートのID、ツイートの内容、ツイートの公開日/リツイート日、リツイート数、スター数などを知る必要があります。 また、ユーザーのリツイートやスターの記録も必要です。

ERM（Entity-Relationship Model）図を描くと、データの関係をマッピングできます。

A example of a course selection site’s Entity-Relationship Diagram CC License

さらに、将来的に計画している機能があれば、この機会にデータベースに計画しておくとよいでしょう。 5811>

Advanced

計画しているアプリがサーバーとやり取りする場合 (たとえば、フルスタックの Web アプリを構築している場合)、またはアプリが API とやり取りする場合 (たとえば、Web アプリを構築している場合)、データベースを設計する際にチェックしておきたい記事があります。 Wikipedia

より）、ステップ 6: UX ワイヤーフレーム

さて、バックエンドを計画しましたね。 5811>

願わくば、あなたはまだ上記のミニオンと同じくらい興奮していることと思います。 必要なものがわかっているので、アプリケーションがどのように見えるかについて、より良いアイデアを持っています。

CC License

人間はほとんど視覚的な生き物なので、コーディングするすべてのビューを視覚化できれば、何をすべきかをよりよく理解できるようになります。 しかし、もしあなたが私のように絵がとても雑で、あなたが作った咳の傑作をほとんど理解できないなら、あなたの貧しい芸術的脳を酷使してこのステップを進めるのは当然賢明ではないでしょう。

幸いなことに、UX/UI フローを計画するのに役立つ多くのワイヤーフレームおよびモックアップ ツールがオンラインで存在します (たとえば、Gliffy、Mockflow、Framebox、Wireframe.cc、Invisionapp など)。 UI の設計

これは任意のステップですが、フロントエンド開発に特化するつもりであるか、または、より美しいアプリがコーディングのモチベーションになる程度にアプリがどのように見えるかに多くの関心がある場合は、先に進んでアプリを設計し、これらのワイヤーフレーム UI 要素すべてをより美しいものに置き換えることができるようにします。

デザインをするのが好きな場合は、いずれにせよ、開始する前にアプリをデザインすることになるでしょう。 UI 要素のリソースをいくつか紹介します。
（要 Photoshop）

UI Cloud
Graphicburger
UI Dock

ゲーム用：
Spriders Resource

ただしアプリの外観にはあまりこだわらなくてもよいのですが、この場合、アプリの外見を気にしすぎてはいけません。

ステップ 7: ソリューションを調査する

素晴らしい! プログラマーとして習得しなければならない重要なスキルは、他の開発者がすでに書いたものをいつ使用し、いつ自分でその機能を構築すべきかを評価することです。 したがって、いつ既存のソリューションを使用し、いつ自分で構築するかを判断する必要があり、経験を積むことでそれがうまくできるようになります。

広大な海で方向性を失った船のように感じたら、深呼吸をして慌てないでください。 あなたならできます。

調べ、「Google-fu」を磨き、ものを作る経験を重ねるうちに、いずれこのプロセスのコツをつかむことができます。

Looking at Solutions

ステップ 2 で作成した機能リストと、描いたすべての図を見てください。

構築する方法がまったくわからないものは何ですか？

たとえば、ユーザーがアカウントを作成する必要があるか？ あなたのアプリはリアルタイムの更新に依存していますか？

ほとんどの場合、リアルタイムの同期処理 (例: Firebase)、ネットワーキング/ルーティング (例: iOS アプリ用の AFNetworking)、認証、および UI 関連のコンポーネント (例: Firebase) などの大きな機能については既存のソリューションをそのまま使用するのがよい方法でしょう。5811>

バックエンド関連のコンポーネント/パッケージ/gems などを検索するためのオンライン データベースは数多く存在しますが、他の人が書いたものを評価する際には注意が必要です。 今はあまり複雑なものを作らないことを望んでいるので、他の人が書いたコンポーネントはおそらく必要ないでしょう。

とにかく、最初のころの最善の方法は、他の開発者が先に行ったことを研究して、その決定の背後にある論理を学ぶことです。 GitHub はあなたの親友です。

特定の機能に対する経験豊富な開発者の研究プロセスの実例として、Angular-Plunker の作成者が Plunker のドラッグ アンド ドロップ ディレクティブを構築した方法に関するこの投稿を確認することができます。

使い始めるためのツールを選択する

Web アプリを構築している場合、プロジェクトの構造を設定することにより、新しいプロジェクトをすばやく開始できるようにすることを目的としている Yeoman をチェックアウトできます。 HTML5Boilerplate と Bootstrap は、アプリのフロントエンド テンプレートとして人気があります。 5811>

既存のコンポーネントやソリューションを使用する可能性が高いので、依存関係管理のために bower (Node.js を使用している場合は npm、iOS 開発者の場合は CocoaPods) もインストールすべきです。 心配しないでください。ほとんどの場合、これらのツールにはインストール方法を説明するチュートリアルが付属しています。

ステップ 8: アプリの構築

はい！これでアプリを構築する準備ができています。 5811>

チェックリスト

機能ごとにアプリを構築することに集中する必要があります。 したがって、コメント システムなどの 1 つのタスクが完了していない場合、ユーザー プロファイル ビューの構築に突然着手してはいけません。

全体として、進捗状況を把握するために、機能の To Do リストを書き出し、チェックリストとして使用できます。

Write Tests First

ゲーム アプリを構築しない限り、実際に機能をコーディングし始める前に、まず機能のテストを書くのは良いアイデアです。 バグは避けられませんが、テストを行うことにより、ミスを大幅に減らし、バグのあるコードを実運用環境にリリースする可能性を減らすことができます。 しかし、将来、新しい機能を追加し続けるような大きなプロジェクトを構築する場合、あなたのアプリにこのようなことが起こるかもしれません。

それから、これ (が起こることの誇張表現です) が起こるかもしれません。

Or god forbid:

And this would be you, trying to fix the app:

…More or less than.こうなるかもしれないのです。

ですから、小規模から始めて、テスト駆動開発 (TDD) を行う習慣をつけるのは良い考えです。 JavaScript の Jasmine や Karma、Ruby の Rspec、Python の PyTest、PHP の PHPUnit、iOS 開発の xCTest の代替となる Quick など、多くのテストツールがあり、自分に合うと思うものを選択することができます。

さらに、iOS または Android アプリを作成している場合は、Crashlytics をチェックするとよいでしょう。

効率的かつ効果的にデバッグするための 7 ステップ

Git を使う

Git はバージョン管理システムで、履歴とバージョン追跡機能を完全に備えた本格的なレポジトリです。 最初のアプリを作りながら、Git の使い方を学び始めるのは良いアイデアです。 そうすれば、失敗を簡単に取り消したり、失われたデータを回復したりすることができます。 さらに、将来的に開発者チームと一緒に仕事をする予定があるなら、いずれにせよgitを使う必要があります。 GitHubはオープンソースプロジェクトで最も人気のあるGitリポジトリホスティングサービスで、Bitbucketはプライベートリポジトリ用です。

gitを使っていて問題に遭遇した場合は、10 Most Common Git Problems and How to Fix Themという記事が参考になるかもしれません。

If You Get Stuck…

初心者であれば、ハムスターのように感じることはよくあるでしょう。 5811>

それでもうまくいかない場合、自分自身を解き放つ方法をいくつか紹介します。

Google

ステップ 7 で Google フーについて触れましたが、もう一度強調しておきますが、Google する方法はすべてのプログラマーが身につける必要がある重要なスキルです。

Ask on StackOverflow

おそらく、Google の結果がほとんど StackOverflow の質問と回答であることに気がつくでしょう。

質問で自分の研究を行ったことを示すことを忘れないでください – その方がより多くの回答を得られる可能性が高くなります。 メンターを見つける

StackOverflowは初心者に優しくない、なぜなら初心者は質問のフレーズを知らないから、と言う人がいます。 しかし、自分の問題が何であるかさえわからない場合はどうでしょうか。

ヘッドデスキング寸前（あるいは、すでにヘッドデスキングしている場合…）でも、額を酷使する必要はありません（頭を強く打てば脳細胞がなくなるだけ）。

開発と学習プロセスを促進するすばらしい選択肢として、ベテラン プログラマーから支援を受けることがあります。 人 X が有名な専門家で独学のプログラマーだからといって、自分がどこかバカであるかのように感じる必要はないのです。

このように、Codementor のライブ 1:1 セッションで、経験豊富なプログラマーから支援を受けることができます。 これらのセッションでは、経験豊富な開発者とビデオチャットをして、画面やコードを共有することができ、メンターはコードの修正方法を教えると同時に、何が間違っていたのかを教えてくれるので、今後その誤りを避けることができます。 また、ビデオチャットツールを使って、セッションのコードを確認したり、セッションをローカルディスクに記録することもできます。 今すぐサインアップして、最初の 15 分を無料でお試しください。

最後のヒント

プログラマーは常に間違いを犯すので、自分が書いたテストにさえ合格できない場合や、常につまづいている場合でも、落胆する必要はありません。 iOS9とかAndroid Lollipopとか、自分が愛用してるアプリを考えてみるといい。 確かに、世の中で最も成熟したアプリでさえまだバグがあるので、世の中で最も完璧でバグのないアプリを作れるとは思わないでください (もちろん、これは自分に対して低い基準を設定すべきという意味ではありません。高品質のアプリを作るために常に努力すべきです)。

さらに、1 つのことに何時間も何日もかけても、自分の思うように動かすことが難しいことは非常によくあることです。 新しい機能をすばやくプログラミングするのが簡単であれば、世の中に新しいプログラマーは必要ないでしょう。 今頃、私たちは完璧な iOS100 を使って、マトリックスのようなデジタル化された世界を構築していたことでしょう。

このように、人々が物作りを始めるように勧めるときに、「間違いを犯せ」という言葉をよく耳にします。 彼らは本気でそう言っているのです。 プログラマーとして受け入れなければならないことの 1 つは、一瞬で機能を思いつくような優れたコーディング マシーンにはなれないということです。 5811>

繰り返しになりますが、あなたは初心者なので、最初は多くのことがどうしても難しくなることを忘れないでください。 簡単なはずのことに多くの時間を費やし、苦しい上り坂に思えるでしょうが、経験を積んでいけば、だんだん簡単になっていきます。 5811>

Happy Coding! 5811>

Author Bio

Yi-Jirr Chen || Content Maketing & Operations
ゲームと科学技術好きな、典型的で大規模なギークです。 また、理由があってペンネームで小説を出版しています

あなたが興味を持つかもしれない他の記事。

• How to Get Your First Developer Job (even if you don’t have a CS Degree)
• Developer Community’s 9 Tips for Coding Beginners
• 40 Side Project Ideas for Software Engineers
• How to Launch Your Career and Land Your First Client as a Freelance Developer