タイトルのとおり、本ブログでTypeScript+Next.js+Laravelで簡易的なメモアプリを開発するハンズオンを執筆しました。
内容的には初歩的ですので、
- フロントエンド：TypeScript/React/Next.js
- バックエンド：PHP/Laravel
のWebアプリケーションの開発に興味がある方にとってちょうど良い導入になる教材です。
他にもLaravel Sanctum、Recoil、Axios等のライブラリも使います。
本ハンズオンではバックエンドのフレームワークでLaravelを使いますが、Laravelの学習にオススメの書籍や教材はこちらにもレベル別でまとめています。
本ハンズオンでは以下の技術を使用しますので、関心・興味のある方はぜひこの記事を最後まで読んでほしいです。
各回の内容
各回で扱う内容はこちらです。
第1回
本ハンズオンの概要説明をします。どのようなことが学べるか、どのような方にオススメかなど詳しく書いています。技術スタック等も記載しております。
第2回
ログイン画面を実装します。認証にはLaravel Sanctumを使用します。
第3回
メモ一覧画面を実装します。
第4回
メモ登録画面を実装します。
第5回
ログイン画面、メモ登録画面で入力値が正しくない場合にLaravelから返却されるバリデーションメッセージをNext.js側で表示する方法を解説しています。
第6回
Recoilという状態管理ライブラリを使って、グローバルstateを定義しアプリケーション全体で認証情報を管理できるようにします。
第7回
メモ登録画面のログインチェック処理をリファクタリングします。カスタムフックの作成も行います。
第8回
メモ登録画面同様、メモ一覧画面のログインチェック処理をリファクタリングします。
第9回
メモ一覧画面にアクセスしてメモデータを取得するまでの間にローディング画面を表示することでUX向上を図ります。
第10回
React-Hook-Formというライブラリを使ってフロントエンドのバリデーションを実装します。
本ハンズオンの購入について
本ハンズオンはcodoc（コードク）というサービスを使って有料記事としています。
各回の単体購入の場合だと100円／回で購入いただけますが、全回買切りプランもご用意しており、こちらの方が単体購入よりお得です。（単体購入の場合は各記事のページで購入できます）
買切りプランは以下のリンクから購入いただけます↓
最後に
ここまで読んでいただき、本ハンズオンにご興味を持っていただけましたら第1回をご覧ください。
本ハンズオンに関するお問い合わせ、およびハンズオンを進める中でわからないことがあった場合は本ブログ運営者のTwitterのDMにてお願いします。
