Webシステムの基礎と、Laravel&Reactを使った開発

株式会社WOWNエンジニアチームです。Webシステムの制作をしています。

今回はWebシステム開発の基礎の話、「そもそもWebシステムって何？」と、Webシステムの開発標準としているフレームワーク「Laravel」と「React」の話です。

Webシステムには分野が2つある

ブログ、SNS、ショッピングサイト、ブラウザゲーム…など、我々が日常使うWebサイトの多くは「フロントエンド」と「バックエンド」という2つの分野で出来ています。

大まかに言えば、ユーザーから見えている部分がフロントエンド、ユーザーからは見えない部分がバックエンドと呼ばれ、我々はReactというフレームワーク(開発機能)でフロントエンドの開発を、Laravelでバックエンドの開発を行ない、Webシステムを制作しています。

※実はLaravelにはフロントエンドの開発を行うエンジンが組み込まれており、Reactを使わずともLaravelだけでフロントエンドもバックエンドも開発が可能なのですが、より本格的なUI作成のために我々はReactを組み込んでフロントエンドの開発を行なっています。

Laravelで作っているもの

LaravelはPHPという言語で書かれており、ユーザーからは見えないサーバーとの情報のやり取りを作成しています。
さまざまな情報を「データベース」というものに記録、検索、消去をする作業をLaravelで作ります。

例えばブログなら、記事を投稿するとデータベースに記事情報を記録し、記事を読む際はデータベースから該当の記事を探し、削除する時はデータベースから記録を消去しています。

また、Laravel側では「API」という情報をやり取りする窓口を作成することができ、ここからフロントエンドとの連携を行ってデータベースの情報を出し入れしています。
問い合わせると必ず決まったデータを返す窓口もあれば、リクエスト(申込用紙)の内容に応じて様々なデータを探してくれる窓口もあります。

APIがどういうものか、簡単なものでひとつ例を挙げると

Route::get('/user/show/', [UserController::class, 'show'])->name('user.show');

このような形式になっています。

書いてある内容をざっくり説明すると、

「”/user/show/”という場所(URL)に問い合わせをすると、UserControllerファイルの中にあるshowという関数(プログラム)に基づいてデータを検索するよ」

といった内容になります。

Reactで作っているもの

ReactはJavaScriptという言語で書かれており、UI (ユーザーインターフェイス)、つまり皆さんがパソコンで見ている画面を作ります。

例えばユーザーがブログ記事を読む時、まず文字が表示される前に、ReactはLaravelのAPIに対して
「IDが9b2cb315-c010-4989-89da-4dbdb60bd452である記事を取ってきてくれ」などのリクエスト(要求)を送ります。
そうするとLaravelがデータベースから検索を行い、該当する記事のデータをレスポンス(返信)として送り返してくれるわけです。

Reactはこのレスポンスの内容に応じて「動的に」画面を作ることが可能で、「データのタイトル部分を画面のここに表示」「データの作成日の記録を記事の投稿日としてここに表示」など、画面のどこに何を配置するのかをあらかじめ決めておけば、Laravelに問い合わせるリクエストの内容を変えるだけで、同じ単一のReactのスクリプトファイルで違う記事を表示することが可能です。

これらの「フロントエンドとバックエンドの関係」「APIを通してデータをやり取りする」「データに応じた内容を配置する場所を決めておく」といった関係がWebシステムの基本になります。

次回に続きます。