2021.7.10

【初心者向け】個人でWebサービスを開発する手順を徹底解説

インターネットが普及した現代を支えるwebサービス。
どのように開発されているかご存じですか？

多くのwebサービスが誕生し、セカイを変えるイノベーションを起こしていますが、どのようにつくられているのか全く見当がつかないという方も多いのではないでしょうか。(つい最近まで私がそうでした)

そんなwebサービスはどのようにしてつくられるのか、G’s ACADEMY学校長の山崎大助先生に、スタッフ大堀が話を聞きました。

山崎大助
G’s ACADEMY 学校長　デジタルハリウッド大学院教授
28歳でアパレル業界から未経験からエンジニアとして転職。現在はMicrosoft MVP（Bing Maps Development）のフリーランスエンジニアとして、研究・活動が認められ米Microsoft公式サイトに日本人では初めて掲載される。
@IT、日経ソフトウエアなど数々のメディアで執筆を手掛け、日経PC21「名作フリーソフトを訪ねて」でも自身の開発したアプリが選出するなど、多方面で活躍。

webサービスとは
webサービスを個人で開発する流れ
企画は自分がつくりたいものととことん向き合う
個人開発するためプログラミングを学ぼう
プログラミング初心者がまず押さえるべきこと
webサービスの仕組みを知るためにはまずプログラミングに触れてみること

webサービスとは

大堀　そもそもの話なのですが、webサービスとは何をさすのでしょうか？

山崎　はい、webサービスとは一言でいうとブラウザ(Google Chrome、Safari、Microsoft Edge等)上で動くサービスのことを指します。
代表的なwebサービスはAmazonやFacebook、YouTubeなどがあって、webアプリやwebアプリケーションともいいますね。

大堀　ぼくもPCやスマートフォンでいつも使っています。
でもスマートフォンではブラウザで動くものの他に、インストールして使えるアプリもありますよね。

山崎　ネイティブアプリのことですね。ネイティブアプリで動くものはwebサービス(webアプリケーション)ではありません。メルカリとかTwitterとか、多くのwebサービスはネイティブアプリもありますが基本的にweb上で開発したのちに(ネイティブ)アプリを開発しています。
ちなみに、なぜ(ネイティブ)アプリより先にwebでつくられるかというと、早く開発できて拡散されやすいというメリットがあるからです。

大堀　webサービスの方が早く開発できるのですか。

山崎　はい。大堀さんがもっているのはスマートフォンですか？iPhoneですか？

大堀　ぼくはスマートフォンです。

山崎　となると、OSはandroidですね。ネイティブアプリをつくる場合はandroid用、iOS用それぞれのOSごとに開発する必要があるんですよ。

大堀　そういえばぼくはGoogle playからアプリをダウンロードしますが、iPhoneだとApp storeからダウンロードしますよね。それぞれ同じようなアプリを別々につくっているということですか。

山崎　はい。ネイティブアプリ開発は別々のプログラミング言語を用いてandroid用、iOS用を開発しなければならないのでとても手間と時間がかかります。
逆にwebの場合、基本的にどのブラウザでも同じように表示されます。なので早くつくれるんです。
さらに”拡散”という点ではwebサービスはURLで簡単に共有できますのでシェアもしやすい。利便性にも優れているんです。

大堀　気に入ったwebサービスをURLで友達にシェアをしていましたが、改めていわれると拡散しやすい仕組みなのですね。

山崎　その他にもアプリだとインストールを必要とするのに対して、サービス利用までのユーザーの手間が圧倒的に少ないという点もあります。なので多くの場合はwebで作成してからアプリをつくる、という流れが主流になるのです。ゲームなど一部のアプリの例外もありますが。

webサービスを個人開発する流れ

大堀　個人でwebサービスを開発する場合、どのように進めていくのでしょうか？

山崎　企画をまとめる、簡単なプロトタイプをつくる、ユーザーに使ってもらい検証する、改善するという一連の流れを繰り返していくのが良いと思います。なので、まずはとりあえずスピード重視でwebサービスを一つつくりきってみることです。個人開発は一人で開発していくので、モチベーションを保つという意味でもスピード感が非常に重要になってきますね。
さらにいうと、個人開発は自分自身の”これあったらいいな”をもとにとりあえず開発してみるのが良いです。

企画は自分がつくりたいものととことん向き合う

大堀　好きなものをつくれ、ということですね。webサービス開発というと、市場規模とかビジネスモデルとかそんなキーワードを耳にします。

山崎　不要とはいいませんが個人開発を始める段階ではそんなに重要ではないかな、というのが個人の印象です。
開発したサービスを使ってくれるファンがでてきてからさらに解像度の高い計画を立てれば良いのと、そういった話から企画をスタートすると本当に使って欲しい人たちが使いたがらないありきたりなサービスになることが多いんですよね。

大堀　いわれてみると思い浮かぶ節があります。大当たりしそうだけどふわっとした企画を開発しようとしても、最後までモチベーションが続かない気がします。

山崎　いいですね、個人開発はモチベーションもとても大切なので、そういった面でも興味関心を元にまずはつくってみる。そしてつくったものを自分で触ったり、使って欲しい人に触ってもらったりすると新しい発見が生まれます。そこからさらに良いものをつくっていくというサイクルに入るので、やはり最初のスピード感が一番重要なんですよ。

