※まずはじめに
未経験から一人前のエンジニアになる為に一番やってはいけない事は、「闇雲にプログラミング学習をしてしまう」事です。正しい前提情報を知らないままプログラミング学習を始めてしまうと、エンジニアになるまでに何倍もの時間がかかってしまいます。プログラミングを始める前に必ず知っておくべき情報を網羅的にインプットする事で、正しい手順と正しい心構えでプログラミングに臨める状態を目指します。
- 「どのようにプログラミング学習を進めればよいのだろう」
- 「エンジニアになるためにはどのような手順が必要なのか」
- 「最速でプログラミングを身につけるためのコツが知りたい」
上記のような疑問がまだ残っている方は必読です。
そして何ができるようになるか？
- 最短でプログラミングを習得できるようになる
- プログラミングでどんなモノを作れるようになるのかイメージが湧く
- エラーの解決方法がわかる
- オリジナルアプリの開発工程がわかる
Webアプリ開発を始める前に
- そもそも「Webアプリ」とは何か
- 有名なWebアプリの紹介
- 一般的なWebアプリの開発フロー
そもそも「Webアプリ」とは何か？
「Webアプリってそもそも何だろう……」
「Webアプリ」というワードは聞いた事があっても、説明出来る方は少ないと思います。実はアプリには様々な種類があり、それぞれ仕様や用途が異なります。Webアプリとは、「アプリ」という概念のうちの1つにすぎません。では、Webアプリとはどんなアプリを指しているのでしょうか？
ここでは以下の点について解説します。
- アプリの種類
- それぞれのアプリの特徴
- Webアプリの仕組み
アプリの種類
「アプリ」と聞いた時、どんなものをイメージしますか？多くの方は、スマートフォンで利用しているアプリが思い浮かぶと思います。実はアプリは一括りにされがちですが、アプリには大きく3つの種類があります。
- Webアプリ
- ネイティブアプリ
- ハイブリッドアプリ
では、それぞれどのような特徴があるのか解説します。
Webアプリ
Webアプリとは、端末にインストールする必要がなく、インターネット回線があれば利用できるアプリの事です。Webサイトのように一方的に情報を伝えるのではなく、入力などによって双方向のやり取りをする事が可能です。
例えば、外食をする時によく使われる「食べログ」を想像して下さい。食べログはインターネット上で飲食店の情報をまとめているWebアプリで、回線さえ繋がっていればどこでも見る事が出来ますよね。このように、インターネット（ブラウザ）上で動作するアプリがWebアプリに分類されます。
ネイティブアプリ
ネイティブアプリとは、アプリ自体をスマートフォンやタブレットにインストールする事で、端末上のみで動作するアプリの事です。各端末のOS上で動作する仕組みになっているので、指定されたOS上でしか利用できません。また、カメラや電卓アプリのように、基本的にはインターネットに接続しなくても利用できます。App StoreやGoogle Playからインストールして、スマートフォンやタブレット上で利用するアプリは、すべてこのネイティブアプリです。
ハイブリッドアプリ
ハイブリッドアプリとは、これまでに紹介したWebアプリやネイティブアプリの特徴を兼ね備えたアプリの事です。ブラウザ上でも、インストールした端末上でも利用できます。
例えば、GmailやGoogleマップなどはブラウザ上でもアプリ上でも利用できますよね。最近では、ハイブリッドアプリの開発が一般的になっています。
Webアプリの仕組み
Webアプリは内部的に、以下の2つの領域から構成されています。
- クライアントサイド
- サーバーサイド
これらを簡単にまとめると、以下のとおりです。
- ユーザーがコンテンツを要求するのが「クライアントサイド」
- 要求されたコンテンツを格納しているのが「サーバーサイド」
それぞれが重要な役割を持っているので、しっかりと理解してください。
クライアントサイドの特徴
クライアントサイドについて調べると、「HTTP」や「FTP」といった難しい用語が出てきます。初心者の方がいきなりHTTPやFTPについて理解するのは難しいので、まずはクライアントサイドがどんなものかを把握して下さい。クライアントサイドとは簡単にいえば、「ユーザーが手に触れて見る事の出来る領域」の事です。
例えば、あなたが今まさに見ているこの画面、つまりパソコンやスマートフォンから見える画面は総じて「クライアントサイド」といいます。まずはこの程度の理解で十分です。より詳しくは、実際にアプリを開発するときに理解してください。
サーバーサイドの特徴
次は、サーバーサイドについて解説します。サーバーサイドは簡単に言えば、「ユーザーが普段見たり触れたり出来ない領域」の事です。もう少し掘り下げると、「Webアプリのデータが格納されている場所」を指します。サーバー（server）という単語には本来、「提供する人、仕える人」といった意味があります。つまりサーバーサイドは、クライアントサイドから求められた情報やデータを「提供する側」と解釈できます。
一般的なWebアプリの開発フロー
- Webアプリの開発とはどんなものか
- Webアプリを開発するには何をしなければならないのか
どんなことにも言えることですが、全体像を把握することはモチベーションの維持にも繋がります。結論のない発表やプレゼンに途中で飽きてしまった経験が、あるのではないでしょうか？人間は、「ゴールが見えているほうが集中力が持続しやすい」という事がわかっています。
また、開発の全体的な流れが頭に入っていれば、ゴール（完成）に向かって行う一つ一つの作業に達成感を味わう事が出来ます。小さな達成感を積み重ねて前に進む程、ゴールの価値が高まってやる気が湧き、モチベーションを持続させられます。
開発フローの全体図
STEP1. 企画の作成
ステップ1では、企画を作成します。企画は、Webアプリを開発するうえで根幹となる大切な作業です。企画の段階では、主に以下のような内容を考えます。
- 目的
- コンセプト
- ターゲット
- 機能などアイディアの洗い出し
ビジネスでWebアプリを開発する場合は利益を上げる必要があるので、キャッシュポイントや開発費の予算なども考えなくてはなりません。しかしそれは、会社の規模や開発するWebアプリによってバラつきがあるので今回は触れません。
企画の段階では、「これから開発するWebアプリが社会のどんな課題を解決するのか」「競合との差別化をどう行うか」「誰に利用してもらいたいか」などをしっかりと決めていきます。
そしてその後、どんな機能が必要かアイディアを洗い出します。アイディアを洗い出す時は、「実現可能かどうか」「売れるかどうか」といった事は考えず、できるだけたくさんのアイディアを出す事をおすすめします。
STEP2. スケッチの作成
スケッチは、文字ではなく視覚的に企画内容を把握する為に作成します。ステップ3で正確に機能の骨組みを作っていくので、このスケッチの段階では手書きで問題ありません。正しく企画内容を把握できればよいので、体裁よりもスピードが重視されます。
STEP3. ワイヤーフレームの作成
ワイヤーフレームは、スケッチによるイメージをさらに正確に表現する為に作成します。ボタンをクリックした先はどの画面に移動するかなど、機能の骨組みを作っていきます。Webサイトの場合、ワイヤーフレームは「どんなデザインになるかを把握する為の下書き」です。一方でWebアプリの場合、ワイヤーフレームはあくまで機能を確認する為に作られるものなので、基本的にデザインまでは考慮されません。
STEP4. モックアップの作成
モックアップとは
モックアップとは、アプリに必要な機能やデザイン、動きなどの仕様が視覚的にわかる指示書のようなものです。ワイヤーフレームからさらに、色やフォント、テキスト、画像などのデザイン情報が追加されています。モックアップによって開発内容がより具体的にイメージできるようになる為、多くの微調整が行われるステップでもあります。モックアップは手書きのほか、エクセルを利用して作ることもありますが、一般的には以下に紹介するようなツールを利用します。
モックアップの作成におすすめのツール
ここでは、モックアップを作成する時に便利なツールを紹介します。有料、無料、一部無料など料金体系は様々です。「日本語に対応しているか」「使い勝手が良いか」など、実際に使ってみて自分に合うツールを探してください。
Adobe XD
- 有料・無料版あり
- デザイン性に優れ、使いやすい。ワイヤーフレームも作れる
POP
- 有料・一部無料
- 手書きのモックアップをスマートフォンで撮影し、ツール内に取り込める
Porrt
- 有料・一部無料
- 日本語対応
Flinto
- 有料・30日間無料トライアル
- スマートフォン対応
Cacoo
- 有料・14日間無料トライアル
- 共同作業ができる
Moqups
- 有料・一部無料
- 日本語未対応
- ドラック＆ドロップで作成できる
Pencil
- 無料
- 日本語未対応
- ドラッグ＆ドロップで作成できる
STEP5. 必要な技術を調べる（技術リサーチ）
Webアプリの仕様が決まったら、次は実際の開発に必要となる技術を調べます。工数や納期、コストなどを念頭において、実現可能かどうかを判断します。無理そうであれば、実現できるようにレベルダウンさせたり、他の機能に変更したりするなど、開発コストと売上見込みのバランスが求められます。
オリジナルWebアプリ開発を始める前に
- そもそも「オリジナルアプリ開発」とは何か
- オリジナルアプリ開発のメリット
- オリジナルアプリ開発のロードマップ
そもそも「オリジナルアプリ開発」とは何か？
「まだ世に出ていないモノを生み出さなくては……」
「オリジナル」と聞くとこのように感じ、「自分には難しい」と諦めてしまう方もいると思います。しかし実は、オリジナルアプリ開発は思っているほど難しくはありません。「少しの工夫」と「どうすればよいか」を知っていれば、オリジナルアプリを開発することは可能です。そこでまずは、「オリジナルアプリ開発」とは何かについて解説します。
「オリジナル＝まだ世の中に存在しないもの」ではない
「オリジナル」というと勘違いされがちですが、「オリジナル＝まだ世の中に存在しないもの」ではありません。オリジナルアプリ開発とは、「新しい価値を届けるアプリを開発する事」です。
例として、大手の牛丼チェーン店をイメージしてください。吉野家、すき家、松屋など、世の中にはたくさんの牛丼チェーン店があります。一見同じように見えるこれらのチェーン店ですが、それぞれアプローチの方法が違ったり、様々な工夫がなされていたりして、それぞれに個別のファンを獲得しています。
アプリにも同じことがいえます。世の中にはすでに多種多様なアプリがあり、既存のアプリとまったく別の新しいものを生み出すのはほぼ不可能です。オリジナルアプリは既存のアプリを改善したり、アプローチを変えたりして開発されています。よって、「自分だけのオリジナルアプリを作らなくては……」と感じる必要はありません。経験を積む事で知識が蓄積され、次々にアイディアが出てくるようになります。初心者のうちは数をこなす事が重要です。
初心者がオリジナルWebアプリ開発を行う為には
初心者がオリジナルWebアプリ開発を行う為には、開発の全体像や、やるべき事をしっかりと把握してから開発に取り組む必要があります。
まだ前記事の「一般的なWebアプリの開発フロー」を見ていない方は、下記リンクへ。
また、プログラミング学習中に挫折しないように工夫する必要もあります。プログラミングスクールに通う時間や費用を考えると初心者にはハードルが高く、「まずは独学で始めてみよう」と考える人は多いです。独学は簡単に始められて費用も安く抑えられますが、エラーに躓いたり、一人では解決できない問題が発生したり、モチベーションが下がりやすく挫折しやすいという大きなリスクがあります。「独学は挫折しやすい」という事を念頭に置き、しっかりと対策を立ててください。
また、日頃から様々なアプリやサービスに触れ、人気のアプリや自分が好きなアプリを分析してみる事も重要です。例えば、あなたが好きなアプリやよく使っているアプリについて、以下のような点を考えてみてください。
- なぜ好きなのか
- 他のアプリよりも優れている点は何か
- もっと使いやすくする方法はないか
実際に企業がアプリ開発をする時も、競合調査や「どんなアプリが社会に必要とされているか」などをリサーチします。アプリ開発を行う企業のプロジェクトリーダーになったつもりで、これらの分析にチャレンジしてみてください。
オリジナルアプリ開発のメリット
ここまでで、オリジナルアプリ開発とは何かについて理解できたと思います。しかし、それでもまだ以下のように感じている方は多いと思います。
「オリジナルアプリ開発って大変そう……」
そこで次は、オリジナルアプリを開発することで得られるメリットを解説します。メリットを知っていれば、「なぜオリジナルアプリ開発をするのか」という目的が明確になり、モチベーションの低下を防ぐ事が出来ます。
オリジナルアプリ開発で得られる5つのメリット
そもそも、なぜ単なるアプリ開発ではなく、オリジナルアプリ開発が重要なのでしょうか？それは、自分がイメージしたものを一から作る事が重要だからです。確かに、すでに存在するサンプルや設計書を元にアプリを開発しても、技術力は身につきます。
しかし、サンプルや設計書通りに作るだけでは、思考力や創造力、応用力を身につける事が出来ません。オリジナルアプリ開発で得られるメリットは、主に以下の5つです。
- 論理的思考力を高められる
- 最適化能力が身につく
- 発想力が豊かになる
- 設計力が身につく
- 自信が持てるようになる
ではこれらのメリットについて、詳しく解説します。
メリット1. 論理的思考力を高められる
プログラミングにおいて、論理的思考力はとても重要なスキルです。プログラムは一つ一つの処理が合理的に、矛盾がないように組まれています。「このプログラムを組む事で、こんな動きをする」ということを常に想定しながら、プログラムを組まなければなりません。
学習サイトやサンプルなど、手順がすべて記載されているものを参考にしてアプリを作っても、なかなかこのような論理的思考力は身につきません。一方でオリジナルアプリ開発では、すべてを一から考えてプログラミングを行う為、論理的思考力が欠かせません。つまり、オリジナルアプリ開発を行う事で、自然に論理的思考力を高める事が出来ます。
メリット2. 最適化能力が身につく
プログラミングでは、1つの処理を行うのに何通りもの方法があります。その為、プログラムを組む時には、出来るだけたくさんの方法を考え、その中から最適な実装方法を選ぶ事が重要になります。オリジナルアプリの開発中は、このように最適な実装方法を考える機会が幾度となく訪れます。どれだけ最適な実装方法を選べたかによって、アプリの完成度は大きく変わります。
メリット3. 発想力が豊かになる
発想力とは、アイディアを生み出す力の事です。オリジナルアプリ開発においては、アイディアを出すことがとても重要です。多角的な視点や幅広い知識を使って、「どうすればユーザーが喜んでくれるのか」「どうすればたくさんの人が使ってくれるのか」などを考えていきます。固定観念にとらわれない事や、失敗を恐れずにチャレンジする姿勢が大切です。オリジナルアプリを開発すれば、このような発想力が自然に高まります。
メリット4. 設計力が身につく
アイディアをたくさん出せたとしても、それを形にできる設計力がなければオリジナルアプリを開発する事はできません。この設計力が低いと、たとえアイディアを形にできたとしても、エラーやバグなどの問題が発生しやすくなってしまいます。設計力とは、「アイディアを正しく実現し、問題なく動かせるようにする力」の事です。設計力は、オリジナルアプリを開発する事で身につけられます。
メリット5. 自信が持てるようになる
オリジナルアプリ開発は、決して簡単な事ではありません。アイディアを出してから完成させるまでに、たくさんの課題を乗り越えなければなりません。それは、自分自身との戦いでもあります。最初は上手くいかない事が多く、挫折してしまいそうになります。しかし、それを乗り越えることで大きな経験・実績になり、自信にもつながります。
オリジナルアプリ開発のロードマップ
いざ「オリジナルアプリを作ろう！」と思っても、「何から始めるべきか」「どれくらいの時間をかければよいのか」など、わからない事が多いと思います。何らかの指標になるものが必要です。指標がなくただやみくもに作業しても、無駄に多くの時間をかけてしまうだけでなく、「そもそも手順が間違っていた」ということもありえます。
そこで次は、オリジナルアプリ開発のロードマップを紹介します。オリジナルアプリ開発は、基本的に以下の3つの工程で行われます。
- 企画
- 設計
- 開発
初心者の場合、設計を飛ばしていきなり開発に入ってしまったり、企画が甘い状態で設計に入り、途中で挫折してしまったりする事が多いです。よって、この3つの工程の意味をしっかりと理解したうえで、オリジナルアプリを開発するようにしてください。
1. 企画
オリジナルアプリを開発するときは、企画がなければ何も始まりません。ただし、すでに作りたいアプリのイメージが明確であれば、この工程は飛ばしても構いません。逆に、特にアイディアがない場合や、より多くのアイディアを出したい場合はこの工程を行ってください。企画については1冊の本でも収まりきらない程、奥が深いテーマです。
しかし、ここでいうオリジナルアプリの企画は、シンプルなもので問題ありません。というのも、オリジナルアプリ開発に関しては、最初からクオリティが高いものを作るよりも、「まずは1つ簡単なものを作り、プログラミングスキルを身につけよう」という意識を持った方が成功しやすいからです。とはいえ、いきなり「企画を作れ」と言われても困ってしまいますよね。そこで、活用したい思考法が以下の式です。
自分が好きなこと（詳しいこと）× 既存のアプリやWebサイト ＝ 新しいアイディア
例えば、Twitterを例に挙げてみます。「Twitter」と「あなたが好きなこと」を掛け算してみてください。仮にあなたが写真好きだとすれば、以下のような企画が完成します。
写真 × Twitter ＝ 写真版Twitter
現在、全世界で10億人以上ものユーザーが使っている写真共有アプリ「Instagram」はご存知かと思います。これは、まさに「写真版Twitter」と呼べるようなアプリです。このようにメジャーなアプリでも、既存のアプリを一部真似して作られています。何事もまずは真似から始まります。
2. 設計
企画と同じように、設計も非常に奥が深い分野です。よく耳にする「SE（システムエンジニア）」という職種は、この設計がメインの仕事です。初心者の多くがこの設計で挫折したり、工程自体を飛ばしたりしてしまうのですが、設計はとても重要な工程なので必ず行いましょう。
ここでは、誰にでもできるシンプルかつ強力な設計方法である、「ワイヤーフレーム」を紹介します。ワイヤーフレームとはその名の通り、「線で枠を描いたもの」です。ではどんな枠を描くのかというと、企画したアイディアの画面を想像して描くだけです。やり方は簡単で、必要なのは紙とペンだけです。
途中で修正出来るように、消せるボールペンやシャープペンシル、鉛筆などをおすすめします。ペンを持ったら、思うままに紙に画面を描いてみて下さい。1つの画面を描き終えたら別の画面というように、アプリの全体像を「見える化」していきます。コツは、以下の2点だけです。
- 何度も描き直すこと
- 他のアプリを真似すること
設計は必要なものとそうでないものを決める作業でもあるので、複雑になりすぎた場合はできるだけシンプルに描き直してください。
3. 開発
最後は、ワイヤーフレームまで落とし込んだアイディアを、実際に開発していく工程です。ここで、「何から始めればよいかわからない」とつまずく人がとても多いです。実際、この工程がオリジナルアプリ開発における一番のハードルといってもいいです。
しかし、あまり難しく考える必要はありません。ワイヤーフレームに描かれた設計画面を一つ一つ設計していくだけでいいです。例えば、Instagramのようなアプリを企画したとします。そして、Instagramにそっくりの画面をワイヤーフレームに描いたとします。Instagramには、主に以下のような機能があります。
- ユーザーの登録機能
- 写真のアップロード機能
- タイムライン機能
- フォロー機能
実際には他にも多くの機能がありますが、上記のようなメイン機能があれば最低限動作するシンプルなアプリを作る事が出来ます。あとは一つ一つの機能について「調査→実装→修正」を行い、少しずつ開発していけばオリジナルアプリが1つ作れてしまいます。あまり難しく考えず、まずはチャレンジしてみてくだい。
書籍・本
出典：HTML/CSSブロックコーディング デザインをすらすら再現できる
Webサイト制作を始めたばかりのHTML/CSS初心者の前には、さまざまな壁が立ちはだかります。「デザインを思い通りに再現できない」「タグやプロパティの組み合わせ方がわからない」「ページを組み立てる流れがイメージできない」もしあなたがこんな課題を抱えていて、コードを書く手が思うように進まない…と悩んでいるなら、本書はぴったりの一冊です。
本書は、モックアップ（サイトのデザインラフ）をもとに、サイトの構成要素を【ブロック分解】してからひとつずつコーディングして【組み立てる】…という本格的なWeb制作さながらのプロセスを、ハンズオンで学習します。
以上が私のオススメ本になります。気になる方や読んでみたいと思っている方は、参考になりますので、ぜひ読んでみて下さい。
まとめ
- アプリには「Webアプリ」「ネイティブアプリ」「ハイブリッドアプリ」の3種類がある
- Webアプリには「クライアントサイド」と「サーバーサイド」がある
- クックパッドや食べログ、メルカリなど、Webアプリには有名なサービスがたくさんある
- Webアプリを開発する際は、企画・スケッチ・ワイヤーフレーム・モックアップを作成したあと、技術リサーチを行う
- オリジナルアプリはまったく新しいものを作る必要はない
- オリジナルアプリ開発にはさまざまなメリットがある
- オリジナルアプリ開発は企画・設計・開発の順で行う
- あまり難しく考えず、チャレンジしてみることが大切
次回は、プログラミングの前提知識を身につけよう⑥を記事にしますので、お楽しみを！！