フレームワークlaravel10と共に学ぶPHP 言語：Study-1 ナビゲーションバーを作ろう！

YouTubeの動画で紹介していますが、フレームワークlaravel10を利用して個人サイトを作りながら、PHP 言語を学んでいきます。　動画での学習よりもテキスト形式の方が良い方のために記事を作成しています。
じっくりコツコツと成功体験を積み重ねて理解を深めることにより、プログラミングを自在に行える技術を磨いていきましょう。

laravel10でサイトを表示させよう！

laravelでは基本的な画面表示はView(ビュー）で行っています。
Vscodeでlaravel10のファイル群を眺めてみるとresources（リソーシス）の中にViews（ビューズ）というフォルダが確認できます。　この中には初めてlaravel10をインストールするとWebサーバーで最初に表示されるwelcome.blade.phpというファイルを通じてlaravel10のサイトが表示されます。

これを表示するためにはroutesフォルダ内のweb.phpファイルが機能しているからです。
ではこのファイルを眺めてみましょう。

web.phpのソースコードがいくつか記述されていますが、21行目から23行目をご覧ください。
Route::get();とという記述が見えます。これはFacade（ファサード）と呼ばれるもので、簡単に説明すると以下のようになります。

Facade（ファサード）ってなんだろう？

ファサード（Facade）は、ソフトウェアデザインパターンの一つで、特定のサブシステムやクラス群を外部のコードからより使いやすくするためのインターフェースを提供します。

具体的には、ファサードは以下のような目的で使われます。

1. **複雑なシステムをシンプルに公開する**: システム全体の一部を抽象化し、単純なインターフェースを提供します。これにより、外部のコードはシステムの複雑な部分を理解せずに利用できます。

2. **依存性の注入を簡略化する**: ファサードは、特定のクラスやサービスに対する依存性を隠蔽する役割を果たすことができます。これにより、コードの保守やテストが容易になります。

3. **コードの可読性を向上させる**: ファサードは特定の機能やサービスを利用する際に、その意図を明確にします。また、適切に命名されたメソッドやインターフェースを通じて、コードの理解が容易になります。

一般的な例として、Laravelのファサードがあります。Laravelのファサードは、Laravelのサービスコンテナに登録されたクラスの一部に対するシンプルな静的なインターフェースを提供します。これにより、開発者は複雑な依存関係を意識せずに、特定のサービスを利用できます。

例えば、データベースのクエリを実行する際、`DB`ファサードを使うことで、データベースへのアクセスが簡単になります。

$results = DB::select('select * from users');

ファサードは、プログラムの保守性や可読性を向上させる一方で、適切な使用が必要です。過度に使うと、コードが抽象化されすぎて理解しづらくなる場合があります。

簡単に言ってしまえばlaravel10の持つ多くの機能を簡単な記述で実行できるように工夫されたコード式といえます。

パラメータの内容はこのようになってます

では改めて説明を続けます。（）内に２つのオプションまたはパラメータと呼ばれるものがあります。
１つは’/’という記述ともう一つはfunction() {}という記述です。

1つ目の/（スラッシュ）ですが、これはURLのトップディレクトリを指します。
もう少し噛み砕いて説明するとURL（ユニフォーム・リソース・ロケーター）はインターネット上のリソース（例: ウェブページ、画像、動画など）を特定するためのアドレスを示す文字列です。　文字列というと解りにくいかもしれませんね。

URLについての説明です。

皆さんはSafariやChromeなど著名なブラウザを利用して個人や企業の色々なサイトやWebアプリケーションを閲覧・利用をしているかと思います。
各ブラウザは国際的な規約（プロトコル）に基づいて基本的な機能を提供しています。

URLは通常、次のような形式を取ります。
scheme://host:port/path?query_string#fragment_id

scheme: リソースにアクセスするためのプロトコル（規約）を指定します（例: http、https、ftpなど）。
host: リソースがホストされているサーバーのアドレスを指定します。
port (オプション): サーバーが使用するポートを指定します。通常は省略され、デフォルトのポートが使用されます（例: HTTPの場合は80）。
path: サーバー上のリソースの場所やファイルパスを指定します。
query_string (オプション): リソースへの追加の情報やパラメータを指定します。通常は?で始まり、キーと値のペアが連なります。
fragment_id (オプション): ページ内の特定のセクションや位置を指定します。通常は#で始まり、セクションのIDなどが続きます。

例えば、以下はGoogleのホームページのURLです
https://www.google.com/

このURLでは、httpsがプロトコル（通信手段）、www.google.comがホスト、/がパスを示しています。

URLは、インターネット上のあらゆるリソースにアクセスするための手段として使用されます。ブラウザや他のクライアントソフトウェアは、URLを使って特定のリソースを取得し、表示することができます。

ここで重要なのはファイルパスです。
パスというのはファイルのつながりを示すものと言っても良いかと思いますが、例えばlaravelというフォルダの中にresousesというフォルダがあってその中のwelcome.blade.phpというファイルを示す場合は、laravel/resouses/welcome.blade.phpと表記します。
このようにトップディレクトリから目的のファイルまでを記述するのを”絶対パス”とも言います。

二つ目のパラメータのfunction ()について

さて、’/’（スラッシュ）の説明の次にfanction ()です。
これは皆さんもご存知かと思いますが、関数です。ここでは無名関数になっています。無名関数の説明を最初にしておきます。

無名関数（またはクロージャ）は、名前を持たない関数のことです。つまり、通常の関数とは異なり、特定の名前がなく、変数に代入して使用することができます。

以下に、無名関数の基本的な構文を示します：

$addition = function($a, $b) {

return $a + $b;

};

この例では、`$addition`という変数に、2つの引数を受け取り、それらを足し合わせて返す無名関数が代入されています。

無名関数を使う利点はいくつかあります：

1. **コードの簡潔さ**: 無名関数を使うことで、簡単な処理をシンプルに記述できます。

2. **コールバック関数としての利用**: 関数を引数として受け取る関数（例: `array_map`や`usort`）に便利です。

3. **クロージャ**: 無名関数は、自身が定義されたスコープの変数にアクセスできるため、クロージャとして機能します。

例えば、以下はクロージャの例です：

$multiplier = 2;

$multiply = function($x) use ($multiplier) {

return $x * $multiplier;

};

$result = $multiply(5); // 結果は10
＊　関数について知りたい方はここをクリックしてください。

この例では、`$multiplier`という外部の変数をクロージャ内で使用しています。

簡潔に言えば、無名関数は名前を持たない小さな関数であり、必要な場所で定義して使うことができます。

ということで説明を続けます。

functionの丸括弧内にこの関数が実行すべきコードが記述されています。
return view(‘index’)ですね。　リターンとして返す値は引数としてindex.blade.phpです。という形になっています。
view()はlaravel10に初めから組み込まれている関数で、ここではコールバック関数として機能させています。そして引数としてviewsディレクトリのindex.blade.phpを引数として渡しています。

ここでパラメータとして(‘index’)のみが記述されていますが、これはlaravelの規約のようなもので、ここを(‘index.blade.php’)とするとエラーになってしまいます。
.blade.phpの部分は必ずはぶき、indexのみを記述してください。

index.blade.phpの内容を記述しましょう！

<!DOCTYPE html>

<head>

<metacharset=”UTF-8″>

<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>

<metahttp-equiv=”X-UA-Compatible”content=”ie=edge”>

<title>laravel-site</title>

</head>

上記はヘッダー部分です。

htmlの宣言から始まって言語設定<html lang=”ja”>の次からヘッダーの内容になっているのが確認できます。
独自cssとコメントが入り、リンク先が記述されています。
不思議なのは{{asset(‘/css/style.css’)}}の部分でしょう。　これはblade独自の記述方法で.phpや.html形式のファイルでは使えません。あくまでも.blade.phpファイルのみで動作します。
asset()はlaravelの組込み関数の一つで相対パスを変換してくれる関数になります。

この記述は、HTMLファイル内で外部のCSSファイルを読み込むためのものです。

具体的には、以下のような意味があります：

– `<link>`: HTML内で外部リソース（通常はCSSやフォントなど）を読み込むためのタグです。

– `rel=”stylesheet”`: リンク先のリソースがスタイルシートであることを示します。

– `href=”{{asset(‘/css/style.css’)}}”`: `href`属性には読み込むファイルのパスが指定されます。`{{asset()}}`はLaravelのヘルパー関数で、`public`ディレクトリ内のファイルへの絶対パスを生成します。この場合、`public/css/style.css`が読み込まれます。

この記述は、通常、HTMLファイル内の`<head>`セクション内で使用されます。例えば：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!– ここにコンテンツが入ります –>

</body>

</html>

このようにすることで、`style.css`が正しく読み込まれ、ページのスタイリングが適用されます。

css/style.cssではいけないのはなぜか？

`css/style.css` と `public/css/style.css` の違いは、ファイルの配置場所です。

`css/style.css`: このパスはプロジェクトのルートディレクトリから見た相対パスを指します。これはLaravelの`public`ディレクトリの中に存在するファイルではありません。

`public/css/style.css`: これは`public`ディレクトリ内の`css`ディレクトリにある`style.css`ファイルへの絶対パスです。

Laravelでは、一般的には公開されるファイル（CSS、JavaScript、画像など）は `public` ディレクトリに置かれます。なぜなら、`public` ディレクトリの中身がウェブサーバーから直接アクセス可能だからです。

ですので、CSSファイルを読み込む際には、`public` ディレクトリからの相対パスや、`asset()` ヘルパー関数を使って正しいパスを指定することが一般的です。

例えば、`public/css/style.css` が存在する場合、以下のように読み込みます：

これにより、正しいパスでCSSファイルが読み込まれ、ページのスタイリングが適用されます。

bootstrapの部分はBootstrap公式サイトにあるCDNのコピーですので説明は省きます。
詳しく知りたい方は公式サイトをご覧ください。

bodyの内容についての説明です。

<body>

<h2 class=”text-white pt-1″>Laravel-Site</h2>

</a>

<button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse”data-bs- target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false”

aria-label=”Toggle navigation”>

</button>

</li>

<a class=”nav-link text-white” href=”#”>Features</a>

</li>

<a class=”nav-link text-white” href=”#”>Pricing</a>

</li>

@if (Route::has(‘login’))

@auth

<a class=”nav-link text-warning” href=”{{url(‘/dashbord’)}}”>ログイン中です</a>

@else

<button class=”btn btn-primary ms-2″><a class=”text-white text-decoration-

none”href=”{{route(‘login’) }}”>ログイン</a></button>

@if(Route::has(‘register’))

<button class=”btn btn-primary ms-2″><a class=”text-white text-decoration-

none”href=”{{route(‘register’)}}”>新規登録</a></button>

@endif

@endauth

@endif

</ul>

</div>

</nav>

</body>

3行目<nav class=”navbar navbar-expand-lg bg-secondary py-3 sticky-top”>

これは、HTMLでナビゲーションバー（ページ上部に表示されるメニューやナビゲーションのエリア）を定義するコードです。

ここで使われているクラスや属性について解説します：

`<nav>`: HTML5で導入された要素で、ナビゲーションメニューやリンクのセクションを定義します。

`class=”navbar navbar-expand-lg bg-secondary py-3 sticky-top”`: ここでは、ナビゲーションバ　　ーのスタイルや動作を指定しています。

`navbar`: Bootstrap（フロントエンドのライブラリ）におけるナビゲーションバーを示すクラスです。

`navbar-expand-lg`: 画面幅が大きい（large）場合に、ナビゲーションバーの要素を拡張する指示です。

`bg-secondary`: ナビゲーションバーの背景色を示しています。ここでは`bg-secondary`が指定されているため、背景色がセカンダリカラーになります。

`py-3`: 上下のパディング（余白）を追加します。`p`はpaddingの意味で、`y`は縦方向（上下）を意味し、`3`は大きさを指定しています。

`sticky-top`: ナビゲーションバーを画面上部に固定します。スクロールしてもナビゲーションバーが画面上部に表示され続けます。

このコードは、Bootstrapフレームワークを使用して、スタイリッシュなナビゲーションバーを作成しています。Bootstrapは、HTMLやCSSのスタイリングを簡単に行えるフレームワークで、多くのプロジェクトで利用されています。

4行目<div class=”container”>

`<div class=”container”>` は、HTMLでよく使われる要素で、コンテンツをグループ化し、レイアウトを整えるために使用されます。

具体的には、以下のような意味があります：

– `<div>`: ディビジョン（division）の略で、HTML文書内で特定のセクションをグループ化するための要素です。

– `class=”container”`: ここでは、この `<div>` 要素に `container` というクラスが指定されています。`container` クラスは、一般的にはBootstrapやその他のフレームワークで使われ、コンテンツを中央に寄せ、ページ全体の幅を制限する役割を持ちます。

例えば、以下のような使い方があります：

“`html

<!– ここにコンテンツが入ります –>

</div>

“`

このコードは、コンテンツを包むコンテナを定義しています。コンテナ内にはテキスト、画像、他の要素などを配置できます。

また、`container` クラスの他にも、`container-fluid` というクラスがあります。`container-fluid` を使うと、コンテンツがページ全体に広がるようになります。

“`html

<!– ここにコンテンツが入ります –>

</div>

“`

このように、`<div class=”container”>` を使うことで、コンテンツのレイアウトを整えたり、デザインを統一したりするのに役立ちます。

5行目から7行目の説明です。

このHTMLコードは、ナビゲーションバー（通常はウェブサイトの上部に表示されるメニューやロゴを含むエリア）内に配置される要素を定義しています。

具体的には以下のような意味があります：

– `<a class=”navbar-brand” href=”#”>`: `<a>`はリンクを定義するHTML要素であり、`navbar-brand`というクラスが指定されています。`navbar-brand`クラスは、Bootstrapフレームワークにおいてナビゲーションバー内のブランド（通常はロゴやサイト名）を示すクラスです。`href=”#”`はリンク先が現在のページ内であることを示しています。

– `<h2 class=”text-white pt-1″>Laravel-Site</h2>`: `<h2>`は見出しを定義するHTML要素で、ここでは`Laravel-Site`というテキストが見出しとして使われています。`text-white`クラスは、テキストの色を白に指定します。`pt-1`は上方向のパディング（余白）を追加します。

このコードは通常、ウェブサイトのナビゲーションバー内に配置され、サイトのロゴやタイトルを表示するのに使われます。例えば、以下のようになります：

<nav class=”navbar navbar-expand-lg bg-secondary py-3 sticky-top”>
<a class=”navbar-brand” href=”#”>
<h2 class=”text-white pt-1″>Laravel-Site</h2>
</a>
<!– 他のナビゲーション要素もここに配置される –>
</nav>

このコードはBootstrapフレームワークを利用しており、Bootstrapが提供するクラスを使って、スタイリッシュなナビゲーションバーを作成しています。

もちろんです！

“`html

</button>

“`

このHTMLコードは、ナビゲーションバー内に配置されるトグルボタン（通常は画面が狭い場合にメニューを表示・非表示にするためのボタン）を定義しています。

具体的には以下のような意味があります：

– `<button class=”navbar-toggler” type=”button”>`: `<button>`はボタンを作成するHTML要素です。`navbar-toggler`クラスは、Bootstrapフレームワークにおいてナビゲーションバーのトグルボタンを示すクラスです。`type=”button”`はボタンのタイプが通常のボタンであることを示します。

– `data-bs-toggle=”collapse”`: `data-`属性は、カスタムデータ属性を設定するためのもので、ここではBootstrapのコンポーネントの動作を指定しています。`collapse`は折りたたみ（非表示）の状態を示します。

– `data-bs-target=”#navbarNav”`: この属性は、トグルボタンが作動した際にどの要素を折りたたむ（非表示にする）かを指定します。`#navbarNav`は通常、ナビゲーションメニュー全体を指します。

– `aria-controls=”navbarNav” aria-expanded=”false”`: これらの属性は、アクセシビリティ（Accessibility）のためのもので、スクリーンリーダーなどの補助技術が正しく動作するようにします。

– `aria-label=”Toggle navigation”`: これもアクセシビリティのための属性で、スクリーンリーダーがボタンの目的を正しく理解できるようにします。

– `<span class=”navbar-toggler-icon”></span>`: これはボタン内部に表示されるアイコンを定義しています。Bootstrapの`navbar-toggler-icon`クラスは、一般的には三本線のアイコン（ハンバーガーアイコン）を表します。

このコードは、Bootstrapフレームワークを利用しており、Bootstrapが提供するクラスやデータ属性を使って、スタイリッシュなトグルボタンを作成しています。このボタンは通常、画面が狭い場合にメニューを開閉するために使われます。

９から12行目の説明です。

</button>

具体的には以下のような意味があります：

– `aria-label=”Toggle navigation”`: これもアクセシビリティのための属性で、スクリーンリーダーがボタンの目的を正しく理解できるようにします。

13行目の説明です。

このHTMLコードは、Bootstrapフレームワークを使って作成されたナビゲーションバー内の要素の一部です。

具体的には以下のような意味があります：

– `<div class=”collapse navbar-collapse” id=”navbarNav”>`: これは、ナビゲーションバーのコンテンツを包む`<div>`要素です。

– `class=”collapse navbar-collapse”`: これらのクラスは、Bootstrapにおいてナビゲーションバーのコンテンツが折りたたまれる（非表示になる）ことを示します。`navbar-collapse`クラスはナビゲーションバーの要素が折りたたまれることを示し、`collapse`クラスは要素が初めから非表示であることを示します。

– `id=”navbarNav”`: この`<div>`要素には一意なIDが付けられています。このIDは、トグルボタンがクリックされた際に折りたたまれる要素を識別するために使われます。

この部分のコードは、ナビゲーションバー内のメニューやリンクなどのコンテンツが折りたたまれている状態を示しています。通常、画面が狭い場合には、トグルボタンをクリックするとこれらのコンテンツが表示されます。

14行目から23行目までの説明です。

このHTMLコードは、ナビゲーションバー内に配置されるリンクのリストを定義しています。

具体的には以下のような意味があります：

– `<ul class=”navbar-nav ms-auto”>`: これは順序なしリスト（unordered list）を示すHTML要素です。`navbar-nav`クラスは、Bootstrapフレームワークにおいてナビゲーションバー内のリンクリストを示します。`ms-auto`クラスは、リストを右側に寄せる指示です。

– `<li class=”nav-item”>`: これはリストアイテム（list item）を示すHTML要素です。`nav-item`クラスは、Bootstrapにおいてナビゲーションバー内のリストアイテムを示します。

– `<a class=”nav-link text-white” aria-current=”page” href=”#”>Home</a>`: これはアンカータグ（リンク）を示します。`nav-link`クラスは、Bootstrapにおいてナビゲーションバー内のリンクを示します。`text-white`クラスはリンクのテキストを白色に指定します。`aria-current=”page”`は現在のページを示す補助的な情報を提供します（スクリーンリーダーなどが利用します）。`href=”#”`はリンク先が現在のページ内であることを示します。

このコードは、ナビゲーションバー内に「Home」、「Features」、「Pricing」というリンクが表示されるリストを定義しています。これらのリンクは通常、サイトの各セクションへのリンクやページへの移動を提供します。

24行目から35行目までの説明です。

– `@if (Route::has(‘login’))`: これは条件文の開始です。ここでは、指定したルート（`login`）が存在するかどうかをチェックしています。

– `@auth`: ユーザーがログインしている場合に実行するブロックの開始を示します。

– `<a class=”nav-link text-warning” href=”{{url(‘/dashboard’)}}”>ログイン中です</a>`: ログインしている場合に表示されるリンクを定義しています。`nav-link`クラスは、ナビゲーション用のリンクスタイルを示します。`text-warning`クラスは、テキストの色を警告色に指定します。`href=”{{url(‘/dashboard’)}}”`はリンク先を指定しています。

– `@else`: ユーザーがログインしていない場合に実行するブロックの開始を示します。

– `<button class=”btn btn-primary ms-2″>`: ログインボタンを定義しています。`btn`クラスはボタンを示し、`btn-primary`クラスはプライマリなスタイルのボタンを示します。`ms-2`は左側のマージンを追加します。

– `<a class=”text-white text-decoration-none” href=”{{route(‘login’)}}”>ログイン</a>`: ログインボタン内のリンクを定義しています。`text-white`クラスはテキストを白色に指定し、`text-decoration-none`はテキストの下線を削除します。`href=”{{route(‘login’)}}”`はリンク先を指定しています。

– `@if(Route::has(‘register’))`: もし`register`というルートが存在する場合に実行する条件文の開始を示します。

– `<button class=”btn btn-primary ms-2″>`: 新規登録ボタンを定義しています。

– `<a class=”text-white text-decoration-none” href=”{{route(‘register’)}}”>新規登録</a>`: 新規登録ボタン内のリンクを定義しています。

– `@endif`: `@if`文の終了を示します。

– `@endauth`: `@auth`ブロックの終了を示します。

– `@endif`: `@if (Route::has(‘login’))`ブロックの終了を示します。

このコードは、ユーザーがログインしている場合には「ログイン中です」と表示し、ログインしていない場合には「ログイン」と「新規登録」のボタンを表示します。ログインや新規登録のリンクは、Laravelのルーティングシステムを利用しています。

フレームワークlaravel10と共に学ぶPHP 言語：Study-1 ナビゲーションバーを作ろう！

laravel10でサイトを表示させよう！

Facade（ファサード）ってなんだろう？