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

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

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

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

  • 実務でLaravelの開発経験がある(API開発したことがあれば尚良いですが無くても大丈夫)
  • TypeScript, React, Next.jsを触ったことがある(業務での経験がなくてもOK)
  • フロントエンド+API構成の開発をやってみたい
  • 難易度的に実務経験2年以内くらいが目安です

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

「フロントエンドは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名以上の方にご利用いただいております。

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

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

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

最後に

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

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

Udemyのオススメ講座はこちら↓

TypeScript+Next.js+Laravelハンズオンはこちら↓

デスク周りのオススメアイテムはこちら↓

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

大学院(機械工学)→重工業→エンジニア→プロダクトマネージャー(PdM)兼エンジニア

神戸で「つながる勉強会」を運営↓
https://tsunagaru-kobe.connpass.com/

神戸グルメのインスタアカウントを運用しています。

目次
閉じる