WEBアプリケーションとは

インターネットで操作できるアプリのことを指します
具体例ではyoutube,amazon,楽天,Gmailなどが
挙げられます

アプリとはPCやスマホにインストールして使う
特定の目的のために設計されたソフトウェアを指します
具体例ではエクセル、ワード、ペイントなどが
挙げられます

WEBアプリとはインストールしなくとも
ブラウザから操作できるアプリの総称を指します

WEBサイトは閲覧のみを目的としたサイトを指すため
ブログのようなログイン、入力、編集機能を持ったサイトも
WEBアプリに分類されます

CRUD（クラッド）とは

登録・変更・削除・参照機能の
頭文字をつなげた名前になります

・登録機能（Create）
・閲覧機能（Read）
・編集機能（Update）
・削除機能（Delete）

CRUDはデータベースを使うWEBアプリにおいて
最低限必要な基礎機能を指します

CRUDアプリとは

名簿管理システム、売上管理システムなど
ブラウザでデータを新規登録、閲覧、編集、削除
などができる情報管理システムを指します

CRUDには情報を蓄積させるための
データベース（以下、DBと略称）が必要です

正しくDBと接続するためにはLaravelなどの
フレームワークを使用することが推奨されます

参照リンク

これからCRUDアプリを作成するには
開発環境の構築、DBの接続、プロジェクトの作成
DBのテーブル作成など様々な準備が必要です

次のリンク先に詳細の記述がございますので
次からの手順で不明点などがあれば
補足としてご参照いただければ幸いです。

【別ページ】Laravelの新規プロジェクトを作成する

【別ページ】DBと接続する

【別ページ】DBのテーブルを作成する（マイグレーション）

プロジェクトを作成する

開発環境にプロジェクトを作成します
著者はMAMP環境にて作業を行なっておりますので
構築した環境が異なる場合は適宜対応してください

プロジェクトファイルを作成する

// カレントディレクトリを開発環境に設定します
$ cd /Applications/MAMP/htdocs

// composerコマンドでLaravelのプロジェクトを作成します
$ composer create-project laravel/laravel gakusyuu_sample --prefer-dist

ブラウザに表示させる（サーバーを起動する）

作成したプロジェクトには
テスト用のページが配備されているため
表示確認をします

すでにターミナル、コマンドプロンプトを開いている場合は
もう一つ別窓で開いて以下のコマンドを実行してください

$ php artisan serve

次のような実行結果になれば
サーバーが起動しています

127.0.0.1は自分のPCを表す特別なIPアドレスです
localhostという名目でも参照できるため
次のURLが開けるか確認してください

インストールしたLaravelのバージョンによって
出力されるテストページが異なる場合があります

DBを作成する

phpMyAdminが使用できる場合は
ブラウザからデータベースを作成してください

ブラウザから作成できない場合は
SQL言語を用いてデータベースを作成してください

DBと接続する

Laravelのプロジェクトが作成できたならば
プロジェクトとDBを接続するため
.envファイルとdatabase.phpに
接続情報を設定しましょう

.envファイル

参照元：[Laravelインストール先]直下

隠しファイルなので隠しファイルを表示させる
必要があります

database.php

参照元：[Laravelインストール先]/config/database.php

隠しファイルの表示方法

（Macの場合）
「command」＋「shift」＋「.」

（Windowsの場合）
エクスプローラーを開く。
[表示] >
[オプション] >
[フォルダーと検索のオプションの変更] の順に選択
[表示] タブを選択
[詳細設定]
[隠しファイル、隠しフォルダー、および隠しドライブを表示する] を選択し
[OK] を選択

.envを設定する場合の見本

DBと接続するための情報

DBと接続する情報は
次の情報をLaravelの環境変数に
上書きする必要があります

環境変数は上述の.envファイルで
変更が可能です

接続先のホスト（サーバーの情報を確認）
接続先のポート番号（サーバーの情報を確認）
データベース名（作成したDBの名前）
ユーザー名 / パスワード（初期はroot/root)
ソケット（必須ではありません）

MAMP（ローカルサーバー）の場合
MAMPのWEBサイトから情報を確認できますが
レンタルサーバーなどの場合は
提供者に確認が必要です

使用しているデータベース管理システムが
MySQLではない場合は
DB_CONNECTIONの値も異なりますので
適宜変更をしてください

database.phpを設定する場合の見本

MySQLを使用する場合は
mysqlの関数から該当する引数を変更します

