Webシステムってなんなのさ？【Laravel】

技術ログ
目次

なんでこの記事を書いているのか

私はLaravelを用いてプログラミングを教えています。Laravelの基礎的な勉強を終えて「ポートフォリオを作ろう」と思っても「Webシステム」ひいては「システム」というものがイメージできず、作るものが決まらない方が多いように見受けられました。

また、プログラミングの勉強しているときは参考資料通りに作っていたから大丈夫だったものの、DBやシステムの位置関係やそれぞれの役割について理解できていない方も見受けられます。そのため自分で考えての実装となると、「何を書けばいいか分からない」となってしまうようですね。

現在勉強中の方も、これから勉強する方も、はたまた勉強を終えた方も、今一度Webシステムの登場人物について復習しておきましょう。
この記事ではLaravelでの考え方を中心に考えていきます。

システムとは

私は「データを管理する」ことを目的に作られたアプリケーションだと考えます。
データをどう見せるか、どう登録させるのかによって様々な機能を提供しているのであって、やっていることは「データの管理」と括れてしまうと思います。※もちろん多少の例外はあると思いますが、、、
このデータの管理は「CRUD」と呼ばれる4つの動作を指します。

  • Create・・・データの作成
  • Read・・・データの読取
  • Update・・・データの更新
  • Delete・・・データの削除

勉強の題材にもよく使用されるTODOアプリを例に考えてみましょう。
まずタスクの登録(Create)を行いますね。タスクの登録ができたら「今日のタスク」などの機能によって、タスクを表示(Read)します。タスクが終わったらステータスを更新(Update)し、タスクが不要になればタスクの削除(Delete)を行います。
タスクの表示を「一覧形式ですべて表示」したり、「完了したタスクを表示」したり、「今日が期限のタスク」と表示したりと、Readだけでも様々な機能が作成できますね。

このように、データを管理することによって、様々な機能を提供していきます。

データベースとシステム

データベースとシステムの基本

システムを考える上で「システム」と「データベース」と切り分けて考える必要が出てきます。

システムはデータを管理するための「機能」を提供します。
データを登録する機能であったり、データを読み取って表示する機能だったりと、様々な機能をプログラミングによって実装していきます。プログラミングを行う言語は様々ですが、それぞれの言語に特徴があるので、作るものに合わせて言語の選定をしていきます。
ここで注意してほしいのは「機能」を提供するものであり、システム自体がデータを持っているわけでは無いということです。

そのデータを持っているのがデータベース(DB)になります。基本はRDB（リレーショナルデータベース）が採用されています。
最近では別の仕組みのDBも耳にするようになりましたが、私には知見が無いので取り扱いません。
このDBはデータを管理するためのシステムです。DB自体もシステムなわけですね。
DBクライアントアプリを利用してデータの確認・管理が可能ですが、この管理の部分を自分の開発したシステムで行っていくわけですね。
このDBでのデータ操作(CRUD)はSQLと呼ばれるものを利用して行います。
つまり、DBクライアントアプリや自分の開発したシステムからDBに接続して、SQLを発行することによってCRUD操作を実行するわけですね。

サーバーについて

さて、データベースはもちろんWebシステムを理解する上で必須となるものに「サーバー」というものがあります。
このサーバーは「サービス（機能）を提供しているPC」だと理解してもらえればOKだと思います。

例えば、RDBというものを利用するためにMySQLやPostgreSQLなどのRDBソフトをインストールして動作させる必要があります。このソフトがインストールされてソフトが稼働している状態は「サービスを提供している」と言えます。なのでサービスを利用している以上、サービスが稼働しているサーバーが必ず存在します。
提供しているサービスがDBであれば「DBサーバー」、Web機能であれば「Webサーバー」と呼び方が変わります。
そして、このサーバーはそれぞれ用意してもよいし、同一のサーバーで複数のサービスを起動させても問題ありません。
最近はPCの性能も上がっているので複数のサービスを立ち上げること自体に問題もありませんし、サーバーの準備にもお金と手間がかかります。開発中は自身のPCがサーバーとして多くの機能を提供することがほとんどでしょう。

最近ではAWSのCloud9のように、エディタとサーバー機能を提供してくれるクラウド環境もあるので学習がしやすくなりました。

ApacheはWebサーバー機能、MySQLはDB機能を提供するためのソフトウェアです

Laravelで作成したシステムの動き

通信の基本

続いて、Laravelが採用しているMVCモデルとWebシステムの基本的な動きを確認していきましょう。

まず、Webシステムにおいては「サーバー」と「クライアント（利用者）」の存在が重要になります。
Webシステムはインストール型のアプリケーションとは異なり、クライアントがブラウザを通してWebサーバーにアクセスすることで様々な機能を利用します。

このサーバーとクライアントのやり取りのうち、クライアントからサーバーに送信されるものが「リクエスト(要求)」で、サーバーからクライアントに送信されるものが「レスポンス(応答)」となります。

リクエストの種類

リクエストには「GET」と「POST」の2種類が存在します。htmlのformタグでは「method」属性を用いて通信の種類を設定しますね。
リンクによる画面遷移など、一般的な画面遷移はGET通信で行われます。データの登録やログイン処理などはPOST通信で行うことが基本となっています。

