Laravel9ニュースサイト①概要【Laravel9×TailwindCSS】

こんな疑問を持っている人には特におすすめな記事です。

この記事ではいくつかの記事に分けてLaravel9でニュースサイトを作ります。

難易度も実務に近いレベルで作っているので、レベルアップしたい方はぜひ挑戦してみてください〜

もしハマったところなのがあれば、記事下のコメントに相談いただければ回答しますので〜(たぶん)

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

ニュースサイトLarattoの概要

これから作っていくニュースサイト「Laratto」の概要をちょっとお話ししておきますね。

Larattoは、Laravel9で作るニュースサイトとイメージしてください。

なんでLarattoなの？

某ニュースサイトからインスパイア受けました。ただそれだけです。

最初、LaraNewsしようと思ったのですが、検索かけたら同じ名前のものがすでにあったので、「ほな、Larattoにしよか〜」で決まりました。

Larattoの機能

Larattoの機能はこんな感じ。

総合トップ

ログイン後

マイページ

ユーザー新規登録・ログイン

記事の投稿リスト

記事の投稿

バリデーションに引っかかった時

記事の詳細

マイページ

総合トップ

記事の編集・更新・削除

記事のゴミ箱

Trashをクリックすると記事がゴミ箱に移動

ゴミ箱に移動した記事は復元したり、完全に削除したりできる。

記事の予約公開

予約公開-登録

予約公開-更新

開発環境

開発環境はこんな感じです。

環境	バージョン
MacBook Air	Monterey 12.2.1
Docker	20.10.7
PHP	8.1
composer	2.2.9
Laravel	9.5.1
apache	2.4
MySQL	8.0
phpmyadmin	–
npm	8.5
node	12.22.11
React	17
TailwindCSS	3
Laravel/breeze	ログイン認証機能で使用 ※Laravel8以降の場合に使用可。 Laravel6や7系はreact –authとか使います。

DB設計

全体で6テーブルになります。

• Users(ユーザー)
• Posts(投稿)
• Categories(カテゴリー)
• Reservation_posts(予約投稿)
• Trashes(ゴミ箱)
• Favorites(いいね)

Usersテーブルは、Laravel9インストールした時の既存のものを使います。

Postsテーブル

カラム名	型	NULL	デフォルト値	詳細
id	bigint unsigned PK	×		投稿ID
user_id	bigint unsigned FK	×		ユーザーID
category_id	bigint unsigned FK	○		カテゴリーID
title	varchar(255)	×		タイトル
body	text	○		本文
publish_flg	smallint	×	0	0:下書き保存 1:公開済み 2:予約公開
view_counter	integer	○	0	アクセス数カウンター
favorite_counter	integer	○	0	お気に入りカウンター
delete_flg	boolean	×	0	0:表示 1:論理削除
created_at	timestamp	○		作成日
updated_at	timestamp	○		更新日

Categoriesテーブル

カラム名	型	NULL	詳細
id	bigint unsigned PK	×	カテゴリーID
category_name	varchar(255)	×	カテゴリー名
created_at	timestamp	○	作成日
updated_at	timestamp	○	更新日

Reservation_postsテーブル

カラム名	型	NULL	詳細
id	bigint unsigned PK	×	予約投稿ID
user_id	bigint unsigned FK	×	ユーザーID
post_id	bigint unsigned FK	×	投稿ID
reservation_date	varchar(16)	×	予約時間
reservation_time	varchar(16)	×
created_at	timestamp	○	作成日
updated_at	timestamp	○	更新日

TailwindCSSの参考UIコンポーネント

TailwindCSSでフロント部分を整えるにあたり、一からレイアウトを考えるのは非常にだるいです。

世の中にはUIコンポーネントを提供してくれるサイトがあるので存分にそれを活用してレイアウトをサクッと作りました。

スーパーいい感じになるので、おすすめですよ〜

• TailwindCSS公式
• tailblocks
• tailwind-kit
• Meraki UI
• SVGアイコン heroicons

次の記事から、環境構築などをしていくので、少しハードモードになるかもですがあなたはやればできる人！

途中、頑張れなくなったらなかやまきんに君みたいに「パワぁぁぁーー！！！ﾊッ」ってやれば大丈夫です。

>>>②環境構築へ進む

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する