この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の1回目です。
1回目は以下の説明を行います。
- 本ハンズオンの対象者
- 作成するメモアプリの説明
- 使用技術
- 学べること
- 学べないこと
- GitHubリポジトリ
複数回に分けて解説していきますので、この記事を読んで興味を持っていただけた方はぜひハンズオンを進めてみてください。
はじめに
本ハンズオンの全回分の買い切りプランはこちらに準備しております。
各回単体購入よりお得ですのでご検討ください。
本ハンズオンの対象者
このハンズオンは以下の方々を対象としています。
- 実務でLaravelの開発経験がある（API開発したことがあれば尚良い）
- TypeScript, React, Next.jsを触ったことがある（業務での経験がなくてもOK）
- フロントエンド＋API構成の開発をやってみたい
- 難易度的に実務経験2年以内くらいが目安です
つまり普段の業務でもTypeScript、React、Next.js、Laravelをバリバリ書いている方にとっては簡単すぎると感じられる内容のため本ハンズオンは不要です。
作成するメモアプリの説明
画面
このハンズオンで作成するメモアプリの画面は以下の3画面です。
ログイン画面
メモ一覧画面
メモ登録画面
機能
実装する大きな機能は3つの画面から想像はつきますが
- ログイン機能
- メモ一覧表示機能
- メモ登録機能
です。
その他にもカスタムフックを作成したり、フロントエンドでのバリデーションを実装したりするためなかなかボリューミーな内容になっています。
上記3つの機能を実装するためにLaravel SanctumやReact Hooks、Axios等の技術を使いますが、その説明は次の次の「学べること」で行います。
使用技術
本ハンズオンで扱う技術スタックをまとめます。
| key | value |
|---|---|
| フロントエンド | TypeScript, React, Next.js, Tailwind CSS |
| バックエンド | PHP, Laravel |
| インフラ | Docker |
| ライブラリ等 | Laravel Sanctum, Axios, Recoil, React-Hook-Form |
メイン技術のバージョンは下表のとおりです。
| skill | varsion |
|---|---|
| TypeScript | 4.5.5 |
| React | 17.0.2 |
| Next | 12.0.8 |
| PHP | 8.0.15 |
| Laravel | 8.75 |
そこも気になる方はこの記事の最後に載せているGitHubでコードを見てみてください。
学べること
このハンズオンで学べることを列挙します。
- フロントエンドとバックエンドが独立した構成のアプリケーションの開発
- Laravel Sanctumを使ったSPA認証
- React Hooksの使い方（useState, useEffect, useRouter等）
- ローカルstateの管理（useState使用）
- グローバルstateの管理（Recoilを使用）
- LaravelのAPI実装（ログイン、データ取得、データ登録）
- Axiosを使ったフロントエンドからのAPIへのリクエスト・レスポンスハンドリング
- API Resourceの使い方
- Laravelから返却されたバリデーションメッセージをNext.jsで表示する方法
- カスタムフックの作成
- ローディング画面の表示／非表示切り替え
- React-Hook-Formでのフロントエンドバリデーションの実装
学べないこと
先ほどとは逆に以下はこのハンズオンでは学べませんのでご了承ください。
- Docker環境の構築方法
- Tailwind CSSの導入・セットアップ
- Tailwind CSSを使ったスタイルの当て方
- デプロイ
- Laravelのサービスクラスの使い方
- テストコードの書き方
業務ではあまり行われないかもしれませんが、このハンズオンではAPIのロジックは複雑ではないので全てControllerに書きます。
本ハンズオンの購入について
本ハンズオンは有料記事としております。
ここまで読んでいただき、興味を持っていただけた方は購入を検討いただけますと幸いです。（ブログの運営費に充てます）
お得な全回分の買い切りプランはこちらから購入が可能です↓
記事単体での購入も可能です↓（各記事の単体購入は各記事で行えます）
コメント