これには通信の仕組みが関係しています。
GET通信では送信するパラメータがURLに含まれます。例えばGoogleで「android」と検索してみてください。
すると、検索結果画面のURLが「https://www.google.com/search?q=android&<以下省略>」となることが確認できるかと思います。
この「https://www.google.com/search」は機能を呼び出すためのパスになっていて、「?」以降が機能に渡す値である「パラメータ」となっています。つまり、このURLは「https://www.google.com/search」という機能に対して「q=android」(qという名前で「android」)を送信していると言えます。

URLの「q=android」の部分を「q=iphone」にしてアクセスしてみましょう。検索結果が切り替わり、検索キーワード入力欄も「iPhone」になることが確認できますね。このように直接URLを操作することでもパラメータ送信ができます。
画面の検索ボタンがあるおかげで、我々はURLを直接変更しなくても検索が行えているということです。

一方、POST通信では送信する値がURLに含まれません。
例えばログイン時に入力するIDやパスワード。これをGET通信でやり取りしてしまうとURLにIDとパスワードが含まれてしまいます。
ログイン情報がそのように分かりやすい形で見えてしまうのは、セキュリティ上良くないというのは想像に難くないと思います。
また、データ登録においては多くの情報を入力することや、画像などのファイルをアップロードする場合もあります。そういった通信ではURLで表現しきれません。URLには文字数上限もありますし、そもそも文字列で画像などのファイルを表現することは難しいですからね。
そういった場面ではPOST通信が利用されます。

色々と話をしてきましたが、この辺りは実際にシステム開発を行わないとイメージがしにくいかもしれません。
まずは「URLによって機能（処理）が決まる」「パラメータ（送信する値）を含めることができる」ということを覚えておきましょう。

Laravelの機能が呼び出されるまでの仕組み

さて、それではLaravelにおいての動きを詳しく見ていきたいと思います。
先ほどお話したように「URL」によって呼び出す処理を決定します。WebサイトやWebシステムではURLによって特定のファイルを呼び出すことによってレスポンスを作成していきます。どのファイルが呼び出されるかなどはURLやサーバーの設定など、様々なものが関係してくるので、詳細は省きます。

Laravelにおいては「routes/web.php」によってルーティングの定義を行ってURLに対する処理を設定していきます。
基本的な記述は以下の通りとなります。

Route::get('/user', [UserController::class, 'index']);

上記の場合、「GET」通信により「システムURL/user」にアクセスされた場合は「UserController」の「index」メソッドを呼び出す。といった感じで定義されています。
このように、URLに対して機能を割り当てることでクライアントがURLで機能を呼び出せるようになるわけですね。
Laravelではルートパラメータといって、URL内にパラメータを埋め込むこともできますが、今回は割愛します。

Controllerの処理が呼び出されれば、後はController次第でなんでもできます。リクエストに含まれるパラメータから値を取得してデータを登録したり、パラメータを検索条件としてデータを検索したり、はたまたファイルのダウンロードを実行したり。。。。
この機能を開発するのが我々プログラマーの仕事というわけですね。

MVCの関係

続いて、MVCと呼ばれる「Model(モデル)」「View(ビュー)」「Controller(コントローラ)」の役割について確認していきます。
まず簡単にそれぞれの役割をまとめると、下記のようになります。

  • Model：データベースとのやり取りを担当
    • DBにSQLを発行する機能を持っている
  • View：クライアントに表示する画面を担当
  • Controller：メインロジックを担当

となります。基本的にはControllerが処理の中心となり、Modelを経由してDBにアクセスしたり、Viewに値を埋め込みHTMLを生成してクライアントに表示する画面を構築したりします。LaravelではViewの部分を「blade(拡張子：blade.php)」と呼ばれるものが担当します。

つまり、ユーザーからのリクエスト（URL）はルーティング定義（route/web.php）によって呼び出す処理名に変換され、処理が呼び出されます。呼びだされた処理の結果がレスポンスとなってクライアントに結果として表示されるわけですね。
具体的に画面表示までの流れを考えると

  1. URLに対する処理を呼び出す（ルーティング）
  2. 呼び出された処理（基本はコントローラのメソッド）が処理を開始する
  3. 必要に応じて、Modelクラスを用いてDBのテーブルにアクセスしデータの取得などを行う
  4. 取得したデータの整形など、メインの処理をコントローラが行う
  5. コントローラが作成した値をBlade（View）に渡し、HTMLを生成する
  6. 生成されたHTMLがレスポンスとしてクライアントに返り、画面が表示される

といったような感じになります。

まとめ

今回はWebシステムについて簡単に説明してみました。
細かな部分を簡単に説明するために、厳密にいえば異なる部分もあるかもしれませんがざっくりイメージをつかむための参考にしてもらえればと思います。

今回の記事から、

  • メインの処理はControllerに記述
  • DBとのやり取りはModelクラスに記述
  • 画面に表示するものはBladeに記述（データの整形などはControllerで行って、値を受け取って表示する）

ということがイメージできると開発も進めやすくなると思います。

Laravelに限った話ではありませんが、見た目の装飾はCSS、ユーザーの操作（クリックやスクロール）に対して画面を動かすときはjavascriptというのもWeb開発での共通認識になります。

言語の勉強だけでなく、こういった大枠の理解もしておくと開発が進めやすくなるかもしれませんね。