![](https://www.kamome-susume.com/wp-content/uploads/2020/06/101166.jpg)
「Laravel9でアプリを作成したいなぁ〜」
「LaravelでTodoアプリとかは作ったけど、ちょっと難易度高いものにも挑戦したいな〜」
「ReactとかTailwindCSSとか流行ってるから、それらを組み合わせてLaravelのアプリ作りたいな〜」
こんな疑問を持っている人には特におすすめな記事です。
この記事ではいくつかの記事に分けてLaravel9でニュースサイトを作ります。
難易度も実務に近いレベルで作っているので、レベルアップしたい方はぜひ挑戦してみてください〜
もしハマったところなのがあれば、記事下のコメントに相談いただければ回答しますので〜(たぶん)
![](https://www.kamome-susume.com/wp-content/uploads/2020/12/a9e887bfa478fbd8a741e96287362251-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2020/12/a9e887bfa478fbd8a741e96287362251-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2021/07/041ddc3101b587b3e24a9ce21e659fe7-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2021/07/041ddc3101b587b3e24a9ce21e659fe7-300x158.webp)
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
ニュースサイトLarattoの概要
これから作っていくニュースサイト「Laratto」の概要をちょっとお話ししておきますね。
Larattoは、Laravel9で作るニュースサイトとイメージしてください。
Larattoの機能
Larattoの機能はこんな感じ。
- 総合トップ
- マイページ
- ユーザー新規登録・ログイン・ログアウト
- 記事の投稿リスト
- 記事の投稿(下書き保存・公開・予約公開)
- 記事の詳細
- 記事の編集・更新・削除
- 記事のゴミ箱
- 記事を予約公開する
総合トップ
![](https://www.kamome-susume.com/wp-content/uploads/2022/04/8807d309f8cfe6d754feb4eff3b5cfde-1-1024x481.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2022/04/8807d309f8cfe6d754feb4eff3b5cfde-1-1024x481.webp)
ログイン後
![](https://www.kamome-susume.com/wp-content/uploads/2022/04/25915673e4d917253af0be004699362c-1024x443.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2022/04/25915673e4d917253af0be004699362c-1024x443.webp)
マイページ
![](https://www.kamome-susume.com/wp-content/uploads/2022/04/c51f939600efeb58cba5b170b31b6d6c-1024x408.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2022/04/c51f939600efeb58cba5b170b31b6d6c-1024x408.webp)
ユーザー新規登録・ログイン
![ユーザー登録完成図](https://www.kamome-susume.com/wp-content/uploads/2022/04/9e8e941fbdd7e8293ec13113f4f6e2c2-1024x496.webp)
![ユーザー登録完成図](https://www.kamome-susume.com/wp-content/uploads/2022/04/9e8e941fbdd7e8293ec13113f4f6e2c2-1024x496.webp)
![Larattoログイン画面](https://www.kamome-susume.com/wp-content/uploads/2022/04/898dd9d270bee8787f7fd06234b016c2-1024x446.webp)
![Larattoログイン画面](https://www.kamome-susume.com/wp-content/uploads/2022/04/898dd9d270bee8787f7fd06234b016c2-1024x446.webp)
記事の投稿リスト
![マイページ投稿リスト](https://www.kamome-susume.com/wp-content/uploads/2022/04/dac17768368c1fd921b6428bb2932c15-1024x150.webp)
![マイページ投稿リスト](https://www.kamome-susume.com/wp-content/uploads/2022/04/dac17768368c1fd921b6428bb2932c15-1024x150.webp)
記事の投稿
![記事投稿画面](https://www.kamome-susume.com/wp-content/uploads/2022/04/42096b97b4ecde91449362a44ed75aa4-1024x242.webp)
![記事投稿画面](https://www.kamome-susume.com/wp-content/uploads/2022/04/42096b97b4ecde91449362a44ed75aa4-1024x242.webp)
バリデーションに引っかかった時
![記事投稿バリデーション](https://www.kamome-susume.com/wp-content/uploads/2022/04/dfae2aad9ca094204f36094e5e805675-1024x256.webp)
![記事投稿バリデーション](https://www.kamome-susume.com/wp-content/uploads/2022/04/dfae2aad9ca094204f36094e5e805675-1024x256.webp)
記事の詳細
マイページ
![マイページの記事詳細](https://www.kamome-susume.com/wp-content/uploads/2022/04/cca8257c9b2b8b93a640c75b69973584-1024x725.webp)
![マイページの記事詳細](https://www.kamome-susume.com/wp-content/uploads/2022/04/cca8257c9b2b8b93a640c75b69973584-1024x725.webp)
総合トップ
![総合トップ記事詳細](https://www.kamome-susume.com/wp-content/uploads/2022/04/eda07662bbccfbe8c84814851d3d3c56-1024x603.webp)
![総合トップ記事詳細](https://www.kamome-susume.com/wp-content/uploads/2022/04/eda07662bbccfbe8c84814851d3d3c56-1024x603.webp)
記事の編集・更新・削除
![](https://www.kamome-susume.com/wp-content/uploads/2022/05/6cb17a9243fb6b0ae266c46fc747fa64-1024x201.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2022/05/6cb17a9243fb6b0ae266c46fc747fa64-1024x201.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2022/05/103b53260af28ad47179e6ce7e1be193-1024x204.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2022/05/103b53260af28ad47179e6ce7e1be193-1024x204.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2022/05/2b621f00bcf4a5ccc0293f16e5a7442e-1024x234.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2022/05/2b621f00bcf4a5ccc0293f16e5a7442e-1024x234.webp)
記事のゴミ箱
Trashをクリックすると記事がゴミ箱に移動
![](https://www.kamome-susume.com/wp-content/uploads/2022/05/3c0fec47fc7b78e49f77e4f00440e623-1024x123.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2022/05/3c0fec47fc7b78e49f77e4f00440e623-1024x123.webp)
ゴミ箱に移動した記事は復元したり、完全に削除したりできる。
![](https://www.kamome-susume.com/wp-content/uploads/2022/05/ec299567a21b0459fb64ad1f668e2b59-1024x128.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2022/05/ec299567a21b0459fb64ad1f668e2b59-1024x128.webp)
記事の予約公開
予約公開-登録
![](https://www.kamome-susume.com/wp-content/uploads/2022/05/ce29942a4ecde36d62195d5de6310a3c-1024x659.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2022/05/ce29942a4ecde36d62195d5de6310a3c-1024x659.webp)
予約公開-更新
![](https://www.kamome-susume.com/wp-content/uploads/2022/05/1dfd0f1f2045cb67f8473f48f917b015-1024x743.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2022/05/1dfd0f1f2045cb67f8473f48f917b015-1024x743.webp)
開発環境
開発環境はこんな感じです。
環境 | バージョン |
---|---|
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コンポーネントを提供してくれるサイトがあるので存分にそれを活用してレイアウトをサクッと作りました。
スーパーいい感じになるので、おすすめですよ〜
次の記事から、環境構築などをしていくので、少しハードモードになるかもですがあなたはやればできる人!
途中、頑張れなくなったらなかやまきんに君みたいに「パワぁぁぁーー!!!ハッ」ってやれば大丈夫です。
>>>②環境構築へ進む
![](https://www.kamome-susume.com/wp-content/uploads/2020/12/a9e887bfa478fbd8a741e96287362251-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2020/12/a9e887bfa478fbd8a741e96287362251-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2021/07/041ddc3101b587b3e24a9ce21e659fe7-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2021/07/041ddc3101b587b3e24a9ce21e659fe7-300x158.webp)
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
コメント