【初心者向け】フロントエンドとバックエンドのつなぎ方 | 完全ガイド

2024-03-12

当サイトでは一部リンクに広告が含まれています

フロントエンドとバックエンドが単独で動作することもあれば、組み合わさって一つの強力なWebアプリケーションを形成することもあります。

しかし、両者がうまく連携するためには、いくつかの基本的な仕組みを理解する必要があります。

このガイドでは、これらの要点を初心者が理解しやすいように丁寧に解説します！

HTTP通信の仕組み

HTTP（HyperText Transfer Protocol）は、文字通り「超文書転送プロトコル」です。

ここでいう「プロトコル」は、インターネット上でデータをやり取りする際の「約束事」や「規則」を指します。

このHTTPを通じて、フロントエンド（ユーザーが直接触れる部分）とバックエンド（裏側で動いているサーバー）が会話します。

具体的なイメージとしては、ウェブブラウザでボタンをクリックしたり、フォームに入力したりすると、その行動がフロントエンドからバックエンドへの「手紙」（HTTPリクエスト）として送られます。

バックエンドはその「手紙」を読んで何をすべきか決定し、結果を新しい「手紙」（HTTPレスポンス）としてフロントエンドに送り返します。

リクエストとレスポンスの概念

HTTP通信において、非常に基本的な単位が「リクエスト」と「レスポンス」です。

リクエストは、簡単に言うとフロントエンドからバックエンドへの「お願い」です。

これが行われる場面としては、例えばウェブサイトで「ログイン」ボタンをクリックしたときなどが考えられます。

クリックすると、そのアクションに基づいて作成されたリクエストがバックエンドに送られます。

バックエンドはこのリクエストを受け取り、適切に処理します。

処理が完了したら、その結果をフロントエンドに「レスポンス」として返します。

このレスポンスには、ログインが成功したかどうかのメッセージや、何らかのデータが格納されている場合もあります。

フロントエンドとバックエンドの接続方法

フロントエンドとバックエンドが実際にどのように会話するのか。

その橋渡しをしているのが通常「API（Application Programming Interface）」です。

APIとは、文字通り「アプリケーションプログラミングインターフェース」で、バックエンドが提供する一連の機能や手続きの「目次」や「操作マニュアル」のようなものです。

バックエンドは一般的に特定のインターネットアドレス（URL）にてリクエストを受け付けます。

この特定のURLを「APIエンドポイント」とも呼びます。

例えば、バックエンドが「https://example.com/api/users」というエンドポイントでユーザー情報の取得を許可している場合、フロントエンドはこのURLに対して特定の種類のHTTPリクエスト（多くの場合GETリクエスト）を送り、バックエンドからユーザー情報を受け取ります。

このように理解しておくと、HTTP通信の基本的な仕組みや、リクエストとレスポンスの概念、そしてフロントエンドとバックエンドの具体的な接続方法が明確になります。

フロントエンドとバックエンドのつなぎ方の実践(Node.js編)

では、実際にフロントエンドとバックエンドをつなげる方法を見ていきましょう。
ここでは、バックエンド用のフレームワークとして人気な Node.js を API として使う場合を例に説明します。

※バージョンの違いにより手順通りに進まないことがあったとしても、流れだけ掴んでいただければ大丈夫です！

簡単なWebアプリケーションの作成

まず、VSCodeを開き、新しいターミナルでデスクトップに移動します。

cd ~/Desktop

新しいディレクトリを作成して、その中に移動します。

mkdir my_node_app
cd my_node_app

Node.jsプロジェクトを初期化し、Expressをインストールします。

<div class="hcb_wrap">
<pre class="prism undefined-numbers lang-bash" data-lang="bash"><span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN';"><code class="language-bash">npm init -y
npm install express</code></span></pre>
</div>

新しいファイルapp.jsを作成し、簡単なAPIエンドポイントを設定します。

const express = require('express');
const app = express();
const port = 3000;

