はじめに
私が行ったTypescript、Next.jsの学習方法をまとめます。
バージョン等
Windows10
Ubuntu 20.04.4 LTS
Homebrew 3.5.7
nodebrew v18.7.0
node v18.7.0
npm 8.15.0
エディタ…VSCode
typescript@4.7.4
eslint@8.21.0
husky@8.0.1
prettier@2.7.1
next@12.2.4
react@18.2.0
学習方法
1.Typescript、Next.jsについて調べる
複数のサイトを読んで、そもそもTypescript、Next.jsはどんな言語かについてざっくりと調べました。
参考記事
・TypeScriptを入門者向けに解説！JavaScriptとの違いや勉強法までわかりやすく
・Next.jsとはReactベースのフレームワーク！Nuxt.jsとの違いや特徴は？【入門編】
・Next.jsとは何か？何ができるのか？React開発のフレームワークを解説
2.学習する
「Typescript Next.js 勉強法」などで検索して他のエンジニアがどのように学習しているのか調べました。
私はTypeScript,Next.jsどちらもトラハックさんの動画で基本を学習しました。
トラハックさんの動画では環境構築から基本の文法がわかりやすく解説されているのでお勧めです。
これからTypeScriptを始める全ての人たちへ【日本一わかりやすいTypeScript入門】
【日本一わかりやすいNext.js入門】#1 講座の概要
基本を一通り行ったら、わからないことがあったときに適宜調べていきます。
基本情報や応用情報などの試験勉強にも共通しますが、基本をある程度学習したら、早めに手を動かすことが大事だと思います。
私は、インプットよりもアウトプットのほうがよく理解が進むので、なるべく早くアウトプットに移ることを意識してます。
3.その他 WindowsPCでLinux開発環境を構築する
私はWindowsPCで開発を行いましたが、トラハックさんの環境に合わせるためにUbuntuをダウンロードしてLinux環境で開発できるようにしました。
Linuxの環境を整えるために行ったことを以下の記事に記載しています。
windowsでUbuntu,homeblew,nodebrewをインストール、VSCodeでTypeScript環境を構築する
4.Next.jsにTypeScriptを導入する
Nect.jsの公式チュートリアルでもTypeScriptを導入する手順が記載してありますが、私は別の記事を参考にして行いました。
Next.jsにTypeScriptを導入してフロントの開発環境を構築する手順は後ほど別記事に記載します。