JavaScript 【Next.js】ルートグループ・動的ルートの書き方
こんにちは、かつコーチです。前回までで、page.tsx によるファイルベースルーティングと、layout.tsx を使った共通レイアウトの作り方を解説してきました。ここまでは「固定のURL」しか扱ってきませんでしたが、実際のアプリでは /...
2023-09
JavaScript JavaScript 【Next.js】layout.tsxで共通レイアウトを作る
こんにちは、かつコーチです。前回はpage.tsxを使ったファイルベースルーティングの基本を解説し、フォルダを増やすだけでページが増えることを確認しました。ページが増えてくると、今度は「どのページにも共通するヘッダーやフッターを、毎回コピペ...
JavaScript 【Next.js】ファイルベースルーティングの基本：page.tsxの役割
こんにちは、かつコーチです。前回はappディレクトリの中身を見ながら、page.tsxとlayout.tsxがどんな役割を持つファイルなのかを軽く紹介しました。今回はその中でもpage.tsxにフォーカスして、Next.jsの大きな特徴であ...
JavaScript 【Next.js】プロジェクトのフォルダ構成を理解する（appディレクトリの中身）
こんにちは、かつコーチです。前回はcreate-next-appを使って、実際にNext.jsのプロジェクトを作成しました。作成されたフォルダを開くと、見慣れないファイルやディレクトリがたくさん並んでいて、戸惑った人も多いのではないでしょう...
JavaScript 【Next.js】create-next-appで環境構築する手順
こんにちは、かつコーチです。前回はNext.jsとは何か、Reactとの関係を解説しました。Next.jsが「Reactにルーティングやサーバーサイドレンダリングを足したフレームワーク」だとわかったところで、今回は実際に手を動かして、自分の...
JavaScript 【Next.js】Next.jsとは？Reactに「ルーティング・SSR」を足すフレームワーク
こんにちは、かつコーチです。これまでJavaScriptの基礎からTypeScript、React、Vue.jsまで、たくさんの記事を書いてきました。いよいよ今回から新しいシリーズとして、Next.jsというフレームワークを解説していきます...
JavaScript Vue×Piniaで簡単なTODOアプリを作ってみる
こんにちは、かつコーチです。前回は、Vueプロジェクトのディレクトリ構成のベストプラクティスについて解説しました。今回はVue.js編の最終回として、これまで学んできたComposition API・Pinia・型定義・設計の考え方を総動員...
JavaScript 【Vue】Vueプロジェクトのディレクトリ構成のベストプラクティス
こんにちは、かつコーチです。前回は、Vueアプリのパフォーマンスチューニングについて解説しました。今回は視点を変えて、「アプリが育ってきたときにどうディレクトリを構成するか」という設計のテーマを扱います。Vue CLIやViteでプロジェク...
JavaScript 【Vue】Vueアプリのパフォーマンスチューニング入門
こんにちは、かつコーチです。前回は、リアクティビティが効かない現象の原因と対処法を掘り下げました。今回は視点を変えて、「動くけど遅い」Vueアプリをどう改善していくか、パフォーマンスチューニングの入門編を扱います。やみくもに最適化するのでは...
JavaScript 【Vue】リアクティビティが効かない時の原因と対処法
こんにちは、かつコーチです。前回は、Vueでよく出るエラーとその解決法を初心者向けにまとめました。今回はもう一段掘り下げて、上級者でも意外とハマる「リアクティビティが効かない」という現象を扱います。エラーメッセージが出ないだけに原因調査が厄...
JavaScript 【Vue】Vueでよく出るエラーと解決法まとめ
こんにちは、かつコーチです。前回は、開発・ステージング・本番など環境ごとの環境変数管理（.env）について解説しました。今回からは実践Tips編として、Vue.jsを書いていると誰もが一度はぶつかる定番エラーを、原因と解決法つきでまとめてい...
JavaScript 【Vue】環境ごとの環境変数管理（.env）
こんにちは、かつコーチです。前回はNetlifyを使ったVueアプリのデプロイ手順を解説しました。デプロイができるようになると次に出てくるのが、「開発中と本番で、APIの向き先やキーを切り替えたい」という悩みです。今回は、Vueアプリで環境...
JavaScript 【Vue】VueアプリをNetlifyにデプロイする方法
こんにちは、かつコーチです。前回まではテスト編として、VitestやVue Test Utilsを使ったテストの書き方を解説してきました。今回からはデプロイ・インフラ連携編に入り、作ったVueアプリを実際にインターネット上に公開する方法を扱...
AWS 【AWS】AWSのAccess Deniedエラー、よくある原因と対処法まとめ
こんにちは、かつコーチです。AWSを触っていると、一度は必ずぶつかるのが「Access Denied」エラーです。私自身、S3もLambdaもEC2も、権限まわりで何度も手が止まった経験があります。この記事では、Access Deniedエ...
AWS 【AWS】AWS IAMポリシーの書き方基本(JSON構文とアクション指定)
こんにちは、かつコーチです。今回は、AWSのIAMポリシーを自分で書きたいという方向けに、基本のJSON構文を解説します。「コンソールでポチポチ設定はできるけど、JSONで書けと言われると手が止まる」という声をよく聞きます。この記事を読めば...
JavaScript 【Vue】コンポーネントのユニットテスト実践
こんにちは、かつコーチです。前回は、Vue Test Utilsの基本的な使い方として、propsやイベントのテストを解説しました。テスト編の最後となる今回は、フォームやAPI通信を含む、もう少し実務に近いコンポーネントを題材にユニットテス...
JavaScript 【Vue】Vue Test Utilsでコンポーネントをテストする
こんにちは、かつコーチです。前回は、Vitestの基本と、純粋な関数に対するテストの書き方を解説しました。今回は、Vue公式のテストユーティリティであるVue Test Utilsを使って、Vueコンポーネントそのものをテストする方法を扱い...
JavaScript 【Vue】VueUseで便利なComposableを活用する
こんにちは、かつコーチです。前回は、axiosを使ってAPIからデータを取得・表示する方法と、その処理をComposableに切り出すところまで解説しました。今回は、「よく使うComposableを毎回自作しなくても、すでに用意されているラ...
JavaScript 【Vue】axiosでAPIからデータを取得して表示する
こんにちは、かつコーチです。前回は「Piniaの実践：ストアの分割と設計」で、状態管理の設計パターンを扱いました。今回からは、実際にAPIと通信してデータを取得・表示する「データ連携編」に入っていきます。第一弾は、Vueアプリで定番のHTT...
JavaScript 【React】カスタムフックを自作してロジックを再利用する
こんにちは、かつコーチです。前回は「useCallbackで関数の再生成を防ぐ」を解説しました。useState や useEffect、useRef と一通り基本のフックを見てきたので、今回はそれらを組み合わせてカスタムフックを自作する方...