《コラム》
初心者向け
個人で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サービスとは
はい、webサービスとは一言でいうとブラウザ(Google Chrome、Safari、Microsoft Edge等)上で動くサービスのことを指します。
代表的なwebサービスはAmazonやFacebook、YouTubeなどがあって、webアプリやwebアプリケーションともいいますね。
でもスマートフォンではブラウザで動くものの他に、インストールして使えるアプリもありますよね。
ネイティブアプリのことですね。ネイティブアプリで動くものはwebサービス(webアプリケーション)ではありません。メルカリとかTwitterとか、多くのwebサービスはネイティブアプリもありますが基本的にweb上で開発したのちに(ネイティブ)アプリを開発しています。
ちなみに、なぜ(ネイティブ)アプリより先にwebでつくられるかというと、早く開発できて拡散されやすいというメリットがあるからです。
はい。大堀さんがもっているのはスマートフォンですか？iPhoneですか？
となると、OSはandroidですね。ネイティブアプリをつくる場合はandroid用、iOS用それぞれのOSごとに開発する必要があるんですよ。
はい。ネイティブアプリ開発は別々のプログラミング言語を用いてandroid用、iOS用を開発しなければならないのでとても手間と時間がかかります。
逆にwebの場合、基本的にどのブラウザでも同じように表示されます。なので早くつくれるんです。
さらに”拡散”という点ではwebサービスはURLで簡単に共有できますのでシェアもしやすい。利便性にも優れているんです。
その他にもアプリだとインストールを必要とするのに対して、サービス利用までのユーザーの手間が圧倒的に少ないという点もあります。なので多くの場合はwebで作成してからアプリをつくる、という流れが主流になるのです。ゲームなど一部のアプリの例外もありますが。
webサービスを個人開発する流れ
企画をまとめる、簡単なプロトタイプをつくる、ユーザーに使ってもらい検証する、改善するという一連の流れを繰り返していくのが良いと思います。なので、まずはとりあえずスピード重視でwebサービスを一つつくりきってみることです。個人開発は一人で開発していくので、モチベーションを保つという意味でもスピード感が非常に重要になってきますね。
さらにいうと、個人開発は自分自身の”これあったらいいな”をもとにとりあえず開発してみるのが良いです。
企画は自分がつくりたいものととことん向き合う
不要とはいいませんが個人開発を始める段階ではそんなに重要ではないかな、というのが個人の印象です。
開発したサービスを使ってくれるファンがでてきてからさらに解像度の高い計画を立てれば良いのと、そういった話から企画をスタートすると本当に使って欲しい人たちが使いたがらないありきたりなサービスになることが多いんですよね。
いいですね、個人開発はモチベーションもとても大切なので、そういった面でも興味関心を元にまずはつくってみる。そしてつくったものを自分で触ったり、使って欲しい人に触ってもらったりすると新しい発見が生まれます。そこからさらに良いものをつくっていくというサイクルに入るので、やはり最初のスピード感が一番重要なんですよ。
個人開発するためプログラミングを学ぼう
webサービスを個人開発するとなるとまずはプログラミング学習ですね。
簡単なwebサービスはノーコードでつくれなくもないですが、どのような仕組みで動いているのか、仕組みを理解するためにも自分の手を動かして(プログラミングして)開発に挑戦することはおすすめです。それに、初心者にとってプログラミング言語は難しそうに見えますが、そんなに学習コストは高くないんですよ。英語は1年留学してやっと会話ができるようになりますがプログラミングは会社に所属しながらでも6ヵ月集中して学習すれば個人でも一通りのwebサービスはつくれるようになりますし、全体像を理解する程度なら2か月位で可能です。
プログラミング初心者がまず押さえるべきこと
私のおすすめプログラミング言語ですね。その話に入る前に知ってほしいことが一つ。webサービスをつくるうえで必要なプログラミング言語は、フロントエンド言語とサーバーサイド言語に大きく分けられるということに触れていきましょう。
フロントエンドというのは、いわゆるブラウザ上で皆さんが見る、操作する部分です。クリックすると吹き出しが現れる、などもフロントエンドで処理されています。
そして、webサービスをつくるうえでフロントエンドを担うのはHTML、CSS、JavaScriptのみですので覚えてしまいましょう。
文字や画像を表示させるのがHTML、文字の大きさや背景色、画像の位置などを調整するのがCSSの役割です。なのでHTMLで文章構造をつくり、CSSでデザインを整えれば見た目が整ったwebページをつくることができます。
この状態から、さらにwebページに動きを加えるのがJavaScriptの役割です。
JavaScriptはいろいろなことができるのですが、簡単なところだとボタンをクリックするとポップが表示される、などの動きが加えられます。
最初はそんな認識で大丈夫です。そういえば昔は「ホームページ」という言葉が使われていましたが今は聞きませんよね。
ページが１枚ならwebページ、複数枚で構成されているとwebサイトといわれますが、今はwebページ1枚で完結するものなんてそうそうありません。「ホームページ」というとTOPページのことと誤解されたりするから最近は使われなくなったらしいですよ。
では、サーバーサイドのプログラミング言語はどんな役割を担っていますか？
はい、目に見えない裏側のデータのやり取りを担うのがサーバーサイドの役割です。例えばFacebookにアカウントを登録すると、アカウント情報が裏側のデータベースに登録されます。これは目には見えないですがいつでも引き出せるようになっていて、その出し入れをするためにサーバーサイドのプログラミング言語が使われます。
サーバーサイドの言語ができる機能のベースは、データの登録、更新、削除、そして取り出しの4つです。FacebookもTwitterもwebサービスは基本的にこの機能を裏側で実行しているんです
サーバーサイドにはどんなプログラミング言語があるのでしょうか？
有名なところだと、PHPやRuby、JAVA、Pythonなどがあげられますね。
そうですね、特にサーバーサイドの言語は多いのですが、沢山あるプログラミング言語の中でもフロントエンドはブラウザありきなので言語が限られている、というのが正しいです。
webサービスの仕組みを知るためにはまずプログラミングに触れてみること
その通りです。実際にFacebookはPHP、TwitterはRubyをもとに開発されていたなど、目的や開発体制に応じて選ばれています。
ただ、最初に学習を始める段階ではそこまで言語選びに時間は割かなくても良いかなと思います。
先ほど触れたようにサーバーサイドでできる機能は大体どれも一緒なので、一つの言語をしっかり身につければ他のプログラミング言語でもある程度全体像のイメージができるんですよ。
今日はありがとうございました。私もwebサービスの全体像を今一度理解できました！
G’s ACADEMYでは毎週学校説明会を開催しています。
本気でプログラミングを学びたい、事業家を目指したい人が集まっていますので、ぜひ学校説明会にお越しください！
