ここ最近ずっと 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 を進めていきます。どうやらこのチュートリアルではいくつかの機能を持つ簡単な財務ダッシュボードを作っていくようです。

株式会社 MIXI を退職しました にあるようにすでに退職しておりますが前チームでソフトウェアエンジニアの中途採用をエンジニア側の責任者としてリードしておりそのときに何を考えて行なっていたかを書き下しておきます。 意外とソフトウェアエンジニアの採用に関する手法などに関して、特に面接の受ける側ではなくする側は何を考えて実践すべきかなどがまとまっておらず初めて面接官となった際にかなり困りました。そこで採用を進めるにあたり何をやっていくとよさそうかということを私自身の経験を踏まえてまとめておきたいと思います。あらたなソフトウェアエンジニアの採用を目指す方々の一助になれば幸いです。

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

6. Displaying Data with Props

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

7. Adding Interactivity with State

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