初めに
今回はタイトルの通り、僕が1週間程度で最低限Reactを使いこなしポートフォリオを作成できるようになるまでに行ったことをまとめようと思います！
Reactといってもクラスコンポーネントと関数コンポーネント(Hooks)がありますが、今回はHooksについてのみ触れます。
最終的なゴールは成果物を作ることで、Next.jsを利用します。
余談になりますが、なぜ1週間という短期間でキャッチアップする必要があったかと言いますと
転職活動の際に第一志望の企業様との最終面接を控えていたのですが体調不良で大幅に延期していただくことになってしまったため、誠意として急いで志望先企業の技術を使いポートフォリオを作成してお出ししたという感じです...笑
ちなみに僕のスペックは以下の通りです↓
- 最終学歴は美容専門卒
- 未経験からエンジニアに転職、3年目（歴2年3ヶ月程度）
- 業務で用いている技術は主にVue.js（Nuxt.js）,TypeScript
対象読者
フロントエンドの基本的な知識はあるがReactは未経験という方に一番適している記事かと思います。
自分が学習する際にClassベースの書き方とHooksの情報が入り乱れておりどこから手をつければ良いか迷ったため記事を書くに至ったのですが、本記事はHooksを速習したい方のみに向けています。
本題
基本的に自分は動画学習が好きなので、Youtubeのリンクが多めです📺
1. Reactの基礎
2. Next.jsの基礎
Reactに続きこちらもトラハックさんという方のYoutube講座です🐯
Next.jsの公式チュートリアルを元に作られているので英語が得意な方は公式チュートリアルでも良いかもしれません。
全部で10講座ありますが、Nextについてだけ学べば良い方であれば#8までご覧いただけば十分かと思います。
Vercelへのデプロイまで含んでいるので、短期間で成果物を作りたい自分にとても合っていました。
3. 成果物用に環境構築
こちらのYoutube講座はpart4までありますが今回はpart1のみで大丈夫です。
動画からは主にLinter周りのsetupを参考にしました。
該当するChapters📌
3:45 ESLint
9:17 Prettier
⚠️ TSを用いたい場合の注意点です！
動画には登場しませんが、下記の通りにすればTSの設定を自動で行ってくれます。（収録された時期にはオプションが無かったのかもですね🤔 ）
また動画の通りの設定にするとTSの型チェックが甘めになるので、厳格にしたい方はtsconfig.jsonにてstrict: true の指定をお忘れなく。
npx create-next-app@latest --ts
# or
yarn create next-app --typescript
余談ですが、dockerコンテナを立てたりmysqlを用意したりしたい場合はこちらがとても参考になりました😚
Docker+Express+MySQLの環境をつくる
4. 成果物作成に取り掛かろう！
ここからは上記の1.2.で学んだことを用いてお好きなwebアプリを作成してください！（丸投げ）
自分の場合は特にCSSの技術選定に迷いましたが、Vueでの実装でRSCSSとITCSSを組み合わせての書き方に慣れていたのでCSS Modulesにしました。
（ですが後で調べたら将来的に非推奨になるっぽい？です😂
参考：https://github.com/webpack-contrib/css-loader/issues/1050#:~:text=In%20the%20near%20future%20we%20want%20to%20deprecate%20CSS%20modules%2C ）
この辺りは自分も特に詳しくないので有識者の方にコメントいただけるととても嬉しいです...！
最後に
僕は公式ドキュメントみっちりとを読み込む精神力を持ち合わせていないタイプで、新しいことを学ぶ際にはとりあえず概要だけサクッと知りたい...と言った心理になります。
そのため、いつもYoutubeやUdemy、またQiita,Zennなどで速習できるような教材をいくつか組み合わせて学ぶのですが、もしかしたら同じ価値観の方の役に立てるのでは？?と考え執筆した次第です。
とはいえ、僕自身もまだまだReact初心者なので間違ったことを言っていた場合はぜひコメントください🙇♂️
またQiitaの記事も書き慣れていないので何か問題行為があればこちらもコメントいただけると幸いです、すぐに修正いたします。
最後までお読みいただきありがとうございました！！