database.php

'mysql' => [

            ~~~~~~省略~~~~
            'host' => 'DB_DATABASE','ホスト名',
            'port' =>  'DB_HOST','ポート番号',
            'database' => env('DB_DATABASE', 'データベース名'),
            'username' => env('DB_USERNAME', 'ユーザー名'),
            'password' => env('DB_PASSWORD', 'パスワード'),
            'unix_socket' => env('DB_SOCKET', '/Applications/MAMP/tmp/mysql/mysql.sock'),
            ~~~~~~省略~~~~

DBと接続されているか確認する

DBと接続がされていなければ
次のテーブル作成ができないため
接続されているか確認します

実行するコマンド手順.


① カレントディレクトリをLaravelのプロジェクトに設定します

$ cd /Applications/MAMP/htdocs/gakusyuu_sample 

② tinkerコマンドを実行してLaravelの対話型シェルを起動します

$ php artisan tinker

次のコマンドを実行します
> DB::connection()->getPdo();


-----以下解説------

・DBファザードとはDBに関する関数、プログラム群を指します
・connectionメソッドでデータベースに接続を行います
・getPdoで接続されたDBのサーバー情報を取得します

接続が成功した場合

接続先のサーバー情報が取得できていれば
接続成功です

確認完了後はtinkerコマンドを
exitコマンドで終了してください

正しく接続されていない場合

DB::connection()->getPdo();
失敗した場合は接続が拒否されます

tinkerコマンドはexitで終了することが
できるため、一度終了した後に接続に必要な
設定値を見直してもう一度実行してください

DBにテーブルを作成する

LaravelではSQL言語を使わずに
DBを操作できます

テーブルを作成する場合は
マイグレーションファイルを作成し
マイグレーションを実行します

マイグレーションファイルとは

マイグレーションファイルとは
テーブルの構造を記した設計図です

ファイルに作成したいテーブル名や
カラム（列）のデータ型、などを記述し
マイグレーションを実行することで
連携するDBにテーブルを一括で作成します

マイグレーションファイルを作る

マイグレーションファイルは
まずコマンドで雛形を作成します
ファイル名は命名規則に従い作成してください

マイグレーションファイルの命名規則

テーブル命名規則（例1）.

・テーブルを新規で追加する場合のファイル名の例

create_#####_table

-----解説-----
・「テーブルを作成する」意味なのでテーブル名の前後に"create"と”table”付与します
・単語をつなぐ際はアンダーラインを用いてスネークケースで繋ぎます

テーブル命名規則（例2）.

・実際に実行するコマンド

$ php artisan make:migration create_#####_table --create=tests

マイグレーションファイル作成

① カレントディレクトリをプロジェクトファイルにします

$ cd /Applications/MAMP/htdocs/①*******


② マイグレーションファイルを生成するコマンドを実行します
php artisan make:migration create_②#####_table --create=②#####


-----解説-----

・"①*******"は作成したプロジェクト名を記述します
・"create_②#####_table"は作成したい任意のテーブル名を記述します
・"②#####"は作成したい任意のテーブル名を記述します
・createオプションにテーブル名を追加することで雛形にテーブル名が反映されます

マイグレーションファイルを編集する

作成したマイグレーションファイルの雛形が
次の階層に生成されています

database/migrations

マイグレーションファイルを開き必要なカラムを
増やしてください。

テーブルに'ID'と'timestamps'は必須

IDとtimestampsはテーブルには必須なカラム（列）
なので、削除するとマイグレーション実行時に
エラーを起こすため削除しないよう注意してください

   Schema::create('テーブル名', function (Blueprint $table) {
            $table->bigIncrements('id');
            // 以下のようにカラム（列）を追加する
            $table->string('カラム名');
            $table->text('カラム名');

            $table->timestamps();
        });

 -----解説-----
// ファイル生成の際にオプションを設定するとテーブル名雛形に反映されています
// "id"は主キーのため必須項目であり削除するとエラーが発生します
// bigIncrementsメソッドは、自動増分を示します
// "timestamps"も必須項目であり削除するとエラーが発生します
// "text"や"string"などのデータ型は任意の型を設定します

テーブルに設定するデータ型

データ型	種類
integer	数値（整数）
decimal	数値（精度の高い小数）
float	数値（浮動小数）
string	文字（短い文字列）
text	文字（長い文字列）
date	日付
datetime	日時
time	時刻
timestamp	タイムスタンプ
binary	バイナリ
boolean	真偽

マイグレーションファイル見本

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('company_id');
            $table->string('product_name');
            $table->integer('price');
            $table->integer('stock');
            $table->text('comment');
            $table->string('img_path');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('products');
    }
};

