フロントエンドとバックエンドってなに？〜セツメイ鳥のセツメと学ぶ物語〜
登場キャラクター
- タロウ：プログラミング初心者の学生
- セツメ：IT用語についての仕組みを解説してくれる鳥
第1章：フロントエンドって何？
タロウ：「セツメ、Web開発ではフロントエンドとかバックエンドってよく聞くけど、違いがよくわからないんだ」
セツメ：「なるほど、タロウ。まずはフロントエンドから説明しよう。
フロントエンドはユーザーが直接見る部分のことだよ。つまりWebページの見た目や操作のことだね。」
タロウ：「なるほど、画面に見える部分か。具体的には？」
セツメ：「HTMLでページの骨組みを作り、CSSでデザインを整え、JavaScriptで動きをつけるのがフロントエンドの仕事だよ。」
第2章：バックエンドって何？
タロウ：「じゃあ、バックエンドは？」
セツメ：「バックエンドはユーザーから見えない裏側の処理のことだよ。
例えばログインの確認や、データベースから情報を取り出してWebページに表示する部分だね。」
タロウ：「なるほど、ユーザーは見えないけど、ちゃんと機能している部分だね」
セツメ：「その通り！PHPやPython、Rubyなどのサーバーサイド言語やデータベースがバックエンドで使われるんだ。」
第3章：フロントエンドとバックエンドの連携
タロウ：「フロントエンドとバックエンドはどうやってつながるの？」
セツメ：「簡単に言うと、フロントエンドは見た目と操作を担当し、バックエンドはデータ処理を担当するんだ。
ユーザーがボタンを押す → バックエンドで処理 → 結果をフロントエンドに返す、という流れだよ。」
タロウ：「例えば、ログインボタンを押したらユーザー名とパスワードをチェックしてくれるのがバックエンドで、結果を画面に表示するのがフロントエンドってことか」
セツメ：「その通り！」
第4章：簡単な例
-
フロントエンド
- HTML：ログインフォームを作る
- CSS：フォームの見た目を整える
- JavaScript：入力チェックをする
-
バックエンド
- PHP/Python：入力されたユーザー情報をデータベースと照合
- データベース：ユーザー情報を保存・検索
おさらい
| 用語 | 役割 | 使用例 |
|---|---|---|
| フロントエンド | ユーザーが見る画面・操作部分 | HTML/CSS/JavaScript 等々 |
| バックエンド | 裏側で処理・データ管理を行う部分 | PHP/Python/Ruby 等々 |
| 連携の流れ | ユーザー操作 → バックエンド処理 → 結果を表示 | ログイン機能、掲示板、Webアプリ全般 |
筆者の主観ですが、まずプログラミングを学習しようと思ったらフロントエンドから学習することをオススメします。
（実際に作ったものに動きがあったほうが分かりやすいので。）
最後に、今後もエンジニアの方にとって有益となるような記事を投稿していきます。
いいなと思ったらぜひいいね、フォローお願いします！
また、他にも解説してほしい用語や技術があればご気軽にコメントを残してください！
それでは。