Next.jsアプリの作成に必要な「もの／こと」

Next.jsに必要な「もの／こと」について記載します。
私は、組み込み系開発からWeb系にジョブチェンジしました。
フロントエンドって何？というところからスタートしてます。
アプリの開発は、自分のコードがすぐに反映されて動きをみることが出来るので楽しいです。
夢は、Next.jsアプリで娘が喜ぶWebアプリを作ることです。

---

Tools

• VSCode
• Node.js
• PLAYGROUND
• Figma
• chrome
• chrome dev tool

---

Skills

• HTML
• CSS
• JavaScript
• TypeScript
• React.js
• React.js - JSX
• Next.js
• web development
• 英語

---

Learning guide

• React.js&Next.js超入門 第2版
• はじめてつくるReactアプリ with TypeScript （React + TypeScript入門シリーズ）
• サクッと始めるウェブデザイン Figma

---

My learning story

1. HTMLのスキルアップ。
2. CSSのスキルアップ。
3. JavaScriptのスキルアップ。
4. TypeScriptの入門。
5. React.jsの入門。
6. Next.js（ver.12）の入門。
7. TypeScript/JavaScript/JSX/HTMLの見分けがつかずとん挫する。
8. JavaScriptを再入門。
9. TypeScriptを再入門。
10. React.jsを再入門
11. JSXの入門
12. chromeのdevelop toolの使い方
13. Next.js（ver.12）の再入門
14. Next.js（ver.13）の入門

stumble

• 用語の意味が分からない。
• Reactの無限ループ地獄。
• Next.jsのv12／v13の差異（気軽にv13にupしたら、自作アプリが動かなくなった）。
• Stylingはどれが最良なのかわからない。

impressions

• 英語は必要（日本語に翻訳するのがメンドイ）。
• CSSのセンスのなさに絶望した。
• デジタル庁のWebサイトは素晴らしいことに気が付いた。
• アプリを作るのは楽しい。