ウェブアプリはブラウザで動作するアプリケーションのことで、スマホやPCなど端末・OSを問わず動作することができます。
インストールも不要なので、ウェブアプリを開発すると多くの人に利用してもらうことができます。
この記事では、GitHubを使用したウェブアプリの開発方法を紹介していますので実際に手を動かしながら簡単なウェブアプリを作りことができます。
この記事に書かれていること
この記事ではウェブアプリの作り方を網羅的に紹介しています。
また、開発方法も紹介していますので、どのようにしてウェブアプリを開発するのか、実際に手を動かしながら理解することができます。
- GitHubを使用したウェブアプリ開発手順
- ウェブアプリのメリット、スマホアプリとの違い
- ウェブアプリ開発で使用するプログラミング言語と勉強法
この記事を読んでもらいたい人
- ウェブアプリの作り方を知りたい人
- ウェブアプリをまずは作ってみたい人
この記事は、これからウェブアプリを作ってみたいと思う人、実際に手を動かしながらウェブアプリの作り方を知りたい人を想定しています。
この記事を書いた人
私は12年間システムエンジニアとして働いています。日立系のSIerでCOBOLを使用したメインフレームのバッチシステム開発に従事していました。
その後は製造業の社内SEとして、海外工場含めたシステム開発を行っています。
また、ウェブアプリの個人開発も行っており、直近では以下のウェブアプリを運用しています。
- DailyStack https://dailystack.usefuledge.com/
ToDoアプリです。今までやってきたことを振り返ることができます。また、今日やることをツイートする機能があります。
ユーザー登録不要ですぐに利用開始することができます。
- QuickNote https://quicknote.usefuledge.com/
テキストノートアプリです。自動保存、復元ポイントの作成と復元機能、作成したメモをHTML形式でダウンロードする機能があります。
ウェブアプリの特徴とは
ウェブアプリとは、SafariやChromeなどのブラウザで動作するアプリケーションのことです。
ブラウザとはインターネットをみるアプリのことで、代表的なものは、ChromeやSafari、Edgeなどがあります。
これらどのブラウザでも動作するのが、ウェブアプリの特徴です。
スマホアプリと何が違うの？
スマホアプリとは、スマホにアプリケーションをインストールして使用するもののことです。
iPhoneであればApp Storeからダウンロード・インストールして使用しますが、iPhoneアプリを開発するプログラム言語は、iPhoneアプリ専用として開発していく必要があります。
ウェブアプリであれば、スマホやPCなど動作する端末のことを考慮する必要はあまりありません（画面サイズなどは考慮する必要があります）が、スマホアプリはiPhone専用、Android専用として開発していく必要があります。
とりあえずウェブアプリを作ってみよう
作り方を学ぶには、手を動かすのが一番です。
この章を読みながら実際にウェブアプリを作ってみましょう！
作ってみるウェブアプリ
ここでは「じゃんけんアプリ」を作ってみたいと思います。
じゃんけんアプリの機能は以下のとおりです。
- 「じゃんけんアプリ」と書かれた画面を作成します。
- 「✊🏻」「✌🏻」「🖐🏻」が書かれたボタンを作成します。
- ボタンを押すことで、プレーヤーが出すじゃんけんを選択します・
- コンピュータが出すじゃんけんは、ランダムで「✊🏻」「✌🏻」「🖐🏻」を決定します。
- 勝ち負けを判定し、メッセージを表示します。
デモ
私の方で開発したアプリは以下のURLから利用できます。
じゃんけんアプリ作成に必要なもの
じゃんけんアプリの作成に必要なものは、パソコンとメールアドレスです。
メールアドレスは後述しますがGitHubアカウント作成のために使用します。
GitHubアカウントをすでに保有している場合は、メールアドレスは不要です。
パソコン
今回のアプリ作成はパソコンで行います。WindowsでもMacでも構いません。
GitHubというサイトにログインできればどのようなパソコンでもOKです。
ソースコードの修正は、GitHubのVisual Studio Code for webを使用します。
メールアドレス
メールを受信可能なメールアドレスを用意ください。
GitHubアカウント作成時に必要です。すでにGitHubアカウントを作成済みでしたら、メールアドレスは不要です。
GitHubアカウントを作成しよう
既にGitHubのアカウントを作成済みでしたら、このステップは実施不要です。
今回はGitHubのサービスを使用してウェブアプリ開発を勧めていきます。
まず、github.com にアクセスします。
以下の画面が表示されたら、「Email address」にメールアドレスを入力します。
その後、「Sign up for GitHub」ボタンをクリックしましょう。
さきほど入力したメールアドレスが表示されていますので、「Continue」をクリックします。
「Create a password」と表示されますので、パスワードを決めて入力しましょう。
パスワードを入力したら、「Continue」ボタンをクリックします。
次にユーザー名を入力します。ユーザー名は英数字またはハイフン「-」が使用できます。
ハイフン「-」は先頭と末尾には使用できません。
「プロダクトのアップデート情報やアナウンスをメールで受信しますか？」と聞かれます。必要であれば「y」、不要であれば「n」を入力します。
入力後、「Continue」をクリックします。
ボットか人間か判断するために、画像認識の質問が表示されます。
表示されるお題に一致する画像をクリックしていきましょう。
すべての画像をクリックしていけば、「Create account」が表示されますのでクリックします。
入力したメールアドレスに認証コードが送付されます。
メールを確認して、認証コードを入力します。
認証コード入力後、利用用途に関して質問があります。
差し支えなければ答えていきましょう。
ページ下部の「Skip personalization」をクリックすることでスキップが可能です。
最初の質問 How many team members will be working with you? は、「あなたと一緒に働くチームメンバーは何人ですか？」です。
今回のGitHubアカウントが個人利用のみであれば「Just me」を選択しましょう。
２番目の質問 Are you a student or teacher? は、「あなたは生徒または先生ですか？」です。
個人利用の場合は先生でも生徒でも無いので、どちらの選択せずに「Continue」をクリックします。
次の質問 What specific features are you interested in using? は、「どんな機能を使ってみたいですか？」です。
使ってみたい機能にチェックを入れて、「Continue」をクリックしましょう。
GitHubのプラン選択画面が表示されます。個人利用であればFreeプランで十分です。
「Continue」ボタンをクリックしましょう。
これで初期設定は完了です。以下のような画面が表示されます。
パブリックリポジトリを作成しよう
リポジトリとは、ソースコードやその変更履歴を管理する場所のことです。
以下の画面から「Create repository」をクリックします。
「Repository Name」にリポジトリ名を入力します。リポジトリとは、「ソースコードと変更履歴を管理する箱」です。
「Public」が選択されていることを確認し、「Add a README file」にチェックを入れます。
「Create Repository」をクリックします。
以下のようにリポジトリが作成されたら完了です。
GitHub.devを開いてコードを編集しよう
以下の画面で、キーボードの「.（ピリオド）」を押しましょう。
🤫 New shortcut: Press . on any GitHub repo. pic.twitter.com/AHTSDot4qc
— GitHub (@github) August 11, 2021
「.（ピリオド）」を押すと、以下のようにVisual Studio Code for webが起動します。
index.htmlをコーディングしよう
画面の左上にリポジトリ名がありますので、その付近にマウスカーソルを移動させましょう。
そうするとファイル作成のアイコンが表示されますので、それをクリックします。
作成するファイル名を入力する項目が表示されますので、「index.html」と入力します。
以下のコードを「index.html」に書いてみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>じゃんけんアプリ</title>
<script src="./app.js"></script>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<h1 id="title">じゃんけんアプリ</h1>
<div id="main">
<p>✊🏻✌🏻🖐🏻 から選んでね</p>
<button onclick="janken(1);" class="symbol">✊🏻</button>
<button onclick="janken(2);" class="symbol">✌🏻</button>
<button onclick="janken(3);" class="symbol">🖐🏻</button>
</div>
<div id="Player">
<p>プレーヤーが選んだもの</p>
<p id="PlayersChoice" class="symbol"></p>
</div>
<div id="Computer">
<p>コンピュータが選んだもの</p>
<p id="PCsChoice" class="symbol"></p>
</div>
<div id="result">
<p>結果↓</p>
<p id="ResultMessage"></p>
</div>
</body>
</html>
CSSをコーディングしよう
同様にリポジトリ名のあたりにマウスカーソルを移動させて、ファイル新規作成アイコンをクリックします。
ファイル名に「main.css」と入力します。
以下のコードを「main.css」に書いてみましょう。
#title {
text-decoration: underline;
}
.symbol {
font-size: 3em;
}
#ResultMessage {
font-size: 2em;
}
JavaScriptを編集しよう
同様にリポジトリ名のあたりにマウスカーソルを移動させて、ファイル新規作成アイコンをクリックします。
ファイル名に「app.js」と入力します。
以下のコードを「app.js」に書いてみましょう。
function janken(choice) {
let resultElement = document.getElementById("ResultMessage");
let PlayersChoiceElement = document.getElementById("PlayersChoice");
PlayersChoiceElement.innerHTML = Num2Synbol(choice);
let PCsChoiceElemennt = document.getElementById("PCsChoice");
let PCsChoiceNumber = Math.floor(Math.random() * 3) + 1;
PCsChoiceElemennt.innerHTML = Num2Synbol(PCsChoiceNumber);
resultElement.innerHTML = Judgement(choice, PCsChoiceNumber);
}
function Num2Synbol(choice)
{
let symbol = "";
switch (choice) {
case 1:
symbol = "✊🏻";
break;
case 2:
symbol = "✌🏻";
break;
default:
symbol = "🖐🏻";
break;
}
return symbol;
}
function Judgement(PlayersChoice, PCsChoice)
{
let resultMsg = "";
let constPlayerWin = "プレイヤーの勝ち";
let constPCWin = "コンピューターの勝ち";
let constDraw = "あいこ";
if (PlayersChoice == PCsChoice) {
resultMsg = constDraw;
}else{
if(PlayersChoice == 1){ // Gu
if (PCsChoice == 2){ // Choki
resultMsg = constPlayerWin;
}else {
resultMsg = constPCWin;
}
}else{
if(PlayersChoice == 2) { // Choki
if (PCsChoice == 1) { // Gu
resultMsg = constPCWin;
}else { // Pa
resultMsg = constPlayerWin
}
}else{//Pa
if(PCsChoice == 1) {//Gu
resultMsg = constPlayerWin;
}else{
resultMsg = constPCWin;
}
}
}
}
return resultMsg;
}
リポジトリにコミット＆プッシュしよう
左側のメニューボタンの上から３つ目にある「Source control」をクリックします。
コミット名を入力します。ここでは適当に「update Janken app」としました。
画面上部の「✓」をクリックします。リポジトリが更新されます。
github pages の設定をオンにしてウェブアプリを公開しよう
Visual Studio code web のURLは「https://github.dev/….」となっていますが、「dev」を「com」に変更しましょう。「https://github.com/…..」に変更します。
リポジトリ画面が表示されますので「Settings」をクリックします。
左側にある「Pages」をクリックします。
「GitHub Pages」の画面が表示されますので「source」の「None」をクリックします。
表示されたプルダウンメニューから「main」を選択します。
最後に「Save」をクリックします。
「Your site is ready to be published at …..」が表示されれば完了です。
動作確認してみよう
「Your site is ready to be published at …..」に表示されているリンクをクリックしてみましょう。
「404」のページが表示された場合は、GitHub側の公開処理中です。
５分程度かかりますので、しばらく待ちましょう。
正しく公開されると。以下のように「じゃんけんアプリ」の画面が表示されます。
「✊🏻」「✌🏻」「🖐🏻」のボタンをクリックするとじゃんけんができます。
iPhoneなどのスマホからでもじゃんけんできます。
同じソースコードでスマホでもPCでも動作するのがウェブアプリの強みです。
ウェブアプリのメリット
ウェブアプリのメリットは、PCでもスマホでも動作することです。
ブラウザというインターネットをみるソフトウェアがあれば、どこからでも利用することができます。
スマホでもPCでも動く
スマホはiPhoneやAndroidがありますが、ウェブアプリであればそのどちらでも使用することができます。
iPhoneであればSafari、Androidであればchromeというブラウザが標準で利用可能ですが、そのどちらでもウェブアプリを利用することができます。
PCの場合は、大きくわけてWindows、Mac、Linuxの3種類が存在しますが、スマホと同じようにブラウザからアクセスすることでウェブアプリを利用可能です。
ブラウザだけで動く
ウェブアプリは、ブラウザというインターネットを閲覧するアプリだけで利用することができます。
そのほかのアプリのインストールは不要です。
ブラウザを開き、URLにアクセスするだけですぐに利用可能です。
スマホアプリやPCアプリとの違い
スマホアプリの場合、使い始める前にインストールを行う必要があります。
インストールするにはディスクを使用するため、ある程度の容量を残しておく必要があります。
また、iPhoneやAndroid、WindowsなどOSが異なりますので、それぞれ別々にアプリを開発していく必要があります。
最近ではFlutterなどiOSとAndroidの両方を1つの言語で開発できるフレームワークも存在しますが、WindowsなどPCアプリも含めて同時に開発することはできません。
スマホアプリとは
スマホアプリとは、iPhoneやAndroidで動作するアプリケーションのことです。
iPhoneであればApp Store、AndroidであればGoogle Playからアプリをインストールして利用します。
iPhoneやiPadで動作するアプリは、SwiftやObjective-Cなどのプログラミング言語で開発します。
Androidで動作するアプリは、JavaやKotolinなどのプログラミング言語で開発します。
PCアプリとは
PCアプリとは、WindowsやMacで動作するアプリケーションを指します。
Windowsアプリを開発する場合は、Visual Basic や c# といったプログラミング言語を使います。
ウェブアプリのシステム構成
ウェブアプリは大きくわけてフロントエンドとサーバーサイドの2つに分類されます。
サーバサイドには、データベースというデータを蓄積・登録・削除するシステムを配置します。
フロントエンド
フロントエンドとは、画面に表示する内容を記述する部分になります。じゃんけんアプリでは、じゃんけんの画面や「✊🏻」「✌🏻」「🖐🏻」をランダムで表示するロジックが該当します。
フロントエンド開発では、基本的にはhtml, css, JavaScriptという言語を使用します。
htmlやcssは厳密にはプログラミング言語ではないという議論もありますが、ここでは割愛します。
サーバーサイド
サーバーサイドとは、ウェブサーバ側で実行するプログラムのことで、ログイン認証やデータベースへのアクセスなどを行います。
その他、フロントエンド側では実行できない処理、例えば画像ファイル形式の変換や、音声データの生成などを行うことができます。
データベース
データベースとは、データを登録・参照・更新・削除するための管理システムです。
代表的なデータベースシステムとしては、以下のものがあります。
- MySQL
- PostgreSQL
- SQLite
- MongoDB
- Oracle Database System
ウェブアプリ開発で使用するプログラミング言語と勉強法
プログラミング言語を書かなければウェブアプリは開発できません。
ウェブアプリを開発するためには、いろいろなプログラミング言語を習得する必要があります。
HTML & CSS
HTMLとは、Hyper Text Markup Languageの略で、Webページを記述するための言語です。ほぼ全てのWebページやウェブアプリでhtmlが使用されています。
一方CSS(Cascading Style Sheet)とはHTMLで記述されたページに色をつけたり中央よせしたり、デザインを変更するための言語です。
HTMLとCSSはほぼすべてのウェブサイトで使用されています。
無料のウェブコンテンツで勉強する
本を買わなくても、有料のプログラミングスクールに通わなくても、プログラミングを勉強できます。
以下の「Mozilla Web Docs ウェブ入門」でHTMLとCSSの基礎を習得できます。
「サルワカ HTML&CSS入門 Webデザインをイチから学ぼう」にも、HTMLとCSSの基礎が体系的に説明されています。
「とほほのWWW入門」にはHTMLとCSSのリファレンスがありますので、全体的な学習ができます。
本で勉強する
体系的な知識を得るには本が一番です。査読もされて多くの方にチェックされて出来上がった情報が手に入ります。
１冊めは「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」です。
HTMLやCSSの基本的な情報だけでなく、ウェブデザインやウェブサイトの仕組みなども書かれています。
<div id="msmaflink-GcfiP">リンク</div>
<!-- MoshimoAffiliateEasyLink END -->
２冊めは「これだけで基本がしっかり身につく HTML CSS＆Webデザイン1冊目の本」です。
ウェブサイト制作の流れや、２カラムページを作ってみようなど、実践的な情報が多いです。
JavaScript
JavaScriptとはブラウザで動作するプログラミング言語のことです。
じゃんけんアプリを例にすると、乱数の生成や勝ち負けの判定に利用しています。
無料のウェブコンテンツで勉強する
上記のHTML・CSSと同様に、JavaScriptの基礎が学べるMozilla Web Docsのページです。
以下のページでも、条件分岐や繰り返し、例外処理など基本的な文法を学ぶことができます。
「確かな力が身につくJavaScript「超」入門 第2版」には、JavaScriptの基礎を「数当てゲーム」など実際の開発を通して学ぶことができます。
「JavaScript［完全］入門」には、JavaScriptの基礎だけでなく、Google Chromeの開発者ツールの使い方、Visual Studio Codeの使い方もあり、網羅性の高い本になっています。
PHP
PHPとはサーバーサイドのプログラミング言語の１つです。
特徴としては、htmlファイルの中にPHPスクリプトを書き込むスタイルになっています。
他のプログラミング言語と比較して文法が簡単なため習得が早いとされています。
PHPの基礎的な文法は以下のPHP公式マニュアルに記載されていますので、まずはこちらを読んで見ることをおすすめします。
その他、以下のサイトでもPHP基礎を学ぶことができます。
「スラスラわかるPHP 第2版」はマンガや図が多く、初心者に優しい書籍になっています。
NodeJS
NodeJSとはサーバーサイドJavaScriptのことです。
フロントエンド開発で使用したJavaScript言語でサーバサイドの処理を記述することができます。
基本的な文法はJavaScriptと同じですので、学習コストを削減することができます。
「Node.js超入門[第3版]」では、フレームワーク「Express」を使用したウェブアプリの開発方法が記載されています。
ウェブアプリ開発時に必要なもの
ウェブアプリ開発を進めいていくためには、最低限以下のものが必要です。
パソコン
コードエディタや開発用のウェブサーバ、ブラウザを使用するためにパソコンが必要になります。
後述していますがコードエディタやサーバーサイド言語の実行環境などが必要になりますので、それなりのスペックが必要になります。
OSは基本的にはWindowsでもMacでもどちらでも問題ありません。使い慣れたものや、使ってみたいと思うものがいいと思います。
コードエディタ
コードエディタとは、ソースコードを編集するためのソフトウェアです。
代表的なものは Visual Studio Codeです。オープンソースで開発されているもので、拡張機能をインストールすることで、ほぼすべての言語に対応しています。
以下のURLからVisual Studio Code をダウンロードすることができます。
GitHubアカウント
ソースコードの履歴管理や、開発したアプリの公開などに便利です。
採用面接などで提示をもとめられることもあります。
ほぼすべてのアプリ開発者がGitHubアカウントをもっていると思いますので、作成しておいて損はないと思います。
ウェブサーバ
ウェブサーバはApacheやnginxなどいろいろなものがあります。
サーバサイドが必要な場合は、実行するプログラム言語に対応しているウェブサーバを選びましょう。
サーバーサイドが不要な場合は、GitHub Pages や AWS S3 ウェブホスティングなどを利用する方法もあります。
サーバーサイド言語の実行環境
PHPを実行する場合は、PHPがサーバ上にインストールされている必要があります。
PythonやRubyも同様です。
サーバーサイドのプログラムが実行できる環境を整えていく必要があります。
ウェブアプリ公開時に必要なもの
ウェブアプリが完成してリリースすることを決めたら、以下を準備していく必要があります。
ドメイン
ドメインとはアプリを公開しているウェブサーバの住所のことです。
例えば、「https://usefuledge.com」であれば、「usefuledge.com」の部分がドメインにあたります。
ウェブアプリを開くURLは「https://example.com」や「https://example.com/app/」などカスタマイズすることができます。
私は「Value Domain」というサービスを利用して「usefuledge.com」ドメインを取得しました。
「Value Domain」は自動更新機能もあったりして便利です。
これ以外に、ドメインの取得は「お名前.com」が有名で簡単です。
以下のURLからお名前.comにアクセスできます。
サーバ
世界中からアクセス可能なサーバを用意する必要があります。
レンタルサーバやVPSを契約して利用するのが一般的です。
レンタルサーバ
レンタルサーバは１つのサーバを多くの人で共同利用する方式です。
メリットは、安くて設定が簡単です。
デメリットは、レンタルサーバが用意したアプリ以外は使えない、通信容量の制限があるという点です。
選択したサーバサイド言語のランタイムがレンタルサーバー側に用意されていれば、レンタルサーバーの契約を検討してみましょう。
レンタルサーバー側に用意されていなければ、VPSで考えていく必要があります。
| 項目 | 内容 |
| 😌メリット | 安い。 ワンクリックで設定できる |
| 😔デメリット | レンタルサーバが用意したアプリ以外はインストールできない可能性がある。 ディスク容量や通信容量の制限がある |
私は「さくらインターネット」のレンタルサーバを利用していました。
スタンダードプランなら月額５００円くらいなのであまり大きな出費ではないこと、SSL証明書の取得や設定が簡単なことがメリットです。
詳細は以下のページで確認できます。
VPS
VPSとは「Virtual Private Server」の略で、１台の仮想サーバを自由に使えるというものです。
そのため、管理者権限（Administratorユーザ）を使用でき好きなアプリを自由にインストールできるというメリットがあります。
デメリットは少し高価なことですが、必要スペックを十分に検討することで費用を抑えることができます。
| 項目 | 内容 |
| 😌メリット | 管理者権限で自由にインストールできる ディスク容量や通信量の制限がない |
| 😔デメリット | 少し高価（必要最低限のスペックにすることでコストを抑えられる） １つ１つ自分で設定していく必要がある |
少し知識が必要ですが、AWS Lightsailなら月額費用がある程度固定されて簡単に利用できます。
「usefuledge.com」もLightsailで運用しています。
その他、さくらインターネットのVPSもあります。
Windows Serverを使うならConoha VPSがいいと思います。
メモリ１GBが月額９７９円、２GBで月額１９８０円ですので、Windows VPSとしては安価です。
SSL証明書
昨今のウェブアクセスはhttpsが求められています。スノーデン事件があったように、暗号化されていないと通信傍受が簡単に行われてしまいます。
httpsを利用することで通信暗号化を実現できますが、そのためには証明書の取得とウェブサーバへの設定が必要になります。
レンタルサーバであればワンクリックで簡単に設定が可能です。
VPSであれば、無料のLet’s Encryptを使用することで証明書取得が可能です。
エラーが解消されなくて困ったときの対処法
プログラミングやサーバ設定はエラーが付き物です。
必ずと言っていいほどエラーが発生し、たまに解消されずに作業が滞ることもあります。
そんなときは、根気強く以下の手法で対処していく必要があります。
エラーメッセージでGoogle検索してみる
エラーメッセージをそのままコピペしてGoogle検索してみましょう。
同じようなエラーに困った先人の方々が対処方法を公開しているかもしれません。
欲しい情報がうまくヒットしない場合は、OS名やバージョン番号などを指定して検索してみましょう。
SNSやQAサイトで質問してみる
Google検索でいい情報がヒットしなかった場合は、SNSやQAサイトで質問してみましょう。
SNSはTwitterがいいかもしれません。「#駆け出しエンジニアと繋がりたい」などのハッシュタグをつけると反応してくれるかもしれません。
QAサイトは、teratailなどがあります。
ウェブアプリ開発は楽しい！
私はウェブアプリ開発が好きです。PCやスマホなど様々な端末から利用できるアプリを開発することができること、思い通りのアプリが動作したときの感動、利用者から感想を頂いたときの喜びなどがその要因です。
ウェブに限らずアプリ開発は数ヵ月という長い期間が必要です。ときには完成までたどり着けないこともありますし、完成できたとしてもお金にならないことばかりです。
ただ、自分がほしいアプリを自分の手で作れることは何にも代えがたいですし、転職の際の強みとしてアピール材料にもなります。
終わりに
感想・改善要望その他なんでもいいので、なにかありましたらTwitterへDMいただけたらと思います。
また、私のTwitterアカウントではウェブアプリ開発やUI/UX、株式投資などについて投稿しています。
ご興味を持っていただけたらフォローしていただけると嬉しいです。
コメント