マイグレーションを実行する

マイグレーションファイルを作成した段階で
マイグレーションを実行すると
連携するDBにテーブルを作成できます

マイグレーションを実行する

$ php artisan migrate

phpMyAdminが使用できる環境の場合は
実際にテーブルが反映されたか
ブラウザから確認してください

認証機能を実装する

Laravelでは認証機能の雛型を自動で生成することができ
雛形を作る機能のことをスキャッフォルドと言います

scaffold : スキャッフォルド

作成される認証機能の雛形は次のとおりです

ログイン機能
ログアウト機能
ログイン状態の維持とチェック
ユーザー登録機能
パスワードを忘れた場合のパスワードリセットURLのメール送信

Laravel 6 以降には専用ライブラリが必要

認証機能に関する雛形のファイルを自動で
作成する機能はartisanのuiコマンドで
authオプションを実行する必要があります

Auth(オース）
略称：authenticationの略
読み方：オーセンティケーション
意味：認証

ui
略称/User Interface
読み方：ユーザーインターフェース
意味：ユーザーが操作する画面のこと

Laravel 6 以降では
authを実装するライブラリが標準パッケージに
含まれていないため必要な時はlaravel/uiという
ライブラリをインストールする必要があります

laravel/ui ライブラリをインストールする

laravel/uiのインストールには
composerを使用します

$ composer require laravel/ui --dev

---説明---

・requireコマンド
パッケージを後から追加するコマンド
インストール済の他のライブラリが更新されることを防ぐことができます

・laravel/ui
読み：Laravel UI（ユーザーインターフェース）
認証機能の雛型を生成してくれるLaravel公式のライブラリです


・devオプション
開発環境向けにインストールするライブラリを自動選択します
付与しない場合は本番環境向けのライブラリをインストールします

・バージョンを指定
コマンドの途中にバージョンを記述すれば
インストールするライブラリのバージョンを
指定することができ、指定がなければ最新バージョンが
インストールされます
例：composer require laravel/ui "^1.0" --dev

Auth（認証）ファイルを生成する

laravel/uiがあればuiコマンドの
authオプションを使用することができます

authオプションを使用できるコマンドは
複数存在します

vue.js (JavaScriptのフレームワーク）
React(JavaScriptのライブラリ）
Bootstrap(Twitter社が開発したフレームワーク）

どのサービスを使用しても結果として
雛形の作成が可能です

今回はvue.jsからauthオプションで
コマンドを実行し雛形を作成します

① カレントディレクトリをLaravelのプロジェクトに設定します

$ cd /Applications/MAMP/htdocs/gakusyuu_sample 

② vue（ビュー）で認証画面に必要なファイルを揃えます

$ php artisan ui vue --auth

--解説---
// vueとはUIを作るためのJavaScriptのフレームワークです

Laravelの初期ページを閲覧すると
ログイン 新規登録　のリンクが右上に
追加されています

認証画面が開けない場合

右上のログイン用リンクを
開いてもエラーが発生する場合があります

npmの実行が必要

ブラウザに原因と解決方法が記してありますが
結論、用意したページを表示させるために必要な
ファイルが足りていないことを指しています

解決するためにはnpmという名の
パッケージ管理システムを実行して
依存関係にあるパッケージを参照
できるように準備してから
ページを更新するように説明されています

npmとは何か

Node Package Manager
npmとはNode.jsのパッケージを
管理するシステムです

蛇足ですが類似ツールとして
yarn（ヤーン）というFacebook社が開発した
非公式パッケージ管理ツールがあります。

npmとの互換性がありyarnの方が動きが早く
セキュリティの安全性が高いため、yarnの方が
優秀なソフトウェアであるとの評価もあります

Node.jsのパッケージを管理するシステムとして
インストールする場合、どちらを選択しても
問題ありません

Node.jsとは何か

サーバーサイドでJavaScriptを使うための
実行環境です

JavaScriptの用途はブラウザ上で使用できる言語
という認識でありHTMLにアニメーション風の動きを
付けることができるなど使われましたが
Node.jsをインストールすることでサーバー側でも
JavaScriptを使用できるようになりました

npmをインストールする

使用するPCにnpmがあるか確認します

$ npm -v

// npmがインストールされている場合はバージョン情報が表示されます

npmがインストールされていない場合は
次のコマンドでインストールを実行します

① カレントディレクトリをプロジェクトファイルにします

$ cd /Applications/MAMP/htdocs/①*******

② npmをインストールします 

$ npm install

npmでスタイルを適用させる

次のコマンドを実行することで管理ツールが
起動し、認証画面のサイトを開いた際に
適切なファイルがライブラリより参照されることで
サイトの閲覧が可能になります

※すでにコマンド画面を開いている場合は、別窓でコマンドの画面を用意する

① カレントディレクトリをプロジェクトファイルにします

$ cd /Applications/MAMP/htdocs/①*******

② 開発環境用のviteを起動します

$ npm run dev

---解説---

・npm run <スクリプト名>でスクリプトを実行します
・devは開発者の意味（developの略）
・開発環境用とは専門的な操作および編集を行うことを指します
・開発環境用のツールをON・OFFすることにより誤った一般ユーザーが誤った操作をしないように保護します
・Vite(ヴィート）は必要な時に必要なファイルだけをコンパイルしてブラウザーに送るAPIです

開発環境のnpmそして本番環境のnpm

npm run devのコマンドが成功すると
次のような表示が画面になります

"Ctrl"+"C"　で停止しない限りauthコマンドで
実装したサイトはviteにより足りないファイルが
補完されて閲覧可能な状態になります

認証画面のphpファイル

出力されている文字を変更したい場合は
次の階よりlogin.blade.phpのコードを
編集してください

本番環境のVite

npm run devは開発環境用であるため
停止すればブラウザ側も必要なファイルを
参照できないためエラー画面に戻ります

ブラウザのエラー画面にヒントが掲載されておりますが
本番用のViteを準備することで
永続的に必要なファイルを参照できるようになります

① カレントディレクトリをプロジェクトファイルにします

① カレントディレクトリをプロジェクトファイルにします

$ cd /Applications/MAMP/htdocs/①*******

② 本番環境用にviteをデプロイ（配置）します

$ npm run build

本番環境用にbuildフォルダが配置されたことで
認証画面が閲覧できるようになります

ログイン情報のテーブルを構築する

見本の通りログインには
メールアドレスとパスワードが必要です

DBにusersというテーブルを作成し
そこにログイン情報を保存を用意する
必要があります

またパスワードを忘れた場合のトークン情報を
保存できるテーブルも必要です

usersテーブルをマイグレーション

プロジェクトを作成時に
マイグレーションフォルダにはusersを含む
マイグレーションファイルが存在するため
マイグレーションを実行すればテーブルは用意できます

マイグレーションを実行する際
連携するデータベースが作成されていない場合は
.envファイルのDB_DATABASEに入力されている
値でデータベース名を作ることができます

完成したログイン画面

データベースのテーブル作成まで
完全に完了させればログイン操作が
可能になります

Laravelでログイン画面までを作る(CRUD）

WEBアプリケーションとは

CRUD（クラッド）とは

CRUDアプリとは

参照リンク

【別ページ】Laravelの新規プロジェクトを作成する

【別ページ】DBと接続する

【別ページ】DBのテーブルを作成する（マイグレーション）

プロジェクトを作成する

ブラウザに表示させる（サーバーを起動する）

DBを作成する

DBと接続する

.envファイル

database.php

隠しファイルの表示方法

.envを設定する場合の見本

DBと接続するための情報

database.phpを設定する場合の見本

DBと接続されているか確認する

接続が成功した場合

正しく接続されていない場合

DBにテーブルを作成する

マイグレーションファイルとは

マイグレーションファイルを作る

マイグレーションファイルの命名規則

マイグレーションファイルを編集する

テーブルに'ID'と'timestamps'は必須

テーブルに設定するデータ型

マイグレーションファイル見本

マイグレーションを実行する

認証機能を実装する

Laravel 6 以降には専用ライブラリが必要

laravel/ui ライブラリをインストールする

Auth（認証）ファイルを生成する

認証画面が開けない場合

npmの実行が必要

npmとは何か

Node.jsとは何か

npmをインストールする

npmでスタイルを適用させる

開発環境のnpmそして本番環境のnpm

認証画面のphpファイル

本番環境のVite

ログイン情報のテーブルを構築する

usersテーブルをマイグレーション

完成したログイン画面