WebアプリやWebサービスについて学習する時に「フロントエンド」や「バックエンド」という言葉を聞いたことがあると思います。

エンジニアの求人にも「バックエンドエンジニア」や「フロントエンドエンジニア」と分けられていることもあり、学習当初は混乱することもあるかもしれません。

今回は、この2つの違いと役割について説明します。

フロントエンドとは

Frontend(フロントエンド)

フロントエンドは主にユーザー(サービス利用者)が目にする部分のことを言います。

Chrome(クローム)やSafari(サファリ)、Edge(エッジ)などのブラウザで表示するページのレイアウトやボタンを作成し、サービスの窓口を提供します。

このページのデザインはサービスのイメージに直結し、レイアウトやデザインによってユーザーに提供できるサービスの質が左右されます。

開発にはブラウザで動作する HTML、CSS、JavaScript を使用することが多いです。

バックエンドとは

Backend(バックエンド)

バックエンドは主にユーザーから受け取った情報をもとに結果を返す働きをする部分のことを言います。

フロントエンドとは異なり、ユーザーが目にすることがないため「どんなことをしているのか」イメージしにくい部分でもあります。

ブラウザでユーザーが入力した情報をバックエンドが受け取り、DB(データベース) に情報(データ)を保存したり、検索を行った結果をフロントエンドに返却します。

バックエンドの言語は多くあり、Java、Python、C#、Ruby、PHP などがあります。

フロントエンド開発に必要な技術

Frontend Language(フロントエンド言語)

フロントエンド言語の学習

HTMLやCSS、JavaScriptの基礎を学習する必要があります。
この基礎学習については カリキュラム を参考にしてみてください。

以前まで HTML と CSS が理解できていればデザインを行うことができていたのですが、レスポンシブデザインなどの普及により JavaScript の理解が必須と言えるものになりました。

近年では React や Vue.js のように SPA(Single Page Application: 一つのページで完結するWebサイト)を構築するフレームワークも流行しており、言語の知識に加えフレームワークの知識も必要となってきています。

UI/UXデザイン

UI/UX Design(デザイン)

ユーザーが目にしたり操作したりする部分をUI(User Interface: ユーザーインターフェース)と言います。
ページのレイアウトやボタンの配置、表示するテキストの内容など、主にページのデザインの事を指します。

このUIの質を高めることで、ユーザーにより良い体験を提供することができます。ユーザーに良い体験が提供できるサービスにはファンが増え、サービスそのものも発展しやすくなります。

このように、ユーザー体験(User eXperience: UX)の向上が必要となってきていることから、UI/UXデザイン と呼ばれ、ユーザー目線に立ったデザインの設計が求められています。

SEO

Search Engine(検索エンジン)

Googleなどの検索エンジンで検索上位にくるための対策を SEO(Search Engine Optimization: 検索エンジン最適化) と言います。

SEOは、HTMLの title タグの設定や head タグ内の SNSメディアで表示するための OGP(Open Graph Protocol) の設定、CSSの文字サイズやカラー、画像サイズや配置など、多くの項目を元に判断されていると言われています。

すべてを完璧に把握することはできませんが、SEOの基本的な知識は必要になります。

また、サイトの検索状況や掲載順位を確認できるSearch Console(サーチコンソール、サチコ)の使い方、サイトの訪問者数の計測などを確認できる Google Analytics(グーグルアナリティクス)の使い方や見方が求められます。

バックエンド開発に必要な技術

バックエンド開発では、フロントエンドの基礎的な知識を有していたほうがスムーズに開発できる場合があります。

バックエンド言語の学習

Backend Language(バックエンド言語)

バックエンドで扱われている言語はサーバサイド言語とも呼ばれ複数の選択肢があります。

どのようなサービスを開発するのか、どのような機能を実装するのか、言語を習得しているエンジニアの数、流行り、フレームワークの特色など、多くの要素を元に判断します。

主に用いられる言語は、Java、Python、C#、Go、Ruby、PHP、Rustなどがあります。

OSの知識

OS

開発したアプリケーションはサーバーで実行します。

サーバーで使用されるOS(Operation System: オペレーションシステム )は Windows系OS と Unix(ユニックス)系OS があり、Unix系OSが多くの場面で選択されています。

Unix系OSにも、Linux(リナックス)や Linux から派生した Ubuntu(ウブントゥ)、CentOS(セントオーエス)など多くの種類があり、Macで使用されているMacOSもその一つです。

このOSが行うメモリ管理やネットワークについての基礎知識が必要になります。

ターミナルの操作

Unix系OS 上で、ファイルを作成・編集したりソフトウェアをインストールするときにはターミナルでコマンドを入力する必要があります。

この操作は、サーバー上でアプリを起動するときに必要になるため、ターミナルの操作方法を学習する必要があります。

MacOS をお使いの方は、アプリケーションにある ターミナル で練習することができます。
cd コマンドで ディレクトリ(フォルダ)を移動したり、mkdir コマンドで新しくディレクトリを作成することができます。

  • ターミナルの操作は重大な障害に繋がる可能性もありますので、慎重に練習してください。

DBの知識

データを保存するDB(データベース)に関する知識が必要です。

DBには、RDB(Relational Data Base: MySQLやPostgreSQL、OracleDB など)と NoSQL(Not Only SQL: MongoDBやDynamoDBなど)があります。

最初は、MySQL や PostgreSQL などの RDB を利用して データの保存、読み込み、更新、削除を学習しましょう。続いて データベース設計を学習します。

APIの実装と利用

API(Application Programming Interface)とは、バックエンドで開発したプログラムの機能を外部のアプリケーションに提供したり、外部のプログラムの機能を借りたりすることができる窓口のようなものです。

このAPIを使用して、ユーザーの認証や検索結果を返却します。

外部のAPIを利用することで、新しい機能を簡単に取り入れることもできます。

セキュリティに関する知識

Security(セキュリティ)

時々「パスワードが盗まれた」や「暗号化できてなかった」といったニュースを見かけませんか?

セキュリティの知識がなければ、パスワードなどの重要なデータを無防備に送信してしまったり、暗号化せずに DB に保存してしまうといった誤ちを犯してしまうかもしれません。

セキュリティに関する基本的な知識を学習しましょう。

両方に必要な技術

Webの基礎知識

作成したHTMLやCSS、JavaScriptがどのように配信されるのか、httpとhttpsの違いについてや、IPアドレス、ドメイン、ポート番号、URLについてなどWebに関する基本的な理解が必要です。

概念や仕組みを理解していれば、サービスの開発に何が必要で何をどうすれば機能を実装できるのかが分かります。

見えないものを理解しようとしているので最初は分からないことが多いですが、試していれば少しずつ理解できるはずです。

Webの概念

Gitの操作

Git branch

バージョン管理システムであるGitは多くの開発現場で必要な知識となります。あわせてGitHubの知識があることでグループ開発が進めやすくなりますので、基本的なことは学習しておきましょう。

Gitの使い方

GitHubの使い方

最後に

プログラミングの学習は、目に見えない部分を理解しなければならないことも多く、頭がこんがらがることも多いです。

そんな時は焦らずに一度睡眠をとったり、運動してリフレッシュしましょう。

パソコンが重くなれば、再起動してみることがあると思いますが、人間も同じです。

息抜きしながら少しずつ分からないことを理解できるようにしていきましょう。