タイトルのとおり、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の学習にオススメの書籍や教材はこちらにもレベル別でまとめています。
あわせて読みたい
【現役エンジニア厳選】Laravel学習にオススメの書籍・教材(レベル別)
プログラミング言語PHPのフレームワークであるLaravelを学習するための書籍・教材の中で、現役Laravelエンジニアの僕がオススメするものをご紹介します。 Laravelを勉強…
本ハンズオンでは以下の技術を使用しますので、関心・興味のある方はぜひこの記事を最後まで読んでほしいです。
TypeScript/React/Next.js
PHP/Laravel
Tailwind CSS
Docker
Laravel Sanctum/Axios/Recoil/React-Hook-Form
ハンズオンの中身の概要はこの後紹介する第1回に詳しく書いておりますのでご覧いただけると幸いです。
目次
各回の内容
各回で扱う内容はこちらです。
お得な全回買い切りプランを用意しているので、購入をご希望の方は次の章までお進みください!
第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回はメモ一覧画面でローディング画面を表示できるようにしました。 …
本ハンズオンの購入について
本ハンズオンはcodoc(コードク)というサービスを使って有料記事としています。
各回の単体購入の場合だと200円/回で購入いただけますが、全回買切りプランもご用意しており、こちらの方が単体購入の”半額”で購入することができます。
(単体購入の場合は各記事のページで購入できます)
2022/6末追記
ありがたいことに本ハンズオンを85名以上の方にご利用いただいております。
買切りプランは以下のリンクから購入いただけます↓
TypeScript+Next.js+Laravelで超簡…
TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン(全回分) の記事一覧
「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の全回分をまとめて購入いただけるプランです。
購入いただいた方の感想を少しですが掲載します。(本人に許可を得ています)
本ハンズオンの収益はブログ運営費や子育て代に充てさせていただきます。
最後に
ここまで読んでいただき、本ハンズオンにご興味を持っていただけましたら第1回をご覧ください。
あわせて読みたい
TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン-1(概要説明)
この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の1回目です。 1回目は以下の説明を行います。 本ハンズオンの対象者作成するメモアプ…
本ハンズオンに関するお問い合わせ、およびハンズオンを進める中でわからないことがあった場合は本ブログ運営者のTwitterのDMにてお願いします。(なお、DMはフォロワーさんのみ返信します)