Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

フロントエンド・バックエンドをそれぞれ徹底解説


スポンサードリンク
 

f:id:ShotaNukumizu_1000:20211114091448p:plain

おはようございます。Shotaです。

今回の記事では、フロントエンドとバックエンドのそれぞれの特徴や違いを徹底解説します。単にそれらを説明するだけではななく、個人的におすすめな言語を説明しておきます。

それでは早速、本題に入りましょう。


フロントエンドとは

f:id:ShotaNukumizu_1000:20211230093445p:plain

フロントエンドとは、ユーザと直接データのやり取りを行う要素のことで、具体的にはWebブラウザ側を指します。

WEBブラウザでプログラムを実行し、ユーザが文字を入力してサーバに送信する等の機能を持っています。クライアントサイドとも呼ばれます。

主にフロントエンドの業務では主に以下のようなものが挙げられます。

おすすめの言語

JavaScript

JavaScriptはWebページに動きを付ける際に使われるプログラミング言語です。非常に知名度が高く、プログラマーやデザイナーなど幅広い職業で活用されています。

文法がシンプルで学習コストが低く、テキストエディタやブラウザさえあればすぐに実行できるのが最大の特徴です。さらに、日本語の情報も豊富なの で初心者に非常におすすめです。

TypeScript

f:id:ShotaNukumizu_1000:20220127145432p:plain

TypeScriptは2014年頃にMicrosoftが開発したプログラミング言語です。JavaScriptの問題を解決するために開発されました。(AltJSと呼ばれる)

TypeScriptはJavaScriptよりもエラーを防ぎやすく、JavaScriptが苦手な大規模開発が得意です。あと、TypeScriptファイルからJavaScriptファイルに変換できます。TypeScriptはJavaScriptの完全上位互換と言える言語です。

しかし、クラスや型定義などJavaScriptにはない概念が登場するので、学習コストは多少高めで初心者には難しいです。

おすすめのフレームワーク

Vue

f:id:ShotaNukumizu_1000:20211218162349j:plain

VueはJavaScriptフレームワークで、非常にシンプルで学習コストが低いです。公式の日本語ドキュメントが充実しており、問題点やエラーの解決がしやすいです。公式のライブラリが豊富で、単一のプロジェクトで様々な機能を実装できます。

新型コロナウイルスの公式サイトやクリエイターのためのSNS「note」はVueで動いています。

React

f:id:ShotaNukumizu_1000:20220131090004p:plain

ReactはJavaScriptライブラリです。こちらもVueと同様に学習コストが低いです。あの有名なFacebookInstagramはReactで開発されています。Vueとは違ってアプリ開発に必要な機能を外部から持っていく手間はかかりますが、その分柔軟性が高いのが特徴です。

Svelte

f:id:ShotaNukumizu_1000:20220206192444p:plain

SvelteはVueやReactに対抗して開発されたJavaScriptフレームワークです。VueやReactよりも構造が非常にシンプルで、こちらも学習コストが低いです。しかし、開発されて日が浅いので情報量がVueやReactに比べて少ないです。

バックエンドとは

バックエンドとは、Webサーバやデータベースのシステムなどのユーザから見えない部分のことです。ユーザが入力した内容などのデータ処理やデータベースへの保存、検索結果の出力というようなことを行います。

Webアプリはリリースされた後もバグや修正点が出てきます。それらに対応するためにはバックエンドの知識が必要不可欠です。

バックエンドでは、主に以下のような業務が行われます。

  • データベースの操作
  • APIの実装
  • ログイン等の認証機能の実装

おすすめの言語

Python

f:id:ShotaNukumizu_1000:20211230070654p:plain

Python機械学習人工知能のイメージが強いですが、実はPythonでバックエンドを構築できます。

文法が非常にシンプルで学習コストが低く、Google Colaboratoryを使えば環境構築なしで動かせる手軽さがあるのが最大の特徴です。更にライブラリが豊富で、特に機械学習やデータ分析の機能を含めたアプリとの相性が抜群です。

PHP

f:id:ShotaNukumizu_1000:20210812080643p:plain

PHPはWeb開発に特化した言語です。あの有名なWikipediaPHPで動いています。

学習コストが非常に低く、HTMLに組み込んで使えるのが最大の特徴です。HTML/CSS, JavaScriptと組み合わせたら簡単なWebサイトを構築できます。

おすすめのフレームワーク

Django

f:id:ShotaNukumizu_1000:20211205071412p:plain

DjangoPythonで開発されたフルスタックフレームワークです。InstagramDropbox, Evernoteなどの世界的に有名なアプリで活用されています。WEB開発に必要な機能を一式揃えているのが最大の特徴です。あと、Django REST Frameworkを活用すればAPIを開発でき、各種JavaScriptフレームワークと連携できます。

コマンド一つでアプリケーションの雛形を自動で生成してくれるのでWebアプリを効率的に開発しやすいです。

FastAPI

f:id:ShotaNukumizu_1000:20211129152933p:plain

FastAPIはPythonで開発されたWebフレームワークです。Djangoよりも非常に軽量かつ高速で、APIを開発するために使われます。

文法がシンプルで難易度はそこまで高くありませんが、発展途上なので情報量が少ないのがデメリットです。

Laravel

LaravelはPHPで開発されたWebフレームワークです。PHPでWebアプリを開発する上でよく使われます。PHPが使われているので学習コストが低く、習得すれば簡単なWebアプリを開発できます。

違い

フロントエンドとバックエンドは両方とも分野が違います。ところが、それぞれが関係しているので、業務内容やプロジェクトの規模によっては両方の知識が必要不可欠です。バックエンドではデータベースの設計やアプリの運用等、業務がフロントエンドに比べて多めなので若干市場価値が高い傾向にあります。(両方とも需要が高い職種ですが)

プログラマーとしてキャリアを形成していくためには、フロントエンドとバックエンドの両面から幅広い知識を身につけることが大事です。

まとめ

今回の記事では、フロントエンドとバックエンドをそれぞれ徹底解説しました。今回の記事を参考に、フロントエンドとバックエンドについて理解を深めていただければ幸いです。

今回の記事はこれで終了です。