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

TypeScript、Next.js、Laravelを基礎から手を動かしながら学べるハンズオン教材を執筆しました。

2023/2 追記
とてもありがたいことに受講数140名を突破しました！！

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

本ハンズオンの作成者

現在はプロダクトマネージャー（PdM）として働いていますが、2020/4〜2022/3まではエンジニアとしてTypeScript, React, Next.js, PHP, Laravelでゴリゴリ開発していました。

本ハンズオンの対象者

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

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

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

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

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

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

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

本ハンズオンはボリュームがそこそこ多いので、全10回に分けています。

各回を個別に購入いただくことも可能ですが、個別購入よりお得な「全回買い切りプラン」を用意しています。

買切りプランはこちら↓

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

本ハンズオンはMac（M1）で動作検証を行っております。Windows PCやIntelチップのMacだと環境構築でエラーが出る可能性があります。これまでに受講いただいた方々が環境構築時のエラー対応に関して情報をまとめてくださっていますが、それ以外のエラーに関しては手元にそれらの端末がないのでこちらでは対応できません。申し訳ありませんが、ご了承ください。

受講者の声

本ハンズオンを受講いただいた方の感想を少しですが掲載します。（本人に許可を得ています）

各回の内容

この章では全10回でどのようなことを扱うのかを書いています。

第1回

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

第2回

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

第3回

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

第4回

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

第5回

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

第6回

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

第7回

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

第8回

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

第9回

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

第10回

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

最後に

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

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