実務1年目駆け出しエンジニアがLaravel&ReactでWebアプリケーション開発に挑戦してみた！（その22）
0. 初めに
みなさん、こんにちは！
タイトルでお気づきかもしれませんが、僕はついに実務未経験エンジニアではなくなってしまいました！（2025年10月現在）
タイトルについて
したがって、今までのタイトルのままだと嘘になってしまいます。（笑）
そこで、今回からタイトルを微妙に修正しました。
そもそもこのシリーズは、実務未経験なりにどう自分の実力や実績をアピールするかを考えた末に始めたものでした。
しかし、まだまだ駆け出しエンジニアであることには、変わりはないので勉強のために今後も続けていきますので、ご安心ください！
これまでの振り返り
改めて、このシリーズではゼロからWebアプリケーション開発をする方法をすべてのソースコードをお見せして解説してきました！
要件定義・設計編（全1回）では、アプリを作るための設計やそもそもどのようなものを作るのかを明確化しました！
具体的には、要件定義書やワイヤーフレーム、ER図を作成しましたね。
環境構築編（全5回）では、アプリを作るための開発環境を用意しました！
WSLを用いてUbuntuをインストールして、Linuxの実行環境を構築しました。
さらに、Dockerをインストールして、Laravelの開発環境を準備しましたね。
そして、バックエンド実装編（全16回）では、Laravelを用いて多くの機能を実装しました！
基本的な認証機能やCRUD機能、検索機能はもちろん、排他制御や管理者、ソーシャルログインなんかも実装しました。
もし、本シリーズを初めて知ったという方の中で、
- プログラミング学習でWebアプリケーション開発に挑戦してみたいという方
- 就職活動でポートフォリオ作成の参考にするものを探していた方
- LaravelやReactなどのモダンな技術を学びたい方
はぜひ、その1である要件定義・設計編から読んで、一緒に手を動かして勉強してみませんか！
こちらは、ありがたいことに多くの方に読んでいただいております。
まだまだ、至らぬ点が多いと思いますが、今後も頑張っていきますので、引き続きの方も初めましての方もよろしくお願いします！！
なんか、珍しく情報商材系インフルエンサーみたいな前置きが入ってしまいましたが、気を取り直してさっそく内容に入っていきましょう。（笑）
Inertia.jsについて補足
フロントエンド実装編ということで、新しく始まったわけですが、あまり身構える必要はありません。(*´ω｀)
特に新しく何かプロジェクトを作成する必要はありません。
というのも、今回のシリーズではInertiaを使用しているからです。
ここで、Inertiaを使用した開発と従来のAPIエンドポイントを用いた開発の違いを確認しておきましょう。
「早く作りたいぜ！」という方は、飛ばしてもらってもかまいません。
従来は、APIをバックエンド側で用意して、データベースからとってきたデータを加工してJSON等の形式で出力し、フロントエンドはそのAPIをたたいてデータを取得するというのが一般的なバックエンドとフロントエンド間のデータのやり取りの手法だったそうです。
（やべ、そもそもAPIもJSONもまだ説明してないや・・・）
あくまでイメージですが、まずはAPIを用いた開発手法を見てみましょう。
APIっていうのは、実はそんなに難しくありません。
これまでバックエンド実装編で作ってきたルーティングに似ています。
-
/にGETメソッドが来たらトップページを表示する -
/usersにGETメソッドが来たらユーザー一覧を表示する -
/posts/10にDELETEメソッドが来たらidが10の投稿を削除する
みたいな感じで、URLを用意しておいて、それに対して何らかのメソッドで通信する（HTTPの場合、GETやPOST、PUT、DELETEなど）ことで用意しておいた処理が実行されるという仕組みでした。
これを「APIをたたく」なんて言ったりします。
APIはそもそも「Application Programming Interface」の略で、異なるソフトウェアやアプリケーションが、データや処理をやり取りするための「橋渡し役」の役割を果たす仕組みのことです。
APIについて詳しく知りたい方は、こちらの記事が分かりやすいかもしれません。
https://www.sbbit.jp/article/cont1/62752
つまり、従来の開発手法では、バックエンドとフロントエンドで完全にプロジェクトを分けてそれぞれ開発し（VS Codeを二つ別々に立ち上げるイメージだとわかりやすいかもです）、バックエンドはAPIを用意することに専念し、フロントエンドはそのAPIをたたいてデータなどを取得して画面に表示することに専念するという分担がなされます。
APIを用いた開発では、バックエンドがAPIを用意して、フロントエンドがそれをたたいて取得したデータを画面に表示する
※APIはバックエンドとフロントエンド間のデータのやり取りに限らず、外部のサービスとの連携にも用いられます。これにより、外部で開発された機能の一部を自分のアプリケーションに組み込むことができます（例: Googleマップ）。
また、JSONについてですが、これはデータの形式のことで、フロントエンドの言語であるJavaScriptで特に扱いやすい形式であるため、バックエンドがこの形式でデータをフロントエンドに渡します。
JSONについては、以下の記事が分かりやすいと思います。
https://qiita.com/inokage/items/7ff5d5a41a960a75bfb7
次に、Inertiaを使った開発です。
ご覧の通り、ReactがLaravelプロジェクト内に内包されており、MVCアーキテクチャの場合、V(View)を担当します。
これにより、一応バックエンドとフロントエンドの区別はあるものの、一つのアプリケーションのように開発することができます。
しかしながら、以前として使用している言語は、PHPとJavaScriptと異なります。
そのため、InertiaがPHPの変数をReactにpropsという形で渡す仲介役をします。
Inertiaを使うことで、LaravelとReactが一つのプロジェクトであるかのような滑らかなデータのやりが可能になる
より詳しく知りたい方は、以下の記事でとても丁寧で分かりやすくまとめられていると思いますので、よかったらどうぞ！
これまで本シリーズでは、Bladeの話をしてこなかったので、そこらへんはよくわからないかもしれませんが...
その辺は軽く流してもらっても大丈夫です。
https://qiita.com/itokoooooh/items/142a1d6f0aba7c5d798e
1. ブランチ運用
前置きがかなり長くなりましたが、いよいよ今回実装する中身に入っていきましょう。
リモートリポジトリにあるdevelopブランチをプルして、ローカルリポジトリのdevelopブランチを最新化しましょう。
そこから、feature/frontend/layout-base/main-contents-areaという新しいブランチを切って、今日は作業します。
実行コマンド
$ cd src
$ git branch
（↑で現在のブランチがdevelopじゃなかったら）
$ git checkout develop
$ git pull origin develop
$ git checkout -b feature/frontend/layout-base/main-contents-area
後述しますが、今日の作業が終わったらコミット・プッシュを忘れずにしましょう。
2. 画面デザイン
今回から毎回画面デザインを確認して完成のイメージを持ってから実装に入っていく感じでいきたいと思います。
この画面デザインですが、本来であれば、要件定義・設計編で作るべきものでしたが、当時の僕がそこまで考えておりませんでした。
今回のお手本は以下のような感じです！ちなみにFigmaというサービスを使いました。無料です！
これは検索結果画面ですが、要するに、研究室の情報やレビューを表示するメインとなる画面の部分のレイアウト（画面幅や色合い）を作っていくのが今回の目標です！
3. Tailwind CSS導入
画面のレイアウトを設定するための言語として、CSSというものがありますよね！（HTML & CSSの基本知識は割愛します。初めての人はYouTubeやProgateで復習しておきましょう）
CSSをそのまま書いてもよいのですが、実際の開発ではフレームワークを使うことが良くあります。
中でも今回は、Tailwind CSSというものを利用したいと思います。
https://v3.tailwindcss.com/
HTMLに直書きできるようなスタイルで、コンポーネントに分けて開発していくReactとは相性が良いかなって思います！
詳しい説明は、実際に書いていくうちに少しずつ慣れていくと思いますので、今の段階では割愛します。
さて、さっそくTailwind CSSをインストールするか...!!
...っと思いきや、実はもうすでにインストール済みだと思いますw
いつの間に...!?
っと思うかもしれませんが、バックエンド実装編①~認証機能作成~の時にBreezeというものをインストールしたのを覚えていますか？
実は、Breezeをインストールすると自動でTailwind CSSがインストールされていました。（笑）
なので、今日は特に何かコマンドを実行したり、設定ファイルを編集したりする必要はないです！
Laravel Breezeをインストールすると、自動でTailwind CSSがセットアップされる
一応念のため、\resources\css\app.cssファイルを開いて、以下のようになっているかを確認しておいてください。
@tailwind base;
@tailwind components;
@tailwind utilities;
4. レイアウト実装
下準備をする
以下にアクセスして、テキトーなユーザーでログインしておきましょう。
今回は、ヘッダーがあったほうがレイアウトを考えやすいというのもあるので、現在ヘッダーがなぜかあるマイページを表示した状態にしておきます。
フロントエンドの構成を知る
以下のファイルを見てみてください。
import '../css/app.css';
import './bootstrap';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot } from 'react-dom/client';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.jsx`,
import.meta.glob('./Pages/**/*.jsx'),
),
setup({ el, App, props }) {
const root = createRoot(el);
root.render(<App {...props} />);
},
progress: {
color: '#4B5563',
},
});
これは、エントリーポイントと言って、フロントエンドの起点となるファイルです。
特に重要なのが、以下の部分です。
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.jsx`,
import.meta.glob('./Pages/**/*.jsx'),
),
setup({ el, App, props }) {
const root = createRoot(el);
root.render(<App {...props} />);
},
progress: {
color: '#4B5563',
},
});
これまで、バックエンド実装編では\project-root\src\resources\js\Pagesというフォルダに表示したいページのReactコンポーネントを作成してきました。
これまで、ページが表示されていたのは、実はエントリーポイントであるapp.jsxのこのcreateInertiaApp()内で設定されていたからでした。
まず、最初の部分です。
title: (title) => `${title} - ${appName}`,
バックエンド実装編の時に作成した、\Pages\MyPage\Index.jsx内の、<Head title="マイページ" />で指定したものが入ります。
ブラウザの画面上のタブの部分に表示されるやつです。
次に以下の部分ですね。
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.jsx`,
import.meta.glob('./Pages/**/*.jsx'),
),
バックエンド実装編で作った、MyPageController.php内のInertia::render('MyPage/Index', の部分で指定したページが${name}に入って表示されるという仕組みです。
「**や*って何を表しているんだろう？」と思った方がいると思います。
これは、ワイルドカードと呼ばれる書き方です。
気になる方は調べてみるとよいかもしれません！
JavaScriptのワイルドカードについて調べてみましょう！
最後のprogress: 部分は、ロード中の画面上部の読み込みバーの色を指定しているだけなので、あまり重要ではありません。
最大横幅を設定する
では、いよいよレイアウトを作っていきたいのですが、その前に最大横幅を設定しておきましょう。
これを設定しておかないと、仮に大きなスクリーンで本アプリを見たときに、無限に横幅が広がってしまって、非常に見づらいです。
特に、文章は、ユーザーが文末まで読んで次の行を読む際に、文頭を見失いやすくなってしまいます。
Taildwind CSSの設定ファイルで設定できます。
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.jsx',
],
theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},
// 追加: メインコンテンツの横幅設定
maxWidth: {
container: '1440px',
},
},
},
plugins: [forms],
};
共通レイアウトを作成する
\project-root\src\resources\js\Layouts\というフォルダの中に、新しくAppLayout.jsxというファイルを作成してください！
export default function AppLayout({ children }) {
return (
<></>
);
}
※補足: importとexportについて
JavaScriptの基本文法なので、細かい説明は割愛しますが、exportと書くと、その中身を他の場所でもimportと書くことによって、使えるようになります。
これは、モジュールと呼ばれる考え方でした！
もし、初めて聞いたという方は勉強しておきましょう。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules
defaultは、そのファイルで単一のモジュールをエクスポートするときに付ける言葉です。
ここでは、このファイルでAppLayoutという関数をエクスポートし、他のファイルでインポートすることで、複数のページで共通のレイアウトを実現することができます。
このような考え方を関数コンポーネントと言います。
実は、関数コンポーネントは新しいらしく、昔はクラスコンポーネントが主流だったようです。
違いについては、以下の記事にまとめられていますので、よかったらどうぞ。
まあ、本筋からは少しそれるのであまり深入りする必要はありません。
https://qiita.com/omo_taku/items/18da0c020672a368f166
引数のchildrenについては、次回以降で解説します。
returnには、実際のコンポーネントの中身をHTML風に書くことができます。
Reactの.jsxというファイル拡張子がこれを実現しています。
（まあ、.jsでも書けちゃったりするのがまたややこしいのですが...）
そして、Reactの大事なルールとして、returnの中身は必ず、一つの親要素しか書けないということです。
したがって、以下のように複数の要素を書くには一つの親要素に対して、ネストさせなければいけません。
// NG: 親要素が複数ある
return (
<div></div>
<h1></h1>
<p></p>
);
// OK: 親要素が一つ
return (
<div>
<h1></h1>
<p></p>
</div>
);
どうしても、<div></div>などの親要素を持たせたくない場合は、<></>で囲むことで、実際のブラウザの検証ツールなどで見たときに、親要素を複数ある状態にすることができます。
// OK: 親要素が一つ
return (
<>
<h1></h1>
<p></p>
</>
);
// ※実際のブラウザの検証ツールなどに表示されるHTML
<h1></h1>
<p></p>
この仕組みをフラグメンテーションと言います。
なぜこんな面倒なルールや仕組みがあるのかは、いったんおいておきましょう。（笑）
では、AppLayoutをMyPage/Index.jsxでインポートしてみましょう！
以下のように編集します。
import AppLayout from '@/Layouts/AppLayout'; // 追加: AppLayoutをインポート
import { Head, Link, router } from '@inertiajs/react';
export default function Index({ user, notifications = [] }) {
const handleDeleteAccount = () => {
if (confirm('本当に退会しますか？この操作は取り消せません。')) {
router.delete(route('mypage.delete'));
}
};
const unreadCount = notifications.filter(n => !n.read_at).length;
return (
<AppLayout>
<Head title="マイページ" />
<div className="space-y-4">
<div className="text-gray-800">
<div className={user.is_admin ? 'text-red-500' : ''}>
未読の通知: {unreadCount}件
</div>
<Link href={route('notifications.index')}>
<button className="mt-2 px-4 py-1 bg-gray-200 rounded-md hover:bg-gray-300">
通知一覧を見る
</button>
</Link>
</div>
<h3 className="text-lg font-semibold">ユーザー情報</h3>
<p>名前: {user.name}</p>
<p>メールアドレス: {user.email}</p>
<p>登録日: {new Date(user.created_at).toLocaleDateString('ja-JP')}</p>
<div className="space-x-2">
<Link href={route('mypage.edit')}>
<button className="px-3 py-1 border rounded-md hover:bg-gray-100">編集する</button>
</Link>
<Link href={route('mypage.bookmarks')}>
<button className="px-3 py-1 border rounded-md hover:bg-gray-100">ブックマーク済み研究室</button>
</Link>
<button
onClick={handleDeleteAccount}
className="px-3 py-1 border rounded-md text-red-600 hover:bg-red-50"
>
退会する
</button>
</div>
</div>
</AppLayout>
);
}
return()の中で、<AppLayout></AppLayout>で囲むことで、共通レイアウトを適用できます。
それでは、return()の中身を書いていきましょう！
まずは、参考までにヘッダー領域も決めておきましょうか。
export default function AppLayout({ children }) {
return (
<div className="min-h-dvh flex flex-col bg-gray-50">
{/* Header */}
<header className="h-14 border-b border-gray-200 bg-white flex items-center px-6">
<h1 className="text-lg font-semibold">ヘッダー領域</h1>
</header>
</div>
);
}
Tailwind CSSでは、classNameという属性に直接CSSのプロパティ的な設定値を書くことでスタイルを直接適用させることができます。
公式ドキュメントに詳しい説明が書かれているので、最初のうちは一緒に確認しながら進めていきましょう！
今回は、versionとしては3を使用しているので、以下のURLを見るとよいかなと思います。
https://v3.tailwindcss.com/
まず、h-14の部分です。
これは、CSSのheightすなわち、要素の高さ（縦幅）を設定するものです。
https://v3.tailwindcss.com/docs/height
こんな感じで、h-〇〇と書くことで、CSSのheightを変えることができます。
対応表は以下のような感じで、h-14は、56pxに相当するようです。
次に、border-bですが、こちらは、CSSのborder-bottom-width: 1px;すなわち、要素に1pxの境界線を下だけに引くという設定ができます。
https://v3.tailwindcss.com/docs/border-width
同様に、border-gray-200で境界線の色を指定できます（こちらは、次回の「ヘッダー作成」で変更します）。
https://v3.tailwindcss.com/docs/border-color
また、bg-[#EEF5F9]のように色コードを直接指定することもできます。
さらに、flexがdisplay: flex;に、items-centerがalign-items: center;に対応しているため、Flexboxにも対応しています。
これにより、包含される要素の「ヘッダー領域」というテキストで縦方向に関して、中央に配置されます。
https://v3.tailwindcss.com/docs/display
https://v3.tailwindcss.com/docs/align-items
最後のpx-6は左右の余白、すなわちpadding: 1.5rem; /* 24px */に対応しています。
「ピクセル」と間違えやすいですw
「パディング・エックス」ですね。
https://v3.tailwindcss.com/docs/padding
では、中身のh1要素も見てみましょう。
こちらもclassName属性でスタイルを設定しています。
<h1 className="text-lg font-semibold">ヘッダー領域</h1>
もうお察しかもしれませんが、text-lgでFont Sizeを、font-semiboldでFont Weightを設定しています。
以上を踏まえると...
こんな感じになりました！
CSSは、微妙な変化もありますので、分かりにくいことがあると思います。
そんな時におすすめなのが、常にサーバーを起動しておいて、注目したいプロパティを消したり・追加したり、あるいは数字を変えてみたりして動きをみることです。
画面の変化をリアルタイムに観察するには以下のコマンドがおすすめです。
実行コマンド（参考までに）
$ docker exec -it php-lab bash
$ npm run dev
※ただし、Dockerコンテナを起動しておく必要があります。
CSSのプロパティを無効にしたり、数値を変えたりしてレイアウトがどう変化するかを観察する。
次に、メインコンテンツ領域も作ります。
先ほど作成したヘッダーも併せて、さらにその外側を大きな<div></div>で囲います。
export default function AppLayout({ children }) {
return (
<div className="min-h-dvh flex flex-col bg-[#EEF5F9]">
{/* Header */}
<header className="h-14 border-b border-gray-200 bg-[#EEF5F9] flex items-center px-6">
<h1 className="text-lg font-semibold">ヘッダー領域</h1>
</header>
{/* Main Content Area */}
<main className="flex-1 bg-transparent">
<div
className="
mx-auto
w-full
max-w-container
px-[clamp(16px,4vw,32px)]
py-6
bg-[#EEF5F9]
border border-gray-200
shadow-sm
rounded-xl
"
>
{children || <p className="text-gray-400 text-center">メインコンテンツ領域</p>}
</div>
</main>
</div>
);
}
まず、一番外側の<div></div>でmin-h-dvhを指定することで、アプリケーション全体の高さを100dvhに設定することができます。
これにより、タブレットやスマートフォンで閲覧した時のスクロール操作で画面幅が崩れる問題が解消されます。
詳しくはこちらをご覧ください（難しいと思うので、雰囲気だけでもつかんでもらえれば大丈夫です）。
https://zenn.dev/gaogaoasia/articles/cbf3b83a3921d4
https://v3.tailwindcss.com/docs/min-height
また、flex flex-colで、直下の要素、すなわち、headerとmainが立て並びになります。
https://v3.tailwindcss.com/docs/flex-direction#column
次に、<main></main>について見てみましょう。
flex-1を指定すると、Flexboxの他の要素以外の面積を自動的に埋めることができます。
すなわち、今回は、一つ上のdivでflex-colが指定されており、headerではh-14と指定されているため、「画面上の縦幅で残りの部分をこのmainで埋めます」という意味になります。
https://v3.tailwindcss.com/docs/flex#flex-1
※画像は、flex-colを指定していないため、横向きです。
さらに、bg-transparentで背景色を透明にしています。
この後、同じ大きさのdivで色を設定するため、色が二重に重なったりしないようにするために一応つけています。
多分、なくても問題はないかなと思いますが...（笑）
最後に、mainの中にもう一つ作った<div></div>です。
mainはあくまで、メインコンテンツの領域を確保するためのもので、実際の中身のレイアウトは、このdivに任せようという感じで、責務を切り離しています。
正直、これらのレイアウトは、この後変更するので、今は気にしなくても大丈夫です。
詳しくは、後述します。
現状こんな感じになっていればOKです！
アプリケーション全体の背景色を変更する
以下のように設定します！
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html, body, #app { height: 100%; }
body { @apply bg-[#EEF5F9]; }
}
色が変わりました！
境界線をなくす
先ほどの話に戻りますが、実は見本を見ていただけたら分かると思いますが、メインコンテンツ領域に境界線は特に引かないです（後で気が変わる可能性は大いにありますがｗ）。
陰も同様に要りません。
したがって、以下のように変更します。
<main className="flex-1 bg-transparent flex">
<div
className="
mx-auto
w-full
max-w-container
px-[clamp(16px,4vw,32px)]
py-6
bg-[#EEF5F9]
flex-1
"
>
{children || <p className="text-gray-400 text-center">メインコンテンツ領域</p>}
</div>
</main>
アプリ全体の背景色とメインコンテンツの背景色を同じに指定したため、境界線がある方が分かりやすくなるために付けていました。
そのため、今後余白を見やすくしたくなる場合は、今みたいに一時的に境界線を付けてあげるか、もしくはアプリ全体の背景色を変えてみると見やすくなると思います。
境界線を消すと以下のようになります。
それっぽい雰囲気になりましたね。(*´ω｀)
今回はこれくらいにしておきます！
コミット・プッシュをお忘れなく！
※コミット・プッシュ（怪しい人向け）
以下を順番に実行しましょう。
実行コマンド
$ cd src
$ git branch
（現在のブランチがfeature/frontend/layout-base/main-contents-areaであることを確認したら）
$ git add .
模試以下のような警告が出るなら、改行コードをLFに変えましょう。
VS Code画面下がCRLFになっていると思うので、クリック。
画面上の「改行コードの選択」でLFに変更してください。
再び、画面下を見て、LFに変わっていることを確認したら、もう一度addしましょう。
$ git add .
$ git commit -m "created main contents area"
$ git push origin feature/frontend/layout-base/main-contents-area
ここまで、実行できたら、リモートリポジトリを開きます。
本シリーズでは、GitHubを使用しています。
「Compare & pull request」をクリック。
マージ先をbase:developに変更してから（←ここ重要）、右下の「Create pull request」でプルリクエストを作成します。
コンフリクトが起きていないことを確認したら、「Merge pull request」から「Confirm Merge」をクリック。
これにて、今日の分の作業がリモートにプッシュされ、developブランチが最新化されました。
次回以降も、本記事の冒頭のような操作でこの最新化されたリモートのdevelopからローカルのdevelopに変更履歴を取り込み、そこから新規ブランチを切って作業します。
また、作業が終わったら、今と同じ手順でコミット・プッシュしましょう。
基本的は、手順を間違えない限りコンフリクトは起きないと思います。
万が一、コンフリクトを発生させてしまった場合は、慌てず落ち着いて対処しましょう。
以下の記事が参考になるかもしれないので、載せておきますね。
https://backlog.com/ja/git-tutorial/pull-request/09/
5. まとめ・次回予告
いかがでしょうか！
今日から、フロントエンド実装編ということで、画面デザインに沿って使いやすい画面を作っていきたいと思います！
今日は、メインコンテンツ領域を作成しました。
Tailwind CSSというCSSのフレームワークを使いましたね！
次回は、ヘッダーを作成したいと思います！
正直、僕自身もフロントエンドはそんなに得意でない（笑）のですが、一緒に頑張って行きましょう！
軽く宣伝
YouTubeを始めました（というか始めてました）。
内容としては、Webエンジニアの生活や稼げるようになるまでの成長記録などを発信していく予定です。
現在、まったく再生されておらず、落ち込みそうなので、見てくださる方はぜひ高評価を教えもらえると励みになると思います。"(-""-)"
これまでの記事一覧
☆要件定義・設計編
☆環境構築編
- その２: 環境構築編① ~WSL, Ubuntuインストール~
- その３: 環境構築編② ~Docker Desktopインストール~
- その４: 環境構築編③ ~Dockerコンテナ立ち上げ~
- その５: 環境構築編④ ~Laravelインストール~
- その６: 環境構築編⑤ ~Gitリポジトリ接続~
☆バックエンド実装編
- その7: バックエンド実装編① ~認証機能作成~
- その8: バックエンド実装編②前編 ~レビュー投稿機能作成~
- その8.5: バックエンド実装編②後編 ~レビュー投稿機能作成~
- その9: バックエンド実装編③ ~レビューCRUD機能作成~
- その10: バックエンド実装編④ ~レビューCRUD機能作成その２~
- その11: バックエンド実装編⑤ ~新規大学・学部・研究室作成機能作成~
- その12: バックエンド実装編⑥ ~大学検索機能作成~
- その13: バックエンド実装編⑦ ~大学・学部・研究室編集機能作成~
- その14: バックエンド実装編⑧ ~コメント投稿機能~
- その15: バックエンド実装編⑨ ~コメント編集・削除機能~
- その16: バックエンド実装編⑩ ~ブックマーク機能~
- その17: バックエンド実装編⑪ ~排他制御・トランザクション処理~
- その18: バックエンド実装編⑫ ~マイページ機能作成~
- その19: バックエンド実装編⑬ ~管理者アカウント機能作成~
- その20: バックエンド実装編⑭ ~通知機能作成~
- その21: バックエンド実装編⑮ ~ソーシャルログイン機能作成~