はじめに

　言語学習を終えた後、本格的なWebアプリを開発する前に、フロント、バックエンド、Dockerなど使用予定の技術をを組み合わせた簡単なデモアプリを作成しました。
　作成した理由は、いきなりすべての技術を組み合わせたアプリを開発すると、設定がごちゃごちゃになると考えたからです。
この記事では言語 + フレームワーク + UIフレームワークの環境構築について記載します。
　WindowsPCでUbuntuでLinux環境を構築して開発を行いました。Ubuntu等の環境設定方法は以下の記事に記載しました。
windowsでUbuntu,homeblew,nodebrewをインストール、VSCodeでTypeScript環境を構築する

バージョン等

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
@mui/material@5.10.0

環境構築フロントエンド

言語 + フレームワーク

　まずはフロントエンドの環境構築を行いました。
　私は、TypeScript + Next.jsだったので以下の記事を参考にしました。
　丁寧な解説でとてもわかりやすかったので、同じくTypeScript + Next.jsでフロントエンド開発をしたい方におすすめです。

【Next.js】環境構築を解説してみた【TS+ESlint+ Prettier+Husky】

　フォルダ構成によっては、以下のESLintのエラーがでると思います。

Parsing error: Cannot read file '.../tsconfig.json'.eslint

解決方法は以下の2つ記事を参考にしました。
VSCode 上での ESLint エラーの解消
 ESLintの設定をしたAngular 11のプロジェクトでVS CodeのExtension「ESLint」を使ってみた

　言語＋フレームワークの環境構築を行う前に、言語(TypeScript)とフレームワーク(Next.js)はそれぞれ個別で公式のチュートリアルなどで環境構築、学習することをおすすめします。
いろんな言語を経験して、慣れている方であれば言語+フレームワークから開発をはじめても問題ないかもしれませんが、
経験が少ない方はわからないことが多く、混乱すると思うので一つ一つ学習していきましょう。

UIフレームワーク

　cssデザインの作業を簡略化するために、UIフレームワークを導入しました。
　業務での使用経験があったため、UIフレームワークにはMaterial UIを採用しました。

　以下の記事を参考に導入しました。
Next.jsにMaterial UIを組み込んだ環境を作る

その他トラブルへの対処

　他にもホットリロードが有効にならないなどのトラブルがありましたが、そのときの参考記事は以下です。
Next.js でホットリロードが聞かない時の変更箇所
 [VSCode] TypeScriptにESLintを入れると Parsing error: “parserOptions.project” has been set for @typescript-eslint/parser. が表示される
 Next.jsが遅い
 .gitignore の変更が反映されない→キャッシュ削除する方法

gitへのリンク

フロントの環境構築のソースは以下のgitに公開しました。
https://github.com/akane-05/test-app/tree/feature-front

まとめ

　フロントの環境開発は、installするパッケージ、設定する項目が多く、時間がかかりました。
　nodeの依存関係がごちゃごちゃになり、はじめからやり直すこともありましたが、とても勉強になったので結果としては良かったと感じています。