【初心者用】バックエンドとフロントエンド

公開日: 2024/5/23 更新日: 2024/4/11

フロントエンドの開発の勉強を主にしていたので、バックエンド側についての知識が少ないのでまとめたいと思います。

フロントエンドとバックエンドの各役割や違いなどを、漠然と理解していたので今回で明確に理解しておこうと思います。

1. フロントエンド開発とバックエンド開発とは


1-1. フロントエンド開発

フロントエンド開発とは、WebアプリケーションやWebサイトなどのユーザーが視覚的に操作する要素のことを言います。

フロントエンド開発では、Webページのサイドバーやメニューバーなどの、視覚的要素が機能し操作しやすいインターフェースを動的に表示・操作されるようにすることを言います。

具体例としては、Webアプリケーションやサイトのフォント・アニメーション・ボタン・メニューなどが機能・表示できる操作のことを言います。


これにより、UX(ユーザーエクスペリエンス)やUI(ユーザーインターフェース)のデザインでは、ユーザーが操作するWebサイトの操作性や外観などの機能性に対して焦点があてられるのに対して、フロントエンド開発では作成したデザインがソフトウェアにどう実装・表示されるのかが重要視されます。


最近は様々なものがインターネットにつながっているため、WebサイトやWebアプリケーションの需要は増え続けていくと思います。

また、技術が進化するにつれてフロントエンドに使用する開発言語などが、さらに複雑化していき実装する機能なども増えていきます。

ですので、積極的にコーディングスキルを高めることや、最新技術への知識なども深めるようにしていく必要があります。

1-2. バックエンド開発

バックエンド開発では、WebアプリケーションやWebサイトのフロントエンド開発のような、表面的な動作ではなくユーザーが見えない部分について開発をします。

バックエンドでは、WebアプリケーションやWebサイトのデータベースとブラウザ間の通信やデータ保存の開発が含まれています。

バックエンド開発の主なものとして、アプリケーション、サーバー、データベースの3つになります。


動作例としては、オンラインショップなどで何か購入した場合は、バックエンドの方では購入された商品情報や、購入した際のクレジットカードデータのような購入に関する情報などの保存する処理を行います。

ですので、フロントエンド開発ではユーザーが視覚的に操作できる機能を追加して、バックエンド開発ではユーザーの情報をサーバーのデータベースに保存する処理などをしています。


このようにユーザーのデータを保存しておくことで、ユーザーが同一のサイトに再度訪れた場合に、保存した情報を使用して利便性が向上します。

バックエンド開発では、Webサイトのデータやストレージの設計・開発などの知識をつけておくことが重要になります。


バックエンドエンジニアは、携わる仕事によりWeb系のサーバーエンジニア、ネットワークエンジニア、システムエンジニア、Web系のプログラマというように分類分けされます。

バックエンドの作業に関しては、フロントエンドよりもバックエンド需要はあるという見方もできます。


また、バックエンドエンジニアになるためには、APIの実装方法やデータベースの知識を習得したりする必要があります。

OSやセキュリティーなどの様々な知識を習得しておくことで、バックエンドエンジニアの価値を高めることができます。

2. フロントエンドとバックエンドの違いについて


上記でフロントエンドとバックエンドの違いについて軽く触れていましたが、以下に詳細に両方の違いについてまとめます。

改めて説明するとフロントエンドとは、WebアプリケーションやWebサイトなどのユーザーが実際に目に触れて操作する部分です。

それに対して、バックエンドはサーバー側のデータベースやシステムなどの処理になります。

■フロントエンド

 ●使用言語
  ・HTML(マークアップ言語)
  ・CSS
  ・JavaScript
    ・jQuery
    ・React
    ・Vue
    ・Angular等

 ●開発範囲
  ・Web関連の操作画面
    ・サイドバーやヘッダー・フッダー等

 ●作業内容
  ・Webデザイナーが設計したデザインをプログラムに変換する

■バックエンド

 ●使用言語
  ・Java
  ・Ruby
  ・PHP
  ・Node.js

 ●開発範囲
  ・サーバー側の処理
    ・データベース関連への通信処理
    ・データのPost・Get処理

 ●作業内容
  ・データベース構築
  ・システム構築
  ・保守・運用

2-1. 使用言語の違い

バックエンド側の開発としてはJava・Ruby・PHP・Node.jsなどを使用して開発をします。

Node.jsに関してはフロントエンド開発で使用するJavaScriptで、サーバー側の処理を記述することができます。

バックエンド開発では、必要な開発言語や言語別のフレームワークの知識以外に、データベースやデータの通信処理なども理解していないと難しくなります。


フロントエンドの開発としては、HTML・CSS・JavaScriptや関連するフレームワークとライブラリを使用して開発を進めます。

HTMLはマークアップ言語というWebサイトを作成するための言語です。

ですので、フロントエンド開発ではこちらは基本となっており、HTMLで記述されているものをDOMとも呼びます。


フロントエンド開発では、Webデザイナーが作成したデザイン通りに開発したり、ユーザーが使用しやすいように構築するのが仕事です。

上記のようなサイトを作成するには、HTMLで作成したサイトにCSSを使用してUIを作成します。

また、サイトに動作処理を追加するためにはJavaScriptやJavaScriptのフレームワーク・ライブラリを使用してWebサイトなどに動作を追加します。

2-2. 開発範囲

バックエンド開発では、主にサーバーサイドの処理に関する開発や構築をします。

具体的な例としては、クレジットカード決済の個人情報などのデータや商品データなどが該当します。


フロントエンドでは、WebサイトやWebアプリ等の画面操作処理を開発します。

直接ユーザーが操作するメニューなどのクリック操作やページ遷移などの、ユーザーが実際に触れて操作する部分を作成します。

3. フルスタックエンジニアについて


フルスタックエンジニアとは、上記で説明していたフロントエンド開発とバックエンド開発の両方ができる等の人材をフルスタックエンジニアと呼びます。

フルスタックエンジニアは設計から開発・運用・保守・アップデートなどをすべて引き受けられる、幅広く高度な知識を持つエンジニアであり、システム開発の開発工程におけるオールラウンダーな人材です。


また、フルスタックエンジニアは職業名ではなく、複数の役割を行えるエンジニアのことを指します。

4. まとめ

現在はフロントエンド開発系の勉強をしていますが、最近はSNSアプリ等を作成する際にバックエンド側の作成もするようになりました。

APIなどを作成することでデータのPost・Getの流れなど理解することができたので、フロントエンドもバックエンドも学ぶことで自身のスキルアップにつながると感じました。