【完全初心者向け】Webアプリの作り方を3ステップで説明します

ブラウザ上で動作するWebアプリは、facebookやtwitterなど、今や至るところで使われています。しかし、実際に作るとなった場合は、どこから始めてよいかわからない、Webアプリの作り方がわからない、という方や過去にWebアプリを作ろうとして挫折した、という方もいると思います。

本記事では、初心者向けに、簡単にWebアプリの仕組みと構成について説明した後、Webアプリの作り方を以下の3ステップに分けて説明します：

フロントエンド・バックエンドで採用するプログラミング言語とフレームワークの選定
作ったWebアプリをインターネット上に公開するための方法を選定
フロントエンド・バックエンドの開発とインターネットへの公開

この記事は、こんな方向けです

・初めてWebアプリを作ろうとしている方
・過去にWebアプリを作ろうとして、挫折してしまった方
・効率よくWebアプリの作り方を学ぶ方法を知りたい方

本記事を書いている僕は、以下の経験があります：

業務でのプログラミング歴20年以上
プログラミング書籍の執筆者
WEBアプリ、組み込み系、デスクトップアプリやスマホアプリをこれまでに開発

Webアプリとは

Webアプリはユーザからみると、ブラウザとインターネットへの接続環境があれば、いつでも利用できます。ユーザへのアプリ配布は不要で、利用者と開発者の双方に負担が少ないアプリケーション形式です(クライアント・サーバ型であれば、クライアントとサーバにそれぞれアプリを置く必要があり、Webアプリと比較すると管理が大変になります)。また、Webアプリを作ることをWebプログラミングと呼びます。

Webアプリそのものは、データセンターやクラウドに設置したサーバ上で動作します。こちらは、後述するクラウドやPaaSを利用すれば、サーバを調達する必要はなく、簡単にサーバ環境を構築できます。

Webアプリと比較して、ネイティブアプリというものがありますが、これはWindows PCやiPhoneスマホ上で動作するアプリとなります。Microsoft WordやExcel等、PCにインストールして使用する形式のものは、ネイティブアプリです。

Webアプリの仕組みと構成

Webアプリは、HTTPという通信プロトコル(通信ルール)を使用して、ブラウザとサーバ間でデータの送受信を行っています。具体的には、ブラウザ側で処理要求と処理対象のデータをサーバに送り、サーバ側は受け取ったデータの処理とデータベースへの格納を行い、処理結果をブラウザに返します。このブラウザとサーバ間でのデータのやり取りと処理を行うことにより、Webアプリとして動作します。

Webアプリは、大きく分けると、フロントエンドとバックエンドに分けることができます。Webアプリの作り方で意識しないといけない部分は、この2つに大別できます。フロントエンドは、ブラウザ上での動き、処理や表示を行う機能を担います。バックエンドは、ブラウザから受信したデータを基に、データの加工、データベースへのデータ登録や他のアプリへのデータ連携などを担います。

Webアプリを作るためには、フロントエンド、バックエンドに採用するプログラミング言語とフレームワークを選定する必要があります。以下に、フロントエンド・バックエンドで使用される言語やデータベースを示します。

フロントエンド - プログラミング言語

Webアプリのフロントエンドは、以下で説明する3つをすべて使い、開発します。

HTML

HTMLは、Webページのレイアウトとデータ(文書)を表示するための言語です。タグといわれるものを使用して、Webページのレイアウトを構成したり、データの見せ方を整理します。

CSS

CSSは、HTML上のデータに対して文字の大きさ、文字の色、背景色などの装飾を加えるためのものです。通常は、HTMLとCSSのセットで、Web上のページを作り込みます。CSSは、一から作成者が装飾を作ることもできますし、Googleが作成したMaterial Design Liteの様に、既に一通り必要なものを作って、無償で提供されているものがあります。

JavaScript

JavaScriptは、HTMLに動きをつけたり、複雑な機能を実現するためのものです。