個人開発するためプログラミングを学ぼう

大堀　ではwebサービスを個人で開発するにはどうしたらいいのでしょうか？

山崎　webサービスを個人開発するとなるとまずはプログラミング学習ですね。

大堀　初心者だとゼロからのプログラミング学習は大変なイメージがあります。しかも今はノーコードで開発できるサービスも増えてきていますよね。

山崎　簡単なwebサービスはノーコードでつくれなくもないですが、どのような仕組みで動いているのか、仕組みを理解するためにも自分の手を動かして(プログラミングして)開発に挑戦することはおすすめです。それに、初心者にとってプログラミング言語は難しそうに見えますが、そんなに学習コストは高くないんですよ。英語は1年留学してやっと会話ができるようになりますがプログラミングは会社に所属しながらでも6ヵ月集中して学習すれば個人でも一通りのwebサービスはつくれるようになりますし、全体像を理解する程度なら2か月位で可能です。

プログラミング初心者がまず押さえるべきこと

大堀　では、たくさんあるプログラミング言語はどの言語が良いのでしょうか？

山崎　私のおすすめプログラミング言語ですね。その話に入る前に知ってほしいことが一つ。webサービスをつくるうえで必要なプログラミング言語は、フロントエンド言語とサーバーサイド言語に大きく分けられるということに触れていきましょう。

大堀　ふむふむ。

山崎　フロントエンドというのは、いわゆるブラウザ上で皆さんが見る、操作する部分です。クリックすると吹き出しが現れる、などもフロントエンドで処理されています。
そして、webサービスをつくるうえでフロントエンドを担うのはHTML、CSS、JavaScriptのみですので覚えてしまいましょう。

大堀　HTML、CSS、JavaScriptですね。それぞれの言語に何か違いはあるのでしょうか？

山崎　文字や画像を表示させるのがHTML、文字の大きさや背景色、画像の位置などを調整するのがCSSの役割です。なのでHTMLで文章構造をつくり、CSSでデザインを整えれば見た目が整ったwebページをつくることができます。
この状態から、さらにwebページに動きを加えるのがJavaScriptの役割です。
JavaScriptはいろいろなことができるのですが、簡単なところだとボタンをクリックするとポップが表示される、などの動きが加えられます。

大堀　HTMLがテキスト情報、CSSがデザインやレイアウトを担当していてさらにユーザー体験を良くしたり、動きのあるwebページにするためにJavaScriptが登場、と。

山崎　最初はそんな認識で大丈夫です。そういえば昔は「ホームページ」という言葉が使われていましたが今は聞きませんよね。

大堀　懐かしい言葉ですね。今は確かに耳にしないです。

山崎　ページが１枚ならwebページ、複数枚で構成されているとwebサイトといわれますが、今はwebページ1枚で完結するものなんてそうそうありません。「ホームページ」というとTOPページのことと誤解されたりするから最近は使われなくなったらしいですよ。

大堀　なるほど。
では、サーバーサイドのプログラミング言語はどんな役割を担っていますか？

山崎　はい、目に見えない裏側のデータのやり取りを担うのがサーバーサイドの役割です。例えばFacebookにアカウントを登録すると、アカウント情報が裏側のデータベースに登録されます。これは目には見えないですがいつでも引き出せるようになっていて、その出し入れをするためにサーバーサイドのプログラミング言語が使われます。
サーバーサイドの言語ができる機能のベースは、データの登録、更新、削除、そして取り出しの4つです。FacebookもTwitterもwebサービスは基本的にこの機能を裏側で実行しているんです。

大堀　サーバーサイドの機能はすごくシンプルなんですね。
サーバーサイドにはどんなプログラミング言語があるのでしょうか？

山崎　有名なところだと、PHPやRuby、JAVA、Pythonなどがあげられますね。

大堀　色々なプログラミング言語があるんですね。

山崎　そうですね、特にサーバーサイドの言語は多いのですが、沢山あるプログラミング言語の中でもフロントエンドはブラウザありきなので言語が限られている、というのが正しいです。

webサービスの仕組みを知るためにはまずプログラミングに触れてみること

大堀　サーバー再度の開発言語が沢山あるということはどんなサービスをつくりたいかでどんな言語を扱っていくかが変わってくるということですよね。

山崎　その通りです。実際にFacebookはPHP、TwitterはRubyをもとに開発されていたなど、目的や開発体制に応じて選ばれています。
ただ、最初に学習を始める段階ではそこまで言語選びに時間は割かなくても良いかなと思います。
先ほど触れたようにサーバーサイドでできる機能は大体どれも一緒なので、一つの言語をしっかり身につければ他のプログラミング言語でもある程度全体像のイメージができるんですよ。

大堀　プログラミング言語選びで立ち止まるより、とりあえずプログラミングに触れていこうということですね。

山崎先生、今日はありがとうございました。私もwebサービスの全体像を今一度理解できました！

G’s ACADEMYでは毎週学校説明会を開催しています。
本気でプログラミングを学びたい、事業家を目指したい人が集まっていますので、ぜひ学校説明会にお越しください！