この記事の目的

今回はちょっと前までVS codeもインストールしておらずターミナルも触ったことないのに、Mac M3チップメモリ16Gを買うという宝の持ち腐れだった私が、必要に迫られ泣く泣くReactを初めて触ってみた過程を記録する。
目的は、これから超初心者を教えるエンジニアの皆さんに、「あ、本当の初心者はこんなところで躓くのか！」と思っていただくことだ。もちろん、私と同じ初心者も「このレベルでもまずはなんとかチュートリアルの完遂ができるんんだな！私もできるかも！」と思っていただければ幸いである。

初心者がReactに立ち向かうことになった経緯

チームでAWSをやってみよう！となり、このハンズオンをやってみた。

このハンズオン、宇宙一わかりやすかった。
初心者すぎてAWSの「色んなアプリを呼んでくる」という概念がわからなかったのだが、なんとなく全体像の理解ができた。チームでも「これはやって良かった！」と満場一致。

その後私はフロントエンドを担当することになり、AWS Amplifyを使いfigmaからReactを経由してAWS AmplifyでWebアプリ化するプロセスを踏むことになる。

どのqiitaを参考にしたか忘れたが、こんな感じの。

しかし！！Reactが訳わからなすぎて結構つまずいた！！

さらに、v0でAIを使ってUIを作り、そのままReact appのコードが出るからテストレベルならフロントエンド簡単に作れるやん！となり。

これはちょっとReactを触らないといけなそうだぞ、となった次第だ。

参考にした動画

今回はこちらの動画を参考に、動画をみながら全く同じことをハンズオンでやってみた。

まずこの動画、めちゃくちゃわかりやすい。
この場を借りてこの方に心からのお礼を申し上げたい。
reactのメリットも説明されていて、なんとなくわかった気がした。

では順を追って振り返っていく。

ファースト躓きポイント

まず冒頭

VS code でターミナルを起動してnodeのバージョンを確認する。
はい、もうすでにわからない。
VS codeは開けるけど、そこでなんのファイルを開くの！？テキトーって何？
とりあえずmacのターミナルを開いてnodeのバージョンを確認。
すると入って無さそうだったので、nodeのインストール方法を調べる。
nodeをインストールするにはbrewをインストールする必要があるらしい。ドユコトー
とりあえずなんとか２つともインストール。ふぅ。

そしてそのままmacのターミナル上で、ディレクトリがdesktopの状態から動画の指示通りreactファイルを立ち上げた。
Happy Hacking!
HackできてHappyでいいのかは全くわからなかったがとりあえずOK。

で、動画に沿っていくためにはやっぱりVS codeで開かなくてはいけない...
とりあえずVS code を立ち上げて
files→Open folder→さっき立ち上げたreactファイルを選択！これで動画と同じ画面になった！

亀の速度で進める

動画の通り進めていくと、chromeを使いローカルサーバーでreactが立ち上がった！おお！感動！
こんなちょっとのことでも初心者は感動する。

動画の中で、react appでロゴの写真ではなく"Hello React"というメッセージを表記するようにする。
しかし！同じようにコードを書き換えてもエラーがでる、、、なぜだ....

私は発見した！保存してないから反映されないんだ！！！（名探偵すぎる）

都度保存しないとプログラムした内容はコンパイル結果に反映されない。

現時点での成果

動画の20分あたりまで完了。ここまでで２時間近くはなんやかんやかかっている。
いいのだ。自分のペースでいいのだ。
うまくコンパイルできた時は嬉しい！

余談だが

今回初めてQiitaを書いてみて、エディタがとてもエンジニア向けだなあと思った。
自分は理系でありながら開発経験がなく、最近始めたのだが、#でheadingになるとか、エディタとプレビュー２分割できるとか、/で色々コードブロック出てくるとかはとてもエンジニアっぽい。
wordとかでしか文章を書かないnon-engineersには使いにくそうだ。文系の友達でnotion使えない子も割といる。
自分は少しずつこの手のもの（latexとか、Rとか、VS code)を触るようになり抵抗がなくなってきているので、Qiitaのエディターは使いやすかった。
そんなこんなで自分はまだ開発もできるようになる余地がありそうだと思ってしまった。