具体的には、Google Mapsの様に、地図上を移動した際に必要な地図情報を受け取り表示したり、FacebookやTwitterの様に、更新されるコンテンツを定期的に表示するために、開発者が使用しています。

JavaScriptは、jQuery、Googleが開発したAngularJSやFacebookが開発したReactJSなど、
JavaScriptで効率よくプログラミングできる様にした、ライブラリやフレームワークを使用して開発を進めます。

バックエンド

バックエンドは、プログラミング言語とフレームワークをセットで選び、開発をします。フレームワークを使わずにバックエンドを作り上げることは、膨大な作業量となるため、通常はしません。

プログラミング言語とフレームワーク

ここでは、バックエンドのプログラミング言語の例として、よく使用されているRuby, Java, .netの3つを取り上げます。いずれの言語も、プログラミング言語の世界ランキング「TIOBE Index」のトップ20にランキングしています。

RubyとRuby on Rails

Rubyは、日本のソフトウェア開発者まつもとゆきひろさんが開発した言語です。「楽しさ」に焦点を当てており、高い人気を誇ります。以下は、まつもとゆきひろさんご自身によるRubyの説明です：

Ruby には Perl や Python とは決定的に違う点があり、それこそが Ruby の存在価値なのです。それは「楽しさ」です。私の知る限り、Ruby ほど「楽しさ」について焦点を当てている言語は他にありません。Ruby は純粋に楽しみのために設計され、言語を作る人、使う人、学ぶ人すべてが楽しめることを目的としています。しかし、ただ単に楽しいだけではありません。Ruby は実用性も十分です。実用性がなければ楽しめないではありませんか。
まつもとゆきひろ、Ruby プログラミング入門まえがき監修者よりのページ

Rubyには、日本語の資料が豊富にあるため、日本人でも安心して勉強できる言語です。

Webアプリを効率よく開発するためのRuby用のフレームワークとして、Ruby on Railsがあり、こちらも世界中で高い人気を誇ります。Webアプリを素早く構築するのであれば、Ruby on Railsはおすすめです。

JavaとSpring

Javaは、アメリカのOracle社が開発している言語です。大規模Webアプリや業務系のWebアプリは、Javaで開発する場合が多いです。Javaで、Webアプリを効率良く開発できるフレームワークとしては、Springがあります。

.net framework

