はじめに
注）「ChatGPTを使う上での注意すべきこと」を追加しました（2023/04/10）
この記事の対象者
- html,jsを勉強中、またこれから始める方
- Reactに興味があるから、簡単なものから学習したい方
- Reactを勉強したいけど、どうやって学習していけば良いか困っている方
- プログラム学習にChatGPTを取り入れてみたいという方
ヌギーの自己紹介
どうも、ヌギーです！
まず私の基本的なスペックですが...↓
- web制作会社で4年ほどhtml,cssのコーダー（WordPress構築も）
- Reactを独学し始めて数ヶ月(2023/01〜04月)
- 過去に少しだけVueは触ったことはある
自分はUdemyの講座やYoutube動画を中心に勉強していたんですが、まずは、Reactを始めたいという方が無料の範囲で進められるような参考サイト、Youtube動画をロードマップ形式で紹介します😊
軽く今話題のChatGPTの活用例も載せていますので、そちらだけでも見ると参考になるかもしれません。
ちなみに私が現在どのくらいのレベル感かは以下のツイートを参考にしてください。また、プログラミングの勉強している方は誰でもウェルカムなのでフォローしてもらえるとうれしいです✨
Reactのロードマップ
1. 基礎的なHTML,JS
まず、html,cssもjs(JavaScript)の基礎から知りたい方はプロゲートの無料枠で「HTML & CSS」「JavaScript」を進めると良いかと思います。問題ないと思う方はこちらは飛ばしても構いません。
「JavaScript」のところはしっかりやって損はないかと思いますが、「HTML & CSS」についてはある程度わかったらReactを進める上では問題ありません。
もっとデザインをしっかりやりたいと思ったら、改めて進めてみると良いでしょう。
2. Reactの初歩
Reactは現在バージョンが18ですが、公式のチュートリアルや数年前のブログにはバージョンが古いものが載っていることもありあまりオススメできません。
以下のYoutube動画は最新バージョンのもので、かつ難しい記法はほとんど使っていないので、とっつきやすいです↓
3. ReactでTodoアプリを作成!!
ある程度、理解ができたら以下のYoutube動画でTodoアプリを作成してみましょう！
Reactで頻出するmap関数の説明だったり、スプレッド構文(「...」←点が3つ並んだやつ)の説明もあり、かなりオススメです。
React公式サイトのチュートリアル（英語）
React公式のベータ版サイトには、英語ですが最新版のチュートリアルも載っていたので、英語に抵抗がない方はこちらも参考にしてもと良いかと思います（私自身はまだ確認していません）↓
ChatGPTも活用する
例えば、以下のようなアロー関数などは、ChatGPTにこの部分よくわかんねーよって聞いたら、かなりわかりやすく教えてくれましたw
consto mergeArrays = (a, b) => {
return [..., a, b]
}
ChatGPTは無料版もあるので、まだ使ったことない方はこれを気に使用することをかなり強くオススメします。
ChatGPTの登録方法はこちらが画像付きでわかりやすいです↓
ChatGPTへの質問とその回答の例
自分の質問：
私はjsの初学者です。
以下の関数が全くわかりません。こちらを段階的に具体的なコードや他の例なども交えつつ、段階的に教えてくれませんか？
const mergeArrays = (a, b) => {
return [..., a, b]
}
↓
ChatGPTの回答：
この関数は、2つの配列 a と b を受け取り、両方の配列を結合した新しい配列を返します。
具体的には、この関数はスプレッド演算子 (...) を使用して、配列 a と b を新しい配列に結合しています。
以下は、この関数をより具体的に説明するコード例です。
// 配列 a と配列 b の定義
const a = [1, 2, 3];
const b = [4, 5, 6];
// 関数 mergeArrays の呼び出し
const result = mergeArrays(a, b);
console.log(result); // [1, 2, 3, 4, 5, 6]
上記のコード例では、a と b の2つの配列を定義し、 mergeArrays 関数を呼び出し、戻り値である新しい配列を result 変数に代入し、その内容を console.log で出力しています。
もう少し具体的に説明すると、この関数は、配列 a の要素を順番に新しい配列にコピーしていき、その後、配列 b の要素を順番に新しい配列にコピーしています。
次に、実際にスプレッド演算子 (...) を使わずに同じ結果を得る方法を説明します。
const mergeArrays = (a, b) => {
const newArray = [];
for (let i = 0; i < a.length; i++) {
newArray.push(a[i]);
}
for (let i = 0; i < b.length; i++) {
newArray.push(b[i]);
}
return newArray;
}
上記のコードでは、スプレッド演算子の代わりに、 for ループを使用して配列 a と配列 b を結合しています。newArray.push() メソッドを使用して、新しい配列に要素を順番に追加していくことで、スプレッド演算子の代わりに配列を結合することができます。
どちらの方法を使用しても、2つの配列を結合することができます。スプレッド演算子は、配列の結合を簡単にするために導入された比較的新しい構文ですが、 for ループを使った古典的な方法も有効です。
（2023/04/10追記↓）
ChatGPTの回答終わり。
ChatGPTを使う上での注意すべきこと
ただ、そもそも以下の関数は正しくありません。
const mergeArrays = (a, b) => {
return [..., a, b]
}
スプレッド構文は「...」の後に続く配列やオブジェクトを展開するものなので、「...,」だけでは何も展開されませんので無意味です。
しかし、このことはChatGPT（GPT-3.5）では何も言及していません。そういった意味でChatGPTを使用には注意してください。
ただ、個人ブログに書いてあることも誤った情報の可能性もあるので、すなわち「ChatGPTはダメだ」とはなりません。注目すべきは"どれほど"信憑性があるのか？、どんな質問であれば"どのくらいの確率"で正しいことを言うか？という点です。また、同じ質問をしてもChatGPTの答えは変化することも注意してください。
ChatGPTは、「...」「() => {}」「{{}}」といった記法が分からない部分について質問するときに力を発揮します。 ググろうとすると、スプレッド構文やアロー関数と用語が分からないとなかなか目当てのページにたどり着けず、苦労します。
でも、ChatGPTで「...」がスプレッド構文という名前がついているとことが分かればググることができ、今回のChatGPTの説明が間違っていることを気づくことができるでしょう。
（追加終わり）
最後に
私はまだまだ勉強中の身ですが、質問等があればできる限り答えたいと思いますので、TwitterのDMにご連絡いただければと思います。
また、もっとよいサイトや動画などあればコメントなどで教えていただけると他の方にも有益かと思いますので、共有いただければ幸いです。また自分の方でも良いものがあれば追加するかもしれません。
私自身、Reactの勉強する上でどうやって勉強すれば良いか、かなりググりまくっていたので、こちらの記事がお役に立つことを願っています。
最後に、昔の自分のように困っている方に届いてほしいと思っているので、イイねや拡散等いただければ幸いです。