composer require laravel/uiが何かとBootStrapの導入方法

2216 回閲覧されました

公開日 : 2023年4月25日

みなさんこんにちは、jonioです。

現在Laravelを勉強していますが学習当初「composer require laravel/ui」が何なのかを知らずに何となくコマンド入力していましたが調べて分かったので同じように何をしているかが分からない人の為の記事を作成しました。

私が調べたのでもしかしたら間違っていたり情報が足りないかもしれませんがご了承ください。

目次 [隠す]

composer require laravel/uiとは

Laraveのバージョン6以降でデフォルトで入っていてReact.js・Vue.js・Bootstrapなどを使う事ができる様にするライブラリをインストールするコマンドです。

ターミナルで「composer require laravel/ui」と入力します。

スカフォールドは雛形を自動的にインストールしてくれる便利な物です。

例えばBootStrapを選択した場合はHTMLにBootStrapのクラス名が付いた雛形が自動的にインストールされます。

例えば↓です。

	@extends('layouts.app')

	@section('content')
	<div class="container">
	<div class="row justify-content-center">
	<div class="col-md-8">
	<div class="card">
	<div class="card-header">{{ __('Dashboard') }}</div>

	<div class="card-body">
	@if (session('status'))
	<div class="alert alert-success" role="alert">
	{{ session('status') }}
	</div>
	@endif

	{{ __('You are logged in!') }}
	</div>
	</div>
	</div>
	</div>
	</div>
	@endsection

by GitHub

スカフォールドは他にはReact.js・Vue.jsの選択が考えられますが今回はBootStrapで話を進めます。

コマンド入力は「php artisan ui bootstrap」ですがログイン機能も一緒に入れる場合は「php artisan ui bootstrap —auth」です。（—は-を2つ付けて下さい）

ログイン機能は↓の赤枠の表示です。

Laravelのプロジェクト直下に「package.json」がありますがその中に記載があるBootStrapをLaravelのプロジェクトにインストールするのですが「npm install」で行います。

「npm install」についてはこの記事で詳しく解説しています。

そして「npm run dev」をして下さい。

BootStrapの公式サイトからファイルをダウンロードします。

↓の赤枠です。

ダウンロードしたら圧縮データを解凍してその中にあるファイルを移動します。

名前が長いので「Laraveのプロジェクト > public」をAとして「ダウンロードしたフォルダを解凍したフォルダ」をBとします。

ファイルの移動は2つです。

そして「Laravelのプロジェクト > resources > views > layouts > app.blade.php」のheadタグにBootStrapを読み込むためのコードを記述します。

	<!doctype html>
	<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- CSRF Token -->
	<meta name="csrf-token" content="{{ csrf_token() }}">

	<title>{{ config('app.name', 'Laravel') }}</title>

	<!-- Scripts -->
	<script src="{{ asset('js/app.js') }}" defer></script>

	<!-- Fonts -->
	<link rel="dns-prefetch" href="//fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

	<!-- Styles -->
	<link href="{{ asset('css/app.css') }}" rel="stylesheet">


	//ここから追加
	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
	<script src="{{ asset('js/bootstrap.min.js') }}" defer></script>
	//ここまで追加


	</head>

by GitHub

これでログイン画面に入ると↓の様にBootStrapが適用された画面になります。

新規登録画面も同様です。