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