初めまして、くみちょうです。

研究でwebアプリの開発をする事になったのですが、メンバーにweb関連の技術初めて触る子が居たので短時間で概要を掴ませるためのまとめを作りました。高専3~4年想定で書いているので基礎的なPC知識や用語はすっ飛ばします。

最後にやることをリストにまとめているのですが、止むを得ない突貫工事なので時間がある方はリストの合間を埋めるように動画やドキュメントを探してじっくり学ぶのをおすすめします。

何から始めるべきか

私自身そうだったのですが、Progate、CODEPREPあたりから入るのが個人的におすすめです。

まずはHTML&CSS、ES5のJavascriptを学び、ES6、React、Node.jsの順番でProgateを進めた後に自分のPC環境の構築をしてReactのチュートリアルに進みましょう。(Progateはgitの講座もやっておく事をおすすめします!)

注意
チュートリアルは基本公式の物を読むべきですが、Reactのチュートリアルはclassという今はメジャーでない書き方で紹介されているので、他の方の記事や動画を探すのが良いと思われます。
個人的おすすめはトラハックさんのReact講座です。

PCの環境構築って何したらいいん

macは環境構築めちゃ楽です。これを読んでください。

問題はWindowsです。Powershellで開発する時にはPowershellコマンドを使わないといけないのですが、これがとても使いにくいのです。そこで、WSL(Windows Subsystem for Linux)という、windowsの中でLinuxを立ち上げて使えるようにする為のシステムをインストールします。

と言っても私はWSL2のインストールや設定は先輩にめちゃくちゃ助けてもらっていたのでほぼやり方を覚えていません。Microsoftの公式ドキュメントや記事を探してみてください。

無事にWSL2がインストールできたら、こちらを見ながら、node.jsのインストール作業に進みましょう。
インストールが終わったら、

node -v

npm -v

と打ってv16.14.2や8.5.0などのインストールされたバージョンが出てくれば完了です。

あとはチュートリアルや記事に沿って自分の環境で実際にコードを書いてみましょう！！！！

次にすべき事

次は、TypescriptというJavascriptに型を付けられるようにした言語を学びましょう。
おすすめはサバイバルTypescriptです。

Typescriptの概要を掴んだら、Next.jsのチュートリアルを読むのをおすすめします。
研究ではNext.jsを使う予定なのでここまで勉強すればおそらく大丈夫(?)でしょう。

マジで時間無い人向けまとめ

ProgateのHTML&CSS初級編レッスン1
CODEPREPのJavascript講座
ProgateのJavascript(ES6)レッスン1
ProgateのGit講座
node.js、npmのセットアップ
Reactのチュートリアル
サバイバルTypescript
(作って学ぶTypescriptの章へ進む前に"npm install -g yarn"を実行してyarnをインストールしておいてください)
Next.jsチュートリアル

あとは各自必要なフレームワークやライブラリは自分でドキュメントを読んだりして足りない部分の知識を補って行ってください。