TypeScript、Next.js、Laravelを基礎から手を動かしながら学べるハンズオン教材を執筆しました。
2023/2 追記
とてもありがたいことに受講数140名を突破しました!!
2023/2時点の販売件数実際に簡易的なWebアプリケーションを開発しながらTypeScript、Next.js、Laravelをはじめとするいろいろな技術を学ぶことができます。
本ハンズオンで扱う技術スタックはこちら
- フロントエンド:TypeScript/React/Next.js
- バックエンド:PHP/Laravel
- CSSフレームワーク:Tailwind CSS
- 開発環境:Docker
- その他:Laravel Sanctum/Axios/Recoil/React-Hook-Form
目次
本ハンズオンの作成者
フルリモート&フルフレックスの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の学習にオススメの書籍や教材はこちらにもレベル別でまとめています。
あわせて読みたい
【現役エンジニア厳選】Laravel学習にオススメの書籍・教材(レベル別)
プログラミング言語PHPのフレームワークであるLaravelを学習するための書籍・教材の中で、現役Laravelエンジニアの僕がオススメするものをご紹介します。 Laravelを勉強…
ハンズオンの中身の概要はこの後紹介する第1回に詳しく書いておりますのでご覧いただけると幸いです。
本ハンズオンの購入について
本ハンズオンはボリュームがそこそこ多いので、全10回に分けています。
各回を個別に購入いただくことも可能ですが、個別購入よりお得な「全回買い切りプラン」を用意しています。
買切りプランはこちら↓
TypeScript+Next.js+Laravelで超簡…
TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン(全回分) の記事一覧
「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の全回分をまとめて購入いただけるプランです。
本ハンズオンはcodoc(コードク)というサービスを使って販売しています。
本ハンズオンはMac(M1)で動作検証を行っております。Windows PCやIntelチップのMacだと環境構築でエラーが出る可能性があります。これまでに受講いただいた方々が環境構築時のエラー対応に関して情報をまとめてくださっていますが、それ以外のエラーに関しては手元にそれらの端末がないのでこちらでは対応できません。申し訳ありませんが、ご了承ください。
受講者の声
本ハンズオンを受講いただいた方の感想を少しですが掲載します。(本人に許可を得ています)
各回の内容
この章では全10回でどのようなことを扱うのかを書いています。
第1回
本ハンズオンの概要説明をします。
どのようなことが学べるか、どのような方にオススメかなど詳しく書いています。技術スタック等も記載しております。
あわせて読みたい
TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン-1(概要説明)
この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の1回目です。 1回目は以下の説明を行います。 本ハンズオンの対象者作成するメモアプ…
第2回
ログイン画面を実装します。認証にはLaravelで軽量パッケージであるLaravel Sanctum
を使用します。
あわせて読みたい
TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン-2(ログイン機能)
この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の2回目です。 1回目はハンズオンの概要説明をまとめています。 2回目以降は機能実装に…
第3回
メモ一覧画面を実装します。
あわせて読みたい
TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン-3(メモ一覧画面)
この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の3回目です。 2回目はログイン機能の実装を行いました。 3回目はメモ一覧画面の実装を…
第4回
メモ登録画面を実装します。
あわせて読みたい
TypeScript+Next.js+Laravelで簡易的なメモアプリ開発ハンズオン-4(メモ登録機能)
この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の4回目です。 3回目はメモ一覧表示機能を説明しました。 4回目の本記事ではメモ登録機…
第5回
ログイン画面、メモ登録画面で入力値が正しくない場合にLaravelから返却されるバリデーションメッセージをNext.js側で表示する方法を解説しています。
あわせて読みたい
TypeScript+Next.js+Laravelで簡易的なメモアプリ開発ハンズオン-5(バリデーションメッセージ表示)
この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の5回目です。 4回目ではメモ登録機能を実装し、このハンズオンで扱うメイン機能の実装…
第6回
Recoilという状態管理ライブラリを使って、グローバルstateを定義しアプリケーション全体で認証情報を管理できるようにします。
あわせて読みたい
TypeScript+Next.js+Laravelで簡易的なメモアプリ開発ハンズオン-6(Recoilを使った認証情報の保持)
この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の6回目です。 5回目ではLaravel(API)から返却されたバリデーションメッセージをNext…
第7回
メモ登録画面のログインチェック処理をリファクタリングします。カスタムフックの作成も行います。
あわせて読みたい
TypeScript+Next.js+Laravelで簡易的なメモアプリ開発ハンズオン-7(認証周りのリファクタリング1)
この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の第7回です。 第6回はRecoilという状態管理用ライブラリを使って、グローバルstateを…
第8回
メモ登録画面同様、メモ一覧画面のログインチェック処理をリファクタリングします。
あわせて読みたい
TypeScript+Next.js+Laravelで簡易的なメモアプリ開発ハンズオン-8(認証周りのリファクタリング2)
この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の第8回です。 第7回はメモ登録画面のログインチェック周りの処理のリファクタリングと…
第9回
メモ一覧画面にアクセスしてメモデータを取得するまでの間にローディング画面を表示することでUX向上を図ります。
あわせて読みたい
TypeScript+Next.js+Laravelで簡易的なメモアプリ開発ハンズオン-9(ローディング画面の実装)
この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の第9回です。 本ハンズオンは全10回なのでいよいよ大詰めです。 もう少しなので頑張っ…
第10回
React-Hook-Formというライブラリを使ってフロントエンドのバリデーションを実装します。
あわせて読みたい
TypeScript+Next.js+Laravelで簡易的なメモアプリ開発ハンズオン-10(React-Hook-Formの導入)
この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の第10回です。 第9回はメモ一覧画面でローディング画面を表示できるようにしました。 …
最後に
ここまで読んでいただき、本ハンズオンにご興味を持っていただけましたら第1回をご覧ください。
あわせて読みたい
TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン-1(概要説明)
この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の1回目です。 1回目は以下の説明を行います。 本ハンズオンの対象者作成するメモアプ…
本ハンズオンに関するお問い合わせ、およびハンズオンを進める中でわからないことがあった場合は本ブログ運営者のTwitterのDMにてお願いします。(なお、DMはフォロワーさんのみ返信します)
コメント