こんにちは、弱小エンジニアのいすいです。
早速ですが、初心者の頃って「こういうWebアプリを作りたいな、、」ってアイデアは出たものの、
「実際どうやって作るのか分からない、、🤷」なんてことあったりしますよね。
本日は、Webアプリケーションを開発する際に必要なことについてお話しします。
目次
Webアプリを作るときに必要な技術
どういうWebアプリを作るかは概ね決まり、「じゃあさっそく作りましょう」
となったときにどうやって作れば良いのか、
それは以下の2パターンの構成によってやり方が変わります。
- サーバー型
- フロント-バックエンド型
つまり、上のどちらにするのか、Webアプリの設計段階で決める必要があります。
では、それぞれでどのような手順になるのか以降説明します。
サーバー型の場合
必要手順は以下です。
- サーバーサイドのアプリケーション開発
- Webサーバーを用意
- １で作成したアプリケーションをWEBサーバーにアップロード
- WEBサーバー起動
1.サーバーサイドのアプリケーション開発
1のアプリケーション開発が一番重要な手順です。
ここでのアプリケーションは『データベースからデータを取ってきて、それをHTMLに埋め込んで返す』ことをやるプログラムです。
その際、全てを1から作成するのではなく、フレームワークというものを使います。
フレームワークとは『アプリケーションに最低限必要な機能がすでに実装されており、開発者はアプリ特有の機能の開発に集中できるためのツール』です。
サーバーサイドのフレームワークで有名なのは以下あたりです。
（実際は他にも沢山のフレームワークがあります）
- pythonの「Django」「Flask」
- PHPの「Laravel」
- Rubyの「Ruby on Rails」
- Javaの「Spring」
- C#の「ASP.NET Core」
どのフレームワークを選んでもできることの差分はあまりない印象です。
通常、フレームワークの選定は、「人気なもの」「実装のしやすさ」「知見の多さ」などで選ぶと思います。
どれも仕組みは似通っているので、1つのフレームワークを学べば、他のフレームワークの学習コストはそこまで高くありません。
「なんかよくわからないな、、」という場合でも、
試しに上であげたフレームワークのいずれかの書籍を１冊読んでみると良いと思います！
（決して無駄にはならないと保証します！）
日本で人気なのはRubyなんですかね？求人でRubyを使えることが募集要項に入っていたりします。
世界的にはpythonの「Django」「Flask」が熱いと思います。
また、フレームワークを勉強すれば自然と学びますが、
「SQL（データベース）」「HTML/CSS」「プログラム言語（pythonなど）」の知識も必要です。
ちなみにデータベース作成も必要です。
（データベースも説明していたらボリュームがすごいので割愛します、、🙇）
2. Webサーバー用意
アプリケーションの開発ができましたら今度はWebサーバーを用意する必要があります。
個人PC上でも開発用のサーバーを立てることはできるのですが、
通常は他の人は個人PCにアクセスができません。
そこで、他の人もアクセスできる場所にアップロードをします。
その場所はグローバルIPが付与されたサーバー（PC）上です。
誰でもアクセスできるためにはグローバルIPが必要なためです。
(実は個人PCでもルーターの設定とかをいじれば、外部の誰でもアクセスできるようにすることはできます。ただし、スペックやセキュリティの問題があるので、無闇に行うべきではありません。）
グローバルIPが付与されたサーバー（PC）はレンタルサーバーを使うか、
クラウドを使うことになると思います。
（昨今はクラウドが多いと思います。）
クラウドではAWS、GCP、Azureが人気です。
例えば、AWSにEC2仮想マシンを立て、Webサーバーのプログラムをインストールします。
この辺りは「EC2 Webアプリ」とかで検索してみてください。
3. Webサーバーにアップロード
Webサーバーが準備できたら、アプリケーションをWebサーバーにアップロードします。
アップロードには「FTP」や「SFTP」を使います。（Gitを使う方法もあります。）
4. Webサーバーを起動
あとは、WEBサーバーを起動して、WEBアプリケーション完成です。
フロントエンド-バックエンド型の場合
フロントエンド-バックエンド型の場合、サーバー型よりやることが多めです。
サーバー型ではデータベースからのデータ取得とHTMLの返却を同じサーバー上で行なっていました。
フロントエンド-バックエンド型の場合は、
「HTMLの生成はフロントエンドのアプリケーション」
「データベースからのデータ取得はバックエンドのアプリケーション」
というように分担した構成になります。
つまり、アプリケーションが少なくとも2つ存在します。
フロントエンドのアプリ開発にもフレームワークを使います。（言語はJavaScriptになります）
フロントエンドのフレームワークでは以下あたりが有名です。
（実際は他にも数えきれないほどフレームワークがあります）
- React
- Angular
- Vue
（特にReactが今は熱いです）
フロントエンドのアプリはユーザーのブラウザ内で実行されます。
そして、データ取得や更新の際はフロントエンドアプリからバックエンドサーバーにアクセスし処理します。
ただし、フロントエンドアプリ用のサーバーも必要で、ユーザーがブラウザからWebアプリにアクセスする際、フロントエンドのサーバーからHTMLやJavaScriptを返しています。
バックエンドではサーバー型で紹介したフレームワークと同じ選択肢になるのが通常です。
（サーバー型で紹介したフレームワークはバックエンドサーバーでも使えます）
データベースからのデータ取得だったり、データ更新を行う役割を持たせたものを「Web API」と呼びます。
（実際は「Web API」はHTTPでアクセスすることで、何かしらデータをくれたり、メールを飛ばしてくれたり、何か処理をしてくれたりと、多方面の仕事をしてくれるものです。）
それでは必要な手順です。（フロントエンド = Front, バックエンド = Back）
- Frontのアプリケーションの開発
- Backのアプリケーション（WebAPI）の開発
- Front/Back用のWEBサーバーを作成
- WEBサーバーにFront/Backのアプリケーションをアップロード
- WEBサーバーを起動
１で必要な技術は「HTML/CSS/JavaScript」で、フレームワークを用いて開発します。
２はサーバー型で紹介したフレームワークを用いて、Web APIを開発します。
３はサーバー型の時と同じ作業です。例えばAWSにEC2をたてて、Webサーバーをインストールします。ただし、FrontとBackの両方用意します。（１つのEC2上で行うことも可能です）
４, 5はサーバー型と同じで、FTPなどでアップロード後、Webサーバーを起動します。
サーバー型と違い、フロントエンド-バックエンド型にするメリットとしては、SPA構成にできるということです。
SPAとは「Single Page Application」の略で、
サーバー型の場合、ページの一箇所の表示を変える時にページ全体を再取得する必要があるのですが、
フロントエンド-バックエンド型の場合、UI更新はUIを更新する箇所のみ更新され、ページ全体は再取得されません。
ユーザー体験としては大きい違いで、サーバー型の場合、何か情報を変える時はページ全体が一度真っ白になり、その間操作の続行は不可能になります。（ページ全体を再取得しているため）
フロントエンド-バックエンド型の場合、情報を書き換える際にその箇所だけ更新されるので、他の箇所は操作可能な状態のままとなります。
なので、ユーザビリティがフロントエンド-バックエンド型の方が高く、最近はSPAが主流です。
一方、シンプルなWebサイトとかはサーバー型で作られていることが多いと思います。
まとめ
まとめると、WEBアプリ開発で必要になる技術は以下です。
- サーバー型
- サーバーサイドのフレームワーク
- HTML/CSS
- データベース
- AWSのEC2について
- WEBサーバー
- フロント-バックエンド型
- フロントエンド（JavaScript）のフレームワーク
- バックエンドのフレームワーク
- HTML/CSS/Javascript
- データベース
- AWSのEC2について
- Webサーバー
フロントエンド-バックエンド型が最近では多い印象ですが、
学習コストはより高いので、一旦サーバー型で慣れておいた方が良いかもしれないですね。
自分の場合は、サーバー型を学んだ後にフロント-バック型に取り掛かりました。