【全10回】TypeScript+Next.js+Laravelハンズオンで学ぼう

タイトルのとおり、TypeScript+Next.js+Laravelで簡易的なメモアプリを開発するハンズオンを執筆しました。

ハンズオンなので、実際に（かなり簡易的ですが）Webアプリケーションを開発しながらTypeScript、Next.js、Laravelをはじめとするいろいろな技術を学ぶことができます。

以下に当てはまる方はこのこのハンズオンで何かしら学べることがあるのではないかと思います。

本ハンズオンの難易度はそこまで高くないので、

「フロントエンドはTypeScript/React/Next.js、バックエンドはPHP/Laravelで開発してみたい！」

という方の導入としてはかなり良いと思います。

本ハンズオンではバックエンド（API）のフレームワークでLaravelを使いますが、Laravelの学習にオススメの書籍や教材はこちらにもレベル別でまとめています。

本ハンズオンでは以下の技術を使用しますので、関心・興味のある方はぜひこの記事を最後まで読んでほしいです。

TypeScript／React／Next.js
PHP／Laravel
Tailwind CSS
Docker
Laravel Sanctum／Axios／Recoil／React-Hook-Form

ハンズオンの中身の概要はこの後紹介する第1回に詳しく書いておりますのでご覧いただけると幸いです。

各回の内容

各回で扱う内容はこちらです。

お得な全回買い切りプランを用意しているので、購入をご希望の方は次の章までお進みください！

第1回

本ハンズオンの概要説明をします。
どのようなことが学べるか、どのような方にオススメかなど詳しく書いています。技術スタック等も記載しております。

第2回

ログイン画面を実装します。認証にはLaravelで軽量パッケージであるLaravel Sanctumを使用します。

第3回

メモ一覧画面を実装します。

第4回

メモ登録画面を実装します。

第5回

ログイン画面、メモ登録画面で入力値が正しくない場合にLaravelから返却されるバリデーションメッセージをNext.js側で表示する方法を解説しています。

第6回

Recoilという状態管理ライブラリを使って、グローバルstateを定義しアプリケーション全体で認証情報を管理できるようにします。

第7回

メモ登録画面のログインチェック処理をリファクタリングします。カスタムフックの作成も行います。

第8回

メモ登録画面同様、メモ一覧画面のログインチェック処理をリファクタリングします。

第9回

メモ一覧画面にアクセスしてメモデータを取得するまでの間にローディング画面を表示することでUX向上を図ります。

第10回

React-Hook-Formというライブラリを使ってフロントエンドのバリデーションを実装します。

本ハンズオンの購入について

本ハンズオンはcodoc（コードク）というサービスを使って有料記事としています。

各回の単体購入の場合だと200円／回で購入いただけますが、全回買切りプランもご用意しており、こちらの方が単体購入の”半額”で購入することができます。
（単体購入の場合は各記事のページで購入できます）

2022/6末追記
ありがたいことに本ハンズオンを85名以上の方にご利用いただいております。

買切りプランは以下のリンクから購入いただけます↓

購入いただいた方の感想を少しですが掲載します。（本人に許可を得ています）

ゆーたろーさん @shimotaroo のメモアプリ開発記事DONE!

Laravel / TypeScript / Next.js を使ったアプリ開発を学べました。
アプリ開発の流れを完結にまとめ下さっています。

まだ身についてない部分もあるので、個人開発をしつつ定着させていきます。

まじで勉強になったhttps://t.co/GmHuqTCufu

— だいし@35歳 現場監督 → エンジニア (@daishimanju) May 7, 2022

今更ですが、2月に買って良かったモノ紹介の動画をUPしました！https://t.co/dh6TSgvdVl pic.twitter.com/L0IVDMbmEl

— だっち / DatchLiveTv (@datchlive) March 12, 2022

ゆーたろーさん(@shimotaroo)が執筆されたハンズオン最後まで完了させてもらいました🙇‍♂

LaravelとNext.jsの組み合わせの情報はめちゃ貴重ですし、何より現役で開発してるエンジニアさんの思考が垣間見える記事なので本当にオススメです#駆け出しエンジニアと繋がりたい
https://t.co/clsCvNY1jR

— みぎさん👓 (@risingmigisan) February 26, 2022

yutaroさん(@shimotaroo)からTypeScript, Next.js, Laravelを使ったハンズオンをプレセントしてもらったけどまじ有益でした😭

僕くらいの実務1年ちょっとの人も勉強になるし、まだ実務経験ない人でもかなり説明が丁寧だからおすすめ🙌

てか、単純にこれ作るのすごいです笑https://t.co/X3jnPJkdDy

— たく (@amop_alor) July 22, 2022

本ハンズオンの収益はブログ運営費や子育て代に充てさせていただきます。

最後に

ここまで読んでいただき、本ハンズオンにご興味を持っていただけましたら第1回をご覧ください。

本ハンズオンに関するお問い合わせ、およびハンズオンを進める中でわからないことがあった場合は本ブログ運営者のTwitterのDMにてお願いします。（なお、DMはフォロワーさんのみ返信します）