TechTrain React.js 基礎1 掲示板 Railway 受講記録

はじめに

ようやくTechTrainの"React.js 基礎1 掲示板"のRailwayを終えたので、その受講記録を残します。

TechTrainとは

エンジニアとしての「実力を一段上に」なってもらうためのエンジニアコミュニティです。
techtrain.dev
詳しくは上記のHPに飛んでいただくか、下記の紹介記事をお読みください。
bonomodel.hatenablog.com

モチベーション

フロントエンドシリーズの続きです。
目的はフロントエンド(バックエンド)開発の基礎的な経験と知識を獲得することです。
基礎編はRank3の方がRank4を目指すコンテンツなので、難易度は高めだと思われます。地道に続けて力をつけていきたいと思っています。

React.js 基礎1 掲示

入門編との違い

(※記事公開当初から一部内容を変更しております。)
基礎1 掲示板はこれまでと違い、用意されたGitHub上のリポジトリからforkするというものではなく、最初にReactプロジェクトを作成するところから始まります。
細かい指示を順に満たしていくというよりも、必要な条件を満たすものを作るという感じでした。
これまでのVSCode上の拡張機能を使用したクリア判定ではなく、面談を通じてクリア判定がなされます。

ChatGPTやGitHub Copilotの活用

ちょうど最近ChatGPTやGitHub Copilotの活用が流行っているということで、条件を理解した上でそれを実装するコードを書きながら、わからないところやリファクタリングが必要なところを上記のGenerativeAIに助けてもらうといった形で学習を進めていました。ちなみに、私が今使っているものは無料版のChatGPTです。GitHub Copilotも無印のものです。
openai.com
github.com
決して完璧なものというわけではないですが、とりあえず動くものを作るのに役立ったりしました。また、コードの書き方自体が勉強になったりするものもあり、直接の答えではなくとも壁打ち相手として素晴らしいと感じました。
プロンプトエンジニアリングやGenerativeAIのサービスへの活用については、もっと探究していきたいと思っています。
www.promptingguide.ai
saasis.jp

GenerativeAIとコーディング

一方で特にGitHub Copilotについて思うのですが、意図しない改変が行われたりすることがあります。また、ChatGPTと壁打ちしていると、意図した情報が反映されなかったり欲しい返答が得られないことがよくあります。
もちろん性能や使い方の課題も大きいと思うのですが、やはり自分自身がきちんとした知識や経験を築いていく必要があると強く感じました。(GenerativeAIに限らず技術進歩は日毎に増しているので、状況はどんどん変わると思います。GPT-4を使用する場合は、もしかしたら違う感想になるかもしれません。)
openai.com
github.com
メンターさん達との面談を経て、ReactだけではなくそもそもWebやReact以前の技術についての知識も足りていないと痛感しました。
roadmap.sh
フロントエンドのロードマップは、上記のようになっているそうです。
これを見ると私の場合、見事に"Internet"から抜けています。
Webを支える技術リーダブルコードだったりは、時間を見つけて読みたい本です。
Railwayに取り組んでいる時には、以下のようなものを調べていました。
まだ中々定着していない知識もありますが、少しずつ見に付けていこうと思います。

  • Webとは
  • ブラウザとは
  • クライアントとサーバーとは
  • CORSとは
  • APIとは
  • APIの仕様の読み方
  • JavaScriptとは
  • モダンJavaScriptとは
  • Reactとは
  • JSXや関数記法とは
  • Hookの仕組み
  • fetchとaxios
  • HTML/CSS/JavaScriptの書き方との違い
  • 例えばフォームの書き方の違い

developer.mozilla.org
react-hook-form.com

  • jQuerry、Ajaxとは
  • Node.jsのバージョン管理とJavaScriptのパッケージ管理
  • エラーが起こった場合の切り分け

その他参考になった情報

mixi-developers.mixi.co.jp
blog.recruit.co.jp

www.slideshare.net
www.youtube.com
321web.link
メンターさん達との面談で、メンターさん達の実務経験を通したコーチングをいただくことで、こういった知識を自走的に学ぶきっかけをいただきました。
時間的なこともあり、つかみを動画などで行い、細かいところは公式やMDN、ブログ記事などを読んで学びました。
ReactのRailwayをやっていると、JavaScriptはもうちょっと深めにやっておきたいと思い、こちらのUdemyの講座を受講しています。
https://www.udemy.com/course/modern_javascipt_react_beginner/www.udemy.com
ようやくJavaScript編が終わりそうなので、地道にすすめていこうと思います。

メンターさん達との面談

私がフロントエンドビギナーということもあり、"React.js 基礎1 掲示板"だけでとてもメンターさん達にお世話になってしまいました。
1回30分という時間なのですが、メンターさんたちは私のコードや考え方の穴を見逃さないと感じました。
その上で、面談時に足りないものや理解しにくいもの、実務上こうした方が良いというものを教えていただけています。
現役のエンジニアにここまで真剣に向き合っていただけるのは、本当にすごいサービスだと思います。
まだまだ先はありますが、自走力もつけながら地道に前に進もうと思います。

最後に

基礎1 掲示板がおわり、今は基礎2 TODOアプリを進めています。
基礎1とは毛色が違うタイプのRailwayですが、地道にすすめていこうと思います。