こんにちは、弱小エンジニアのいすいです。
初心者の頃って、こういうWebサイト作りたいな、、ってアイデアは出たものの、
実際どうやって作るのかわからない、、なんてことあったりしますよね。
本日は、Webサイトを自作する際に必要になる技術についてお話しします。
Webサイトを作るときに必要な技術
Webサイトの要件、デザイン、仕様は決まりました→じゃあさっそく作りましょう
となったときにどうやって作れば良いのか、
それは、Webサイトをどのような構造にするかによります。
（この構造を決めるフェーズをIT用語では「設計」と呼びます）
Webサイトの構造としては主に以下の２パターンかなと思います。
- サーバー型
- フロント-バックエンド型
サーバー型の場合
必要なのは以下です。
- サーバーサイドのフレームワークで実装
- １で作成したアプリをWEBサーバーにアップロード
- WEBサーバー起動
1のサーバーサイドのフレームワークについてちゃんと説明しますと、
データベースからデータを取ってきて、それをHTMLに埋め込んで返す、ってことをやってくれるプログラムを開発するためのものです。（フレームワークはなくても実際開発はできるのですが、非常に大変になります。）
今は難しいかもしれませんが、サーバーサイドのフレームワークの本を何か１冊やってみると分かっちゃうと思います。
サーバーサイドのフレームワークとしては、
pythonの「Django」「Flask」
PHPの「Laravel」
Rubyの「Ruby on Rails」
Javaの「Spring」
C#の「ASP.NET Core」
などがあります。
正直どれを選んでもできることは同じだと考えています。これを選んだからできないことがあるとかはなく、人気なもの、実装のしやすさ、知見の多さなどで通常は選びます。
日本で人気なのはRubyなんですかね？求人でRubyを使えることが募集要項に入っていたりします。
世界的にはpythonの「Django」「Flask」が熱かったりするんですかね？
１で使う技術としては「SQL（データベース）」「HTML/CSS」「選んだプログラム言語のコーディング」の技術が必要です。
実際１の時にデータベース作成など色々やることは入っちゃってます。
１が完了すれば、今使用しているPCで仮のサーバーを立てて、そこで動かすってことはできるのですが、
他の人はアクセスすることができません。
そこで、他の人もアクセスできる場所にアップロードをします。
場所はクラウドが多く、AWSが人気です。
AWSにEC2仮想マシンを立て、WEBサーバーをインストールし、アプリをFTPでアップロードします。
この辺りは「EC2 Webアプリ」とかで検索してみてください。
あとは、３でWEBサーバーが起動していれば、WEBアプリ完成です。
フロント-バックエンド型の場合
フロント-バックエンド型の場合、サーバー型よりやることが多めです。
サーバー型ではデータベースからのデータ取得とHTMLの返却をサーバーで行なっていました。
それをHTMLの生成はフロントエンドで、データベースからのデータ取得はサーバーでというように分担します。
つまり、UIの部分とデータ取得の部分が別々のプログラムで処理されることになります。
フロントエンドの開発にはJavascriptのフレームワークを使います。
主に、以下が人気です。
React
Angular
Vue
（特にReactが今は熱いです）
データベースからのデータ取得は、実はサーバー型のフレームワークと同じものを使います。
データベースからのデータ取得だったり、データ更新を行う役割を、「Web API」と呼びます。
（実際は「Web API」はHTTPでアクセスすることで、何かしらデータをくれたり、メールを飛ばしてくれたり、何か処理をしてくれたりと、多方面の仕事をしてくれるものです。）
それでは必要な手順です。
- フロントエンドの開発を行う
- バックエンドの開発を行う
- フロントエンド用のWEBサーバーを立てる
- バックエンドをWEBサーバーに配置する
１で必要な技術は「HTML/CSS/JavaScript」です。
２はサーバー型でやることのうち、HTMLの生成はなく、Web APIに特化した構成にすることだけです。
３はAWSのEC2仮想マシンにWEBサーバーを立てて配置します。
４はバックエンドをWEBサーバーに配置します。（３と同じWEBサーバーに配置ってこともできます）
サーバー型と違い、フロント-バックエンド型にするメリットとしては、SPA構成にできるということです。
サーバー型の場合、UIを更新するにはページを一度再描画することになるのですが、
フロント-バックエンド型の場合、UI更新はUIを更新する箇所のみ更新され、ページ全体は再描画されません。
なので、ユーザビリティがフロント-バックエンド型の方が高く、最近はほぼSPAです。
Webサイトとかはサーバー型で作られていることが多いと思います。
まとめ
まとめると、WEBアプリ開発で必要になる技術は以下です。
- サーバー型
- サーバーサイドフレームワーク
- HTML/CSS
- データベース
- AWSのEC2について
- WEBサーバー
- フロント-バックエンド型
- フロントエンドフレームワーク
- バックエンドフレームワーク
- HTML/CSS/Javascript
- データベース
- AWSのEC2について
- Webサーバー
フロント-バックエンド型が最近では多いですが、必要なことが多いので、
一旦サーバー型で慣れておいた方が良いかもしれないですね。
自分の場合は、サーバー型を学んだ後にフロント-バック型に取り掛かりました。