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

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

  • URLをコピーしました!

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

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

2023/2時点の販売件数

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

目次

本ハンズオンの作成者

フルリモート&フルフレックスのSassスタートアップでプロダクトマネージャー(PdM)をしているゆーたろー(Twitter)です。

このブログで記事を書いたり、フォロワー1.3万人超えのグルメインスタをしたり色々しています。

1児のパパです。

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

本ハンズオンの対象者

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

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

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

「フロントエンドは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はフォロワーさんのみ返信します)

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

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

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

この記事を書いた人

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

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

コメント

コメントする

目次