TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン-1(概要説明)

この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の1回目です。

1回目は以下の説明を行います。

  • 本ハンズオンの対象者
  • 作成するメモアプリの説明
  • 使用技術
  • 学べること
  • 学べないこと
  • GitHubリポジトリ

複数回に分けて解説していきますので、この記事を読んで興味を持っていただけた方はぜひハンズオンを進めてみてください。

目次

はじめに

本ハンズオンの全回分の買い切りプランはこちらに準備しております。

各回単体購入よりお得ですのでご検討ください。

記事単体での購入は各記事から行うことができますので単体購入の方はそのままお進みください。

本ハンズオンの対象者

このハンズオンは以下の方々を対象としています。

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

TypeScript, React, Next.jsに関しては業務外で触ったことがない方でもこのハンズオンをやっていただいて問題ありませんが、初歩的な説明は割愛しますので適宜ご自身で調べながら進めていただくことになります。

このハンズオンで実装する機能は結構基本的なものであり、高度なロジックは実装しませんので予めご了承ください。(丁寧な説明を心がけています)

つまり普段の業務でもTypeScript、React、Next.js、Laravelをバリバリ書いている方にとっては簡単すぎると感じられる内容のため本ハンズオンは不要です。

作成するメモアプリの説明

画面

このハンズオンで作成するメモアプリの画面は以下の3画面です。

ログイン画面

ログイン画面

メモ一覧画面

メモ一覧画面

メモ登録画面

メモ登録画面

機能

実装する大きな機能は3つの画面から想像はつきますが

  • ログイン機能
  • メモ一覧表示機能
  • メモ登録機能

です。

その他にもカスタムフックを作成したり、フロントエンドでのバリデーションを実装したりするためなかなかボリューミーな内容になっています。

上記3つの機能を実装するためにLaravel SanctumやReact Hooks、Axios等の技術を使いますが、その説明は次の次の「学べること」で行います。

使用技術

本ハンズオンで扱う技術スタックをまとめます。

keyvalue
フロントエンドTypeScript, React, Next.js, Tailwind CSS
バックエンドPHP, Laravel
インフラDocker
ライブラリ等Laravel Sanctum, Axios, Recoil, React-Hook-Form
ハンズオンで扱う技術スタック

メイン技術のバージョンは下表のとおりです。

skillvarsion
TypeScript4.5.5
React17.0.2
Next12.0.8
PHP8.0.15
Laravel8.75
メイン技術のバージョン

Docker, Tailwind CSSに関して、既に開発環境と画面のマークアップは完了している状態からのハンズオンなのでこの2つの使い方的なことは扱いません。

そこも気になる方はこの記事の最後に載せているGitHubでコードを見てみてください。

学べること

このハンズオンで学べることを列挙します。

  • フロントエンドとバックエンドが独立した構成のアプリケーションの開発
  • Laravel Sanctumを使ったSPA認証
  • React Hooksの使い方(useState, useEffect, useRouter等)
  • ローカルstateの管理(useState使用)
  • グローバルstateの管理(Recoilを使用)
  • LaravelのAPI実装(ログイン、データ取得、データ登録)
  • Axiosを使ったフロントエンドからのAPIへのリクエスト・レスポンスハンドリング
  • API Resourceの使い方
  • Laravelから返却されたバリデーションメッセージをNext.jsで表示する方法
  • カスタムフックの作成
  • ローディング画面の表示/非表示切り替え
  • React-Hook-Formでのフロントエンドバリデーションの実装

学べないこと

先ほどとは逆に以下はこのハンズオンでは学べませんのでご了承ください。

  • Docker環境の構築方法
  • Tailwind CSSの導入・セットアップ
  • Tailwind CSSを使ったスタイルの当て方
  • デプロイ
  • Laravelのサービスクラスの使い方
  • テストコードの書き方

業務ではあまり行われないかもしれませんが、このハンズオンではAPIのロジックは複雑ではないので全てControllerに書きます。

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

本ハンズオンは有料記事としております。

ここまで読んでいただき、興味を持っていただけた方は購入を検討いただけますと幸いです。(ブログの運営費に充てます)

お得な全回分の買い切りプランはこちらから購入が可能です↓

記事単体での購入も可能です↓(各記事の単体購入は各記事で行えます)

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

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

この記事を書いた人

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

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

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

目次
閉じる