こんにちは。
バックエンドエンジニアを志望しているのに、
まったく基礎知識を理解しないまま言語や技術を使うという愚かな行いに気づき、
0からすべてを学び直しているKeiといいます。
前回の記事はこちら
【バックエンドとフロントエンドの違い】についてのアウトプットとなります。
こちらの記事は、日々の学習進捗を記録する意図もあるため、誤りや抜け情報があるかもしれませんのでご了承ください。
◇もくじ◇
結論：違いは見える部分か、見えない部分か
〇フロントエンド
私たちが普段使用しているWebサイトの見て触れる部分
Webページやアプリケーションのインターフェース部分
HTML CSS JavaScript等を使用し、骨組みやデザイン、ユーザーからの入力を処理
〇バックエンド
私からは見えない、Webサイトの裏側部分
データベースの設計・構築・APIの部分
別名はサーバーサイド
＊ざっくり分類
具体的な基礎知識
〇フロントエンド / フロントエンドエンジニアの役割
-
ボタンのデザインや動作、画面レイアウトを含めた
私たちが直接操作をする部分を差す。
例えば、ネット通販サイトの商品検索ボタン、商品検索の入力エリア、
Webサイト全体のデザインがフロントエンドの領域となる。
- ユーザーが使いやすいUI（ユーザーインターフェース）を設計し、ボタン・文字フォント・レイアウト等の外観作る。HTML・CSS・JavaScript等の言語を用いてコーディング（コードを書くこと）をしてWebサイトに動きを付けることで、より分かりやすく見やすいように仕上げる。
〇バックエンド / バックエンドエンジニアの役割
- データ処理とデータベース管理
私たちが直接操作しない部分で動作するシステム部分を差す。
例えば、ネット通販サイトでユーザーが商品のボタンをクリックしたときに発生するリクエストに基づいてデータ処理を行い、それをデータベースに保存する。
要するに、私たちがカートに入れている商品情報や私たちの個人情報を管理する仕組みを作るということ。 - サーバーとクライアント間の通信
ユーザーがサイト上のボタンを押したときに発生するリクエストに対して適切な応答を返す仕組みを作る。
つまり、裏側で動いているシステムがユーザーのアクションに合わせて通信を行うということ。 - セキュリティと認証
ユーザーの個人情報を認証（ログイン）やセッションの管理（ユーザーがサイト内で行う一連の流れをセーブすること）を行う。
＊セッション管理の具体例：カートに商品を入れ、名前・住所を入力し、買い物を完了させてWebサイトを閉じるまでの間にユーザーが行った行動を記録し保持させるということ。要するにゲームデータのセーブみたいなもの。 - APIの作成
同じサイト・サービス内でフロントエンド領域や外部サービスとの連携を可能にするための仕組みを設計・実装する。
＊APIの具体例：ふたつのアプリケーションやソフトウェア同士が情報をやり取りする際に使用される、プログラミング上の窓口。例えばSNSに外部サイトの記事URLを投稿したり、Webサイト上に埋め込まれたGoogleMapみたいなもの。
疑問と今後の深堀り
UI（ユーザーインターフェース）について
各領域の開発言語と用途目的について
ライブラリやフレームワークについて
サーバーやデータベースについて
