フロントエンドとバックエンドの仕組み—主なものについて

サイトを開くと、ページが読み込まれ、ボタンが機能し、画像が適切に表示されるなど、すべてが簡単に見えます。しかし、その背後には、相互作用の真の魔法があります フロントエンド と バックエンド1つは画面に表示されるものを担当し、もう1つは 舞台裏で起こっていること現代のウェブがどのように機能するかを理解するために、これらの役割を簡単な言葉で理解しましょう。

クライアントはユーザーが見るものです。

オンラインストアのサイトにアクセスしたと想像してみてください。ボタン、写真、入力フィールド、カートなど、すべてが フロントエンド （フロントエンド）。それは、 見た目と感触 ウェブサイト

フロントエンドとは サイトの顔、そのデザイン、ブラウザ側のロジック、ユーザーとのインタラクション。

• HTML — ページの骨組み（構造）

• CSS — 外観（色、インデント、フォント）

• JavaScript — ロジックとインタラクティブ性（アニメーション、ボタン、ポップアップ）

これらすべては ブラウザで — お使いのデバイスで。

サーバーとバックエンドはアプリケーションの「頭脳」です

さて、「カートに追加」をクリックしたとします。誰かがあなたの選択を保存し、価格を計算し、注文を準備する必要がありますか？これが彼がしていることです バックエンド (backend).

バックエンドは動作するものです サーバー上「舞台裏」。クライアントからのリクエストを受け取り、処理して結果を返します。

例：

1. クライアント（ブラウザ）がリクエストを送信します：「商品番号123をユーザー番号45のカートに追加」

2. バックエンドがリクエストを受け付ける

3. データベースに変更を書き込む

4. 「準備完了！商品が追加されました」という回答を送信します

バックエンドの主要なテクノロジー：

• 言語： Python、JavaScript（Node.js）、Go、PHP、Java、C#

• データベース： PostgreSQL、MySQL、MongoDB

• フレームワーク： Django、Express、Laravel、NestJS、Spring Boot

コミュニケーションの取り方

フロントエンドとバックエンドの間では、常にデータ交換が行われています。 HTTP リクエスト。これは会話として考えることができます。

クライアント：「こんにちは、サーバー！商品リストをください！」
サーバー：「データを含むJSONを保持してください！」

JSON形式は、データを含むテキストです。

{
  "products": [
    { "name": "Laptop", "price": 99000 },
    { "name": "Mouse", "price": 2500 }
  ]
}
    

サーバーの場所

サーバーは魔法ではなく、通常のコンピューターです（多くの場合、強力でデータセンターのどこかにあります）。常にオンになっており、リクエストを待っています。サイトにアクセスすると、ブラウザはインターネットを介してこのサーバーに接続します。

1. ブラウザに入力します：codik.app

2. DNSは名前をIPアドレスに変換します

3. ブラウザがサーバーにリクエストを送信します

4. サーバーがページに応答 → ブラウザーが結果を表示

インタラクションの例

違いを理解することが重要な理由

ウェブ開発者になりたい場合は、フロントエンドとバックエンドの境界線を知ることが重要です。誰が何に責任を負うのか、チーム内でタスクがどのように分割されるのか、そして何かがうまくいかない場合にどこでエラーを探すべきかを理解することができます。

フロントエンドはインターフェースを生き生きとさせます。
バックエンドはデータを実現します。
そして、それらが一緒になってインターネットの魔法を生み出します✨

説明が気に入ったら、 コディック ❤️

アプリで コディック あなたは段階的に学ぶことができます。

• フロントエンド（HTML、CSS、JavaScript）。

• バックエンド（Python、Node.js）;

• クライアントとサーバーを使用して最初のミニプロジェクトを作成することもできます。

また、当社には テレグラムチャンネル、当社の所在地：

• 記事のテーマを簡単な言葉で分析します。

• ITニュースを話し合う。

• 開発者の生活について冗談を言います。

  参加する - テレグラムチャンネル