Udemyのオススメ講座はこちら 詳細を見てみる

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

  • URLをコピーしました!

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

2022/9 追記
とてもありがたいことに110名以上の方に受講いただいています!!

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

目次

本ハンズオンの作成者

フルリモート&フルフレックスのIT企業でプロダクトマネージャー(PdM)をしているゆーたろー(@shimotaroo)です。

業務外では本ブログの運営の他にもITスタートアップで開発の副業したり、フォロワー1万人超えのグルメインスタをしたり、Twitterで情報発信したり、ノーコード・ローコードを触ったり、色々しています。

本ハンズオンの対象者

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

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

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

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

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

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

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

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

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

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

買切りプランはこちら↓

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

受講者の声

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

各回の内容

この章では全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はフォロワーさんのみ返信します)

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

ブログを開設するなら「SWELL」が絶対オススメ!

この記事を書いた人

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

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

神戸グルメのインスタアカウントを運用しています↓
https://www.instagram.com/kobe_gourmet_life/

登壇実績↓
https://speakerdeck.com/shimotaroo

コメント

コメントする

目次