初心者向けWebアプリ作成に必要な技術

こんにちは、弱小エンジニアのいすいです。

初心者の頃って、こういうWebサイト作りたいな、、ってアイデアは出たものの、

実際どうやって作るのかわからない、、なんてことあったりしますよね。

本日は、Webサイトを自作する際に必要になる技術についてお話しします。

Webサイトを作るときに必要な技術

Webサイトの要件、デザイン、仕様は決まりました→じゃあさっそく作りましょう

となったときにどうやって作れば良いのか、

それは、Webサイトをどのような構造にするかによります。

(この構造を決めるフェーズをIT用語では「設計」と呼びます)

Webサイトの構造としては主に以下の2パターンかなと思います。

  • サーバー型
  • フロント-バックエンド型

サーバー型の場合

必要なのは以下です。

  1. サーバーサイドのフレームワークで実装
  2. 1で作成したアプリをWEBサーバーにアップロード
  3. 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でアクセスすることで、何かしらデータをくれたり、メールを飛ばしてくれたり、何か処理をしてくれたりと、多方面の仕事をしてくれるものです。)

それでは必要な手順です。

  1. フロントエンドの開発を行う
  2. バックエンドの開発を行う
  3. フロントエンド用のWEBサーバーを立てる
  4. バックエンドを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サーバー

フロント-バックエンド型が最近では多いですが、必要なことが多いので、

一旦サーバー型で慣れておいた方が良いかもしれないですね。

自分の場合は、サーバー型を学んだ後にフロント-バック型に取り掛かりました。

SNSでもご購読できます。

コメントを残す

*