先日は AWS Amplify Gen2 のワークショップに取り組んでいましたが今日からはさらに別のワークショップとして Observability のワークショップ に取り組んでみます。このワークショップは日本語で書かれているので取り組みやすいですね。

ここ最近ずっと Next.js のチュートリアルに取り組んでいましたが一旦終わったので次なる学習として、AWS ワークショップシリーズから、AWS Amplify Gen2 を使ったウェブアプリケーション構築の学び方 を進めていきます。実は前職で Amplify は少し使っていたのですが当時はフロントエンドを敬遠していたので全く触らずに退職してしまいました。今回は Gen2 になった Amplify についてワークショップで学びながら理解を深めていきたいと思います。

前回は 2024 年のフロントエンド技術学び直し (7) にて Next.js のチュートリアルのうち、14 章まで終わりました。本日は 15 章から進めていきます。

15. Adding Authentication

この章ではダッシュボードに認証機能を追加していくようです。認証 (Authentication) と認可 (Authorization) の違いについてまず説明があります。

前回は 2024 年のフロントエンド技術学び直し (6) にて Next.js のチュートリアルのうち、11 章まで終わりました。本日は 13 章から進めていきます。

13. Handling Errors

前章では、Server Actions を使いデータを変更する方法を学びました。本章では JavaScript の try/catch 構文と Next.js API を使ってエラーを適切に処理する方法を学べるようです。

前回は 2024 年のフロントエンド技術学び直し (5) にて Next.js のチュートリアルのうち、10 章まで終わりました。本日は 11 章から進めていきます。

11. Adding Search and Pagination

/invoices ページに検索とページネーションを追加していくようです。読んでいくとどうやら、検索パラメータは URL にそのまま埋め込むようです。こうすることでユーザーが結果をブックマークしたり URL 自体を共有することもでき、さらにサーバーサイドレンダリングによりこれらをキャッシュしたり解析と追跡を行うことも容易になるようです。

前回は 2024 年のフロントエンド技術学び直し (4) にて Next.js のチュートリアルのうち、7 章まで終わりました。本日は 8 章から進めていきます。

8. Static and Dynamic Rendering

章のタイトル通りですが、レンダリングについて学べそうです。

前回は 2024 年のフロントエンド技術学び直し (3) にて Next.js のチュートリアルのうち、3 章まで終わりました。本日は 4 章から進めていきます。

4. Creating Layouts and Pages

Next.js はファイルシステムルーティングを使用していると書かれています。

前回は 2024 年のフロントエンド技術学び直し (2) にて React のチュートリアルを完了しました。今回は Next.js のチュートリアルを進めていきたいと思います。

Next.js のチュートリアル

Next.js の公式ドキュメントにある Learn Next.js を進めていきます。どうやらこのチュートリアルではいくつかの機能を持つ簡単な財務ダッシュボードを作っていくようです。

前回は 2024 年のフロントエンド技術学び直し (1) にて React のチュートリアルを進めました。今回も引き続きチュートリアルを進めていきます。

6. Displaying Data with Props

• props は引数を表していて、コンポーネントに渡すことができるようになっている。
• JavaScript の分割代入 の記法を書くことでパラメーター名に明示的な名前をつけることができる。
• JSX コード内で JavaScript の変数を使いたい場合は {} で囲めば JavaScript として評価される。

7. Adding Interactivity with State

状態とイベントハンドラーを用いて React がどのように対話性を追加するかをみてみます。

株式会社 MIXI を退職しました にあるように退職したおかげで 1 ヶ月弱の有休消化期間ができました。私にとってフロントエンド技術に関しては疎くいい加減この苦手意識を根絶したくフロントエンド技術について学び直します。