COLUMN

《コラム》
初心者向け
個人でWebサービスを
開発する手順を徹底解説!


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

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

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

山崎先生

山崎 大助 G’s ACADEMY 学校長/デジタルハリウッド大学院教授

Daisuke Yamazaki

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

目次

1. webサービスとは

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

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

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

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

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

webサービスとは

G’s STAFF大堀

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

山崎先生

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

G’s STAFF大堀

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

山崎先生

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

G’s STAFF大堀

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

山崎先生

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

G’s STAFF大堀

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

山崎先生

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

G’s STAFF大堀

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

山崎先生

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

G’s STAFF大堀

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

山崎先生

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

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

G’s STAFF大堀

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

山崎先生

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

企画風景

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

G’s STAFF大堀

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

山崎先生

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

G’s STAFF大堀

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

山崎先生

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

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

G’s STAFF大堀

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

山崎先生

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

G’s STAFF大堀

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

山崎先生

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

学習風景

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

G’s STAFF大堀

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

山崎先生

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

G’s STAFF大堀

ふむふむ。

山崎先生

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

G’s STAFF大堀

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

山崎先生

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

G’s STAFF大堀

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

山崎先生

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

G’s STAFF大堀

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

山崎先生

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

G’s STAFF大堀

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

山崎先生

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

G’s STAFF大堀

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

山崎先生

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

G’s STAFF大堀

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

山崎先生

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

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

G’s STAFF大堀

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

山崎先生

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

G’s STAFF大堀

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

山崎先生

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

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

RESERVATION

学校説明会(無料)予約

まずはここから。仕事がある方も参加しやすい平日夜・土日に開催!オンライン説明会も選択できます。

10月開講!説明会はこちら