app.get('/api/messages', (req, res) => {
  res.json({ messages: ['Hello', 'World'] });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

フロントエンドでAPIデータを描画

新しいHTMLファイルindex.htmlを作成し、以下の内容を記述します。

<!DOCTYPE html>
<html>
<head>
  <title>Simple App</title>
</head>
<body>
  <button onclick="fetchMessages()">Fetch Messages</button>
  <div id="messages"></div>

  <script>
    async function fetchMessages() {
      const response = await fetch('http://localhost:3000/api/messages');
      const data = await response.json();
      const messagesDiv = document.getElementById('messages');
      messagesDiv.innerHTML = data.messages.join(', ');
    }
  </script>
</body>
</html>

動作確認手順

ここまでで、簡単なWebアプリケーションが完成しました。動作確認をしてみましょう。

ターミナルでapp.jsがあるディレクトリに移動し、node app.jsを実行します。
ブラウザで作成したindex.htmlを開きます。
Fetch Messagesボタンをクリックします。

成功した場合、Hello, Worldと表示されるはずです。

このフローでは、バックエンドAPIが/api/messagesでメッセージを返し、フロントエンドがそのメッセージを取得して描画します。こうすることで、バックエンドとフロントエンドがどのように連携するのかが明確になります。

フロントエンドとバックエンドのつなぎ方の実践(Ruby on Rails 編)

バックエンド用のフレームワークとして人気な Ruby on Rails を API として使う場合も多いです。

ここでは Ruby on Rails を使ったフロントエンド・バックエンドのつなぎ方をみてみましょう。

簡単なWebアプリケーションの作成

VSCodeを開き、新しいターミナルを作成します。

ターミナルでデスクトップへ移動するために、以下のコマンドを実行します。

cd ~/Desktop

デスクトップに新しいRails APIプロジェクトを作成するには、次のコマンドを実行します。

rails new my_api --api

作成されたmy_apiフォルダをVSCodeで開きます。

次にconfig/routes.rbファイルを開き、以下のコードを追加します。

resources :messages, only: [:index]

app/controllersフォルダ内にMessagesControllerという新しいコントローラーファイルを作成し、以下のコードを追加します。

class MessagesController < ApplicationController
  def index
    render json: { messages: ["Hello", "World"] }
  end
end

シンプルなJavaScriptでのフロントエンド作成

デスクトップで新しいフォルダを作成し、その中にindex.htmlという名前のHTMLファイルを作成します。

VSCodeでこのindex.htmlファイルを開き、以下のコードを追加します。

<!DOCTYPE html>
<html>
<head>
  <title>Simple App</title>
</head>
<body>
  <button onclick="fetchMessages()">Fetch Messages</button>
  <div id="messages"></div>

  <script>
    async function fetchMessages() {
      const response = await fetch('http://localhost:3000/messages');
      const data = await response.json();

      const messageDiv = document.getElementById('messages');
      messageDiv.innerHTML = data.messages.join(', ');
    }
  </script>
</body>
</html>

動作確認手順

ここまでで、簡単なWebアプリケーションが完成しました。

動作確認をしてみましょう。

ターミナルでmy_apiフォルダがあるディレクトリに cd ~/Desktop/my_api で移動します。
rails sを実行します。
ブラウザで作成したindex.htmlを開きます。
Fetch Messagesボタンをクリックします。

成功した場合、Hello, Worldと表示されるはずです。

つまり、バックエンドAPIが/messagesでメッセージを返し、フロントエンドがそのメッセージを取得して描画します。

こうすることで、バックエンドとフロントエンドがどのように連携するのかがイメージしやすくなります。

以上で、デスクトップにRails APIとシンプルなJavaScriptで簡単なWebアプリケーションを作成する手順が完成しました。

この構成では、Railsは純粋なAPIサーバーとして機能し、JavaScriptはそのAPIと通信しています。

これは、多くの現代のWebアプリケーションで採用されているアーキテクチャの一例です。

まとめ

今回は、Node.jsやRuby on Railsというバックエンドフレームワークを使用して、フロントエンドとバックエンドの基本的な連携方法を学びました。

この連携の仕組みを理解することで、たとえばReactやRailsなど、異なるフレームワークや言語が登場した場合でも、その背後にある基本的な連携の仕組みを把握することができます。

この知識は、Web開発の多様な状況で役立つ汎用性の高い知識です。

それぞれのフレームワークやライブラリが提供する独自の機能やメリットもありますが、基本的な連携の仕組みがわかっていれば、新しい技術もより迅速に習得できるでしょう。

実際にフロントエンド・バックエンドのつなぎ方をハンズオンで学びたい方へ

以下の記事では、Next.js（React）と Ruby on Rails のつなぎ方を学びつつ、Todo アプリを作る方法を学ぶことができます。

実際に作ってみるとイメージが付くと思いますので、是非読んでみてください！

Muscle Coding

Next.js(React)×Ruby on Rails チュートリアル(TypeScript対応) | Muscle Coding Next.jsとRailsを用いてTodoアプリを一から開発するチュートリアルです。環境構築からフロントエンド、バックエンドの開発まで丁寧に説明します。初心者でもフルスタックア…