JavaScript 【Next.js】loading.tsx・error.tsx・not-found.tsxでUXを整える
こんにちは、かつコーチです。前回は動的ルートとルートグループを使って、URLに応じたページ作りとフォルダ整理の方法を解説しました。ページの構造ができても、データ取得中の「白い画面」やエラー発生時の「真っ白なエラーページ」をそのまま放置すると...
ルーティング
JavaScript JavaScript 【Next.js】ルートグループ・動的ルートの書き方
こんにちは、かつコーチです。前回までで、page.tsx によるファイルベースルーティングと、layout.tsx を使った共通レイアウトの作り方を解説してきました。ここまでは「固定のURL」しか扱ってきませんでしたが、実際のアプリでは /...
JavaScript 【Next.js】layout.tsxで共通レイアウトを作る
こんにちは、かつコーチです。前回はpage.tsxを使ったファイルベースルーティングの基本を解説し、フォルダを増やすだけでページが増えることを確認しました。ページが増えてくると、今度は「どのページにも共通するヘッダーやフッターを、毎回コピペ...
JavaScript 【Next.js】ファイルベースルーティングの基本：page.tsxの役割
こんにちは、かつコーチです。前回はappディレクトリの中身を見ながら、page.tsxとlayout.tsxがどんな役割を持つファイルなのかを軽く紹介しました。今回はその中でもpage.tsxにフォーカスして、Next.jsの大きな特徴であ...
JavaScript 【Nuxt.js】ルートミドルウェアでページ遷移を制御する
こんにちは、かつコーチです。前回は.vueを使った動的ルート・ネストされたルートの書き方を解説しました。今回は「ログインしていないユーザーを弾く」など、ページ遷移そのものを制御するルートミドルウェアを扱います。「未ログインなのに管理画面が見...
JavaScript 【Nuxt.js】動的ルート・ネストされたルートの書き方
こんにちは、かつコーチです。前回はlayouts/を使った共通レイアウトの管理方法を解説しました。今回は一歩進んで「/posts/1のようにIDが変わるページ」を作る動的ルートを扱います。「ブログ記事の詳細ページってどう作るの」という悩みを...
JavaScript 【Nuxt.js】layouts/で共通レイアウトを管理する方法
こんにちは、かつコーチです。前回はpages/ディレクトリのファイルベースルーティングを解説しました。今回は、ヘッダーやフッターなど「全ページ共通の見た目」をまとめるlayouts/ディレクトリを扱います。「ページごとに同じヘッダーをコピペ...
JavaScript 【Nuxt.js】pages/ディレクトリでファイルベースルーティングを理解する
こんにちは、かつコーチです。前回、Nuxt.jsのプロジェクトを実際に作成しました。今回は、Nuxtの中でも特につまずきやすい「ルーティング」の仕組みを解説します。Vue Router（Vue.js標準のルーティングライブラリ）を自分で設定...
Laravel 【Laravel基礎学習7】Laravelのルーティングについて解説
こんにちは、かつコーチです。Laravelを扱う上で、Routingの理解は必須となります。今回はそのRoutingについて解説します。Laravelの**ルーティング（Routing）**は、ユーザーからのリクエストを適切なコントローラー...
Laravel 【Laravel基礎学習1】Laravelとは？
こんにちは、かつコーチです。Laravelは、PHPで作られたオープンソースのWebアプリケーションフレームワークです。非常に人気があり、使いやすさと機能の豊富さで多くの開発者に支持されています。以下、Laravelの主要な特徴とコンセプト...