.netは、アメリカのMicrosoft社が開発している複数の言語(C#, VB.net, C++.netなど)で動作するフレームワークです。Java同様、大規模Webアプリや業務系のWebアプリで使われる傾向にあります。Windowsと相性がよく、Microsoft社製のWebサーバソフト「IIS」上で動作するWebアプリを開発できます。

データベース

ここでは、データベースの世界ランキング「DB-Engines ranking」のトップ5にランキングしているデータベースの中からPostgreSQL、MySQL、Oracleを取り上げます。

PostgreSQL

PostgreSQLは、オープンソースのデータベースで、幅広く普及しています。オープンソースのデータベースというとPostgreSQLかMySQLをイメージする方が多く、世界ランキングにも、その人気は反映されています。

MySQL

MySQLは、Michael Wideniusさんが開発したオープンソースのデータベースで、現在は、Oracle社主導で開発が行われています。データの格納とアクセスを担当するストレージエンジンという機能は、
使用用途に応じたものを採用することができます。

ストレージエンジンは、複数の団体がそれぞれ開発しています。MySQL最新版のデフォルトのストレージエンジン「InnoDB」は、元々Innobase社(オラクルが買収済)が開発したものです。

Oracle Database

Oracle Databaseは、Oracle社が開発している世界ランク1位、商用としては世界初のデータベースです。特にエンタープライズ(企業)が開発するシステムやアプリでの採用実績が多いです。また、オープンソースではないため、PostgreSQLやMySQLと比較すると、有償での提供となります。

上記からフロントエンド・バックエンドに必要なプログラミング言語とフレームワークを選定する形となります。僕のおすすめは、RubyとRuby on Railsの組み合わせです。その理由は、次で説明します。

Ruby on RailsがWebアプリを作るうえで適している理由

Ruby on Railsは、上記の通り、Rubyで書かれたWebアプリ用フレームワークです。2021年6月時点で、世界中で90万以上のWebアプリがRuby on Railsで稼働しています(そのうち、日本のWebアプリは4,084)。この実績から、Webアプリを作るうえでRuby on Railsが適しているといえます。

ではなぜ、90万以上のWebアプリがRuby on Railsで稼働しているのでしょうか。その理由を以下５つの視点から説明します：

日本語の情報量
開発スピード
開発コスト
膨大なリソースと強力なコミュニティサポート
充実した周辺サービス

日本語の情報量

プログラミング言語は、ほとんどの情報は英語圏にあるので、C++の様に人気のある言語でなければ、日本人にとって学習しづらい、という特徴があります。上記の通り、Rubyは、日本のソフトウェア開発者まつもとゆきひろさんが開発した言語で、日本語で書かれた技術的な情報が豊富にあり、日本人であっても学習しやすくなっています。Ruby on Railsは、海外の方が作ったものなので、英語圏の情報量も多いです。

開発スピード

Ruby On Railsは、シンプルで、少ないコードで、Webアプリを実装できる様な工夫がなされています。例えば、コマンド入力により、動作するコード一式をすぐに出力してくれます。

オライリーメディア社(日本では、オライリー・ジャパン)の創設者ティム・オライリーさんは、Ruby on Railsを以下の様に表現しています：

Powerful web applications that formerly might have taken weeks or months to develop can be produced in a matter of days.
和訳：これまで数週間から数か月かかっていた迫力のあるWebアプリを数日で作れる様になった。
オライリーメディア社(日本では、オライリー・ジャパン)の創設者ティム・オライリーさん

開発コスト

開発スピードが速いと、コストもその分削減できることになります。少人数で開発している場合は、スピードが速く、コストも削減できるフレームワークは、貴重な戦力になります。Tyler Tringasさんの様に、実際に一人で、一日で、何千人も使うWebアプリを作った例もあります。こういった理由からRuby on Railsは、スタートアップ企業で多く採用されています。

膨大なリソースと強力なコミュニティサポート

Ruby on Railsは、gemという開発で使用できるパッケージがあります。2021年6月時点で、利用できるgemは166,786に上り、多くの機能がgemとして実装され、提供されています。また、そのまま使用できるWebアプリもgithubなどで公開されているので、それらを使って、更に高速に開発を進めることができます。

また、Stack Overflowなどで開発コミュニティに不明点を質問することで、すぐに回答してもらえる
コミュニティからの厚いサポートもRuby on Railsを魅力的にする一要因です。

充実した周辺サービス

Ruby on Railsそのものの特長ではありませんが、Ruby on Railsで作られたアプリを簡単に動かせるサービスが多い点もRuby on Railsの魅力のうちの一つです。例えば、後述するHerokuというサービスを利用すれば、Ruby on Railsで作ったアプリをさくっとインターネット上に公開できます。

クレジットカードでの支払いを受け付けたい場合も、Stripeというサービスを取り込めば、最短一日でクレジットカードの支払いを受け付けることができます(実際に、僕は、Stripeのサービスを1日で組み込んで、Webアプリを稼働させることができました)。

Ruby on Railsアプリを最速でWeb公開する方法

Ruby on Railsで作ったアプリをWebで公開する場合、HerokuというPaaSサービス一択です。PaaSは、簡単にいうとRuby on Railsで作ったアプリをアップロードすれば、インターネット公開するためのリソース(サーバやインターネット回線など)はすべて提供してくれるサービスです。

サーバやインターネット回線を自分で調達する必要もなく、小さなWebアプリであれば、月額4,000円程度で稼働できます。また、Webアプリを止めたいタイミングで、解約することも可能です。

Herokuは、ログインアカウントを作れば、その日のうちにWebアプリを公開できます。また、CPUやメモリなどのリソースの変更も、稼働中のWebアプリを止めずに実現できる便利さがウリです。